96 lines
5.0 KiB
JSON
96 lines
5.0 KiB
JSON
{
|
||
"slug": "button",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "纯样式按钮：用 btn 加变体类与尺寸类拼出主/次/文字/链接/危险按钮及三种高度。",
|
||
"usage": [
|
||
"基础类 .btn 提供 inline-flex 居中、圆角 4px、min-width 64px 与过渡，变体类 .btn-primary/.btn-default/.btn-text/.btn-link/.btn-danger 与尺寸类 .btn-lg/.btn-md/.btn-sm 叠加在同一元素上即可改形态。",
|
||
"尺寸靠高度类覆盖：.btn-lg 40px、.btn-md 32px、.btn-sm 24px 只改 height，字号与内边距沿用 .btn 的 14px/0 12px。",
|
||
"禁用有两种等价写法：加 .btn-disabled 类或给原生 button 加 disabled 属性，两者共用同一条规则组。",
|
||
"加载态用状态类 .btn.is-loading 挂在基础类上，配 .spinner 元素与 .btn-label 文本节点，文本靠 .btn-label 降透明度而不隐藏。",
|
||
"主题定制直接覆盖 --kole-color-brand / --kole-color-brand-hover / --kole-color-brand-active / --kole-color-border 等令牌，变体色随之改变。"
|
||
],
|
||
"bestPractices": [
|
||
"状态类只写在基础类同一个元素上：.btn.is-loading 有样式，单独 .is-loading 没有选择器，挂错层级动画与光标都不会生效。",
|
||
".btn-link 把 min-width 归零并去掉边框，只用于行内链接式操作；需要按钮尺寸时不要误用。",
|
||
"按钮内容结构固定为 .btn-icon + .btn-label，.btn-icon 有 flex-shrink:0，长文案换行不会挤压图标。",
|
||
"加载态只改 cursor 为 progress 并把 .btn-label 降到 .65 透明，不拦截点击，需要真正禁止点击请同时加 .btn-disabled 或 disabled。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端没有 props/emit/slot 契约：可交付的 API 就是类名组合（基础类＋变体类＋尺寸类）、`is-*` 状态类，以及 `--kole-*` 令牌。示例代码由 site/examples 提供，本文件只给 exampleIds。",
|
||
"table": [
|
||
{
|
||
"name": "btn",
|
||
"type": "基础类",
|
||
"desc": "按钮基线：inline-flex 居中、gap 4px、圆角 4px、min-width 64px、transition 背景与边框（frameworks/Button.css:2）"
|
||
},
|
||
{
|
||
"name": "btn-primary",
|
||
"type": "变体类",
|
||
"desc": "主按钮：品牌色底 + 反色文字，hover/active 取品牌色 hover/active 令牌（frameworks/Button.css:12）"
|
||
},
|
||
{
|
||
"name": "btn-default",
|
||
"type": "变体类",
|
||
"desc": "次按钮：卡片底 + 边框 + 正文色，hover 只把边框换成品牌色（frameworks/Button.css:16）"
|
||
},
|
||
{
|
||
"name": "btn-text",
|
||
"type": "变体类",
|
||
"desc": "文字按钮：透明底 + 品牌色文字，hover 加品牌浅底（frameworks/Button.css:19）"
|
||
},
|
||
{
|
||
"name": "btn-link",
|
||
"type": "变体类",
|
||
"desc": "链接按钮：无边框、min-width auto、padding 0（frameworks/Button.css:22）"
|
||
},
|
||
{
|
||
"name": "btn-danger",
|
||
"type": "变体类",
|
||
"desc": "危险按钮：错误色底 + 反色文字，hover 用 brightness(.92) 压暗（frameworks/Button.css:25）"
|
||
},
|
||
{
|
||
"name": "btn-disabled",
|
||
"type": "状态类",
|
||
"desc": "禁用：禁用底 + 禁用文字 + not-allowed，hover 不再变化（frameworks/Button.css:32）"
|
||
},
|
||
{
|
||
"name": "is-loading",
|
||
"type": "状态类",
|
||
"desc": "加载中：cursor 变 progress，内部 .btn-label 透明降到 .65（frameworks/Button.css:39）"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"结构上保持原生 <button> 承载 .btn，禁用优先用原生 disabled 属性，屏幕阅读器才会播报不可用。",
|
||
".btn:focus-visible 有 2px 品牌色描边加 outline-offset:2px，若自定义主题把 --kole-color-brand 调成与背景接近的色，焦点环就会看不清。",
|
||
"加载态只降 .btn-label 透明度、不隐藏文字，避免按钮变成无名元素；同时建议给宿主加 aria-busy。",
|
||
"图标按钮必须保留可见文本或用 aria-label 补名，.btn-icon 里的 SVG 是装饰性的。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Button.css",
|
||
"kind": "css",
|
||
"desc": "Kole UI 该组件的纯样式实现：类名与状态类的唯一定义处，含 :focus-visible / 令牌引用（frameworks/Button.css）"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"button-ex-1",
|
||
"button-ex-3",
|
||
"button-ex-4",
|
||
"button-ex-5"
|
||
],
|
||
"notes": [
|
||
"依据 frameworks/Button.css:2 定义 .btn",
|
||
"依据 frameworks/Button.css:12 定义 .btn-primary",
|
||
"依据 frameworks/Button.css:16 定义 .btn-default",
|
||
"依据 frameworks/Button.css:19 定义 .btn-text",
|
||
"依据 frameworks/Button.css:22 定义 .btn-link",
|
||
"依据 frameworks/Button.css:25 定义 .btn-danger",
|
||
"依据 frameworks/Button.css:32 定义 .btn-disabled",
|
||
"依据 frameworks/Button.css:39 定义 .is-loading",
|
||
"类名总表来自 frameworks/Button.css（facts.consumedApi.classes，16 项），本端不消费 props/emits/slots：[] / [] / []"
|
||
]
|
||
}
|