{ "slug": "layout", "curated": true, "mode": "scenarios", "examples": [ { "id": "layout-ex-1", "title": "默认与常用变体", "titleSrc": "demo", "desc": "", "html": "
\n
\n
\n \n
\n
页头
\n
内容区
\n
页脚
\n
\n
\n
\n
", "preview": { "show": [ [ 0, 2 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 3 ], [ 0, 2, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
\n
\n \n
\n
页头
\n
内容区
\n
页脚
\n
\n
\n
", "jsx": "import { KoleLayout } from 'kole-ui/react';\n\n\n 内容区\n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleLayout } from 'kole-ui/react';\n\nexport default function KoleLayoutDemo(): JSX.Element {\n return (\n \n 内容区\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Layout.html 默认示例的 .kole-layout-layout(aside 导航 用户 设置 + section 页头/内容区/页脚);组件 prop 见 frameworks/Layout.jsx 的 direction / collapsed / gap,插槽内容即内容区" ] }, { "id": "layout-ex-2", "title": "状态与使用场景", "titleSrc": "demo", "desc": "", "html": "
\n
\n
搭建后台页面的侧边栏、页头、内容区与页脚,并支持折叠和响应式排列。
\n 支持键盘焦点、状态反馈和令牌化样式。\n
\n

零运行时依赖;数据请求、权限和国际化由宿主接入方决定。

\n
", "preview": { "show": [ [ 0, 3 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 2 ], [ 0, 3, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
\n
搭建后台页面的侧边栏、页头、内容区与页脚,并支持折叠和响应式排列。
\n 支持键盘焦点、状态反馈和令牌化样式。\n
\n

零运行时依赖;数据请求、权限和国际化由宿主接入方决定。

", "jsx": "import { KoleLayout } from 'kole-ui/react';\n\n\n 客户详情\n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleLayout } from 'kole-ui/react';\n\nexport default function KoleLayoutDemo(): JSX.Element {\n return (\n \n 客户详情\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Layout.html「状态与使用场景」正文「…并支持折叠和响应式排列」;折叠 collapsed=true 与纵向排列 direction=\"column\" 取自 frameworks/Layout.jsx 的参数表" ] } ] }