{ "slug": "tabs", "mode": "scenarios", "examples": [ { "id": "tabs-ex-1", "title": "线型(默认)", "titleSrc": "demo", "desc": "", "html": "
\n
\n
\n
基本信息
\n
安全设置
\n
通知
\n
授权
\n
\n
\n
这里是「基本信息」面板内容。
\n \n \n \n
\n
\n
", "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": "
\n
\n
基本信息
\n
安全设置
\n
通知
\n
授权
\n
\n
\n
这里是「基本信息」面板内容。
\n \n \n \n
\n
", "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
当前标签:{key}
}\n />\n );\n}", "vue3": "\n\n", "vue2": "\n\n", "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('basic');\n return (\n
当前标签:{key}
}\n />\n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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": "
\n
\n
\n
\n 订单\n ×\n
\n
\n 退款\n ×\n
\n
+
\n
\n
\n
订单标签页内容。
\n \n
\n
\n
", "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": "
\n
\n
\n 订单\n ×\n
\n
\n 退款\n ×\n
\n
+
\n
\n
\n
订单标签页内容。
\n \n
\n
", "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 setTabs((list) => list.filter((t) => t.key !== key))}\n onTabAdd={() => setTabs((list) => [...list, { key: 'new' + (list.length + 1), label: '新标签' }])}\n />\n );\n}", "vue3": "\n\n", "vue2": "\n\n", "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('t1');\n return (\n setTabs((list) => list.filter((t) => t.key !== key))}\n onTabAdd={() => setTabs((list) => [...list, { key: 'new' + (list.length + 1), label: '新标签' }])}\n />\n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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": "
\n
\n
\n
全部
\n
待办
\n
已完成
\n
\n
\n
全部任务。
\n \n \n
\n
\n
", "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": "
\n
\n
全部
\n
待办
\n
已完成
\n
\n
\n
全部任务。
\n \n \n
\n
", "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
当前分组:{key}
}\n />\n );\n}", "vue3": "\n\n", "vue2": "\n\n", "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('all');\n return (\n
当前分组:{key}
}\n />\n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": "依据 frameworks/Tabs.html:60-71 胶囊型标记(type-pill,tab key all/todo/done)与 :80-88 激活逻辑" } ], "curated": true }