aurora-admin/site/examples/dropdown.json

{
 "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": "curated",
   "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 { useState } from 'react';\nimport { KoleDropdown } from 'kole-ui/react';\n\nconst items = [\n  { key: 'edit', label: '编辑', icon: '✎' },\n  { key: 'copy', label: '复制' },\n  { divider: true },\n  { key: 'disable', label: '不可用的项', disabled: true },\n  { key: 'delete', label: '删除', danger: true },\n];\n\nexport default function Demo() {\n  const [picked, setPicked] = useState('');\n\n  // 触发器文案走 trigger；divider / disabled / danger / icon 由 items 描述\n  return (\n    <KoleDropdown items={items} trigger=\"操作 ▾\" onSelect={(key) => setPicked(String(key))} />\n  );\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleDropdown } from 'kole-ui/vue3';\n\nconst items = [\n  { key: 'edit', label: '编辑', icon: '✎' },\n  { key: 'copy', label: '复制' },\n  { divider: true },\n  { key: 'disable', label: '不可用的项', disabled: true },\n  { key: 'delete', label: '删除', danger: true },\n];\n\nconst picked = ref('');\nfunction onSelect(key) { picked.value = String(key); }\n</script>\n\n<template>\n  <!-- 触发器文案走默认插槽；divider / disabled / danger / icon 由 items 描述 -->\n  <KoleDropdown :items=\"items\" @select=\"onSelect\">操作 ▾</KoleDropdown>\n</template>",
    "vue2": "<template>\n  <KoleDropdown :items=\"items\" @select=\"onSelect\">操作 ▾</KoleDropdown>\n</template>\n\n<script>\nimport { KoleDropdown } from 'kole-ui/vue2';\n\nconst items = [\n  { key: 'edit', label: '编辑', icon: '✎' },\n  { key: 'copy', label: '复制' },\n  { divider: true },\n  { key: 'disable', label: '不可用的项', disabled: true },\n  { key: 'delete', label: '删除', danger: true },\n];\n\nexport default {\n  name: 'DropdownDemo',\n  components: { KoleDropdown },\n  data() {\n    return { items, picked: '' };\n  },\n  methods: {\n    onSelect(key) { this.picked = String(key); },\n  },\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleDropdown } from 'kole-ui/react';\n\ninterface DropdownItem {\n  key?: string;\n  label?: string;\n  icon?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  divider?: boolean;\n}\n\nconst items: ReadonlyArray<DropdownItem> = [\n  { key: 'edit', label: '编辑', icon: '✎' },\n  { key: 'copy', label: '复制' },\n  { divider: true },\n  { key: 'disable', label: '不可用的项', disabled: true },\n  { key: 'delete', label: '删除', danger: true },\n];\n\nconst trigger: string = '操作 ▾';\n\nexport default function DropdownDemo(): JSX.Element {\n  const [picked, setPicked] = useState<string>('');\n\n  // 触发器文案走 trigger；divider / disabled / danger / icon 由 items 描述\n  return (\n    <KoleDropdown items={items} trigger={trigger} onSelect={(key: string) => setPicked(String(key))} />\n  );\n}",
    "vue3ts": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleDropdown } from 'kole-ui/vue3';\n\ninterface DropdownItem {\n  key?: string;\n  label?: string;\n  icon?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  divider?: boolean;\n}\n\nconst items: ReadonlyArray<DropdownItem> = [\n  { key: 'edit', label: '编辑', icon: '✎' },\n  { key: 'copy', label: '复制' },\n  { divider: true },\n  { key: 'disable', label: '不可用的项', disabled: true },\n  { key: 'delete', label: '删除', danger: true },\n];\n\nconst picked = ref<string>('');\nfunction onSelect(key: string): void {\n  picked.value = String(key);\n}\n</script>\n\n<template>\n  <!-- 触发器文案走默认插槽；divider / disabled / danger / icon 由 items 描述 -->\n  <KoleDropdown :items=\"items\" @select=\"onSelect\">操作 ▾</KoleDropdown>\n</template>",
    "vue2ts": "<template>\n  <div>\n    <KoleDropdown :items=\"items\" @select=\"onSelect\">操作 ▾</KoleDropdown>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDropdown } from 'kole-ui/vue2';\n\ninterface DropdownItem {\n  key?: string;\n  label?: string;\n  icon?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  divider?: boolean;\n}\n\nconst items: ReadonlyArray<DropdownItem> = [\n  { key: 'edit', label: '编辑', icon: '✎' },\n  { key: 'copy', label: '复制' },\n  { divider: true },\n  { key: 'disable', label: '不可用的项', disabled: true },\n  { key: 'delete', label: '删除', danger: true },\n];\n\nexport default Vue.extend({\n  name: 'DropdownDemo',\n  components: { KoleDropdown },\n  data(): { items: ReadonlyArray<DropdownItem>; picked: string } {\n    return { items, picked: '' };\n  },\n  methods: {\n    onSelect(key: string): void {\n      this.picked = String(key);\n    },\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Dropdown.html:41-47 的触发按钮「操作 ▾」与五个菜单项（data-key=edit/copy/disable/delete、✎ 图标、divider、is-disabled、is-danger）",
    "items 形参见 Dropdown.jsx 注释与 Dropdown.vue3.vue defineProps；触发器文案在 Vue 端走默认插槽（Dropdown.vue3.vue 的 <slot>操作</slot>）",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 useState<string> + interface DropdownItem（divider/disabled/danger 见 Dropdown 实现与 items 语义）；vue3ts/vue2ts 用 <script lang=\"ts\"> + onSelect(key: string): void；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  }
 ],
 "curated": true
}