252 lines
19 KiB
JSON
252 lines
19 KiB
JSON
{
|
||
"slug": "segmented",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "segmented-ex-1",
|
||
"title": "分段控制器 Segmented 示例 1",
|
||
"titleSrc": "",
|
||
"desc": "",
|
||
"html": "<button class=\"kole-segmented-item is-active\" data-val=\"list\">\n <span class=\"ico\">☰</span>\n 列表\n</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
3
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"kole-segmented-item is-active\">\n <span>☰</span>\n 列表\n</button>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSegmented } from 'kole-ui/react';\n\n// 图标 + 文字：options 里带 icon 的项在标签前多渲染一个图标\nconst views = [\n { label: '列表', value: 'list', icon: '☰' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n];\n\nexport default function Demo() {\n const [view, setView] = useState('list');\n return <KoleSegmented options={views} value={view} onChange={setView} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue3';\n\nconst views = [\n { label: '列表', value: 'list', icon: '☰' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n];\nconst view = ref('list');\n</script>\n\n<template>\n <KoleSegmented :options=\"views\" v-model=\"view\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSegmented :options=\"views\" v-model=\"view\" />\n</template>\n\n<script>\nimport { KoleSegmented } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSegmented },\n data() {\n return {\n view: 'list',\n views: [\n { label: '列表', value: 'list', icon: '☰' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSegmented } from 'kole-ui/react';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n icon?: string;\n disabled?: boolean;\n}\n\n// 图标 + 文字：options 里带 icon 的项在标签前多渲染一个图标\nconst views: ReadonlyArray<SegmentedOption> = [\n { label: '列表', value: 'list', icon: '☰' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n];\n\nexport default function SegmentedIconDemo(): JSX.Element {\n const [view, setView] = useState<string>('list');\n return <KoleSegmented options={views} value={view} onChange={setView} />;\n}",
|
||
"vue3ts": "<template>\n <KoleSegmented :options=\"views\" v-model=\"view\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue3';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n icon?: string;\n disabled?: boolean;\n}\n\nconst views: ReadonlyArray<SegmentedOption> = [\n { label: '列表', value: 'list', icon: '☰' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n];\nconst view = ref<string>('list');\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleSegmented :options=\"views\" v-model=\"view\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue2';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n icon?: string;\n disabled?: boolean;\n}\n\nexport default Vue.extend({\n components: { KoleSegmented },\n data(): { view: string; views: ReadonlyArray<SegmentedOption> } {\n return {\n view: 'list',\n views: [\n { label: '列表', value: 'list', icon: '☰' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Segmented.html 第 33 行第一个按钮：带 <span class=\"ico\">☰</span> 的「列表」且类含 is-active，data-val=\"list\" —— 即 options 首项 { label: \"列表\", value: \"list\", icon: \"☰\" } 与选中值 list。",
|
||
"options 字段 label / value / icon? / disabled? 见 frameworks/Segmented.jsx 第 7 行注释与第 28 行 icon 渲染分支；prop 名 options / value（Vue3 为 modelValue）见 Segmented.jsx 第 10 行、Segmented.vue3.vue 第 17-20 行。"
|
||
]
|
||
},
|
||
{
|
||
"id": "segmented-ex-2",
|
||
"title": "看板",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button class=\"kole-segmented-item\" data-val=\"kanban\">看板</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2,
|
||
1
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
3
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"kole-segmented-item\">看板</button>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSegmented } from 'kole-ui/react';\n\n// 纯文字分段：不传 icon，选中项背景白色\nconst views = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n];\n\nexport default function Demo() {\n const [view, setView] = useState('kanban');\n return <KoleSegmented options={views} value={view} onChange={setView} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue3';\n\nconst views = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n];\nconst view = ref('kanban');\n</script>\n\n<template>\n <KoleSegmented :options=\"views\" v-model=\"view\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSegmented :options=\"views\" v-model=\"view\" />\n</template>\n\n<script>\nimport { KoleSegmented } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSegmented },\n data() {\n return {\n view: 'kanban',\n views: [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSegmented } from 'kole-ui/react';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\n// 纯文字分段：不传 icon，选中项背景白色\nconst views: ReadonlyArray<SegmentedOption> = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n];\n\nexport default function SegmentedTextDemo(): JSX.Element {\n const [view, setView] = useState<string>('kanban');\n return <KoleSegmented options={views} value={view} onChange={setView} />;\n}",
|
||
"vue3ts": "<template>\n <KoleSegmented :options=\"views\" v-model=\"view\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue3';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nconst views: ReadonlyArray<SegmentedOption> = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n];\nconst view = ref<string>('kanban');\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleSegmented :options=\"views\" v-model=\"view\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue2';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nexport default Vue.extend({\n components: { KoleSegmented },\n data(): { view: string; views: ReadonlyArray<SegmentedOption> } {\n return {\n view: 'kanban',\n views: [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Segmented.html 第 34 行第二个按钮「看板」data-val=\"kanban\"：无 icon 子元素、无 is-active（未选中），对照第 33 行可确认 icon 只出现在「列表」项上。",
|
||
"本示例给纯文字分段的调用形态（options 不带 icon 字段），选中值 kanban；选中项白底由 Segmented.css 第 11 行 .is-active 决定，组件据 options 项的 value 与当前值比对后自动加类（Segmented.jsx 第 24 行）。"
|
||
]
|
||
},
|
||
{
|
||
"id": "segmented-ex-3",
|
||
"title": "甘特图",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button class=\"kole-segmented-item\" data-val=\"gantt\">甘特图</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
3
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"kole-segmented-item\">甘特图</button>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSegmented } from 'kole-ui/react';\n\nconst views = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n];\n\nexport default function Demo() {\n const [view, setView] = useState('gantt');\n // change 事件带出被点项的 value（Segmented.jsx 第 13-17 行）\n return <KoleSegmented options={views} value={view} onChange={setView} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue3';\n\nconst views = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n];\nconst view = ref('gantt');\nfunction onChange(next) { view.value = next; }\n</script>\n\n<template>\n <KoleSegmented :options=\"views\" :model-value=\"view\" @change=\"onChange\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSegmented :options=\"views\" :value=\"view\" @change=\"onChange\" />\n</template>\n\n<script>\nimport { KoleSegmented } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSegmented },\n data() {\n return {\n view: 'gantt',\n views: [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n ]\n };\n },\n methods: {\n onChange(next) { this.view = next; }\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSegmented } from 'kole-ui/react';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nconst views: ReadonlyArray<SegmentedOption> = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n];\n\nexport default function SegmentedGanttDemo(): JSX.Element {\n const [view, setView] = useState<string>('gantt');\n // change 事件带出被点项的 value（Segmented.jsx 第 13-17 行）\n function handleChange(next: string): void {\n setView(next);\n }\n return <KoleSegmented options={views} value={view} onChange={handleChange} />;\n}",
|
||
"vue3ts": "<template>\n <KoleSegmented :options=\"views\" :model-value=\"view\" @change=\"onChange\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue3';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nconst views: ReadonlyArray<SegmentedOption> = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n];\n\nconst view = ref<string>('gantt');\nfunction onChange(next: string): void {\n view.value = next;\n}\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleSegmented :options=\"views\" :value=\"view\" @change=\"onChange\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue2';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nexport default Vue.extend({\n components: { KoleSegmented },\n data(): { view: string; views: ReadonlyArray<SegmentedOption> } {\n return {\n view: 'gantt',\n views: [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n ],\n };\n },\n methods: {\n onChange(next: string): void {\n this.view = next;\n },\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Segmented.html 第 35 行第三个按钮「甘特图」data-val=\"gantt\"：本示例以它为当前项，并显式接 change 事件（第 42-47 行演示页的点击切换逻辑）。",
|
||
"change 事件载荷为被点项的 value（frameworks/Segmented.jsx 第 13-17 行 choose()、Segmented.vue3.vue 第 23-27 行），三端均为受控切换；与示例 1/2 的写法差异在于显式监听 change 而非只给初始值。"
|
||
]
|
||
},
|
||
{
|
||
"id": "segmented-ex-4",
|
||
"title": "日历",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<button class=\"kole-segmented-item is-disabled\" data-val=\"cal\" disabled>日历</button>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
2
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"kole-segmented-item is-disabled\" disabled>日历</button>",
|
||
"jsx": "import { KoleSegmented } from 'kole-ui/react';\n\n// 禁用项：disabled: true → 按钮带 disabled 且类含 is-disabled，文字取 --kole-color-text-disabled\nconst views = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n];\n\nexport default function Demo() {\n return <KoleSegmented options={views} value=\"list\" />;\n}",
|
||
"vue3": "<script setup>\nimport { KoleSegmented } from 'kole-ui/vue3';\n\nconst views = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n];\n</script>\n\n<template>\n <KoleSegmented :options=\"views\" model-value=\"list\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSegmented :options=\"views\" value=\"list\" />\n</template>\n\n<script>\nimport { KoleSegmented } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSegmented },\n data() {\n return {\n views: [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { KoleSegmented } from 'kole-ui/react';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\n// 禁用项：disabled: true → 按钮带 disabled 且类含 is-disabled，文字取 --kole-color-text-disabled\nconst views: ReadonlyArray<SegmentedOption> = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n];\n\nconst initialValue: string = 'list';\n\nexport default function SegmentedDisabledDemo(): JSX.Element {\n return <KoleSegmented options={views} value={initialValue} />;\n}",
|
||
"vue3ts": "<template>\n <KoleSegmented :options=\"views\" model-value=\"list\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSegmented } from 'kole-ui/vue3';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nconst views: ReadonlyArray<SegmentedOption> = [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n];\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleSegmented :options=\"views\" value=\"list\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSegmented } from 'kole-ui/vue2';\n\ninterface SegmentedOption {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\nexport default Vue.extend({\n components: { KoleSegmented },\n data(): { views: ReadonlyArray<SegmentedOption> } {\n return {\n views: [\n { label: '列表', value: 'list' },\n { label: '看板', value: 'kanban' },\n { label: '甘特图', value: 'gantt' },\n { label: '日历', value: 'cal', disabled: true },\n ],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Segmented.html 第 36 行第四个按钮「日历」：类含 is-disabled 且带 disabled 属性，data-val=\"cal\" —— 即 options 里 { label: \"日历\", value: \"cal\", disabled: true }。",
|
||
"禁用项判定见 frameworks/Segmented.jsx 第 24 行（opt.disabled 加 is-disabled）与第 14 行（choose() 直接 return），Vue 端同见 Segmented.vue3.vue 第 6-7、24 行；禁用文字色见 Segmented.css 第 12 行。本示例不再重复受控切换，只体现含禁用项的静态渲染。"
|
||
]
|
||
}
|
||
]
|
||
}
|