Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

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

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.

タイプ

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

isDisabled

説明

If true, the pagination all item will be disabled.

タイプ

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