{ "curated": true, "slug": "passwordinput", "mode": "single", "examples": [ { "id": "passwordinput-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n

PasswordInput 密码输入

\n

可见切换 + 强度检测,适用于注册 / 修改密码等场景。

\n
\n
基础用法(含强度条)
\n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
\n
\n
关闭强度条
\n
\n
\n \n \n
\n
\n
\n
\n
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "

PasswordInput 密码输入

\n

可见切换 + 强度检测,适用于注册 / 修改密码等场景。

\n
基础用法(含强度条)
\n
\n
\n \n \n
\n
\n \n \n \n
\n
\n
\n
关闭强度条
\n
\n
\n \n \n
\n
\n
", "jsx": "import { useState } from 'react';\nimport { KolePasswordInput } from 'kole-ui/react';\n\nexport default function Demo() {\n const [pwd, setPwd] = useState('');\n const [pwdPlain, setPwdPlain] = useState('');\n\n return (\n <>\n \n \n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KolePasswordInput } from 'kole-ui/react';\n\ninterface PasswordField {\n key: 'with-strength' | 'plain';\n value: string;\n placeholder: string;\n showStrength: boolean;\n}\n\nexport default function PasswordDemo(): JSX.Element {\n const [pwd, setPwd] = useState('');\n const [pwdPlain, setPwdPlain] = useState('');\n\n const fields: ReadonlyArray = [\n { key: 'with-strength', value: pwd, placeholder: '请输入密码', showStrength: true },\n { key: 'plain', value: pwdPlain, placeholder: '请输入密码', showStrength: false },\n ];\n const [withStrength, plain] = fields;\n\n return (\n <>\n \n \n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": "依据 frameworks/PasswordInput.html:17-29(含 kole-pwd-strength 三根强度条)与 :33-40(关闭强度条)两段结构,showStrength 取自 :50 的 bars.length>0 判定,强度文案取自 :81-83 的 weak/mid/strong 分支;prop 名对齐 site/details/passwordinput.json api.props(modelValue/placeholder/showStrength),React 端参数名为 value" } ] }