173 lines
17 KiB
JSON
173 lines
17 KiB
JSON
{
|
||
"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
|
||
}
|