96 lines
5.2 KiB
JSON
96 lines
5.2 KiB
JSON
{
|
||
"slug": "infinitescroll",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 infinitescroll：.kole-infinitescroll-scroll 是 180px 可滚区，条目用 -scroll-item。",
|
||
"usage": [
|
||
"滚动区 .kole-infinitescroll-scroll 固定 180px 高、overflow:auto，带 1px 边框与 --kole-radius-base 圆角，是承载长列表的那一层（frameworks/InfiniteScroll.css:66）。",
|
||
"列表条目 .kole-infinitescroll-scroll-item 有 8px 内边距与 1px 下边框，形成分隔观感（frameworks/InfiniteScroll.css:67）。",
|
||
"骨架通用的按钮类 .kole-infinitescroll-button 已对齐 --kole-control-height-default 高度，可用于“加载更多”入口（frameworks/InfiniteScroll.css:15）。",
|
||
"视觉容器用 .kole-infinitescroll-surface 或 -panel：卡片底色加 1px 边框加中圆角加低投影（frameworks/InfiniteScroll.css:4）。",
|
||
"标题与说明用 .kole-infinitescroll-title 与 -desc（标题色加粗 / 次级色小号）（frameworks/InfiniteScroll.css:5-6）。"
|
||
],
|
||
"bestPractices": [
|
||
"滚动容器高度 180px 是写死的：它把无限滚动限制在一个可视框里，若想让整页滚动则应改用页面级滚动而不是这个类（frameworks/InfiniteScroll.css:66）。",
|
||
"该文件属 72 行生成骨架，滚动相关只有 scroll 与 scroll-item 两条；其余块（switch、pager、badge、drawer）与本组件无关（frameworks/InfiniteScroll.css:66-67）。",
|
||
"触底加载与节流是脚本职责：样式文件只提供一个固定高度的滚动框，不监听 scroll 事件（frameworks/InfiniteScroll.css:66）。"
|
||
],
|
||
"a11y": [
|
||
"滚动区域建议加 tabindex=\"0\" 与 role=\"region\" 及可访问名称，否则键盘用户无法滚动内容（frameworks/InfiniteScroll.css:66）。",
|
||
"无限滚动对读屏不友好，建议配合 aria-live 播报新加载的条目数，并提供“加载更多”按钮作为替代（frameworks/InfiniteScroll.css:15）。",
|
||
"骨架的统一焦点样式（2px 品牌 outline 加 2px 偏移）适用于内部的 button/a/input/select（frameworks/InfiniteScroll.css:9）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-infinitescroll-scroll（滚动区）、.kole-infinitescroll-scroll-item（条目）、.kole-infinitescroll-button（加载更多按钮），加骨架通用的 surface / panel / title / desc。",
|
||
"table": [
|
||
{
|
||
"name": "kole-infinitescroll",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-infinitescroll-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/InfiniteScroll.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/InfiniteScroll.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"infinitescroll-ex-1",
|
||
"infinitescroll-ex-2"
|
||
],
|
||
"notes": [
|
||
"滚动区见 frameworks/InfiniteScroll.css:66，条目见 frameworks/InfiniteScroll.css:67，按钮见 frameworks/InfiniteScroll.css:15，卡底与文案见 frameworks/InfiniteScroll.css:4-6。",
|
||
"该文件属 72 行生成骨架家族（与 Alert.css 逐行同构），本页只取无限滚动语义相关的类名。",
|
||
"示例 ex-1 用了 scroll、scroll-item、button 三个类，ex-2 用 surface 加 desc（site/examples/infinitescroll.json）。"
|
||
]
|
||
}
|