{"slug":"dropdown","mode":"single","examples":[{"id":"dropdown-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div class=\"demo\">\n  <h1>Kole UI · Dropdown 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Dropdown 规范：菜单项高32px、内边距左右12px、悬停 #F5F7FA、危险项 #CF1322、面板圆角6px/阴影中/最小宽120px</p>\n  <div class=\"kole-dropdown\" id=\"dd\">\n    <button class=\"kole-dropdown-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\" onclick=\"toggle()\">操作 ▾</button>\n    <div class=\"kole-dropdown-panel\" hidden>\n      <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"edit\">\n        <span class=\"ico\">✎</span>\n        编辑\n      </div>\n      <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\" data-key=\"copy\">复制</div>\n      <div class=\"kole-dropdown-divider\"></div>\n      <div class=\"kole-dropdown-item is-disabled\" role=\"menuitem\" tabindex=\"0\" style=\"pointer-events:none;color:var(--color-text-placeholder)\" data-key=\"disable\">不可用的项</div>\n      <div class=\"kole-dropdown-item is-danger\" role=\"menuitem\" tabindex=\"0\" data-key=\"delete\">删除</div>\n    </div>\n  </div>\n</div>","preview":{"show":[[0]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<h1>Kole UI · Dropdown 组件（纯 H5）</h1>\n<p>对齐 Dropdown 规范：菜单项高32px、内边距左右12px、悬停 #F5F7FA、危险项 #CF1322、面板圆角6px/阴影中/最小宽120px</p>\n<div class=\"kole-dropdown\">\n  <button class=\"kole-dropdown-trigger\" role=\"button\" tabindex=\"0\" aria-expanded=\"false\" aria-haspopup=\"listbox\" onclick=\"toggle()\">操作 ▾</button>\n  <div class=\"kole-dropdown-panel\" hidden>\n    <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\">\n      <span>✎</span>\n      编辑\n    </div>\n    <div class=\"kole-dropdown-item\" role=\"menuitem\" tabindex=\"0\">复制</div>\n    <div class=\"kole-dropdown-divider\"></div>\n    <div class=\"kole-dropdown-item is-disabled\" role=\"menuitem\" tabindex=\"0\" style=\"pointer-events:none;color:var(--color-text-placeholder)\">不可用的项</div>\n    <div class=\"kole-dropdown-item is-danger\" role=\"menuitem\" tabindex=\"0\">删除</div>\n  </div>\n</div>","jsx":"import { KoleDropdown } from 'kole-ui/react';\n\n<KoleDropdown />","vue3":"<template>\n  <KoleDropdown />\n</template>\n\n<script setup>\nimport { KoleDropdown } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleDropdown />\n</template>\n\n<script>\nimport { KoleDropdown } from 'kole-ui/vue2';\nexport default { components: { KoleDropdown } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}