115 lines
15 KiB
JSON
115 lines
15 KiB
JSON
{
|
||
"slug": "collapse",
|
||
"mode": "scenarios",
|
||
"curated": true,
|
||
"examples": [
|
||
{
|
||
"id": "collapse-ex-1",
|
||
"title": "手风琴模式（同时仅展开一个）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"kole-collapse\" data-accordion>\n <div class=\"kole-collapse-item is-open\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">基本设置</span>\n </div>\n <div class=\"kole-collapse-content\">系统名称、主题色、默认语言等基础配置。</div>\n </div>\n <div class=\"kole-collapse-item\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">通知设置</span>\n </div>\n <div class=\"kole-collapse-content\" hidden>邮件、短信、站内信通知开关。</div>\n </div>\n <div class=\"kole-collapse-item\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">安全设置</span>\n </div>\n <div class=\"kole-collapse-content\" hidden>登录保护、密码策略、IP 白名单。</div>\n </div>\n <div class=\"kole-collapse-item is-disabled\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">高级（无权限）</span>\n </div>\n <div class=\"kole-collapse-content\" hidden>仅管理员可见的高级选项。</div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-collapse\" data-accordion>\n <div class=\"kole-collapse-item is-open\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">基本设置</span>\n </div>\n <div class=\"kole-collapse-content\">系统名称、主题色、默认语言等基础配置。</div>\n </div>\n <div class=\"kole-collapse-item\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">通知设置</span>\n </div>\n <div class=\"kole-collapse-content\" hidden>邮件、短信、站内信通知开关。</div>\n </div>\n <div class=\"kole-collapse-item\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">安全设置</span>\n </div>\n <div class=\"kole-collapse-content\" hidden>登录保护、密码策略、IP 白名单。</div>\n </div>\n <div class=\"kole-collapse-item is-disabled\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">高级（无权限）</span>\n </div>\n <div class=\"kole-collapse-content\" hidden>仅管理员可见的高级选项。</div>\n </div>\n</div>",
|
||
"jsx": "import { KoleCollapse } from 'kole-ui/react';\n\nconst items = [\n { key: 'basic', title: '基本设置' },\n { key: 'notify', title: '通知设置' },\n { key: 'security', title: '安全设置' },\n { key: 'advanced', title: '高级（无权限）', disabled: true }\n];\n\nconst panels = {\n basic: '系统名称、主题色、默认语言等基础配置。',\n notify: '邮件、短信、站内信通知开关。',\n security: '登录保护、密码策略、IP 白名单。'\n};\n\nfunction renderPanel(key) {\n return panels[key];\n}\n\n<KoleCollapse items={items} accordion defaultValue=\"basic\" renderPanel={renderPanel} />",
|
||
"vue3": "<template>\n <KoleCollapse v-model=\"active\" :items=\"items\" accordion>\n <template #basic>系统名称、主题色、默认语言等基础配置。</template>\n <template #notify>邮件、短信、站内信通知开关。</template>\n <template #security>登录保护、密码策略、IP 白名单。</template>\n </KoleCollapse>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue3';\n\nconst items = [\n { key: 'basic', title: '基本设置' },\n { key: 'notify', title: '通知设置' },\n { key: 'security', title: '安全设置' },\n { key: 'advanced', title: '高级（无权限）', disabled: true }\n];\nconst active = ref('basic');\n</script>",
|
||
"vue2": "<template>\n <KoleCollapse v-model=\"active\" :items=\"items\" accordion>\n <template #basic>系统名称、主题色、默认语言等基础配置。</template>\n <template #notify>邮件、短信、站内信通知开关。</template>\n <template #security>登录保护、密码策略、IP 白名单。</template>\n </KoleCollapse>\n</template>\n\n<script>\nimport { KoleCollapse } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleCollapse },\n data() {\n return {\n items: [\n { key: 'basic', title: '基本设置' },\n { key: 'notify', title: '通知设置' },\n { key: 'security', title: '安全设置' },\n { key: 'advanced', title: '高级（无权限）', disabled: true }\n ],\n active: 'basic'\n };\n }\n};\n</script>",
|
||
"tsx": "import { KoleCollapse } from 'kole-ui/react';\n\ninterface CollapseItem {\n key: string;\n title: string;\n disabled?: boolean;\n}\n\nconst items: ReadonlyArray<CollapseItem> = [\n { key: 'basic', title: '基本设置' },\n { key: 'notify', title: '通知设置' },\n { key: 'security', title: '安全设置' },\n { key: 'advanced', title: '高级（无权限）', disabled: true },\n];\n\ntype PanelKey = 'basic' | 'notify' | 'security';\nconst panels: Record<PanelKey, string> = {\n basic: '系统名称、主题色、默认语言等基础配置。',\n notify: '邮件、短信、站内信通知开关。',\n security: '登录保护、密码策略、IP 白名单。',\n};\n\nfunction renderPanel(key: string): string | undefined {\n return key in panels ? panels[key as PanelKey] : undefined;\n}\n\n<KoleCollapse items={items} accordion defaultValue=\"basic\" renderPanel={renderPanel} />",
|
||
"vue3ts": "<template>\n <KoleCollapse v-model=\"active\" :items=\"items\" accordion>\n <template #basic>系统名称、主题色、默认语言等基础配置。</template>\n <template #notify>邮件、短信、站内信通知开关。</template>\n <template #security>登录保护、密码策略、IP 白名单。</template>\n </KoleCollapse>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue3';\n\ninterface CollapseItem {\n key: string;\n title: string;\n disabled?: boolean;\n}\n\nconst items: ReadonlyArray<CollapseItem> = [\n { key: 'basic', title: '基本设置' },\n { key: 'notify', title: '通知设置' },\n { key: 'security', title: '安全设置' },\n { key: 'advanced', title: '高级（无权限）', disabled: true },\n];\nconst active = ref<string>('basic');\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleCollapse v-model=\"active\" :items=\"items\" accordion>\n <template #basic>系统名称、主题色、默认语言等基础配置。</template>\n <template #notify>邮件、短信、站内信通知开关。</template>\n <template #security>登录保护、密码策略、IP 白名单。</template>\n </KoleCollapse>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue2';\n\ninterface CollapseItem {\n key: string;\n title: string;\n disabled?: boolean;\n}\n\nexport default Vue.extend({\n components: { KoleCollapse },\n data(): { items: ReadonlyArray<CollapseItem>; active: string } {\n return {\n items: [\n { key: 'basic', title: '基本设置' },\n { key: 'notify', title: '通知设置' },\n { key: 'security', title: '安全设置' },\n { key: 'advanced', title: '高级（无权限）', disabled: true },\n ],\n active: 'basic',\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Collapse.html:24-41 的 data-accordion 块四项（基本设置 is-open / 通知设置 / 安全设置 / 高级（无权限）is-disabled）；prop 名取自 frameworks/Collapse.jsx:15-22（items/accordion/defaultValue/renderPanel）",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 interface CollapseItem + Record<PanelKey, string> 收口 renderPanel 的取值域；vue3ts/vue2ts 用 <script lang=\"ts\"> + ref<string>()；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||
]
|
||
},
|
||
{
|
||
"id": "collapse-ex-2",
|
||
"title": "非手风琴（可同时展开多个）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"kole-collapse\">\n <div class=\"kole-collapse-item is-open\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">订单管理</span>\n </div>\n <div class=\"kole-collapse-content\">查看与处理所有订单。</div>\n </div>\n <div class=\"kole-collapse-item is-open\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">退款管理</span>\n </div>\n <div class=\"kole-collapse-content\">退款审核与到账记录。</div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-collapse\">\n <div class=\"kole-collapse-item is-open\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">订单管理</span>\n </div>\n <div class=\"kole-collapse-content\">查看与处理所有订单。</div>\n </div>\n <div class=\"kole-collapse-item is-open\">\n <div class=\"kole-collapse-header\" role=\"button\" tabindex=\"0\">\n <span class=\"kole-collapse-arrow\">▶</span>\n <span class=\"kole-collapse-title\">退款管理</span>\n </div>\n <div class=\"kole-collapse-content\">退款审核与到账记录。</div>\n </div>\n</div>",
|
||
"jsx": "import { KoleCollapse } from 'kole-ui/react';\n\nconst items = [\n { key: 'orders', title: '订单管理' },\n { key: 'refunds', title: '退款管理' }\n];\n\nconst panels = {\n orders: '查看与处理所有订单。',\n refunds: '退款审核与到账记录。'\n};\n\nfunction renderPanel(key) {\n return panels[key];\n}\n\n<KoleCollapse items={items} value={['orders', 'refunds']} renderPanel={renderPanel} />",
|
||
"vue3": "<template>\n <KoleCollapse v-model=\"openKeys\" :items=\"items\">\n <template #orders>查看与处理所有订单。</template>\n <template #refunds>退款审核与到账记录。</template>\n </KoleCollapse>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue3';\n\nconst items = [\n { key: 'orders', title: '订单管理' },\n { key: 'refunds', title: '退款管理' }\n];\nconst openKeys = ref(['orders', 'refunds']);\n</script>",
|
||
"vue2": "<template>\n <KoleCollapse v-model=\"openKeys\" :items=\"items\">\n <template #orders>查看与处理所有订单。</template>\n <template #refunds>退款审核与到账记录。</template>\n </KoleCollapse>\n</template>\n\n<script>\nimport { KoleCollapse } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleCollapse },\n data() {\n return {\n items: [\n { key: 'orders', title: '订单管理' },\n { key: 'refunds', title: '退款管理' }\n ],\n openKeys: ['orders', 'refunds']\n };\n }\n};\n</script>",
|
||
"tsx": "import { KoleCollapse } from 'kole-ui/react';\n\ninterface CollapseItem {\n key: string;\n title: string;\n}\n\nconst items: ReadonlyArray<CollapseItem> = [\n { key: 'orders', title: '订单管理' },\n { key: 'refunds', title: '退款管理' },\n];\n\ntype PanelKey = 'orders' | 'refunds';\nconst panels: Record<PanelKey, string> = {\n orders: '查看与处理所有订单。',\n refunds: '退款审核与到账记录。',\n};\n\nfunction renderPanel(key: string): string | undefined {\n return key in panels ? panels[key as PanelKey] : undefined;\n}\n\nconst openKeys: ReadonlyArray<PanelKey> = ['orders', 'refunds'];\n\n<KoleCollapse items={items} value={openKeys} renderPanel={renderPanel} />",
|
||
"vue3ts": "<template>\n <KoleCollapse v-model=\"openKeys\" :items=\"items\">\n <template #orders>查看与处理所有订单。</template>\n <template #refunds>退款审核与到账记录。</template>\n </KoleCollapse>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue3';\n\ninterface CollapseItem {\n key: string;\n title: string;\n}\n\nconst items: ReadonlyArray<CollapseItem> = [\n { key: 'orders', title: '订单管理' },\n { key: 'refunds', title: '退款管理' },\n];\n\ntype PanelKey = 'orders' | 'refunds';\nconst openKeys = ref<PanelKey[]>(['orders', 'refunds']);\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleCollapse v-model=\"openKeys\" :items=\"items\">\n <template #orders>查看与处理所有订单。</template>\n <template #refunds>退款审核与到账记录。</template>\n </KoleCollapse>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleCollapse } from 'kole-ui/vue2';\n\ninterface CollapseItem {\n key: string;\n title: string;\n}\n\ntype PanelKey = 'orders' | 'refunds';\n\nexport default Vue.extend({\n components: { KoleCollapse },\n data(): { items: ReadonlyArray<CollapseItem>; openKeys: PanelKey[] } {\n return {\n items: [\n { key: 'orders', title: '订单管理' },\n { key: 'refunds', title: '退款管理' },\n ],\n openKeys: ['orders', 'refunds'],\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Collapse.html:46-55 非手风琴块两项（订单管理、退款管理均 is-open），无 data-accordion 即可同时展开；value 为展开 key 数组（Collapse.jsx:19）"
|
||
]
|
||
}
|
||
]
|
||
}
|