{
 "slug": "card",
 "mode": "scenarios",
 "curated": true,
 "examples": [
  {
   "id": "card-ex-1",
   "title": "边框卡片",
   "titleSrc": "contract",
   "desc": "",
   "html": "<div class=\"kole-card kole-card--bordered\" style=\"padding:16px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">边框卡片</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">用于轻量内容承载，1px 边框区分卡片边界。</div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2,
      0
     ]
    ],
    "hide": [
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2,
      1
     ],
     [
      0,
      2,
      2
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-card kole-card--bordered\" style=\"padding:16px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">边框卡片</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">用于轻量内容承载，1px 边框区分卡片边界。</div>\n</div>",
    "jsx": "import { KoleCard } from 'kole-ui/react';\n\n<KoleCard title=\"边框卡片\" bordered padding={16}>\n  用于轻量内容承载，1px 边框区分卡片边界。\n</KoleCard>",
    "vue3": "<template>\n  <KoleCard title=\"边框卡片\" bordered :padding=\"16\">\n    用于轻量内容承载，1px 边框区分卡片边界。\n  </KoleCard>\n</template>\n\n<script setup>\nimport { KoleCard } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleCard title=\"边框卡片\" bordered :padding=\"16\">\n    用于轻量内容承载，1px 边框区分卡片边界。\n  </KoleCard>\n</template>\n\n<script>\nimport { KoleCard } from 'kole-ui/vue2';\n\nexport default { components: { KoleCard } };\n</script>",
    "tsx": "import { KoleCard } from 'kole-ui/react';\n\nexport default function KoleCardDemo(): JSX.Element {\n  return (\n    <KoleCard title=\"边框卡片\" bordered padding={16}>\n      用于轻量内容承载，1px 边框区分卡片边界。\n    </KoleCard>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleCard title=\"边框卡片\" bordered :padding=\"16\">\n    用于轻量内容承载，1px 边框区分卡片边界。\n  </KoleCard>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleCard } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('边框卡片');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleCard title=\"边框卡片\" bordered :padding=\"16\">\n    用于轻量内容承载，1px 边框区分卡片边界。\n  </KoleCard>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCard } from 'kole-ui/vue2';\n\nexport default { components: { KoleCard },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Card.html:37-40 的 kole-card--bordered 与 style=\"padding:16px\"，标题/正文文案同该块；prop 名取自 frameworks/Card.jsx:11-20（title/bordered/padding）"
   ]
  },
  {
   "id": "card-ex-2",
   "title": "阴影卡片",
   "titleSrc": "contract",
   "desc": "",
   "html": "<div class=\"kole-card kole-card--shadowed\" style=\"padding:24px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">阴影卡片</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">通过低阴影表现层级浮起，适合突出展示类内容。</div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2,
      1
     ]
    ],
    "hide": [
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2,
      0
     ],
     [
      0,
      2,
      2
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-card kole-card--shadowed\" style=\"padding:24px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">阴影卡片</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">通过低阴影表现层级浮起，适合突出展示类内容。</div>\n</div>",
    "jsx": "import { KoleCard } from 'kole-ui/react';\n\n<KoleCard title=\"阴影卡片\" shadowed padding={24}>\n  通过低阴影表现层级浮起，适合突出展示类内容。\n</KoleCard>",
    "vue3": "<template>\n  <KoleCard title=\"阴影卡片\" shadowed :padding=\"24\">\n    通过低阴影表现层级浮起，适合突出展示类内容。\n  </KoleCard>\n</template>\n\n<script setup>\nimport { KoleCard } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleCard title=\"阴影卡片\" shadowed :padding=\"24\">\n    通过低阴影表现层级浮起，适合突出展示类内容。\n  </KoleCard>\n</template>\n\n<script>\nimport { KoleCard } from 'kole-ui/vue2';\n\nexport default { components: { KoleCard } };\n</script>",
    "tsx": "import { KoleCard } from 'kole-ui/react';\n\nexport default function KoleCardDemo(): JSX.Element {\n  return (\n    <KoleCard title=\"阴影卡片\" shadowed padding={24}>\n      通过低阴影表现层级浮起，适合突出展示类内容。\n    </KoleCard>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleCard title=\"阴影卡片\" shadowed :padding=\"24\">\n    通过低阴影表现层级浮起，适合突出展示类内容。\n  </KoleCard>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleCard } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('阴影卡片');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleCard title=\"阴影卡片\" shadowed :padding=\"24\">\n    通过低阴影表现层级浮起，适合突出展示类内容。\n  </KoleCard>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCard } from 'kole-ui/vue2';\n\nexport default { components: { KoleCard },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Card.html:42-45 的 kole-card--shadowed 与 style=\"padding:24px\"，标题/正文文案同该块"
   ]
  },
  {
   "id": "card-ex-3",
   "title": "含标题与操作区",
   "titleSrc": "contract",
   "desc": "",
   "html": "<div class=\"kole-card kole-card--bordered\" style=\"padding:24px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">客户详情</div>\n    <div class=\"kole-card__extra\" role=\"button\" tabindex=\"0\">查看全部</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">含标题区与右侧操作区，内容区展示客户关键信息。</div>\n  <div class=\"kole-card__actions\" style=\"margin-top:16px\">\n    <button style=\"border:1px solid var(--color-border);background:var(--color-bg-card);border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-text-body)\">取消</button>\n    <button style=\"background:var(--color-brand);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-bg-card)\">确定</button>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2,
      2
     ]
    ],
    "hide": [
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2,
      0
     ],
     [
      0,
      2,
      1
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-card kole-card--bordered\" style=\"padding:24px\">\n  <div class=\"kole-card__header\">\n    <div class=\"kole-card__title\">客户详情</div>\n    <div class=\"kole-card__extra\" role=\"button\" tabindex=\"0\">查看全部</div>\n  </div>\n  <div class=\"kole-card__body\" style=\"margin-top:12px\">含标题区与右侧操作区，内容区展示客户关键信息。</div>\n  <div class=\"kole-card__actions\" style=\"margin-top:16px\">\n    <button style=\"border:1px solid var(--color-border);background:var(--color-bg-card);border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-text-body)\">取消</button>\n    <button style=\"background:var(--color-brand);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--color-bg-card)\">确定</button>\n  </div>\n</div>",
    "jsx": "import { KoleCard } from 'kole-ui/react';\n\nconst actions = (\n  <>\n    <button>取消</button>\n    <button>确定</button>\n  </>\n);\n\n<KoleCard title=\"客户详情\" extra=\"查看全部\" bordered padding={24} actions={actions}>\n  含标题区与右侧操作区，内容区展示客户关键信息。\n</KoleCard>",
    "vue3": "<template>\n  <KoleCard title=\"客户详情\" bordered :padding=\"24\">\n    <template #extra>查看全部</template>\n    含标题区与右侧操作区，内容区展示客户关键信息。\n    <template #actions>\n      <button>取消</button>\n      <button>确定</button>\n    </template>\n  </KoleCard>\n</template>\n\n<script setup>\nimport { KoleCard } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleCard title=\"客户详情\" bordered :padding=\"24\">\n    <template #extra>查看全部</template>\n    含标题区与右侧操作区，内容区展示客户关键信息。\n    <template #actions>\n      <button>取消</button>\n      <button>确定</button>\n    </template>\n  </KoleCard>\n</template>\n\n<script>\nimport { KoleCard } from 'kole-ui/vue2';\n\nexport default { components: { KoleCard } };\n</script>",
    "tsx": "import { KoleCard } from 'kole-ui/react';\n\nexport default function KoleCardDemo(): JSX.Element {\n  const actions = (\n    <>\n      <button>取消</button>\n      <button>确定</button>\n    </>\n  );\n  return (\n    <KoleCard title=\"客户详情\" extra=\"查看全部\" bordered padding={24} actions={actions}>\n      含标题区与右侧操作区，内容区展示客户关键信息。\n    </KoleCard>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleCard title=\"客户详情\" bordered :padding=\"24\">\n    <template #extra>查看全部</template>\n    含标题区与右侧操作区，内容区展示客户关键信息。\n    <template #actions>\n      <button>取消</button>\n      <button>确定</button>\n    </template>\n  </KoleCard>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleCard } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('含标题与操作区');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleCard title=\"客户详情\" bordered :padding=\"24\">\n    <template #extra>查看全部</template>\n    含标题区与右侧操作区，内容区展示客户关键信息。\n    <template #actions>\n      <button>取消</button>\n      <button>确定</button>\n    </template>\n  </KoleCard>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCard } from 'kole-ui/vue2';\n\nexport default { components: { KoleCard },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Card.html:47-57：标题区 + 右侧 kole-card__extra「查看全部」+ 操作区「取消/确定」；对应 frameworks/Card.jsx:47 的 extra/actions 用法，vue 端为 extra/actions 具名插槽（Card.vue3.vue:7,10）"
   ]
  }
 ]
}