100 lines
3.8 KiB
JSON
100 lines
3.8 KiB
JSON
{
|
||
"slug": "pagination",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "原生分页：页码按钮加 is-current 标当前页，翻页按钮带 data-prev / data-next 但无脚本。",
|
||
"usage": [
|
||
"容器是 .kole-pagination-pager（带 aria-label=\"分页\"），页码按钮统一用 .kole-pagination-page。",
|
||
"当前页靠叠加 is-current：<button class=\"kole-pagination-page is-current\" type=\"button\">1</button>。",
|
||
"上一下一按钮带 data-prev 与 data-next 钩子，但整页没有脚本消费它们。",
|
||
"总数文案放在 .kole-pagination-desc（示例「共 128 条」），是纯文本不是控件。"
|
||
],
|
||
"bestPractices": [
|
||
"data-prev / data-next 只是预留钩子，翻页逻辑、页码范围、跳转都要自己实现。",
|
||
"is-current 是纯视觉标记，选中项建议同时补 aria-current=\"page\"。",
|
||
"页码多了要自己做省略号与窗口裁剪，示例只有两页看不出这个需求。"
|
||
],
|
||
"a11y": [
|
||
"分页容器有 aria-label=\"分页\"，读屏能识别这是一组分页控件。",
|
||
"当前页没有 aria-current，读屏只能靠 is-current 的颜色差异，等于没有程序可读的当前页信息。",
|
||
"总数是普通 span，没有与分页控件建立关联说明。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端是类名加 data-* ：.kole-pagination 容器、.kole-pagination-pager 分页组、.kole-pagination-page 页码（叠加 is-current 表示当前页）、data-prev / data-next 翻页钩子，行为待使用方补。",
|
||
"table": [
|
||
{
|
||
"name": "demo",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-block",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:5）。"
|
||
},
|
||
{
|
||
"name": "demo-note",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:5）。"
|
||
},
|
||
{
|
||
"name": "is-current",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-pagination",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-desc",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-page",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-pager",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:6）。"
|
||
},
|
||
{
|
||
"name": "kole-pagination-surface",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:6）。"
|
||
},
|
||
{
|
||
"name": "row",
|
||
"type": "类名",
|
||
"desc": "H5 端结构里使用的类名（frameworks/Pagination.html:5）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Pagination.html",
|
||
"kind": "H5 原生",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Pagination.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"pagination-ex-1",
|
||
"pagination-ex-2"
|
||
],
|
||
"notes": [
|
||
"分页结构与 is-current 见（frameworks/Pagination.html:6），data-prev / data-next 也在这一行。",
|
||
"无脚本消费钩子：frameworks/Pagination.html:6 的 <script> 标签对之间为空。",
|
||
"样式依据：.kole-pagination-page 的类名口径见（frameworks/Pagination.html:6）。"
|
||
]
|
||
}
|