{ "slug": "button", "mode": "scenarios", "examples": [ { "id": "button-ex-1", "title": "类型(默认尺寸)", "titleSrc": "demo", "desc": "", "html": "
\n
\n \n \n \n \n \n
\n
", "preview": { "show": [ [ 2 ] ], "hide": [ [ 0 ], [ 1 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 2, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "\n\n\n\n", "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 主按钮(点击切加载态)\n 次按钮\n 文字按钮\n 链接按钮\n 危险按钮\n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleButton } from 'kole-ui/react';\n\nexport default function ButtonTypeDemo(): JSX.Element {\n const [loading, setLoading] = useState(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 主按钮(点击切加载态)\n 次按钮\n 文字按钮\n 链接按钮\n 危险按钮\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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": "
\n
\n \n \n \n
\n
", "preview": { "show": [ [ 3 ] ], "hide": [ [ 0 ], [ 1 ], [ 2 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 3, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "\n\n", "jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n 大尺寸\n 默认尺寸\n 小尺寸\n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n return (\n <>\n 大尺寸\n 默认尺寸\n 小尺寸\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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": "
\n
\n \n \n \n
\n
", "preview": { "show": [ [ 4 ] ], "hide": [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 5 ], [ 6 ], [ 7 ], [ 4, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "\n\n", "jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n 主按钮\n 次按钮\n 危险按钮\n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n return (\n <>\n 主按钮\n 次按钮\n 危险按钮\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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": "
\n
\n \n \n
\n
", "preview": { "show": [ [ 5 ] ], "hide": [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 6 ], [ 7 ], [ 5, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "\n", "jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n 提交中\n 加载中\n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n return (\n <>\n 提交中\n 加载中\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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 用 ", "vue2": "\n\n", "tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n return (\n <>\n 新建\n 导出\n 删除\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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 }