67 lines
3.2 KiB
JSON
67 lines
3.2 KiB
JSON
{
|
||
"slug": "calendar",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "月历样式：kole-calendar 的 head/week/grid 三段结构，cell 用 is-out/is-today/is-selected 表状态。",
|
||
"usage": [
|
||
"结构三段：.kole-calendar-head（标题 .kole-calendar-title 与导航 .kole-calendar-nav）、.kole-calendar-week（星期行）、.kole-calendar-grid（日期格，与星期行共用同一类名）。",
|
||
"日期格是 .kole-calendar-cell，三个状态类叠加使用：.is-out 非本月、.is-today 今天、.is-selected 选中。",
|
||
"星期标签用 .kole-calendar-weekday，与日期格对齐由网格列数保证。",
|
||
"选中底色与今天文字色取自 --kole-color-brand 与 --kole-color-brand-bg。"
|
||
],
|
||
"bestPractices": [
|
||
".is-today 与 .is-selected 可以同时存在，叠加顺序由文件内规则决定，不要用它们互相替换。",
|
||
"非本月日期建议同时加 .is-out，只靠宿主不渲染会导致网格缺格错位。",
|
||
"网格列数固定为 7，宿主不要改列数，否则星期行与日期行会错位。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "kole-calendar",
|
||
"type": "基础类",
|
||
"desc": "日历根容器：卡片底 + 内边距（frameworks/Calendar.css:3）"
|
||
},
|
||
{
|
||
"name": "kole-calendar-head",
|
||
"type": "结构类",
|
||
"desc": "头部：标题与翻页导航（frameworks/Calendar.css:5）"
|
||
},
|
||
{
|
||
"name": "kole-calendar-weekday",
|
||
"type": "结构类",
|
||
"desc": "星期标签文字（frameworks/Calendar.css:11）"
|
||
},
|
||
{
|
||
"name": "kole-calendar-cell",
|
||
"type": "结构类",
|
||
"desc": "单个日期格，hover 底色（frameworks/Calendar.css:12）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"日期网格建议用 table 或 role=grid，并把每个可点日期做成 button，样式层不提供语义。",
|
||
"只靠颜色区分今天与选中不可靠，选中态应同时用 aria-selected，今天用 aria-current=date。",
|
||
"非本月日期若仍可点击，需要保留可读的完整日期文本，不要只显示日号。",
|
||
"日期文字与选中底的对比由 --kole-color-brand 与反色文字决定，换品牌色后需复核。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Calendar.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Calendar.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"calendar-ex-1"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Calendar.css:3 定义 .kole-calendar",
|
||
"依据 frameworks/Calendar.css:5 定义 .kole-calendar-head",
|
||
"依据 frameworks/Calendar.css:11 定义 .kole-calendar-weekday",
|
||
"依据 frameworks/Calendar.css:12 定义 .kole-calendar-cell",
|
||
"类名总表来自 frameworks/Calendar.css（facts.consumedApi.classes，11 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|