Pagination

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

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
1
Code copied

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

Not Arrows

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

1
Code copied

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

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

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

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

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

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

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

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

Progress

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

1
Code copied

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

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

API

props

Property Type Values Description default Example More
v-model Number Number Determine the page where the user is. 1 Usage Open Close
<vs-pagination v-model="page" :length="20" />
length Number Number It is the total number of pages that the component has. Usage Open Close
<vs-pagination v-model="page" :length="20" />
color Vuesax colors, RGB, HEX String Change the base color of the component. primary Usage Open Close
<vs-pagination color="danger" v-model="page" :length="20" />
disabled Boolean true false Determine if the entire component is in the disabled state. false Usage Open Close
<vs-pagination disabled v-model="page" :length="20" />
not-arrows Boolean true false Remove the arrows (next and back) of the component. false Usage Open Close
<vs-pagination not-arrows v-model="page" :length="20" />
only-arrows Boolean true false Remove the items leaving only the arrows (next and back). false Usage Open Close
<vs-pagination only-arrows v-model="page" :length="20" />
circle Boolean true false Change the style of the buttons making them completely round. false Usage Open Close
<vs-pagination circle v-model="page" :length="20" />
square Boolean true false Change the style of the buttons making them totally square. false Usage Open Close
<vs-pagination square v-model="page" :length="20" />
buttons-dotted Boolean true false Makes the buttons not have the internal number and changes its size. false Usage Open Close
<vs-pagination buttons-dotted v-model="page" :length="20" />
disabled-items Boolean true false Determine which items are in the disabled state. false Usage Open Close
<vs-pagination :disabled-items="[3,4,9,10,11,12,19]" v-model="page" :length="20" />
loading-items Boolean true false Determine which items are in the charging state. false Usage Open Close
<vs-pagination :loading-items="[3,4,9,10,11,12,19]" v-model="page" :length="20" />
not-margin Boolean true false Change the margin between the items causing them to be fully glued and the radius is removed making them square. false Usage Open Close
<vs-pagination not-margin v-model="page" :length="20" />
progress Boolean true false Add a progress bar to the component determined by the current page and the total (length) of pages. false Usage Open Close
<vs-pagination progress v-model="page" :length="20" />
dotted-number Number Number Change the total pages to be added or subtracted by clicking on the points. false Usage Open Close
<vs-pagination :dotted-number="10" v-model="page" :length="100" />
infinite Boolean truefalse Determine if the pagination is infinite. false Usage Open Close
<vs-pagination infinite v-model="page" :length="100" />

slots

Property Type Values Description default Example More
default slot Space between the two arrows (next and back). Usage Open Close
<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>
Last Updated: 3/3/2020, 3:21:13 AM