449 lines
24 KiB
JSON
449 lines
24 KiB
JSON
{
|
||
"slug": "input",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "input-ex-1",
|
||
"title": "默认输入框",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"field kole-field\">\n <div class=\"kole-input\">\n <input placeholder=\"请输入客户名称\" />\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
8
|
||
],
|
||
[
|
||
9
|
||
],
|
||
[
|
||
2,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-field\">\n <div class=\"kole-input\">\n <input placeholder=\"请输入客户名称\" />\n </div>\n</div>",
|
||
"jsx": "import { KoleInput } from 'kole-ui/react';\n\n<KoleInput placeholder=\"请输入客户名称\" />",
|
||
"vue3": "<template>\n <KoleInput placeholder=\"请输入客户名称\" />\n</template>\n\n<script setup>\nimport { KoleInput } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleInput placeholder=\"请输入客户名称\" />\n </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput }\n};\n</script>",
|
||
"tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n return (\n <KoleInput placeholder=\"请输入客户名称\" />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleInput placeholder=\"请输入客户名称\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('默认输入框');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleInput placeholder=\"请输入客户名称\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Input.html 默认示例标记中的 placeholder=\"请输入客户名称\""
|
||
]
|
||
},
|
||
{
|
||
"id": "input-ex-2",
|
||
"title": "三种尺寸",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"field kole-field\">\n <div class=\"kole-input kole-input-lg\">\n <input placeholder=\"大尺寸\" />\n </div>\n </div>\n <div class=\"field kole-field\">\n <div class=\"kole-input kole-input-md\">\n <input placeholder=\"默认尺寸\" />\n </div>\n </div>\n <div class=\"field kole-field\">\n <div class=\"kole-input kole-input-sm\">\n <input placeholder=\"小尺寸\" />\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
8
|
||
],
|
||
[
|
||
9
|
||
],
|
||
[
|
||
3,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-field\">\n <div class=\"kole-input kole-input-lg\">\n <input placeholder=\"大尺寸\" />\n </div>\n</div>\n<div class=\"kole-field\">\n <div class=\"kole-input\">\n <input placeholder=\"默认尺寸\" />\n </div>\n</div>\n<div class=\"kole-field\">\n <div class=\"kole-input kole-input-sm\">\n <input placeholder=\"小尺寸\" />\n </div>\n</div>",
|
||
"jsx": "import { KoleInput } from 'kole-ui/react';\n\n<>\n <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n</>",
|
||
"vue3": "<template>\n <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n</template>\n\n<script setup>\nimport { KoleInput } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput }\n};\n</script>",
|
||
"tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n return (\n <>\n <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('三种尺寸');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Input.html 三种尺寸示例的 kole-input-lg / kole-input-md / kole-input-sm 三档与各自 placeholder；size 取值见 data.json contract dims size:[default,large,small]"
|
||
]
|
||
},
|
||
{
|
||
"id": "input-ex-3",
|
||
"title": "错误态（含错误提示）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"field kole-field has-error\">\n <div class=\"kole-input is-error\">\n <input value=\"abc\" />\n </div>\n <span class=\"error-text\">联系电话格式不正确，请检查后重试</span>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
8
|
||
],
|
||
[
|
||
9
|
||
],
|
||
[
|
||
4,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-field\">\n <div class=\"kole-input is-error\">\n <input value=\"abc\" />\n </div>\n <span class=\"error-text\">联系电话格式不正确，请检查后重试</span>\n</div>",
|
||
"jsx": "import { KoleInput } from 'kole-ui/react';\n\n<KoleInput\n defaultValue=\"abc\"\n error\n errorText=\"联系电话格式不正确，请检查后重试\"\n/>",
|
||
"vue3": "<template>\n <KoleInput\n v-model=\"phone\"\n error\n error-text=\"联系电话格式不正确，请检查后重试\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst phone = ref('abc');\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleInput\n v-model=\"phone\"\n error\n error-text=\"联系电话格式不正确，请检查后重试\"\n />\n </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data() {\n return { phone: 'abc' };\n }\n};\n</script>",
|
||
"tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n return (\n <KoleInput\n defaultValue=\"abc\"\n error\n errorText=\"联系电话格式不正确，请检查后重试\"\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleInput\n v-model=\"phone\"\n error\n error-text=\"联系电话格式不正确，请检查后重试\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst phone = ref<string>('abc');\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleInput\n v-model=\"phone\"\n error\n error-text=\"联系电话格式不正确，请检查后重试\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data(): Record<string, unknown> {\n return { phone: 'abc' };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Input.html 错误态示例的 value=\"abc\" 与 .error-text 文案「联系电话格式不正确，请检查后重试」；对应 props error / errorText"
|
||
]
|
||
},
|
||
{
|
||
"id": "input-ex-4",
|
||
"title": "前后缀",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"field kole-field\">\n <div class=\"kole-input\">\n <span class=\"affix prefix\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n <path d=\"M21 21l-4-4\"></path>\n </svg>\n </span>\n <input placeholder=\"搜索订单编号 / 客户名称\" />\n </div>\n </div>\n <div class=\"field kole-field\">\n <div class=\"kole-input\">\n <input value=\"kole\" />\n <span class=\"affix suffix\">.com</span>\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
5
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
8
|
||
],
|
||
[
|
||
9
|
||
],
|
||
[
|
||
5,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-field\">\n <div class=\"kole-input\">\n <span class=\"affix\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n <path d=\"M21 21l-4-4\"></path>\n </svg>\n </span>\n <input placeholder=\"搜索订单编号 / 客户名称\" />\n </div>\n</div>\n<div class=\"kole-field\">\n <div class=\"kole-input\">\n <input value=\"kole\" />\n <span class=\"affix\">.com</span>\n </div>\n</div>",
|
||
"jsx": "import { KoleInput } from 'kole-ui/react';\n\nconst SearchIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"7\" />\n <path d=\"M21 21l-4-4\" />\n </svg>\n);\n\n<>\n <KoleInput prefix={<SearchIcon />} placeholder=\"搜索订单编号 / 客户名称\" />\n <KoleInput defaultValue=\"kole\" suffix=\".com\" />\n</>",
|
||
"vue3": "<template>\n <KoleInput placeholder=\"搜索订单编号 / 客户名称\">\n <template #prefix>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"7\" />\n <path d=\"M21 21l-4-4\" />\n </svg>\n </template>\n </KoleInput>\n <KoleInput model-value=\"kole\">\n <template #suffix>.com</template>\n </KoleInput>\n</template>\n\n<script setup>\nimport { KoleInput } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleInput placeholder=\"搜索订单编号 / 客户名称\">\n <svg slot=\"prefix\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n <path d=\"M21 21l-4-4\"></path>\n </svg>\n </KoleInput>\n <KoleInput value=\"kole\">\n <span slot=\"suffix\">.com</span>\n </KoleInput>\n </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput }\n};\n</script>",
|
||
"tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n const SearchIcon = () => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"7\" />\n <path d=\"M21 21l-4-4\" />\n </svg>\n );\n return (\n <>\n <KoleInput prefix={<SearchIcon />} placeholder=\"搜索订单编号 / 客户名称\" />\n <KoleInput defaultValue=\"kole\" suffix=\".com\" />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleInput placeholder=\"搜索订单编号 / 客户名称\">\n <template #prefix>\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"7\" />\n <path d=\"M21 21l-4-4\" />\n </svg>\n </template>\n </KoleInput>\n <KoleInput model-value=\"kole\">\n <template #suffix>.com</template>\n </KoleInput>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('前后缀');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleInput placeholder=\"搜索订单编号 / 客户名称\">\n <svg slot=\"prefix\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n <path d=\"M21 21l-4-4\"></path>\n </svg>\n </KoleInput>\n <KoleInput value=\"kole\">\n <span slot=\"suffix\">.com</span>\n </KoleInput>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Input.html 前后缀示例：第一个是 amp/affix prefix 内的放大镜 SVG（circle cx=11 cy=11 r=7 + path M21 21l-4-4）配 placeholder=\"搜索订单编号 / 客户名称\"；第二个是 value=\"kole\" 配 affix suffix \".com\"。React 用 prefix/suffix prop，Vue 用 prefix/suffix 具名插槽"
|
||
]
|
||
},
|
||
{
|
||
"id": "input-ex-5",
|
||
"title": "清除按钮（clearable）",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"field kole-field\">\n <div class=\"kole-input\" data-clearable>\n <input value=\"可清除文本\" />\n <button class=\"action clear\" aria-label=\"清除\" data-act=\"clear\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M18 6L6 18M6 6l12 12\"></path>\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
6
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
8
|
||
],
|
||
[
|
||
9
|
||
],
|
||
[
|
||
6,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-field\">\n <div class=\"kole-input\" data-clearable>\n <input value=\"可清除文本\" />\n <button class=\"action\" aria-label=\"清除\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M18 6L6 18M6 6l12 12\"></path>\n </svg>\n </button>\n </div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleInput } from 'kole-ui/react';\n\nfunction Demo() {\n const [text, setText] = useState('可清除文本');\n return <KoleInput value={text} onChange={setText} clearable placeholder=\"请输入\" />;\n}",
|
||
"vue3": "<template>\n <KoleInput v-model=\"text\" clearable placeholder=\"请输入\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst text = ref('可清除文本');\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleInput v-model=\"text\" clearable placeholder=\"请输入\" />\n </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data() {\n return { text: '可清除文本' };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleInput } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n const [text, setText] = useState<string>('可清除文本');\n return <KoleInput value={text} onChange={setText} clearable placeholder=\"请输入\" />;\n}\n\nexport default Demo;",
|
||
"vue3ts": "<template>\n\n <KoleInput v-model=\"text\" clearable placeholder=\"请输入\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst text = ref<string>('可清除文本');\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleInput v-model=\"text\" clearable placeholder=\"请输入\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data(): Record<string, unknown> {\n return { text: '可清除文本' };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Input.html 清除按钮示例的 value=\"可清除文本\" 与 button.action.clear[aria-label=清除]；有值且未禁用时 clearable 才渲染清除按钮（见 frameworks/Input.jsx 的 clearable && current && !disabled）"
|
||
]
|
||
},
|
||
{
|
||
"id": "input-ex-6",
|
||
"title": "密码切换",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"field kole-field\">\n <div class=\"kole-input\" data-password>\n <input type=\"password\" data-pw value=\"secret123\" />\n <button class=\"action toggle\" aria-label=\"显示密码\" data-act=\"toggle-pw\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\"></path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
7
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
8
|
||
],
|
||
[
|
||
9
|
||
],
|
||
[
|
||
7,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-field\">\n <div class=\"kole-input\">\n <input type=\"password\" value=\"secret123\" />\n <button class=\"action\" aria-label=\"显示密码\">\n <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\"></path>\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n </svg>\n </button>\n </div>\n</div>",
|
||
"jsx": "import { useState } from 'react';\nimport { KoleInput } from 'kole-ui/react';\n\nfunction Demo() {\n const [pwd, setPwd] = useState('secret123');\n return <KoleInput type=\"password\" value={pwd} onChange={setPwd} placeholder=\"请输入密码\" />;\n}",
|
||
"vue3": "<template>\n <KoleInput v-model=\"pwd\" type=\"password\" placeholder=\"请输入密码\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst pwd = ref('secret123');\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleInput v-model=\"pwd\" type=\"password\" placeholder=\"请输入密码\" />\n </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data() {\n return { pwd: 'secret123' };\n }\n};\n</script>",
|
||
"tsx": "import { useState } from 'react';\nimport { KoleInput } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n const [pwd, setPwd] = useState<string>('secret123');\n return <KoleInput type=\"password\" value={pwd} onChange={setPwd} placeholder=\"请输入密码\" />;\n}\n\nexport default Demo;",
|
||
"vue3ts": "<template>\n\n <KoleInput v-model=\"pwd\" type=\"password\" placeholder=\"请输入密码\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst pwd = ref<string>('secret123');\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleInput v-model=\"pwd\" type=\"password\" placeholder=\"请输入密码\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data(): Record<string, unknown> {\n return { pwd: 'secret123' };\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Input.html 密码切换示例的 input[type=password][data-pw][value=\"secret123\"] 与 button.action.toggle[aria-label=显示密码]；type=\"password\" 时组件内建显隐切换"
|
||
]
|
||
},
|
||
{
|
||
"id": "input-ex-7",
|
||
"title": "禁用态",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"group\">\n <div class=\"row\">\n <div class=\"field kole-field\">\n <div class=\"kole-input is-disabled\">\n <input disabled value=\"不可编辑\" />\n </div>\n </div>\n </div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
8
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
],
|
||
[
|
||
5
|
||
],
|
||
[
|
||
6
|
||
],
|
||
[
|
||
7
|
||
],
|
||
[
|
||
9
|
||
],
|
||
[
|
||
8,
|
||
0
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-field\">\n <div class=\"kole-input is-disabled\">\n <input disabled value=\"不可编辑\" />\n </div>\n</div>",
|
||
"jsx": "import { KoleInput } from 'kole-ui/react';\n\n<KoleInput disabled defaultValue=\"不可编辑\" placeholder=\"请输入\" />",
|
||
"vue3": "<template>\n <KoleInput disabled model-value=\"不可编辑\" placeholder=\"请输入\" />\n</template>\n\n<script setup>\nimport { KoleInput } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleInput disabled value=\"不可编辑\" placeholder=\"请输入\" />\n </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput }\n};\n</script>",
|
||
"tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n return (\n <KoleInput disabled defaultValue=\"不可编辑\" placeholder=\"请输入\" />\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleInput disabled model-value=\"不可编辑\" placeholder=\"请输入\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('禁用态');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleInput disabled value=\"不可编辑\" placeholder=\"请输入\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleInput },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Input.html 禁用态示例的 .kole-input.is-disabled 与 input[disabled][value=\"不可编辑\"]"
|
||
]
|
||
}
|
||
]
|
||
}
|