164 lines
11 KiB
JSON
164 lines
11 KiB
JSON
{
|
||
"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）"
|
||
]
|
||
}
|
||
]
|
||
}
|