Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Pagination

Paginationは、コンテンツのページ分割とナビゲーションを管理するためのコンポーネントです。

ソース@yamada-ui/pagination

Props

PaginationProps

total

必須

説明

The total number of pages in pagination.

タイプ

number

boundaries

説明

Number of elements visible on the left/right edges.

タイプ

UIValue<number>

デフォルト

1

colorScheme

説明

The visual color appearance of the component.

タイプ

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

デフォルト

"primary"

component

説明

The pagination button component to use.

タイプ

FC<PaginationItemProps>

containerProps

説明

Props for container element.

タイプ

HTMLUIProps<"nav">

controlNextProps

説明

Props for next of the control button element.

タイプ

Omit<PaginationItemProps, "page">

controlPrevProps

説明

Props for previous of the control button element.

タイプ

Omit<PaginationItemProps, "page">

controlProps

説明

Props for control button element.

タイプ

Omit<PaginationItemProps, "page">

defaultPage

説明

The initial page of the pagination. Should be less than total and greater than 1.

タイプ

number

デフォルト

1

disabled

説明

If true, the pagination all item will be disabled.

タイプ

boolean

デフォルト

false

edgeFirstProps

説明

Props for first of the edge button element.

タイプ

Omit<PaginationItemProps, "page">

edgeLastProps

説明

Props for last of the edge button element.

タイプ

Omit<PaginationItemProps, "page">

edgeProps

説明

Props for edge button element.

タイプ

Omit<PaginationItemProps, "page">

isDisabled

非推奨

説明

If true, the pagination all item will be disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

itemProps

説明

Props for button element.

タイプ

Omit<PaginationItemProps, "page">

onChange

説明

The callback invoked when the page changes.

タイプ

(page: number) => void

page

説明

The page of the pagination. Should be less than total and greater than 1.

タイプ

number

siblings

説明

Number of siblings displayed on the left/right side of selected page.

タイプ

UIValue<number>

デフォルト

1

size

説明

The size of the Pagination.

タイプ

"xs" | "sm" | "md" | "lg" | "xl"

デフォルト

"sm"

variant

説明

The variant of the Pagination.

タイプ

"ghost" | "outline" | "solid" | "subtle" | "surface" | "unstyled"

デフォルト

"solid"

withControls

説明

If true, display the control buttons.

タイプ

UIValue<boolean>

デフォルト

true

withEdges

説明

If true, display the edge buttons.

タイプ

UIValue<boolean>

デフォルト

false

UsePaginationProps

total

必須

説明

The total number of pages in pagination.

タイプ

number

boundaries

説明

Number of elements visible on the left/right edges.

タイプ

UIValue<number>

デフォルト

1

defaultPage

説明

The initial page of the pagination. Should be less than total and greater than 1.

タイプ

number

デフォルト

1

disabled

説明

If true, the pagination all item will be disabled.

タイプ

boolean

デフォルト

false

isDisabled

非推奨

説明

If true, the pagination all item will be disabled.

非推奨

Use disabled instead.

タイプ

boolean

デフォルト

false

onChange

説明

The callback invoked when the page changes.

タイプ

(page: number) => void

page

説明

The page of the pagination. Should be less than total and greater than 1.

タイプ

number

siblings

説明

Number of siblings displayed on the left/right side of selected page.

タイプ

UIValue<number>

デフォルト

1

GitHubでこのページを編集する

BreadcrumbStepper