{"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":"api-derived","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 { KoleTabs } from 'kole-ui/react';\n\n<KoleTabs type=\"line\" />","vue3":"<template>\n  <KoleTabs type=\"line\" />\n</template>\n\n<script setup>\nimport { KoleTabs } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleTabs type=\"line\" />\n</template>\n\n<script>\nimport { KoleTabs } from 'kole-ui/vue2';\nexport default { components: { KoleTabs } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"demo-mapped","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 { KoleTabs } from 'kole-ui/react';\n\n<>\n<KoleTabs type=\"card\" addable id=\"tabs-card\">订单 × 退款 订单标签页内容。 退款标签页内容。</KoleTabs>\n</>","vue3":"import { KoleTabs } from 'kole-ui/vue3';\n\n<template>\n<KoleTabs type=\"card\" addable id=\"tabs-card\">订单 × 退款 订单标签页内容。 退款标签页内容。</KoleTabs>\n</template>","vue2":"import { KoleTabs } from 'kole-ui/vue2';\n\n<template>\n<KoleTabs type=\"card\" addable id=\"tabs-card\">订单 × 退款 订单标签页内容。 退款标签页内容。</KoleTabs>\n</template>"},"notes":[]},{"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":"api-derived","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 { KoleTabs } from 'kole-ui/react';\n\n<KoleTabs type=\"pill\" />","vue3":"<template>\n  <KoleTabs type=\"pill\" />\n</template>\n\n<script setup>\nimport { KoleTabs } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleTabs type=\"pill\" />\n</template>\n\n<script>\nimport { KoleTabs } from 'kole-ui/vue2';\nexport default { components: { KoleTabs } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}