Pagination

Pagination 提供可组合的分页导航模式，包含上一页/下一页辅助项、页码链接和省略标记。

• chevron_leftPrevious
• 1
• 2
• 3
• more_horizMore pages
• Nextchevron_right

示例

默认

• chevron_leftPrevious
• 1
• 2
• 3
• more_horizMore pages
• Nextchevron_right

简单模式

• 1
• 2
• 3
• 4
• 5

仅图标

Rows per page
arrow_drop_down
• chevron_leftPrevious
• Nextchevron_right

Vue Router

PaginationLink、PaginationPrevious 和 PaginationNext 使用相同模式：通过 RouterLink custom 获取 href 和 navigate，再将它们传给分页控件。

• chevron_leftPrevious
• 1
• 2
• 3
• Nextchevron_right

Current route: /docs/page/2

参考

结构

高亮显示

元素	部件	选择器
<nav>	root	[data-scope="pagination"][data-part="root"] left_click鼠标左键单击复制
<ul>	content	[data-scope="pagination"][data-part="content"] left_click鼠标左键单击复制
<span>	ellipsis	[data-scope="pagination"][data-part="ellipsis"] left_click鼠标左键单击复制
<Icon>	ellipsis-icon	[data-scope="pagination"][data-part="ellipsis-icon"] left_click鼠标左键单击复制
<span>	ellipsis-label	[data-scope="pagination"][data-part="ellipsis-label"] left_click鼠标左键单击复制
<li>	item	[data-scope="pagination"][data-part="item"] left_click鼠标左键单击复制
<Button>	link	[data-scope="pagination"][data-part="link"] left_click鼠标左键单击复制
<PaginationLink>	next	[data-scope="pagination"][data-part="next"] left_click鼠标左键单击复制
<span>	next-text	[data-scope="pagination"][data-part="next-text"] left_click鼠标左键单击复制
<Icon>	next-icon	[data-scope="pagination"][data-part="next-icon"] left_click鼠标左键单击复制
<PaginationLink>	previous	[data-scope="pagination"][data-part="previous"] left_click鼠标左键单击复制
<Icon>	previous-icon	[data-scope="pagination"][data-part="previous-icon"] left_click鼠标左键单击复制
<span>	previous-text	[data-scope="pagination"][data-part="previous-text"] left_click鼠标左键单击复制

Pagination

属性

名称	说明	默认值	控件
ariaLabel可选	Accessible label for the pagination navigation landmark. string | undefined	"Pagination"

插槽1

名称	参数	说明
default	-	Pagination content, usually PaginationContent.

样式7

预览

Token	说明
--md-pagination-ellipsis-colorColor 回退值var(--md-sys-color-on-surface-variant)	Controls ellipsis color.
--md-pagination-ellipsis-sizeLayout 回退值--dp(40)	Controls ellipsis size.
--md-pagination-item-spaceLayout 回退值--dp(4)	Controls item space.
--md-pagination-link-min-widthLayout 回退值--dp(40)	Controls link min width.
--md-pagination-link-padding-inlineLayout 回退值--dp(12)	Controls link padding inline.
--md-pagination-nav-icon-sizeLayout 回退值Typography, density and icon scale (default reference: --dp(20))	Controls nav icon size.
--md-pagination-nav-inline-spaceLayout 回退值--dp(4)	Controls nav inline space.

PaginationContent

插槽1

名称	参数	说明
default	-	Pagination items.

PaginationItem

插槽1

名称	参数	说明
default	-	One pagination primitive, such as PaginationLink or PaginationEllipsis.

PaginationLink

属性

名称	说明	默认值
isActive可选	Marks the current page and applies active emphasis. boolean | undefined	false
variant可选	Button variant. Defaults to `text` and switches to `outlined` for active pages. ButtonVariant | undefined	undefined
size可选	Button size variant. smalllargeextra-smallmediumextra-large	"small"
shape可选	Button shape variant. M3Shape | undefined	undefined
href可选	Optional href. When omitted, renders as a native button. string | undefined	undefined
disabled可选	Disabled state. boolean | undefined	false

插槽1

名称	参数	说明
default	-	Link content, usually a page number.

PaginationPrevious

属性

名称	说明	默认值
variant可选	Button variant. Defaults to `text` and switches to `outlined` for active pages. ButtonVariant | undefined	undefined
shape可选	Button shape variant. M3Shape | undefined	undefined
size可选	Button size variant. smalllargeextra-smallmediumextra-large	"small"
href可选	Optional href. When omitted, renders as a native button. string | undefined	undefined
disabled可选	Disabled state. boolean | undefined	false
text可选	Screen text shown beside the icon on larger viewports. string | undefined	"Previous"
ariaLabel可选	Accessible label for assistive technology. string | undefined	"Go to previous page"

PaginationNext

属性

名称	说明	默认值
variant可选	Button variant. Defaults to `text` and switches to `outlined` for active pages. ButtonVariant | undefined	undefined
shape可选	Button shape variant. M3Shape | undefined	undefined
size可选	Button size variant. smalllargeextra-smallmediumextra-large	"small"
href可选	Optional href. When omitted, renders as a native button. string | undefined	undefined
disabled可选	Disabled state. boolean | undefined	false
text可选	Screen text shown beside the icon on larger viewports. string | undefined	"Next"
ariaLabel可选	Accessible label for assistive technology. string | undefined	"Go to next page"

PaginationEllipsis

属性

名称	说明	默认值
label可选	Accessible label announced for the collapsed pages marker. string | undefined	"More pages"