115 lines
10 KiB
JSON
115 lines
10 KiB
JSON
{
|
||
"slug": "divider",
|
||
"mode": "scenarios",
|
||
"curated": true,
|
||
"examples": [
|
||
{
|
||
"id": "divider-ex-1",
|
||
"title": "默认与常用变体",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-divider\">\n <div style=\"width:100%\">\n <div class=\"kole-divider-desc\">基础信息</div>\n <hr class=\"kole-divider-divider\" />\n <div class=\"kole-divider-desc\">安全设置</div>\n </div>\n <div class=\"kole-divider-divider is-vertical\" role=\"separator\" aria-label=\"分隔\"></div>\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-divider\">\n <div style=\"width:100%\">\n <div class=\"kole-divider-desc\">基础信息</div>\n <hr class=\"kole-divider-divider\" />\n <div class=\"kole-divider-desc\">安全设置</div>\n </div>\n <div class=\"kole-divider-divider is-vertical\" role=\"separator\" aria-label=\"分隔\"></div>\n</div>",
|
||
"jsx": "import { KoleDivider } from 'kole-ui/react';\n\n<>\n <KoleDivider title=\"基础信息\" />\n <KoleDivider title=\"安全设置\" />\n <KoleDivider orientation=\"vertical\" aria-label=\"分隔\" />\n</>",
|
||
"vue3": "<template>\n <div class=\"kole-divider-row\">\n <KoleDivider title=\"基础信息\" />\n <KoleDivider title=\"安全设置\" />\n <KoleDivider orientation=\"vertical\" aria-label=\"分隔\" />\n </div>\n</template>\n\n<script setup>\nimport { KoleDivider } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div class=\"kole-divider-row\">\n <KoleDivider title=\"基础信息\" />\n <KoleDivider title=\"安全设置\" />\n <KoleDivider orientation=\"vertical\" aria-label=\"分隔\" />\n </div>\n</template>\n\n<script>\nimport { KoleDivider } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDivider },\n};\n</script>",
|
||
"tsx": "import { KoleDivider } from 'kole-ui/react';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\ninterface DividerSample {\n key: string;\n title?: string;\n orientation: DividerOrientation;\n}\n\nconst samples: ReadonlyArray<DividerSample> = [\n { key: 'basic', title: '基础信息', orientation: 'horizontal' },\n { key: 'security', title: '安全设置', orientation: 'horizontal' },\n { key: 'separate', orientation: 'vertical' },\n];\n\nconst separate: DividerSample = samples[2];\nconst labeled: ReadonlyArray<DividerSample> = samples.slice(0, 2);\n\nexport default function DividerDefaultDemo(): JSX.Element {\n return (\n <div className=\"kole-divider-row\">\n {labeled.map((sample) => (\n <KoleDivider key={sample.key} title={sample.title} />\n ))}\n <KoleDivider orientation={separate.orientation} aria-label=\"分隔\" />\n </div>\n );\n}",
|
||
"vue3ts": "<template>\n <div class=\"kole-divider-row\">\n <KoleDivider v-for=\"sample in labeled\" :key=\"sample.key\" :title=\"sample.title\" />\n <KoleDivider :orientation=\"separate.orientation\" aria-label=\"分隔\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDivider } from 'kole-ui/vue3';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\ninterface DividerSample {\n key: string;\n title?: string;\n orientation: DividerOrientation;\n}\n\nconst samples: ReadonlyArray<DividerSample> = [\n { key: 'basic', title: '基础信息', orientation: 'horizontal' },\n { key: 'security', title: '安全设置', orientation: 'horizontal' },\n { key: 'separate', orientation: 'vertical' },\n];\n\nconst separate: DividerSample = samples[2];\nconst labeled: ReadonlyArray<DividerSample> = samples.slice(0, 2);\n</script>",
|
||
"vue2ts": "<template>\n <div class=\"kole-divider-row\">\n <KoleDivider v-for=\"sample in labeled\" :key=\"sample.key\" :title=\"sample.title\" />\n <KoleDivider :orientation=\"separate.orientation\" aria-label=\"分隔\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDivider } from 'kole-ui/vue2';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\ninterface DividerSample {\n key: string;\n title?: string;\n orientation: DividerOrientation;\n}\n\nconst samples: ReadonlyArray<DividerSample> = [\n { key: 'basic', title: '基础信息', orientation: 'horizontal' },\n { key: 'security', title: '安全设置', orientation: 'horizontal' },\n { key: 'separate', orientation: 'vertical' },\n];\n\nexport default Vue.extend({\n components: { KoleDivider },\n data(): { samples: ReadonlyArray<DividerSample> } {\n return { samples };\n },\n computed: {\n labeled(): ReadonlyArray<DividerSample> {\n return this.samples.slice(0, 2);\n },\n separate(): DividerSample {\n return this.samples[2];\n },\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Divider.html:5 第一个 demo-block（基础信息 → hr.kole-divider-divider → 安全设置，另有 div.kole-divider-divider.is-vertical 带 role=separator / aria-label=分隔）；prop 取 frameworks/Divider.jsx:4 的 title、orientation",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 type DividerOrientation 字面量联合 + ReadonlyArray<DividerSample>（orientation 见 Divider.jsx 形参）；vue3ts/vue2ts 用 <script lang=\"ts\"> + computed 标注返回类型；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||
]
|
||
},
|
||
{
|
||
"id": "divider-ex-2",
|
||
"title": "状态与使用场景",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-divider\">\n <div class=\"kole-divider-surface\" style=\"padding:12px\">分隔表单段落、菜单组或内容块，支持水平/垂直方向和带文字分隔。</div>\n <span class=\"kole-divider-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-divider\">\n <div class=\"kole-divider-surface\" style=\"padding:12px\">分隔表单段落、菜单组或内容块，支持水平/垂直方向和带文字分隔。</div>\n <span class=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
||
"jsx": "import { KoleDivider } from 'kole-ui/react';\n\n<>\n <span className=\"kole-divider-desc\">分隔表单段落、菜单组或内容块</span>\n <KoleDivider orientation=\"vertical\" />\n <span className=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式</span>\n</>",
|
||
"vue3": "<template>\n <div class=\"kole-divider-row\">\n <span class=\"kole-divider-desc\">分隔表单段落、菜单组或内容块</span>\n <KoleDivider orientation=\"vertical\" />\n <span class=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式</span>\n </div>\n</template>\n\n<script setup>\nimport { KoleDivider } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div class=\"kole-divider-row\">\n <span class=\"kole-divider-desc\">分隔表单段落、菜单组或内容块</span>\n <KoleDivider orientation=\"vertical\" />\n <span class=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式</span>\n </div>\n</template>\n\n<script>\nimport { KoleDivider } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleDivider },\n};\n</script>",
|
||
"tsx": "import { KoleDivider } from 'kole-ui/react';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\n\ninterface DividerCopy {\n previous: string;\n next: string;\n orientation: DividerOrientation;\n}\n\nconst copy: DividerCopy = {\n previous: '分隔表单段落、菜单组或内容块',\n next: '支持键盘焦点、状态反馈和令牌化样式',\n orientation: 'vertical',\n};\n\nexport default function DividerScenarioDemo(): JSX.Element {\n return (\n <div className=\"kole-divider-row\">\n <span className=\"kole-divider-desc\">{copy.previous}</span>\n <KoleDivider orientation={copy.orientation} />\n <span className=\"kole-divider-desc\">{copy.next}</span>\n </div>\n );\n}",
|
||
"vue3ts": "<template>\n <div class=\"kole-divider-row\">\n <span class=\"kole-divider-desc\">{{ copy.previous }}</span>\n <KoleDivider :orientation=\"copy.orientation\" />\n <span class=\"kole-divider-desc\">{{ copy.next }}</span>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDivider } from 'kole-ui/vue3';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\n\ninterface DividerCopy {\n previous: string;\n next: string;\n orientation: DividerOrientation;\n}\n\nconst copy: DividerCopy = {\n previous: '分隔表单段落、菜单组或内容块',\n next: '支持键盘焦点、状态反馈和令牌化样式',\n orientation: 'vertical',\n};\n</script>",
|
||
"vue2ts": "<template>\n <div class=\"kole-divider-row\">\n <span class=\"kole-divider-desc\">{{ copy.previous }}</span>\n <KoleDivider :orientation=\"copy.orientation\" />\n <span class=\"kole-divider-desc\">{{ copy.next }}</span>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDivider } from 'kole-ui/vue2';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\n\ninterface DividerCopy {\n previous: string;\n next: string;\n orientation: DividerOrientation;\n}\n\nexport default Vue.extend({\n components: { KoleDivider },\n data(): { copy: DividerCopy } {\n return {\n copy: {\n previous: '分隔表单段落、菜单组或内容块',\n next: '支持键盘焦点、状态反馈和令牌化样式',\n orientation: 'vertical',\n },\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Divider.html:5 第二个 demo-block（span.kole-divider-desc 说明文案「分隔表单段落、菜单组或内容块」）与同页 is-vertical 用法；orientation 取 frameworks/Divider.jsx:4 / Divider.vue3.vue defineProps 的 horizontal|vertical"
|
||
]
|
||
}
|
||
]
|
||
}
|