{"slug":"select","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":"api-derived","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 { KoleSelect } from 'kole-ui/react';\n\n<KoleSelect options={options} modelValue={value} />","vue3":"<template>\n  <KoleSelect :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup>\nimport { KoleSelect } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleSelect :options=\"options\" v-model=\"value\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\nexport default { components: { KoleSelect } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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 { KoleSelect } from 'kole-ui/react';\n\n<KoleSelect options={options} modelValue={value} />","vue3":"<template>\n  <KoleSelect :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup>\nimport { KoleSelect } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleSelect :options=\"options\" v-model=\"value\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\nexport default { components: { KoleSelect } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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 { KoleSelect } from 'kole-ui/react';\n\n<KoleSelect searchable placeholder=\"输入关键字\" />","vue3":"<template>\n  <KoleSelect searchable placeholder=\"输入关键字\" />\n</template>\n\n<script setup>\nimport { KoleSelect } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleSelect searchable placeholder=\"输入关键字\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\nexport default { components: { KoleSelect } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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 { KoleSelect } from 'kole-ui/react';\n\n<KoleSelect options={options} modelValue={value} />","vue3":"<template>\n  <KoleSelect :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup>\nimport { KoleSelect } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleSelect :options=\"options\" v-model=\"value\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\nexport default { components: { KoleSelect } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"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":"api-derived","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\n<KoleSelect options={options} modelValue={value} />","vue3":"<template>\n  <KoleSelect :options=\"options\" v-model=\"value\" />\n</template>\n\n<script setup>\nimport { KoleSelect } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleSelect :options=\"options\" v-model=\"value\" />\n</template>\n\n<script>\nimport { KoleSelect } from 'kole-ui/vue2';\nexport default { components: { KoleSelect } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}