{"slug":"input","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":"demo-mapped","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<>\n<KoleInput placeholder=\"请输入客户名称\" />\n</>","vue3":"import { KoleInput } from 'kole-ui/vue3';\n\n<template>\n<KoleInput placeholder=\"请输入客户名称\" />\n</template>","vue2":"import { KoleInput } from 'kole-ui/vue2';\n\n<template>\n<KoleInput placeholder=\"请输入客户名称\" />\n</template>"},"notes":[]},{"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":"demo-mapped","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":"import { KoleInput } from 'kole-ui/vue3';\n\n<template>\n<KoleInput size=\"large\" placeholder=\"大尺寸\" />\n<KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n<KoleInput size=\"small\" placeholder=\"小尺寸\" />\n</template>","vue2":"import { KoleInput } from 'kole-ui/vue2';\n\n<template>\n<KoleInput size=\"large\" placeholder=\"大尺寸\" />\n<KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n<KoleInput size=\"small\" placeholder=\"小尺寸\" />\n</template>"},"notes":[]},{"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":"demo-mapped","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<>\n<KoleInput error value=\"abc\" errorText=\"联系电话格式不正确，请检查后重试\" />\n</>","vue3":"import { KoleInput } from 'kole-ui/vue3';\n\n<template>\n<KoleInput error value=\"abc\" errorText=\"联系电话格式不正确，请检查后重试\" />\n</template>","vue2":"import { KoleInput } from 'kole-ui/vue2';\n\n<template>\n<KoleInput error value=\"abc\" errorText=\"联系电话格式不正确，请检查后重试\" />\n</template>"},"notes":[]},{"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":"demo-mapped","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\n<>\n<KoleInput placeholder=\"搜索订单编号 / 客户名称\" />\n<KoleInput value=\"kole\" suffix=\".com\" />\n</>","vue3":"import { KoleInput } from 'kole-ui/vue3';\n\n<template>\n<KoleInput placeholder=\"搜索订单编号 / 客户名称\" />\n<KoleInput value=\"kole\" suffix=\".com\" />\n</template>","vue2":"import { KoleInput } from 'kole-ui/vue2';\n\n<template>\n<KoleInput placeholder=\"搜索订单编号 / 客户名称\" />\n<KoleInput value=\"kole\" suffix=\".com\" />\n</template>"},"notes":[]},{"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":"demo-mapped","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 { KoleInput } from 'kole-ui/react';\n\n<>\n<KoleInput clearable value=\"可清除文本\" disabled />\n</>","vue3":"import { KoleInput } from 'kole-ui/vue3';\n\n<template>\n<KoleInput clearable value=\"可清除文本\" disabled />\n</template>","vue2":"import { KoleInput } from 'kole-ui/vue2';\n\n<template>\n<KoleInput clearable value=\"可清除文本\" disabled />\n</template>"},"notes":[]},{"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":"demo-mapped","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 { KoleInput } from 'kole-ui/react';\n\n<>\n<KoleInput type=\"password\" value=\"secret123\" disabled />\n</>","vue3":"import { KoleInput } from 'kole-ui/vue3';\n\n<template>\n<KoleInput type=\"password\" value=\"secret123\" disabled />\n</template>","vue2":"import { KoleInput } from 'kole-ui/vue2';\n\n<template>\n<KoleInput type=\"password\" value=\"secret123\" disabled />\n</template>"},"notes":[]},{"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":"demo-mapped","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<>\n<KoleInput disabled value=\"不可编辑\" />\n</>","vue3":"import { KoleInput } from 'kole-ui/vue3';\n\n<template>\n<KoleInput disabled value=\"不可编辑\" />\n</template>","vue2":"import { KoleInput } from 'kole-ui/vue2';\n\n<template>\n<KoleInput disabled value=\"不可编辑\" />\n</template>"},"notes":[]}]}