338 lines
29 KiB
JSON
338 lines
29 KiB
JSON
{
|
||
"slug": "select",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "select-ex-1",
|
||
"title": "单选",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"kole-select\" data-mode=\"single\" data-name=\"city\" data-select>\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">请选择城市</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\" hidden>\n <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"bj\">\n 北京\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"sh\">\n 上海\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"gz\">\n 广州\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"sz\">\n 深圳\n <span class=\"check\">✓</span>\n </div>\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-select\">\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">请选择城市</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\" hidden>\n <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"bj\">\n 北京\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"sh\">\n 上海\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"gz\">\n 广州\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"sz\">\n 深圳\n <span class=\"check\">✓</span>\n </div>\n </div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst cities = [\n { value: 'bj', label: '北京' },\n { value: 'sh', label: '上海' },\n { value: 'gz', label: '广州' },\n { value: 'sz', label: '深圳' }\n];\n\nexport default function Demo() {\n const [city, setCity] = useState('bj');\n return <KoleSelect options={cities} value={city} placeholder=\"请选择城市\" onChange={setCity} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst cities = [\n { value: 'bj', label: '北京' },\n { value: 'sh', label: '上海' },\n { value: 'gz', label: '广州' },\n { value: 'sz', label: '深圳' }\n];\nconst city = ref('bj');\n</script>\n\n<template>\n <KoleSelect :options=\"cities\" v-model=\"city\" placeholder=\"请选择城市\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSelect :options=\"cities\" v-model=\"city\" placeholder=\"请选择城市\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data() {\n return {\n city: 'bj',\n cities: [\n { value: 'bj', label: '北京' },\n { value: 'sh', label: '上海' },\n { value: 'gz', label: '广州' },\n { value: 'sz', label: '深圳' }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst cities = [\n { value: 'bj', label: '北京' },\n { value: 'sh', label: '上海' },\n { value: 'gz', label: '广州' },\n { value: 'sz', label: '深圳' }\n];\n\nexport default function Demo(): JSX.Element {\n const [city, setCity] = useState<string>('bj');\n return <KoleSelect options={cities} value={city} placeholder=\"请选择城市\" onChange={setCity} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleSelect :options=\"cities\" v-model=\"city\" placeholder=\"请选择城市\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst cities = [\n { value: 'bj', label: '北京' },\n { value: 'sh', label: '上海' },\n { value: 'gz', label: '广州' },\n { value: 'sz', label: '深圳' }\n];\nconst city = ref<string>('bj');\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSelect :options=\"cities\" v-model=\"city\" placeholder=\"请选择城市\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data(): Record<string, unknown> {\n return {\n city: 'bj',\n cities: [\n { value: 'bj', label: '北京' },\n { value: 'sh', label: '上海' },\n { value: 'gz', label: '广州' },\n { value: 'sz', label: '深圳' }\n ]\n };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Select.html 第 65-72 行「1. 单选」块：data-mode=\"single\"、data-name=\"city\"、触发器占位「请选择城市」，面板四个选项 data-value 为 bj/sh/gz/sz（北京/上海/广州/深圳），其中 bj 带 is-selected。",
|
||
"prop 名见 frameworks/Select.jsx 第 18-30 行参数表（options / value / placeholder / onChange）与 frameworks/Select.vue3.vue 第 53-61 行 defineProps（modelValue）；三端受控值：React 为 value、Vue3 为 modelValue。"
|
||
]
|
||
},
|
||
{
|
||
"id": "select-ex-2",
|
||
"title": "多选",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"kole-select\" data-mode=\"multiple\" data-name=\"role\" data-select>\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">请选择角色</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\" hidden>\n <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"admin\">\n 管理员\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"editor\">\n 编辑\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"viewer\">\n 访客\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option is-disabled\" role=\"option\" aria-disabled=\"true\" data-disabled=\"1\" data-value=\"guest\">\n 受限访客\n <span class=\"check\">✓</span>\n </div>\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-select\">\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">请选择角色</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\" hidden>\n <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"admin\">\n 管理员\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"editor\">\n 编辑\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"viewer\">\n 访客\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option is-disabled\" role=\"option\" aria-disabled=\"true\" data-disabled=\"1\" data-value=\"guest\">\n 受限访客\n <span class=\"check\">✓</span>\n </div>\n </div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst roles = [\n { value: 'admin', label: '管理员' },\n { value: 'editor', label: '编辑' },\n { value: 'viewer', label: '访客' },\n { value: 'guest', label: '受限访客', disabled: true }\n];\n\nexport default function Demo() {\n const [picked, setPicked] = useState(['admin']);\n // multiple：受控值是数组，选中项以标签形式回填触发器（Select.jsx 第 102-112 行）\n return <KoleSelect options={roles} multiple value={picked} placeholder=\"请选择角色\" onChange={setPicked} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst roles = [\n { value: 'admin', label: '管理员' },\n { value: 'editor', label: '编辑' },\n { value: 'viewer', label: '访客' },\n { value: 'guest', label: '受限访客', disabled: true }\n];\nconst picked = ref(['admin']);\n</script>\n\n<template>\n <KoleSelect :options=\"roles\" multiple v-model=\"picked\" placeholder=\"请选择角色\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSelect :options=\"roles\" multiple v-model=\"picked\" placeholder=\"请选择角色\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data() {\n return {\n picked: ['admin'],\n roles: [\n { value: 'admin', label: '管理员' },\n { value: 'editor', label: '编辑' },\n { value: 'viewer', label: '访客' },\n { value: 'guest', label: '受限访客', disabled: true }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst roles = [\n { value: 'admin', label: '管理员' },\n { value: 'editor', label: '编辑' },\n { value: 'viewer', label: '访客' },\n { value: 'guest', label: '受限访客', disabled: true }\n];\n\nexport default function Demo(): JSX.Element {\n const [picked, setPicked] = useState(['admin']);\n // multiple：受控值是数组，选中项以标签形式回填触发器（Select.jsx 第 102-112 行）\n return <KoleSelect options={roles} multiple value={picked} placeholder=\"请选择角色\" onChange={setPicked} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleSelect :options=\"roles\" multiple v-model=\"picked\" placeholder=\"请选择角色\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('多选');\nconst roles = [\n { value: 'admin', label: '管理员' },\n { value: 'editor', label: '编辑' },\n { value: 'viewer', label: '访客' },\n { value: 'guest', label: '受限访客', disabled: true }\n];\nconst picked = ref(['admin']);\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSelect :options=\"roles\" multiple v-model=\"picked\" placeholder=\"请选择角色\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data(): Record<string, unknown> {\n return {\n picked: ['admin'],\n roles: [\n { value: 'admin', label: '管理员' },\n { value: 'editor', label: '编辑' },\n { value: 'viewer', label: '访客' },\n { value: 'guest', label: '受限访客', disabled: true }\n ]\n };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Select.html 第 80-87 行「2. 多选」块：data-mode=\"multiple\"、data-name=\"role\"、占位「请选择角色」，选项为 admin/editor/viewer（管理员/编辑/访客）与带 data-disabled=\"1\" 的 guest（受限访客），其中 admin 带 is-selected。",
|
||
"multiple 见 frameworks/Select.jsx 第 23 行参数表与第 73-77 行数组增删逻辑；Vue 端同名 prop 见 Select.vue3.vue 第 57 行。禁用选项由 options 项的 disabled 字段决定（Select.jsx 第 72 行）。"
|
||
]
|
||
},
|
||
{
|
||
"id": "select-ex-3",
|
||
"title": "可搜索",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"kole-select\" data-mode=\"single\" data-name=\"user\" data-searchable=\"1\" data-select>\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">搜索并选择用户</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\" hidden>\n <div class=\"kole-select-search\">\n <input placeholder=\"输入关键字\" />\n </div>\n <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"u1\">\n 张伟\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"u2\">\n 李娜\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"u3\">\n 王芳\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"u4\">\n 刘强\n <span class=\"check\">✓</span>\n </div>\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
4
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
4,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-select\" data-searchable=\"1\">\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">搜索并选择用户</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\" hidden>\n <div class=\"kole-select-search\">\n <input placeholder=\"输入关键字\" />\n </div>\n <div class=\"kole-select-option is-selected\" role=\"option\" aria-selected=\"true\" data-value=\"u1\">\n 张伟\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"u2\">\n 李娜\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"u3\">\n 王芳\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"u4\">\n 刘强\n <span class=\"check\">✓</span>\n </div>\n </div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst users = [\n { value: 'u1', label: '张伟' },\n { value: 'u2', label: '李娜' },\n { value: 'u3', label: '王芳' },\n { value: 'u4', label: '刘强' }\n];\n\nexport default function Demo() {\n const [user, setUser] = useState('u1');\n return <KoleSelect options={users} searchable value={user} placeholder=\"搜索并选择用户\" onChange={setUser} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst users = [\n { value: 'u1', label: '张伟' },\n { value: 'u2', label: '李娜' },\n { value: 'u3', label: '王芳' },\n { value: 'u4', label: '刘强' }\n];\nconst user = ref('u1');\n</script>\n\n<template>\n <KoleSelect :options=\"users\" searchable v-model=\"user\" placeholder=\"搜索并选择用户\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSelect :options=\"users\" searchable v-model=\"user\" placeholder=\"搜索并选择用户\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data() {\n return {\n user: 'u1',\n users: [\n { value: 'u1', label: '张伟' },\n { value: 'u2', label: '李娜' },\n { value: 'u3', label: '王芳' },\n { value: 'u4', label: '刘强' }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst users = [\n { value: 'u1', label: '张伟' },\n { value: 'u2', label: '李娜' },\n { value: 'u3', label: '王芳' },\n { value: 'u4', label: '刘强' }\n];\n\nexport default function Demo(): JSX.Element {\n const [user, setUser] = useState<string>('u1');\n return <KoleSelect options={users} searchable value={user} placeholder=\"搜索并选择用户\" onChange={setUser} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleSelect :options=\"users\" searchable v-model=\"user\" placeholder=\"搜索并选择用户\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst users = [\n { value: 'u1', label: '张伟' },\n { value: 'u2', label: '李娜' },\n { value: 'u3', label: '王芳' },\n { value: 'u4', label: '刘强' }\n];\nconst user = ref<string>('u1');\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSelect :options=\"users\" searchable v-model=\"user\" placeholder=\"搜索并选择用户\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data(): Record<string, unknown> {\n return {\n user: 'u1',\n users: [\n { value: 'u1', label: '张伟' },\n { value: 'u2', label: '李娜' },\n { value: 'u3', label: '王芳' },\n { value: 'u4', label: '刘强' }\n ]\n };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Select.html 第 95-103 行「3. 可搜索」块：data-searchable=\"1\"、data-name=\"user\"、占位「搜索并选择用户」，选项为 u1-u4（张伟/李娜/王芳/刘强），其中 u1 带 is-selected；第 98 行面板顶部是搜索输入框。",
|
||
"searchable 见 frameworks/Select.jsx 第 25 行参数表与第 41-45 行的 label 过滤（Vue 端 Select.vue3.vue 第 72-76 行）；搜索框与面板的渲染条件见 Select.jsx 第 123-132 行。"
|
||
]
|
||
},
|
||
{
|
||
"id": "select-ex-4",
|
||
"title": "分组",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"kole-select\" data-grouped=\"1\" data-mode=\"single\" data-name=\"dept\" data-select>\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">请选择部门</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\" hidden>\n <div class=\"kole-select-group-label\">技术中心</div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"fe\">\n 前端组\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"be\">\n 后端组\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-group-label\">产品中心</div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"pm\">\n 产品组\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"ux\">\n 设计组\n <span class=\"check\">✓</span>\n </div>\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
5
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
6
|
||
],
|
||
[
|
||
0,
|
||
5,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-select\">\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">请选择部门</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\" hidden>\n <div class=\"kole-select-group-label\">技术中心</div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"fe\">\n 前端组\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"be\">\n 后端组\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-group-label\">产品中心</div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"pm\">\n 产品组\n <span class=\"check\">✓</span>\n </div>\n <div class=\"kole-select-option\" role=\"option\" data-value=\"ux\">\n 设计组\n <span class=\"check\">✓</span>\n </div>\n </div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst groups = [\n { label: '技术中心', options: [\n { value: 'fe', label: '前端组' },\n { value: 'be', label: '后端组' }\n ] },\n { label: '产品中心', options: [\n { value: 'pm', label: '产品组' },\n { value: 'ux', label: '设计组' }\n ] }\n];\n\nexport default function Demo() {\n const [dept, setDept] = useState('');\n // groups：面板按分组标题渲染，组内仍是 { value, label } 选项（Select.jsx 第 134-148 行）\n return <KoleSelect groups={groups} value={dept} placeholder=\"请选择部门\" onChange={setDept} />;\n}",
|
||
"vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst groups = [\n { label: '技术中心', options: [\n { value: 'fe', label: '前端组' },\n { value: 'be', label: '后端组' }\n ] },\n { label: '产品中心', options: [\n { value: 'pm', label: '产品组' },\n { value: 'ux', label: '设计组' }\n ] }\n];\nconst dept = ref('');\n</script>\n\n<template>\n <KoleSelect :groups=\"groups\" v-model=\"dept\" placeholder=\"请选择部门\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSelect :groups=\"groups\" v-model=\"dept\" placeholder=\"请选择部门\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data() {\n return {\n dept: '',\n groups: [\n { label: '技术中心', options: [\n { value: 'fe', label: '前端组' },\n { value: 'be', label: '后端组' }\n ] },\n { label: '产品中心', options: [\n { value: 'pm', label: '产品组' },\n { value: 'ux', label: '设计组' }\n ] }\n ]\n };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleSelect } from 'kole-ui/react';\n\nconst groups = [\n { label: '技术中心', options: [\n { value: 'fe', label: '前端组' },\n { value: 'be', label: '后端组' }\n ] },\n { label: '产品中心', options: [\n { value: 'pm', label: '产品组' },\n { value: 'ux', label: '设计组' }\n ] }\n];\n\nexport default function Demo(): JSX.Element {\n const [dept, setDept] = useState<string>('');\n // groups：面板按分组标题渲染，组内仍是 { value, label } 选项（Select.jsx 第 134-148 行）\n return <KoleSelect groups={groups} value={dept} placeholder=\"请选择部门\" onChange={setDept} />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleSelect :groups=\"groups\" v-model=\"dept\" placeholder=\"请选择部门\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst groups = [\n { label: '技术中心', options: [\n { value: 'fe', label: '前端组' },\n { value: 'be', label: '后端组' }\n ] },\n { label: '产品中心', options: [\n { value: 'pm', label: '产品组' },\n { value: 'ux', label: '设计组' }\n ] }\n];\nconst dept = ref<string>('');\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSelect :groups=\"groups\" v-model=\"dept\" placeholder=\"请选择部门\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data(): Record<string, unknown> {\n return {\n dept: '',\n groups: [\n { label: '技术中心', options: [\n { value: 'fe', label: '前端组' },\n { value: 'be', label: '后端组' }\n ] },\n { label: '产品中心', options: [\n { value: 'pm', label: '产品组' },\n { value: 'ux', label: '设计组' }\n ] }\n ]\n };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Select.html 第 111-119 行「4. 分组」块：data-grouped=\"1\"、data-name=\"dept\"、占位「请选择部门」，分组标题为「技术中心」（fe 前端组 / be 后端组）与「产品中心」（pm 产品组 / ux 设计组），组内无 is-selected。",
|
||
"groups 见 frameworks/Select.jsx 第 22 行参数表（[{ label, options }]）与第 134-148 行的分组渲染，Vue 端 Select.vue3.vue 第 56 行；分组模式下 labelOf 会从各组 options 里拍平查找（Select.jsx 第 58-63 行）。"
|
||
]
|
||
},
|
||
{
|
||
"id": "select-ex-5",
|
||
"title": "空态（无匹配选项）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"kole-select is-open\" data-mode=\"single\" data-name=\"empty\" data-select>\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"true\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">搜索无结果</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\">\n <div class=\"kole-select-empty\">无匹配选项</div>\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0,
|
||
6
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
0
|
||
],
|
||
[
|
||
0,
|
||
1
|
||
],
|
||
[
|
||
0,
|
||
2
|
||
],
|
||
[
|
||
0,
|
||
3
|
||
],
|
||
[
|
||
0,
|
||
4
|
||
],
|
||
[
|
||
0,
|
||
5
|
||
],
|
||
[
|
||
0,
|
||
6,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-select is-open\">\n <div class=\"kole-select-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"true\" aria-haspopup=\"listbox\">\n <span class=\"placeholder\">搜索无结果</span>\n <span class=\"caret\">▾</span>\n </div>\n <div class=\"kole-select-panel\">\n <div class=\"kole-select-empty\">无匹配选项</div>\n </div>\n</div>",
|
||
"jsx": "import { KoleSelect } from 'kole-ui/react';\n\nexport default function Demo() {\n // 无可选项（或搜索无匹配）时，面板渲染 .kole-select-empty「无匹配选项」（Select.jsx 第 161 行）\n return <KoleSelect options={[]} searchable placeholder=\"搜索无结果\" />;\n}",
|
||
"vue3": "<script setup>\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst noOptions = [];\n</script>\n\n<template>\n <KoleSelect :options=\"noOptions\" searchable placeholder=\"搜索无结果\" />\n</template>",
|
||
"vue2": "<template>\n <KoleSelect :options=\"noOptions\" searchable placeholder=\"搜索无结果\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data() {\n return { noOptions: [] };\n }\n};\n</script>",
|
||
"tsx": "import { KoleSelect } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n // 无可选项（或搜索无匹配）时，面板渲染 .kole-select-empty「无匹配选项」（Select.jsx 第 161 行）\n return <KoleSelect options={[]} searchable placeholder=\"搜索无结果\" />;\n}",
|
||
"vue3ts": "<template>\n\n <KoleSelect :options=\"noOptions\" searchable placeholder=\"搜索无结果\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSelect } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('空态（无匹配选项）');\nconst noOptions = [];\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleSelect :options=\"noOptions\" searchable placeholder=\"搜索无结果\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSelect } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleSelect },\n data(): Record<string, unknown> {\n return { noOptions: [] };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Select.html 第 128-131 行「5. 空态（无匹配选项）」块：根类含 is-open、aria-expanded=\"true\"，触发器占位「搜索无结果」，面板内只有一个 .kole-select-empty「无匹配选项」。",
|
||
"空态判据是过滤后无选项（frameworks/Select.jsx 第 56 行 isEmpty、第 161 行渲染），因此片段给 searchable + 空 options；Vue 端同见 Select.vue3.vue 第 85-87 行。"
|
||
]
|
||
}
|
||
]
|
||
}
|