{
 "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 行。本示例不再重复受控切换，只体现含禁用项的静态渲染。"
   ]
  }
 ]
}