Pagination

Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Easily add a pagination with the vs-pagination component, the required properties are length and v-model

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-pagination v-model="page" :length="20" />
    </div>
  </template>

Color

Usa la propiedad color para cambiar el color base del componente y algunos de los componentes hijos, para entender mejor el manejo de los colores y temas puedes verlo aqui

los valores permitidos son:

• primary
• success
• danger
• warning
• dark
• RGB
• HEX

Success

Danger

Warning

Dark

HEX

RGB

1

...

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center con-pagination">
      <div class="con-radio">
        <vs-radio success v-model="color" val="success">
          Success
        </vs-radio>
        <vs-radio danger v-model="color" val="danger">
          Danger
        </vs-radio>
        <vs-radio warn v-model="color" val="warn">
          Warning
        </vs-radio>
        <vs-radio dark v-model="color" val="dark">
          Dark
        </vs-radio>
        <vs-radio color="#7d33ff" v-model="color" val="#7d33ff">
          HEX
        </vs-radio>
        <vs-radio color="rgb(59,222,200)" v-model="color" val="rgb(59,222,200)">
          RGB
        </vs-radio>
      </div>
      <vs-pagination :color="color" v-model="page" :length="20" />
    </div>
  </template>

Disabled

Change the disabled state of the component with the disabled property, this property is a boolean and you can add it without value

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination disabled v-model="page" :length="20" />
    </div>
  </template>

Not Arrows

You can remove the back and next arrows with the not-arrows property

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination not-arrows v-model="page" :length="20" />
    </div>
  </template>

Only Arrows

You may need in small spaces to remove the buttons and leave only the arrows for it we have the property only-arrows

Page: 1

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination only-arrows v-model="page" :length="10" />
      <code>
        Page: <b>{{ page }}</b>
      </code>
    </div>
  </template>

Circle

Change the radius of all the elements that make up the component by making them circular with the circle property, this property is a boolean so it does not need value

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination circle v-model="page" :length="20" />
    </div>
  </template>

Square

Change the radius of all the elements that make up the component making them square with the square property, this property is a boolean so it does not need value

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination square v-model="page" :length="20" />
    </div>
  </template>

Buttons Dotted

Cambia por completo el estilo de el componente y elimina los números internos en cada botón con la propiedad buttons-dotted

Page: 1

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination buttons-dotted v-model="page" :length="6" />
    </div>
  </template>

Disabled Items

You can put disabled buttons specific to the pagination component with the disabled-items property, this property is an array with the number of the button you want to put in disabled status

The buttons that are in disabled will skip when changing the value for example on the next or back buttons

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination :disabled-items="[3,4,9,10,11,12,19]" v-model="page" :length="20" />
    </div>
  </template>

Loading Items

You can make a button inside the pagination be in the state of loading with the loading-items property, this property is an array with the number of the button that you want to put in the disabled state

The buttons that are in loading will skip when changing the value for example in the next or back buttons

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination :loading-items="[3,4,9,10,11,12,19]" v-model="page" :length="20" />
    </div>
  </template>

Not Margin

Change the style of the entire component by removing the margin between the buttons and changing the radius with the not-margin property

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination not-margin v-model="page" :length="20" />
    </div>
  </template>

Slot

You may need to customize your pagination and for this you can use the default slot between the arrows and replace the items on the pages

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination v-model="page" :length="20">
        <vs-select v-model="page">
          <vs-option
            v-for="numberPage in 20"
            :label="numberPage"
            :value="numberPage">
            {{ numberPage }}
          </vs-option>
        </vs-select>
      </vs-pagination>
    </div>
  </template>

Progress

Add a progress bar to the pagination by referencing where you find the last page with the progress property

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination progress v-model="page" :length="20" />
    </div>
  </template>

Dotted Number

You can change the number of pages that are added when the user clicks on the points to advance more pages quickly, this can be done with the dotted-number property and the value would be the number of pages that are added or subtracted ( default is 5)

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-pagination">
      <vs-pagination :dotted-number="10" v-model="page" :length="100" />
    </div>
  </template>

Infinite

You can make the pagination infinite with the infinite property, this means that the arrow buttons are no longer in the disabled state

1

...

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-pagination infinite v-model="page" :length="10" />
    </div>
  </template>

API