{
  "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。"
  ]
}