{
 "slug": "layoutswitcher",
 "curated": true,
 "mode": "single",
 "examples": [
  {
   "id": "layoutswitcher-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">LayoutSwitcher 布局切换</h2>\n  <p class=\"kole-desc\">侧边 / 顶部 / 混合导航布局切换，保存偏好。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-layoutsw\" id=\"sw\">\n      <div class=\"kole-layoutsw-opt\" role=\"radio\" tabindex=\"0\" data-v=\"side\">\n        <div class=\"kole-layoutsw-mini\" role=\"radio\" tabindex=\"0\">\n          <div class=\"s-body\">\n            <div class=\"s-side\"></div>\n            <div class=\"s-main\"></div>\n          </div>\n        </div>\n        <div class=\"kole-layoutsw-label\">侧边布局</div>\n      </div>\n      <div class=\"kole-layoutsw-opt\" role=\"radio\" tabindex=\"0\" data-v=\"top\">\n        <div class=\"kole-layoutsw-mini\" role=\"radio\" tabindex=\"0\">\n          <div class=\"s-top\"></div>\n          <div class=\"s-body\">\n            <div class=\"s-main\"></div>\n          </div>\n        </div>\n        <div class=\"kole-layoutsw-label\">顶部布局</div>\n      </div>\n      <div class=\"kole-layoutsw-opt\" role=\"radio\" tabindex=\"0\" data-v=\"mixed\">\n        <div class=\"kole-layoutsw-mini\" role=\"radio\" tabindex=\"0\">\n          <div class=\"s-top\"></div>\n          <div class=\"s-body\">\n            <div class=\"s-side\"></div>\n            <div class=\"s-main\"></div>\n          </div>\n        </div>\n        <div class=\"kole-layoutsw-label\">混合布局</div>\n      </div>\n    </div>\n    <p class=\"kole-code-tip\" id=\"out\"></p>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>LayoutSwitcher 布局切换</h2>\n<p>侧边 / 顶部 / 混合导航布局切换，保存偏好。</p>\n<div class=\"kole-layoutsw\">\n  <div class=\"kole-layoutsw-opt\" role=\"radio\" tabindex=\"0\">\n    <div class=\"kole-layoutsw-mini\" role=\"radio\" tabindex=\"0\">\n      <div class=\"s-body\">\n        <div class=\"s-side\"></div>\n        <div class=\"s-main\"></div>\n      </div>\n    </div>\n    <div class=\"kole-layoutsw-label\">侧边布局</div>\n  </div>\n  <div class=\"kole-layoutsw-opt\" role=\"radio\" tabindex=\"0\">\n    <div class=\"kole-layoutsw-mini\" role=\"radio\" tabindex=\"0\">\n      <div class=\"s-top\"></div>\n      <div class=\"s-body\">\n        <div class=\"s-main\"></div>\n      </div>\n    </div>\n    <div class=\"kole-layoutsw-label\">顶部布局</div>\n  </div>\n  <div class=\"kole-layoutsw-opt\" role=\"radio\" tabindex=\"0\">\n    <div class=\"kole-layoutsw-mini\" role=\"radio\" tabindex=\"0\">\n      <div class=\"s-top\"></div>\n      <div class=\"s-body\">\n        <div class=\"s-side\"></div>\n        <div class=\"s-main\"></div>\n      </div>\n    </div>\n    <div class=\"kole-layoutsw-label\">混合布局</div>\n  </div>\n</div>\n<p></p>",
    "jsx": "import { useState } from 'react';\nimport { KoleLayoutSwitcher } from 'kole-ui/react';\n\nfunction Demo() {\n  const [layout, setLayout] = useState('side');\n  return (\n    <>\n      <KoleLayoutSwitcher value={layout} onChange={setLayout} />\n      <p>当前布局：{layout}</p>\n    </>\n  );\n}",
    "vue3": "<template>\n  <KoleLayoutSwitcher v-model=\"layout\" :options=\"options\" />\n  <p>当前布局：{{ layout }}</p>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleLayoutSwitcher } from 'kole-ui/vue3';\n\nconst layout = ref('side');\nconst options = [\n  { value: 'side', label: '侧边布局' },\n  { value: 'top', label: '顶部布局' },\n  { value: 'mixed', label: '混合布局' },\n];\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleLayoutSwitcher v-model=\"layout\" :options=\"options\" />\n    <p>当前布局：{{ layout }}</p>\n  </div>\n</template>\n\n<script>\nimport { KoleLayoutSwitcher } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleLayoutSwitcher },\n  data() {\n    return {\n      layout: 'side',\n      options: [\n        { value: 'side', label: '侧边布局' },\n        { value: 'top', label: '顶部布局' },\n        { value: 'mixed', label: '混合布局' },\n      ],\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleLayoutSwitcher } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n  const [layout, setLayout] = useState<string>('side');\n  return (\n    <>\n      <KoleLayoutSwitcher value={layout} onChange={setLayout} />\n      <p>当前布局：{layout}</p>\n    </>\n  );\n}\n\nexport default Demo;",
    "vue3ts": "<template>\n\n  <KoleLayoutSwitcher v-model=\"layout\" :options=\"options\" />\n  <p>当前布局：{{ layout }}</p>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleLayoutSwitcher } from 'kole-ui/vue3';\n\nconst layout = ref<string>('side');\nconst options = [\n  { value: 'side', label: '侧边布局' },\n  { value: 'top', label: '顶部布局' },\n  { value: 'mixed', label: '混合布局' },\n];\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleLayoutSwitcher v-model=\"layout\" :options=\"options\" />\n    <p>当前布局：{{ layout }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleLayoutSwitcher } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleLayoutSwitcher },\n  data(): Record<string, unknown> {\n    return {\n      layout: 'side',\n      options: [\n        { value: 'side', label: '侧边布局' },\n        { value: 'top', label: '顶部布局' },\n        { value: 'mixed', label: '混合布局' },\n      ],\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/LayoutSwitcher.html:11-33 三个 .kole-layoutsw-opt[data-v=side|top|mixed] 与标签「侧边布局/顶部布局/混合布局」；Vue3/Vue2 的 options 为组件真实 prop（默认值即这三项），React 端 frameworks/LayoutSwitcher.jsx 只暴露 value/onChange 且内联同一份 OPTIONS"
   ]
  }
 ]
}