{ "slug": "densityswitcher", "mode": "single", "curated": true, "examples": [ { "id": "densityswitcher-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n

DensitySwitcher 密度切换

\n

宽松 / 默认 / 紧凑,影响表格、表单间距,可局部独立设置并保存。

\n
\n
\n \n \n \n
\n
\n
\n 用户管理\n 128 项\n
\n
\n 角色管理\n 12 项\n
\n
\n 菜单管理\n 36 项\n
\n
\n
\n
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "

DensitySwitcher 密度切换

\n

宽松 / 默认 / 紧凑,影响表格、表单间距,可局部独立设置并保存。

\n
\n \n \n \n
\n
\n
\n 用户管理\n 128 项\n
\n
\n 角色管理\n 12 项\n
\n
\n 菜单管理\n 36 项\n
\n
", "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 ;\n}", "vue3": "\n\n", "vue2": "\n\n", "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 = [\n { value: 'loose', label: '宽松' },\n { value: 'default', label: '默认' },\n { value: 'compact', label: '紧凑' },\n];\nconst ROWS: ReadonlyArray = [\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('default');\n\n return ;\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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 + type Density 字面量联合(options.value 与 value 同域);vue3ts/vue2ts 用