97 lines
5.4 KiB
JSON
97 lines
5.4 KiB
JSON
{
|
||
"slug": "datetimepicker",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 datetimepicker：.kole-datetimepicker-item 横排行内元素，.kole-datetimepicker-control 做输入控制。",
|
||
"usage": [
|
||
"根容器 .kole-datetimepicker 只统一 box-sizing、字体与文字色，不画边框不定宽（frameworks/DateTimePicker.css:2）。",
|
||
"行内组合用 .kole-datetimepicker-item：inline-flex 加 8px 间距，最低高度取 --kole-control-height-default，日期与时间两段输入靠它并排（frameworks/DateTimePicker.css:17）。",
|
||
"输入控制类 .kole-datetimepicker-control 提供 --kole-control-height-default 高度、1px 边框、--kole-radius-base 圆角与卡片底（frameworks/DateTimePicker.css:16）。",
|
||
"按钮类 .kole-datetimepicker-button 与控件类同高，用 --kole-space-12 横向内边距（frameworks/DateTimePicker.css:15）。",
|
||
"两栏布局 .kole-datetimepicker-layout 默认 180px 加 1fr，加 .is-collapsed 收到 64px（frameworks/DateTimePicker.css:19-20）。",
|
||
"低强调外观用 .kole-datetimepicker-secondary：品牌字色、品牌浅底、品牌边框（frameworks/DateTimePicker.css:11）。"
|
||
],
|
||
"bestPractices": [
|
||
"该文件位于 72 行生成骨架家族，与 DatePicker.css 逐行同构（仅根类前缀不同）；两者规则几乎一致，同页同时引入时后缀不同不会互相覆盖，但改样式要改两份（frameworks/DateTimePicker.css:15-17）。",
|
||
"骨架里没有日期或时间专用面板的样式：日历格与时间滚轮需要业务侧自备，本文件只给控件外观（frameworks/DateTimePicker.css:19-20）。",
|
||
"日期与时间两段输入要放在同一个 .kole-datetimepicker-item 里才会齐平，因为对齐靠该类的 align-items 与最低高度（frameworks/DateTimePicker.css:17）。"
|
||
],
|
||
"a11y": [
|
||
"两段输入各自需要可访问名称与原生类型：示例写 type 与 aria-label（site/examples/datetimepicker.json），样式层不管（frameworks/DateTimePicker.css:16）。",
|
||
"日期与时间的组合值需要业务侧提供完整可读文本，控件类不会拼合两个字段的语义（frameworks/DateTimePicker.css:17）。",
|
||
"骨架已统一 focus-visible 为 2px 品牌 outline 加 2px 偏移（frameworks/DateTimePicker.css:9），覆盖样式时请保留。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-datetimepicker（根）下的控件类 —— .kole-datetimepicker-item（行内排布）、-control（输入控制）、-button（按钮）、-secondary / -primary（外观变体）、-layout（两栏），状态 .is-collapsed。",
|
||
"table": [
|
||
{
|
||
"name": "kole-datetimepicker",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-datetimepicker-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/DateTimePicker.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DateTimePicker.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"datetimepicker-ex-1",
|
||
"datetimepicker-ex-2"
|
||
],
|
||
"notes": [
|
||
"根与骨架见 frameworks/DateTimePicker.css:2，控件类见 frameworks/DateTimePicker.css:15-17，两栏布局见 frameworks/DateTimePicker.css:19-20。",
|
||
"该文件与 DatePicker.css 同属 72 行生成骨架家族、逐行同构；本页只取 datetimepicker 前缀的类名。",
|
||
"示例 ex-1 用 item + control，ex-2 用 surface + desc（site/examples/datetimepicker.json）。"
|
||
]
|
||
}
|