96 lines
4.8 KiB
JSON
96 lines
4.8 KiB
JSON
{
|
||
"slug": "pagination",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 pagination：.kole-pagination-pager 是页码行，-page 是 32px 方按钮，is-current 标当前页。",
|
||
"usage": [
|
||
"页码行 .kole-pagination-pager 是横向 flex、可换行、4px 间距（页码之间贴得比较紧）（frameworks/Pagination.css:35）。",
|
||
"页码按钮 .kole-pagination-page 与翻页按钮共用一条规则：最小 32×32px、1px 边框、卡片底、--kole-radius-base 圆角（frameworks/Pagination.css:36）。",
|
||
"当前页加 .is-current：品牌实底、反色文字、品牌边框（frameworks/Pagination.css:37）。",
|
||
"不占位的省略号用 .kole-pagination-dot（8px 错误色圆点，是骨架通用类，颜色偏警示，用于页码更适合用文字）（frameworks/Pagination.css:42）。",
|
||
"说明文字用 .kole-pagination-desc（次级色加注脚字号）（frameworks/Pagination.css:6）。"
|
||
],
|
||
"bestPractices": [
|
||
"该文件属 72 行生成骨架，分页相关只有 pager / page / action 三条（第 35-37 行）；骨架里另有 pager 之外的 switch、badge、drawer 等无关块（frameworks/Pagination.css:35-37）。",
|
||
"页码最小尺寸 32×32px 低于常见的 44px 触控建议值，移动端建议加内边距放大命中区（frameworks/Pagination.css:36）。",
|
||
"页码间距只有 4px，页码多时较密；需要更松的排布要覆盖 gap（frameworks/Pagination.css:35）。"
|
||
],
|
||
"a11y": [
|
||
"示例在分页容器上写了 aria-label 与 type（site/examples/pagination.json），说明导航语义由业务侧声明（frameworks/Pagination.css:35）。",
|
||
"当前页除了品牌底色，建议同时补 aria-current=\"page\"，颜色不是唯一信息通道（frameworks/Pagination.css:37）。",
|
||
"翻页按钮若是图标（上一页/下一页），需补可访问名称，骨架只给最小尺寸与边框（frameworks/Pagination.css:36）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-pagination-pager（页码行）、.kole-pagination-page 与 -action（页码与翻页按钮，共用一条规则），当前页用 .is-current 状态类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-pagination",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Pagination.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Pagination.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"pagination-ex-1",
|
||
"pagination-ex-2"
|
||
],
|
||
"notes": [
|
||
"页码行见 frameworks/Pagination.css:35，页码按钮见 frameworks/Pagination.css:36，当前页见 frameworks/Pagination.css:37。",
|
||
"该文件属 72 行生成骨架家族（与 Alert.css 逐行同构），本页只取分页语义相关的三条规则。",
|
||
"示例 ex-1 用 pager、page、is-current 与 desc，ex-2 用 surface 加 desc（site/examples/pagination.json）。"
|
||
]
|
||
}
|