294 lines
23 KiB
JSON
294 lines
23 KiB
JSON
{
|
||
"slug": "button",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "button-ex-1",
|
||
"title": "类型（默认尺寸）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <button class=\"btn btn-primary btn-md\" id=\"demo-toggle\">主按钮（点击切加载态）</button>\n <button class=\"btn btn-default btn-md\">次按钮</button>\n <button class=\"btn btn-text btn-md\">文字按钮</button>\n <button class=\"btn btn-link btn-md\">链接按钮</button>\n <button class=\"btn btn-danger btn-md\">危险按钮</button>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"btn btn-primary btn-md\">主按钮（点击切加载态）</button>\n<button class=\"btn btn-default btn-md\">次按钮</button>\n<button class=\"btn btn-text btn-md\">文字按钮</button>\n<button class=\"btn btn-link btn-md\">链接按钮</button>\n<button class=\"btn btn-danger btn-md\">危险按钮</button>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleButton } from 'kole-ui/react';\n\nexport default function ButtonTypeDemo() {\n const [loading, setLoading] = useState(false);\n\n function submit() {\n setLoading(true);\n }\n function reset() {\n setLoading(false);\n }\n\n return (\n <>\n <KoleButton type=\"primary\" size=\"default\" loading={loading} onClick={submit}>主按钮（点击切加载态）</KoleButton>\n <KoleButton type=\"default\" size=\"default\" onClick={reset}>次按钮</KoleButton>\n <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n </>\n );\n}",
|
||
"vue3": "<template>\n <KoleButton type=\"primary\" size=\"default\" :loading=\"loading\" @click=\"submit\">主按钮（点击切加载态）</KoleButton>\n <KoleButton type=\"default\" size=\"default\" @click=\"reset\">次按钮</KoleButton>\n <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst loading = ref(false);\n\nfunction submit() {\n loading.value = true;\n}\nfunction reset() {\n loading.value = false;\n}\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleButton type=\"primary\" size=\"default\" :loading=\"loading\" @click=\"submit\">主按钮（点击切加载态）</KoleButton>\n <KoleButton type=\"default\" size=\"default\" @click=\"reset\">次按钮</KoleButton>\n <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton },\n data() {\n return { loading: false };\n },\n methods: {\n submit() {\n this.loading = true;\n },\n reset() {\n this.loading = false;\n }\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleButton } from 'kole-ui/react';\n\nexport default function ButtonTypeDemo(): JSX.Element {\n const [loading, setLoading] = useState<boolean>(false);\n\n function submit(): JSX.Element {\n setLoading(true);\n }\n function reset(): JSX.Element {\n setLoading(false);\n }\n\n return (\n <>\n <KoleButton type=\"primary\" size=\"default\" loading={loading} onClick={submit}>主按钮（点击切加载态）</KoleButton>\n <KoleButton type=\"default\" size=\"default\" onClick={reset}>次按钮</KoleButton>\n <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleButton type=\"primary\" size=\"default\" :loading=\"loading\" @click=\"submit\">主按钮（点击切加载态）</KoleButton>\n <KoleButton type=\"default\" size=\"default\" @click=\"reset\">次按钮</KoleButton>\n <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst loading = ref<boolean>(false);\n\nfunction submit() {\n loading.value = true;\n}\nfunction reset() {\n loading.value = false;\n}\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleButton type=\"primary\" size=\"default\" :loading=\"loading\" @click=\"submit\">主按钮（点击切加载态）</KoleButton>\n <KoleButton type=\"default\" size=\"default\" @click=\"reset\">次按钮</KoleButton>\n <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton },\n data(): Record<string, unknown> {\n return { loading: false };\n },\n methods: {\n submit(): void {\n this.loading = true;\n },\n reset(): void {\n this.loading = false;\n }\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Button.html 类型行 5 个按钮的类名 btn-primary/btn-default/btn-text/btn-link/btn-danger 与演示 id=demo-toggle 的主按钮「点击切加载态」；type/size/loading/onClick 见 Button.jsx 形参，sizeMap 默认档为 default。"
|
||
]
|
||
},
|
||
{
|
||
"id": "button-ex-2",
|
||
"title": "尺寸（主按钮）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <button class=\"btn btn-primary btn-lg\">大尺寸</button>\n <button class=\"btn btn-primary btn-md\">默认尺寸</button>\n <button class=\"btn btn-primary btn-sm\">小尺寸</button>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"btn btn-primary btn-lg\">大尺寸</button>\n<button class=\"btn btn-primary btn-md\">默认尺寸</button>\n<button class=\"btn btn-primary btn-sm\">小尺寸</button>",
|
||
"jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n</>",
|
||
"vue3": "<template>\n <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n</template>\n\n<script setup>\nimport { KoleButton } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton }\n};\n</script>",
|
||
"tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n return (\n <>\n <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('尺寸（主按钮）');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Button.html 尺寸行三个按钮的类名 btn-lg / btn-md / btn-sm，对应 Button.jsx 的 sizeMap { large: btn-lg, default: btn-md, small: btn-sm } 与 Button.vue2 props.size validator [large, default, small]。"
|
||
]
|
||
},
|
||
{
|
||
"id": "button-ex-3",
|
||
"title": "禁用态",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <button class=\"btn btn-primary btn-md btn-disabled\" disabled>主按钮</button>\n <button class=\"btn btn-default btn-md btn-disabled\" disabled>次按钮</button>\n <button class=\"btn btn-danger btn-md btn-disabled\" disabled>危险按钮</button>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
4,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"btn btn-primary btn-md btn-disabled\" disabled>主按钮</button>\n<button class=\"btn btn-default btn-md btn-disabled\" disabled>次按钮</button>\n<button class=\"btn btn-danger btn-md btn-disabled\" disabled>危险按钮</button>",
|
||
"jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n</>",
|
||
"vue3": "<template>\n <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n</template>\n\n<script setup>\nimport { KoleButton } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton }\n};\n</script>",
|
||
"tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n return (\n <>\n <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('禁用态');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Button.html 禁用行三个按钮的类名 btn-disabled 与原生 disabled 属性；Button.jsx 形参 disabled 与 Button.vue3 defineProps.disabled 同源，禁用态由 isDisabled = disabled || loading 决定。"
|
||
]
|
||
},
|
||
{
|
||
"id": "button-ex-4",
|
||
"title": "加载态",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <button class=\"btn btn-primary btn-md is-loading\">\n <span class=\"spinner\"></span>\n <span class=\"btn-label\">提交中</span>\n </button>\n <button class=\"btn btn-default btn-md is-loading\">\n <span class=\"spinner\"></span>\n <span class=\"btn-label\">加载中</span>\n </button>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
5
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
5,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"btn btn-primary btn-md is-loading\">\n <span class=\"spinner\"></span>\n <span class=\"btn-label\">提交中</span>\n</button>\n<button class=\"btn btn-default btn-md is-loading\">\n <span class=\"spinner\"></span>\n <span class=\"btn-label\">加载中</span>\n</button>",
|
||
"jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n</>",
|
||
"vue3": "<template>\n <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n</template>\n\n<script setup>\nimport { KoleButton } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton }\n};\n</script>",
|
||
"tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n return (\n <>\n <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('加载态');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Button.html 加载行两个按钮的类名 is-loading 与内联 span.spinner（演示文案「提交中」「加载中」）；loading 见 Button.jsx 形参与 Button.vue3 defineProps.loading，加载态由组件内部渲染 .spinner 与 .btn-label。",
|
||
"TS 形态依据 TS-VARIANTS.md：tsx 用 ReadonlyArray + key 循环（同一件事的 TS 写法），vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 type ButtonKind；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
|
||
]
|
||
},
|
||
{
|
||
"id": "button-ex-5",
|
||
"title": "带图标（内联 SVG 占位）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <button class=\"btn btn-primary btn-md\">\n <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M12 5v14M5 12h14\"></path>\n </svg>\n 新建\n </button>\n <button class=\"btn btn-default btn-md\">\n <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\"></path>\n </svg>\n 导出\n </button>\n <button class=\"btn btn-danger btn-md\">\n <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\"></path>\n </svg>\n 删除\n </button>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
6
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
6,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<button class=\"btn btn-primary btn-md\">\n <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M12 5v14M5 12h14\"></path>\n </svg>\n 新建\n</button>\n<button class=\"btn btn-default btn-md\">\n <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\"></path>\n </svg>\n 导出\n</button>\n<button class=\"btn btn-danger btn-md\">\n <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\"></path>\n </svg>\n 删除\n</button>",
|
||
"jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n</>",
|
||
"vue3": "<template>\n <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n</template>\n\n<script setup>\nimport { KoleButton } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton }\n};\n</script>",
|
||
"tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n return (\n <>\n <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('带图标（内联 SVG 占位）');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleButton },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Button.html 图标行三条内联 svg.btn-icon 的 path d 值（新建 M12 5v14M5 12h14、导出 M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3、删除 M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6）；Button.jsx 的 icon prop 即 svg path d，组件内部渲染同样结构的 svg.btn-icon。"
|
||
]
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|