{
 "slug": "layout",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "layout-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-layout\">\n    <div class=\"kole-layout-layout\">\n      <aside class=\"kole-layout-surface\">\n        导航\n        <br />\n        用户\n        <br />\n        设置\n      </aside>\n      <section class=\"kole-layout-surface\">\n        <div class=\"kole-layout-header\">页头</div>\n        <div class=\"kole-layout-main\">内容区</div>\n        <div class=\"kole-layout-footer\">页脚</div>\n      </section>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-layout\">\n  <div class=\"kole-layout-layout\">\n    <aside class=\"kole-layout-surface\">\n      导航\n      <br />\n      用户\n      <br />\n      设置\n    </aside>\n    <section class=\"kole-layout-surface\">\n      <div class=\"kole-layout-header\">页头</div>\n      <div class=\"kole-layout-main\">内容区</div>\n      <div class=\"kole-layout-footer\">页脚</div>\n    </section>\n  </div>\n</div>",
    "jsx": "import { KoleLayout } from 'kole-ui/react';\n\n<KoleLayout direction=\"row\" gap=\"16px\" collapsed={false}>\n  内容区\n</KoleLayout>",
    "vue3": "<template>\n  <KoleLayout direction=\"row\" gap=\"16px\" :collapsed=\"false\">\n    内容区\n  </KoleLayout>\n</template>\n\n<script setup>\nimport { KoleLayout } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleLayout direction=\"row\" gap=\"16px\" :collapsed=\"false\">\n      内容区\n    </KoleLayout>\n  </div>\n</template>\n\n<script>\nimport { KoleLayout } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleLayout }\n};\n</script>",
    "tsx": "import { KoleLayout } from 'kole-ui/react';\n\nexport default function KoleLayoutDemo(): JSX.Element {\n  return (\n    <KoleLayout direction=\"row\" gap=\"16px\" collapsed={false}>\n      内容区\n    </KoleLayout>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleLayout direction=\"row\" gap=\"16px\" :collapsed=\"false\">\n    内容区\n  </KoleLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleLayout } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('默认与常用变体');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleLayout direction=\"row\" gap=\"16px\" :collapsed=\"false\">\n      内容区\n    </KoleLayout>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleLayout } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleLayout },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "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": "<div class=\"demo-block\">\n  <div class=\"row kole-layout\">\n    <div class=\"kole-layout-surface\" style=\"padding:12px\">搭建后台页面的侧边栏、页头、内容区与页脚，并支持折叠和响应式排列。</div>\n    <span class=\"kole-layout-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-layout\">\n  <div class=\"kole-layout-surface\" style=\"padding:12px\">搭建后台页面的侧边栏、页头、内容区与页脚，并支持折叠和响应式排列。</div>\n  <span class=\"kole-layout-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleLayout } from 'kole-ui/react';\n\n<KoleLayout direction=\"column\" gap=\"8px\" collapsed>\n  客户详情\n</KoleLayout>",
    "vue3": "<template>\n  <KoleLayout direction=\"column\" gap=\"8px\" collapsed>\n    客户详情\n  </KoleLayout>\n</template>\n\n<script setup>\nimport { KoleLayout } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleLayout direction=\"column\" gap=\"8px\" collapsed>\n      客户详情\n    </KoleLayout>\n  </div>\n</template>\n\n<script>\nimport { KoleLayout } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleLayout }\n};\n</script>",
    "tsx": "import { KoleLayout } from 'kole-ui/react';\n\nexport default function KoleLayoutDemo(): JSX.Element {\n  return (\n    <KoleLayout direction=\"column\" gap=\"8px\" collapsed>\n      客户详情\n    </KoleLayout>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleLayout direction=\"column\" gap=\"8px\" collapsed>\n    客户详情\n  </KoleLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleLayout } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleLayout direction=\"column\" gap=\"8px\" collapsed>\n      客户详情\n    </KoleLayout>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleLayout } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleLayout },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Layout.html「状态与使用场景」正文「…并支持折叠和响应式排列」；折叠 collapsed=true 与纵向排列 direction=\"column\" 取自 frameworks/Layout.jsx 的参数表"
   ]
  }
 ]
}