115 lines
10 KiB
JSON
115 lines
10 KiB
JSON
{
|
||
"slug": "descriptions",
|
||
"mode": "scenarios",
|
||
"curated": true,
|
||
"examples": [
|
||
{
|
||
"id": "descriptions-ex-1",
|
||
"title": "默认与常用变体",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-descriptions\">\n <table class=\"kole-descriptions-table\">\n <tbody>\n <tr>\n <th>订单号</th>\n <td>KOLE-20260920</td>\n <th>状态</th>\n <td>处理中</td>\n </tr>\n <tr>\n <th>负责人</th>\n <td>林工</td>\n <th>更新时间</th>\n <td>今天 09:30</td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-descriptions\">\n <table class=\"kole-descriptions-table\">\n <tbody>\n <tr>\n <th>订单号</th>\n <td>KOLE-20260920</td>\n <th>状态</th>\n <td>处理中</td>\n </tr>\n <tr>\n <th>负责人</th>\n <td>林工</td>\n <th>更新时间</th>\n <td>今天 09:30</td>\n </tr>\n </tbody>\n </table>\n</div>",
|
||
"jsx": "import { KoleDescriptions } from 'kole-ui/react';\n\nconst FIELDS = [\n { label: '订单号', value: 'KOLE-20260920' },\n { label: '状态', value: '处理中' },\n { label: '负责人', value: '林工' },\n { label: '更新时间', value: '今天 09:30' },\n];\n\n<KoleDescriptions fields={FIELDS} columns={2} bordered />",
|
||
"vue3": "<template>\n <KoleDescriptions :fields=\"fields\" :columns=\"2\" :bordered=\"true\" />\n</template>\n\n<script setup>\nimport { KoleDescriptions } from 'kole-ui/vue3';\n\nconst fields = [\n { label: '订单号', value: 'KOLE-20260920' },\n { label: '状态', value: '处理中' },\n { label: '负责人', value: '林工' },\n { label: '更新时间', value: '今天 09:30' },\n];\n</script>",
|
||
"vue2": "<template>\n <KoleDescriptions :fields=\"fields\" :columns=\"2\" :bordered=\"true\" />\n</template>\n\n<script>\nimport { KoleDescriptions } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDescriptions },\n data() {\n return {\n fields: [\n { label: '订单号', value: 'KOLE-20260920' },\n { label: '状态', value: '处理中' },\n { label: '负责人', value: '林工' },\n { label: '更新时间', value: '今天 09:30' },\n ],\n };\n },\n};\n</script>",
|
||
"tsx": "import { KoleDescriptions } from 'kole-ui/react';\n\ninterface DescriptionField {\n label: string;\n value: string;\n}\n\nconst FIELDS: ReadonlyArray<DescriptionField> = [\n { label: '订单号', value: 'KOLE-20260920' },\n { label: '状态', value: '处理中' },\n { label: '负责人', value: '林工' },\n { label: '更新时间', value: '今天 09:30' },\n];\n\nconst columns: number = 2;\n\n<KoleDescriptions fields={FIELDS} columns={columns} bordered />",
|
||
"vue3ts": "<template>\n <KoleDescriptions :fields=\"fields\" :columns=\"columns\" :bordered=\"true\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDescriptions } from 'kole-ui/vue3';\n\ninterface DescriptionField {\n label: string;\n value: string;\n}\n\nconst fields: ReadonlyArray<DescriptionField> = [\n { label: '订单号', value: 'KOLE-20260920' },\n { label: '状态', value: '处理中' },\n { label: '负责人', value: '林工' },\n { label: '更新时间', value: '今天 09:30' },\n];\nconst columns: number = 2;\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleDescriptions :fields=\"fields\" :columns=\"columns\" :bordered=\"true\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDescriptions } from 'kole-ui/vue2';\n\ninterface DescriptionField {\n label: string;\n value: string;\n}\n\nexport default Vue.extend({\n components: { KoleDescriptions },\n data(): { fields: ReadonlyArray<DescriptionField>; columns: number } {\n return {\n fields: [\n { label: '订单号', value: 'KOLE-20260920' },\n { label: '状态', value: '处理中' },\n { label: '负责人', value: '林工' },\n { label: '更新时间', value: '今天 09:30' },\n ],\n columns: 2,\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Descriptions.html:5 第一个 demo-block 的 table.kole-descriptions-table（订单号 KOLE-20260920 / 状态 处理中 / 负责人 林工 / 更新时间 今天 09:30，每行两对 → columns=2）；prop 取 frameworks/Descriptions.jsx:4 的 fields/columns/bordered",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 interface DescriptionField + ReadonlyArray（fields 语义见 Descriptions.jsx 形参）；vue3ts/vue2ts 用 <script lang=\"ts\"> + columns: number；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||
]
|
||
},
|
||
{
|
||
"id": "descriptions-ex-2",
|
||
"title": "状态与使用场景",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-descriptions\">\n <div class=\"kole-descriptions-surface\" style=\"padding:12px\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</div>\n <span class=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </div>\n <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-descriptions\">\n <div class=\"kole-descriptions-surface\" style=\"padding:12px\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</div>\n <span class=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
||
"jsx": "import { KoleDescriptions } from 'kole-ui/react';\n\n<KoleDescriptions bordered={false} columns={1}>\n <span className=\"kole-descriptions-desc\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</span>\n <span className=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</KoleDescriptions>",
|
||
"vue3": "<template>\n <KoleDescriptions :bordered=\"false\" :columns=\"1\">\n <span class=\"kole-descriptions-desc\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</span>\n <span class=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </KoleDescriptions>\n</template>\n\n<script setup>\nimport { KoleDescriptions } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <KoleDescriptions :bordered=\"false\" :columns=\"1\">\n <span class=\"kole-descriptions-desc\">以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。</span>\n <span class=\"kole-descriptions-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </KoleDescriptions>\n</template>\n\n<script>\nimport { KoleDescriptions } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDescriptions },\n};\n</script>",
|
||
"tsx": "import { KoleDescriptions } from 'kole-ui/react';\n\ninterface DescriptionsCopy {\n intro: string;\n a11y: string;\n}\n\nconst copy: DescriptionsCopy = {\n intro: '以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。',\n a11y: '支持键盘焦点、状态反馈和令牌化样式。',\n};\n\nconst columns: number = 1;\n\n<KoleDescriptions bordered={false} columns={columns}>\n <span className=\"kole-descriptions-desc\">{copy.intro}</span>\n <span className=\"kole-descriptions-desc\">{copy.a11y}</span>\n</KoleDescriptions>",
|
||
"vue3ts": "<template>\n <KoleDescriptions :bordered=\"false\" :columns=\"columns\">\n <span class=\"kole-descriptions-desc\">{{ copy.intro }}</span>\n <span class=\"kole-descriptions-desc\">{{ copy.a11y }}</span>\n </KoleDescriptions>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDescriptions } from 'kole-ui/vue3';\n\ninterface DescriptionsCopy {\n intro: string;\n a11y: string;\n}\n\nconst copy: DescriptionsCopy = {\n intro: '以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。',\n a11y: '支持键盘焦点、状态反馈和令牌化样式。',\n};\nconst columns: number = 1;\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleDescriptions :bordered=\"false\" :columns=\"columns\">\n <span class=\"kole-descriptions-desc\">{{ copy.intro }}</span>\n <span class=\"kole-descriptions-desc\">{{ copy.a11y }}</span>\n </KoleDescriptions>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDescriptions } from 'kole-ui/vue2';\n\ninterface DescriptionsCopy {\n intro: string;\n a11y: string;\n}\n\nexport default Vue.extend({\n components: { KoleDescriptions },\n data(): { copy: DescriptionsCopy; columns: number } {\n return {\n copy: {\n intro: '以只读方式展示订单、客户、员工等对象的结构化详情，支持 1–4 列。',\n a11y: '支持键盘焦点、状态反馈和令牌化样式。',\n },\n columns: 1,\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Descriptions.html:5 第二个 demo-block（.kole-descriptions-surface 说明文案 + span.kole-descriptions-desc）；文案走默认插槽（api.slots=default，Descriptions.vue3.vue 的 <slot />），bordered/columns 取 frameworks/Descriptions.jsx:4"
|
||
]
|
||
}
|
||
]
|
||
}
|