aurora-admin/site/examples/densityswitcher.json

{
 "slug": "densityswitcher",
 "mode": "single",
 "curated": true,
 "examples": [
  {
   "id": "densityswitcher-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">DensitySwitcher 密度切换</h2>\n  <p class=\"kole-desc\">宽松 / 默认 / 紧凑，影响表格、表单间距，可局部独立设置并保存。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-densw\" id=\"sw\">\n      <button class=\"kole-densw-opt\" data-v=\"loose\">宽松</button>\n      <button class=\"kole-densw-opt\" data-v=\"default\">默认</button>\n      <button class=\"kole-densw-opt\" data-v=\"compact\">紧凑</button>\n    </div>\n    <div class=\"kole-densw-demo default\" id=\"demo\">\n      <div class=\"kole-densw-row\">\n        <span>用户管理</span>\n        <span class=\"muted\">128 项</span>\n      </div>\n      <div class=\"kole-densw-row\">\n        <span>角色管理</span>\n        <span class=\"muted\">12 项</span>\n      </div>\n      <div class=\"kole-densw-row\">\n        <span>菜单管理</span>\n        <span class=\"muted\">36 项</span>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>DensitySwitcher 密度切换</h2>\n<p>宽松 / 默认 / 紧凑，影响表格、表单间距，可局部独立设置并保存。</p>\n<div class=\"kole-densw\">\n  <button class=\"kole-densw-opt\">宽松</button>\n  <button class=\"kole-densw-opt\">默认</button>\n  <button class=\"kole-densw-opt\">紧凑</button>\n</div>\n<div class=\"kole-densw-demo default\">\n  <div class=\"kole-densw-row\">\n    <span>用户管理</span>\n    <span class=\"muted\">128 项</span>\n  </div>\n  <div class=\"kole-densw-row\">\n    <span>角色管理</span>\n    <span class=\"muted\">12 项</span>\n  </div>\n  <div class=\"kole-densw-row\">\n    <span>菜单管理</span>\n    <span class=\"muted\">36 项</span>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleDensitySwitcher } from 'kole-ui/react';\n\nconst OPTIONS = [\n  { value: 'loose', label: '宽松' },\n  { value: 'default', label: '默认' },\n  { value: 'compact', label: '紧凑' },\n];\nconst ROWS = [\n  { name: '用户管理', count: '128 项' },\n  { name: '角色管理', count: '12 项' },\n  { name: '菜单管理', count: '36 项' },\n];\n\nexport default function Demo() {\n  const [density, setDensity] = useState('default');\n\n  return <KoleDensitySwitcher value={density} options={OPTIONS} rows={ROWS} onChange={setDensity} />;\n}",
    "vue3": "<template>\n  <KoleDensitySwitcher v-model=\"density\" :options=\"options\" :rows=\"rows\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleDensitySwitcher } from 'kole-ui/vue3';\n\nconst density = ref('default');\nconst options = [\n  { value: 'loose', label: '宽松' },\n  { value: 'default', label: '默认' },\n  { value: 'compact', label: '紧凑' },\n];\nconst rows = [\n  { name: '用户管理', count: '128 项' },\n  { name: '角色管理', count: '12 项' },\n  { name: '菜单管理', count: '36 项' },\n];\n</script>",
    "vue2": "<template>\n  <KoleDensitySwitcher v-model=\"density\" :options=\"options\" :rows=\"rows\" />\n</template>\n\n<script>\nimport { KoleDensitySwitcher } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDensitySwitcher },\n  data() {\n    return {\n      density: 'default',\n      options: [\n        { value: 'loose', label: '宽松' },\n        { value: 'default', label: '默认' },\n        { value: 'compact', label: '紧凑' },\n      ],\n      rows: [\n        { name: '用户管理', count: '128 项' },\n        { name: '角色管理', count: '12 项' },\n        { name: '菜单管理', count: '36 项' },\n      ],\n    };\n  },\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleDensitySwitcher } from 'kole-ui/react';\n\ntype Density = 'loose' | 'default' | 'compact';\n\ninterface DensityOption {\n  value: Density;\n  label: string;\n}\n\ninterface DensityRow {\n  name: string;\n  count: string;\n}\n\nconst OPTIONS: ReadonlyArray<DensityOption> = [\n  { value: 'loose', label: '宽松' },\n  { value: 'default', label: '默认' },\n  { value: 'compact', label: '紧凑' },\n];\nconst ROWS: ReadonlyArray<DensityRow> = [\n  { name: '用户管理', count: '128 项' },\n  { name: '角色管理', count: '12 项' },\n  { name: '菜单管理', count: '36 项' },\n];\n\nexport default function DensitySwitcherDemo(): JSX.Element {\n  const [density, setDensity] = useState<Density>('default');\n\n  return <KoleDensitySwitcher value={density} options={OPTIONS} rows={ROWS} onChange={setDensity} />;\n}",
    "vue3ts": "<template>\n  <KoleDensitySwitcher v-model=\"density\" :options=\"options\" :rows=\"rows\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KoleDensitySwitcher } from 'kole-ui/vue3';\n\ntype Density = 'loose' | 'default' | 'compact';\n\ninterface DensityOption {\n  value: Density;\n  label: string;\n}\n\ninterface DensityRow {\n  name: string;\n  count: string;\n}\n\nconst density = ref<Density>('default');\nconst options: ReadonlyArray<DensityOption> = [\n  { value: 'loose', label: '宽松' },\n  { value: 'default', label: '默认' },\n  { value: 'compact', label: '紧凑' },\n];\nconst rows: ReadonlyArray<DensityRow> = [\n  { name: '用户管理', count: '128 项' },\n  { name: '角色管理', count: '12 项' },\n  { name: '菜单管理', count: '36 项' },\n];\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleDensitySwitcher v-model=\"density\" :options=\"options\" :rows=\"rows\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDensitySwitcher } from 'kole-ui/vue2';\n\ntype Density = 'loose' | 'default' | 'compact';\n\ninterface DensityOption {\n  value: Density;\n  label: string;\n}\n\ninterface DensityRow {\n  name: string;\n  count: string;\n}\n\nexport default Vue.extend({\n  components: { KoleDensitySwitcher },\n  data(): { density: Density; options: ReadonlyArray<DensityOption>; rows: ReadonlyArray<DensityRow> } {\n    return {\n      density: 'default',\n      options: [\n        { value: 'loose', label: '宽松' },\n        { value: 'default', label: '默认' },\n        { value: 'compact', label: '紧凑' },\n      ],\n      rows: [\n        { name: '用户管理', count: '128 项' },\n        { name: '角色管理', count: '12 项' },\n        { name: '菜单管理', count: '36 项' },\n      ],\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/DensitySwitcher.html:16-19 的 .kole-densw 三档按钮（loose/default/compact）与 :21-25 的 .kole-densw-demo 三行列表（用户管理 128 项 / 角色管理 12 项 / 菜单管理 36 项）；options/rows 实参取 frameworks/DensitySwitcher.jsx:4-13 的 OPTIONS/ROWS，当前值与回调取 JSX:15 的 value/onChange",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 useState<Density> + type Density 字面量联合（options.value 与 value 同域）；vue3ts/vue2ts 用 <script lang=\"ts\"> + ref<Density>()；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  }
 ]
}