Pagination

The v-pagination component is used to separate long sets of data so that it is easier for a user to consume information. Depending on the length provided, the pagination component will automatically scale. To maintain the current page, simply supply a v-model attribute.

Usage

Pagination displays all pages if parent container is big enough.

API

props

events

Name

circle

Default

false

Type

boolean

Components.Paginations.

Name

color

Default

undefined

Type

string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name

dark

Default

false

Type

boolean

ダークテーマを適用します。

Name

disabled

Default

false

Type

boolean

Components.Paginations.

Name

length

Default

Type

number

Components.Paginations.

Name

light

Default

false

Type

boolean

ライトテーマを適用します。

Name

next-icon

Default

'$vuetify.icons.next'

Type

string

Components.Paginations.

Name

prev-icon

Default

'$vuetify.icons.prev'

Type

string

Components.Paginations.

Name

total-visible

Default

undefined

Type

number | string

Components.Paginations.

Name

value

Default

Type

number

Components.Paginations.

Examples

Long

When the number of page buttons exceeds the parent container, the component will truncate the list.

Limit

You can also manually set the maximum number of visible page buttons with the total-visible prop.

Round

The alternate style for pagination is circle pages.

Icons

Previous and next page icons can be customized with prev-icon and next-icon props.

Disabled

Pagination items can be manually deactivated.

Up Next

Edit this page | language on Github

— Contribution Guide