91 lines
3.3 KiB
JSON
91 lines
3.3 KiB
JSON
{
|
||
"slug": "card",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 卡片容器，用 title/extra/actions 三个具名插槽组织头部与底部操作区。",
|
||
"usage": [
|
||
"Vue 2 端写 <template #title> 与 <template #extra> 就能替换默认标题并追加右上角操作，不需要额外 prop。",
|
||
"只有传了 title 或存在 extra 插槽时头部才渲染，避免空 header 撑高。",
|
||
"padding 接受数字或字符串：数字会自动补 px，字符串原样透传，可写 \"16px 24px\"。",
|
||
"边框与阴影是两个独立开关 bordered 与 shadowed，可以同时打开。"
|
||
],
|
||
"bestPractices": [
|
||
"actions 插槽是条件渲染的，插槽无内容时底部区域完全不出现，不要用空 div 占位。",
|
||
"卡片自带 min-width 280px 与 max-width 360px 的样式上限，放进窄容器前先确认宽度约束。",
|
||
"padding 走内联 style 而非类名，需要主题化时改这个 prop 而不是覆盖 CSS。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端是「props 少、插槽多」的典型：4 个 prop 配 4 个插槽，没有事件。",
|
||
"table": [
|
||
{
|
||
"name": "title",
|
||
"type": "String，默认空串",
|
||
"desc": "头部默认标题，可被 title 插槽覆盖"
|
||
},
|
||
{
|
||
"name": "bordered",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "边框样式开关，对应 kole-card--bordered"
|
||
},
|
||
{
|
||
"name": "shadowed",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "阴影样式开关，对应 kole-card--shadowed"
|
||
},
|
||
{
|
||
"name": "padding",
|
||
"type": "Number | String，默认 16",
|
||
"desc": "内边距，数字自动转 px"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "插槽",
|
||
"desc": "标题区自定义内容"
|
||
},
|
||
{
|
||
"name": "extra",
|
||
"type": "插槽",
|
||
"desc": "头部右侧操作区，存在时才渲染"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "插槽",
|
||
"desc": "卡片主体内容"
|
||
},
|
||
{
|
||
"name": "actions",
|
||
"type": "插槽",
|
||
"desc": "底部操作区，存在时才渲染"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"组件渲染为纯 div 结构，没有 article/section 语义，若卡片是独立内容块建议外层包 <article>。",
|
||
"标题只是 div.kole-card__title，不构成 heading，页面大纲需要标题层级时请自行改用 h3 等标签。",
|
||
"actions 区域内的按钮由业务提供，无障碍完全取决于放入的元素类型。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Card.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Card.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Card.css",
|
||
"kind": "样式文件",
|
||
"desc": "Card.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"card-ex-3",
|
||
"card-ex-1",
|
||
"card-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Card.vue2.vue:17-22，padding 的类型为 [Number, String]。",
|
||
"四个插槽分别在 frameworks/Card.vue2.vue:5、7、9、10；extra 与 actions 由 $slots 判定渲染。",
|
||
"paddingPx 计算属性见 frameworks/Card.vue2.vue:30-32。"
|
||
]
|
||
}
|