<template>
    <div id="page-pagination">
      <v-container grid-list-xl fluid>
        <v-layout row wrap>
          <v-flex lg12>
            <v-widget title="Default">
              <div slot="widget-content" class="text-xs-center">
                <v-pagination v-model="page"></v-pagination>
              </div>
            </v-widget>
            <v-widget title="Visiable Limit" class="mt-3">
              <div slot="widget-content" class="text-xs-center">
                <v-pagination :length="15" v-model="page" :total-visible="7"></v-pagination>
              </div>
            </v-widget>
            <v-widget title="Short" class="mt-3">
              <div slot="widget-content" class="text-xs-center">
                <v-pagination :length="5" v-model="page"></v-pagination>
              </div>
            </v-widget>
            <v-widget title="Round" class="mt-3">
              <div slot="widget-content" class="text-xs-center">
                <v-pagination :length="5" v-model="page" circle></v-pagination>
              </div>
            </v-widget>
          </v-flex>
        </v-layout>
      </v-container>
    </div>
  </template>
  
  <script>
  import VWidget from '@/components/VWidget';
  export default {
    components: {
      VWidget
    },
    data () {
      return {
        page: 1
      };
    },
    computed: {
    },  
    methods: {
    }
  };
  </script>