{
 "slug": "tabs",
 "mode": "scenarios",
 "examples": [
  {
   "id": "tabs-ex-1",
   "title": "线型（默认）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-tabs type-line\" id=\"tabs-line\" data-tabs>\n    <div class=\"kole-tabs-nav\" role=\"tablist\">\n      <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"basic\">基本信息</div>\n      <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"safe\">安全设置</div>\n      <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"notify\">通知</div>\n      <div class=\"kole-tabs-tab is-disabled\" role=\"tab\" tabindex=\"0\" data-key=\"auth\">授权</div>\n    </div>\n    <div class=\"kole-tabs-content\" data-panels>\n      <div data-panel=\"basic\">这里是「基本信息」面板内容。</div>\n      <div data-panel=\"safe\" hidden>这里是「安全设置」面板内容。</div>\n      <div data-panel=\"notify\" hidden>这里是「通知」面板内容。</div>\n      <div data-panel=\"auth\" hidden>这里是「授权」面板内容。</div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-tabs type-line\" id=\"tabs-line\" data-tabs>\n  <div class=\"kole-tabs-nav\" role=\"tablist\">\n    <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\">基本信息</div>\n    <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">安全设置</div>\n    <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">通知</div>\n    <div class=\"kole-tabs-tab is-disabled\" role=\"tab\" tabindex=\"0\">授权</div>\n  </div>\n  <div class=\"kole-tabs-content\">\n    <div>这里是「基本信息」面板内容。</div>\n    <div hidden>这里是「安全设置」面板内容。</div>\n    <div hidden>这里是「通知」面板内容。</div>\n    <div hidden>这里是「授权」面板内容。</div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleTabs } from 'kole-ui/react';\n\nconst tabs = [\n  { key: 'basic', label: '基本信息' },\n  { key: 'safe', label: '安全设置' },\n  { key: 'notify', label: '通知' },\n  { key: 'auth', label: '授权', disabled: true }\n];\n\nexport default function LineTabs() {\n  const [active, setActive] = useState('basic');\n  return (\n    <KoleTabs\n      type=\"line\"\n      tabs={tabs}\n      value={active}\n      onChange={setActive}\n      renderPanel={(key) => <div>当前标签：{key}</div>}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleTabs v-model=\"active\" type=\"line\" :tabs=\"tabs\">\n    这里是「基本信息」面板内容。\n  </KoleTabs>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTabs } from 'kole-ui/vue3';\n\nconst tabs = [\n  { key: 'basic', label: '基本信息' },\n  { key: 'safe', label: '安全设置' },\n  { key: 'notify', label: '通知' },\n  { key: 'auth', label: '授权', disabled: true }\n];\nconst active = ref('basic');\n</script>",
    "vue2": "<template>\n  <KoleTabs v-model=\"active\" type=\"line\" :tabs=\"tabs\">\n    这里是「基本信息」面板内容。\n  </KoleTabs>\n</template>\n\n<script>\nimport { KoleTabs } from 'kole-ui/vue2';\n\nexport default {\n  name: 'LineTabs',\n  components: { KoleTabs },\n  data() {\n    return {\n      tabs: [\n        { key: 'basic', label: '基本信息' },\n        { key: 'safe', label: '安全设置' },\n        { key: 'notify', label: '通知' },\n        { key: 'auth', label: '授权', disabled: true }\n      ],\n      active: 'basic'\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleTabs } from 'kole-ui/react';\n\nconst tabs = [\n  { key: 'basic', label: '基本信息' },\n  { key: 'safe', label: '安全设置' },\n  { key: 'notify', label: '通知' },\n  { key: 'auth', label: '授权', disabled: true }\n];\n\nexport default function LineTabs(): JSX.Element {\n  const [active, setActive] = useState<string>('basic');\n  return (\n    <KoleTabs\n      type=\"line\"\n      tabs={tabs}\n      value={active}\n      onChange={setActive}\n      renderPanel={(key) => <div>当前标签：{key}</div>}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleTabs v-model=\"active\" type=\"line\" :tabs=\"tabs\">\n    这里是「基本信息」面板内容。\n  </KoleTabs>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTabs } from 'kole-ui/vue3';\n\nconst tabs = [\n  { key: 'basic', label: '基本信息' },\n  { key: 'safe', label: '安全设置' },\n  { key: 'notify', label: '通知' },\n  { key: 'auth', label: '授权', disabled: true }\n];\nconst active = ref<string>('basic');\n</script>",
    "vue2ts": "<template>\n\n  <KoleTabs v-model=\"active\" type=\"line\" :tabs=\"tabs\">\n    这里是「基本信息」面板内容。\n  </KoleTabs>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTabs } from 'kole-ui/vue2';\n\nexport default {\n  name: 'LineTabs',\n  components: { KoleTabs },\n  data(): Record<string, unknown> {\n    return {\n      tabs: [\n        { key: 'basic', label: '基本信息' },\n        { key: 'safe', label: '安全设置' },\n        { key: 'notify', label: '通知' },\n        { key: 'auth', label: '授权', disabled: true }\n      ],\n      active: 'basic'\n    };\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Tabs.html:25-37 线型标记（type-line，tab key basic/safe/notify，auth 禁用）与 :80-88 激活逻辑"
  },
  {
   "id": "tabs-ex-2",
   "title": "卡片型（可关闭 / 新增）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-tabs type-card\" id=\"tabs-card\" data-tabs>\n    <div class=\"kole-tabs-nav\" role=\"tablist\">\n      <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"t1\">\n        订单\n        <span class=\"kole-tabs-close\" data-close>×</span>\n      </div>\n      <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"t2\">\n        退款\n        <span class=\"kole-tabs-close\" data-close>×</span>\n      </div>\n      <div class=\"kole-tabs-add\" role=\"button\" aria-label=\"新增标签页\" tabindex=\"0\" data-add>+</div>\n    </div>\n    <div class=\"kole-tabs-content\" data-panels>\n      <div data-panel=\"t1\">订单标签页内容。</div>\n      <div data-panel=\"t2\" hidden>退款标签页内容。</div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      4
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-tabs type-card\" id=\"tabs-card\" data-tabs>\n  <div class=\"kole-tabs-nav\" role=\"tablist\">\n    <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\">\n      订单\n      <span class=\"kole-tabs-close\">×</span>\n    </div>\n    <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">\n      退款\n      <span class=\"kole-tabs-close\">×</span>\n    </div>\n    <div class=\"kole-tabs-add\" role=\"button\" aria-label=\"新增标签页\" tabindex=\"0\">+</div>\n  </div>\n  <div class=\"kole-tabs-content\">\n    <div>订单标签页内容。</div>\n    <div hidden>退款标签页内容。</div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleTabs } from 'kole-ui/react';\n\nexport default function CardTabs() {\n  const [tabs, setTabs] = useState([\n    { key: 't1', label: '订单' },\n    { key: 't2', label: '退款' }\n  ]);\n  const [active, setActive] = useState('t1');\n  return (\n    <KoleTabs\n      type=\"card\"\n      tabs={tabs}\n      value={active}\n      closable\n      addable\n      onChange={setActive}\n      onTabRemove={(key) => setTabs((list) => list.filter((t) => t.key !== key))}\n      onTabAdd={() => setTabs((list) => [...list, { key: 'new' + (list.length + 1), label: '新标签' }])}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleTabs\n    v-model=\"active\"\n    type=\"card\"\n    :tabs=\"tabs\"\n    closable\n    addable\n    @tab-remove=\"removeTab\"\n    @tab-add=\"addTab\"\n  >\n    订单标签页内容。\n  </KoleTabs>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTabs } from 'kole-ui/vue3';\n\nconst tabs = ref([\n  { key: 't1', label: '订单' },\n  { key: 't2', label: '退款' }\n]);\nconst active = ref('t1');\n\nfunction removeTab(key) {\n  tabs.value = tabs.value.filter((t) => t.key !== key);\n}\nfunction addTab() {\n  tabs.value = [...tabs.value, { key: 'new' + (tabs.value.length + 1), label: '新标签' }];\n}\n</script>",
    "vue2": "<template>\n  <KoleTabs\n    v-model=\"active\"\n    type=\"card\"\n    :tabs=\"tabs\"\n    closable\n    addable\n    @tab-remove=\"removeTab\"\n    @tab-add=\"addTab\"\n  >\n    订单标签页内容。\n  </KoleTabs>\n</template>\n\n<script>\nimport { KoleTabs } from 'kole-ui/vue2';\n\nexport default {\n  name: 'CardTabs',\n  components: { KoleTabs },\n  data() {\n    return {\n      tabs: [\n        { key: 't1', label: '订单' },\n        { key: 't2', label: '退款' }\n      ],\n      active: 't1'\n    };\n  },\n  methods: {\n    removeTab(key) {\n      this.tabs = this.tabs.filter((t) => t.key !== key);\n    },\n    addTab() {\n      this.tabs = this.tabs.concat([{ key: 'new' + (this.tabs.length + 1), label: '新标签' }]);\n    }\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleTabs } from 'kole-ui/react';\n\nexport default function CardTabs(): JSX.Element {\n  const [tabs, setTabs] = useState([\n    { key: 't1', label: '订单' },\n    { key: 't2', label: '退款' }\n  ]);\n  const [active, setActive] = useState<string>('t1');\n  return (\n    <KoleTabs\n      type=\"card\"\n      tabs={tabs}\n      value={active}\n      closable\n      addable\n      onChange={setActive}\n      onTabRemove={(key) => setTabs((list) => list.filter((t) => t.key !== key))}\n      onTabAdd={() => setTabs((list) => [...list, { key: 'new' + (list.length + 1), label: '新标签' }])}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleTabs\n    v-model=\"active\"\n    type=\"card\"\n    :tabs=\"tabs\"\n    closable\n    addable\n    @tab-remove=\"removeTab\"\n    @tab-add=\"addTab\"\n  >\n    订单标签页内容。\n  </KoleTabs>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTabs } from 'kole-ui/vue3';\n\nconst tabs = ref([\n  { key: 't1', label: '订单' },\n  { key: 't2', label: '退款' }\n]);\nconst active = ref<string>('t1');\n\nfunction removeTab(key) {\n  tabs.value = tabs.value.filter((t) => t.key !== key);\n}\nfunction addTab() {\n  tabs.value = [...tabs.value, { key: 'new' + (tabs.value.length + 1), label: '新标签' }];\n}\n</script>",
    "vue2ts": "<template>\n\n  <KoleTabs\n    v-model=\"active\"\n    type=\"card\"\n    :tabs=\"tabs\"\n    closable\n    addable\n    @tab-remove=\"removeTab\"\n    @tab-add=\"addTab\"\n  >\n    订单标签页内容。\n  </KoleTabs>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTabs } from 'kole-ui/vue2';\n\nexport default {\n  name: 'CardTabs',\n  components: { KoleTabs },\n  data(): Record<string, unknown> {\n    return {\n      tabs: [\n        { key: 't1', label: '订单' },\n        { key: 't2', label: '退款' }\n      ],\n      active: 't1'\n    };\n  },\n  methods: {\n    removeTab(key) {\n      this.tabs = this.tabs.filter((t) => t.key !== key);\n    },\n    addTab(): void {\n      this.tabs = this.tabs.concat([{ key: 'new' + (this.tabs.length + 1), label: '新标签' }]);\n    }\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Tabs.html:44-54 卡片型标记（type-card、kole-tabs-close 关闭、kole-tabs-add 新增）与 :90-121 关闭/新增逻辑"
  },
  {
   "id": "tabs-ex-3",
   "title": "胶囊型",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-tabs type-pill\" id=\"tabs-pill\" data-tabs>\n    <div class=\"kole-tabs-nav\" role=\"tablist\">\n      <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\" data-key=\"all\">全部</div>\n      <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"todo\">待办</div>\n      <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\" data-key=\"done\">已完成</div>\n    </div>\n    <div class=\"kole-tabs-content\" data-panels>\n      <div data-panel=\"all\">全部任务。</div>\n      <div data-panel=\"todo\" hidden>待办任务。</div>\n      <div data-panel=\"done\" hidden>已完成任务。</div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      4
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-tabs type-pill\" id=\"tabs-pill\" data-tabs>\n  <div class=\"kole-tabs-nav\" role=\"tablist\">\n    <div class=\"kole-tabs-tab is-active\" role=\"tab\" tabindex=\"0\">全部</div>\n    <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">待办</div>\n    <div class=\"kole-tabs-tab\" role=\"tab\" tabindex=\"0\">已完成</div>\n  </div>\n  <div class=\"kole-tabs-content\">\n    <div>全部任务。</div>\n    <div hidden>待办任务。</div>\n    <div hidden>已完成任务。</div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleTabs } from 'kole-ui/react';\n\nconst tabs = [\n  { key: 'all', label: '全部' },\n  { key: 'todo', label: '待办' },\n  { key: 'done', label: '已完成' }\n];\n\nexport default function PillTabs() {\n  const [active, setActive] = useState('all');\n  return (\n    <KoleTabs\n      type=\"pill\"\n      tabs={tabs}\n      value={active}\n      onChange={setActive}\n      renderPanel={(key) => <div>当前分组：{key}</div>}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleTabs v-model=\"active\" type=\"pill\" :tabs=\"tabs\">\n    全部任务。\n  </KoleTabs>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTabs } from 'kole-ui/vue3';\n\nconst tabs = [\n  { key: 'all', label: '全部' },\n  { key: 'todo', label: '待办' },\n  { key: 'done', label: '已完成' }\n];\nconst active = ref('all');\n</script>",
    "vue2": "<template>\n  <KoleTabs v-model=\"active\" type=\"pill\" :tabs=\"tabs\">\n    全部任务。\n  </KoleTabs>\n</template>\n\n<script>\nimport { KoleTabs } from 'kole-ui/vue2';\n\nexport default {\n  name: 'PillTabs',\n  components: { KoleTabs },\n  data() {\n    return {\n      tabs: [\n        { key: 'all', label: '全部' },\n        { key: 'todo', label: '待办' },\n        { key: 'done', label: '已完成' }\n      ],\n      active: 'all'\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleTabs } from 'kole-ui/react';\n\nconst tabs = [\n  { key: 'all', label: '全部' },\n  { key: 'todo', label: '待办' },\n  { key: 'done', label: '已完成' }\n];\n\nexport default function PillTabs(): JSX.Element {\n  const [active, setActive] = useState<string>('all');\n  return (\n    <KoleTabs\n      type=\"pill\"\n      tabs={tabs}\n      value={active}\n      onChange={setActive}\n      renderPanel={(key) => <div>当前分组：{key}</div>}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleTabs v-model=\"active\" type=\"pill\" :tabs=\"tabs\">\n    全部任务。\n  </KoleTabs>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTabs } from 'kole-ui/vue3';\n\nconst tabs = [\n  { key: 'all', label: '全部' },\n  { key: 'todo', label: '待办' },\n  { key: 'done', label: '已完成' }\n];\nconst active = ref<string>('all');\n</script>",
    "vue2ts": "<template>\n\n  <KoleTabs v-model=\"active\" type=\"pill\" :tabs=\"tabs\">\n    全部任务。\n  </KoleTabs>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTabs } from 'kole-ui/vue2';\n\nexport default {\n  name: 'PillTabs',\n  components: { KoleTabs },\n  data(): Record<string, unknown> {\n    return {\n      tabs: [\n        { key: 'all', label: '全部' },\n        { key: 'todo', label: '待办' },\n        { key: 'done', label: '已完成' }\n      ],\n      active: 'all'\n    };\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Tabs.html:60-71 胶囊型标记（type-pill，tab key all/todo/done）与 :80-88 激活逻辑"
  }
 ],
 "curated": true
}