114 lines
6.3 KiB
JSON
114 lines
6.3 KiB
JSON
{
|
||
"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 的参数表"
|
||
]
|
||
}
|
||
]
|
||
}
|