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

Agrega una pagination fácilmente con el componente vs-pagination, las propiedaes requeridas son length y 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

Cambia el estado disabled de el componente con la propiedad disabled, esta propiedad es un boolean y puedes agregarla sin valor

1

...

Code copied

• Template
• Script
• All

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

Not Arrows

Puedes eliminar las flechas de atrás y siguiente con la propiedad not-arrows

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

Puedes necesitar en espacios reducidos eliminar los botones y dejar solo las flechas para ello tenemos la propiedad 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

Cambia el radius de todos los elementos que componen al componente haciendo que sean circulares con la propiedad circle, esta propiedad es un boolean por lo cual no necesita valor

1

...

Code copied

• Template
• Script
• All

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

Square

Cambia el radius de todos los elementos que componen al componente haciendo que sean cuadrados con la propiedad square, esta propiedad es un boolean por lo cual no necesita valor

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

Puedes poner en estado de disabled botones específicos de el componente pagination con la propiedad disabled-items, esta propiedad es un array con el numero de el botón que se desea poner en estado de disabled

Los botones que se encuentran en disabled se van a saltar al cambiar el valor por ejemplo en los botones de siguiente o atrás

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

Puedes hacer que un botón dentro de la pagination este en estado de loading con la propiedad loading-items, esta propiedad es un array con el numero de el botón que se desea poner en estado de disabled

Los botones que se encuentran en loading se van a saltar al cambiar el valor por ejemplo en los botones de siguiente o atrás

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

Cambia el estilo de todo el componente eliminando el margin entre los botones y cambiando el radius con la propiedad not-margin

1

...

Code copied

• Template
• Script
• All

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

Slot

Puedes necesitar personalizar tu pagination y para ello puedes usar el slot default que se encuentra entre las flechas y sustituye los items de las paginas

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

Agrega una barra de progreso a la pagination haciendo referencia en donde se encuentra a la ultima pagina con la propiedad progress

1

...

Code copied

• Template
• Script
• All

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

Dotted Number

Puedes cambiar el numero de paginas que se suman cuando el usuario hace click en los puntos para avanzar mas paginas rápidamente, esto lo puedes hacer con la propiedad dotted-number y el valor seria el numero de paginas que se suman o se restan (por defecto es 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

Puedes hacer que la pagination sea infinita con la propiedad infinite, esto genera que ya los botones de flecha no se encuentren en estado disabled

1

...

Code copied

• Template
• Script
• All

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

API