aurora-admin/site/examples/passwordinput.json

{
 "curated": true,
 "slug": "passwordinput",
 "mode": "single",
 "examples": [
  {
   "id": "passwordinput-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">PasswordInput 密码输入</h2>\n  <p class=\"kole-desc\">可见切换 + 强度检测，适用于注册 / 修改密码等场景。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-demo__title\">基础用法（含强度条）</div>\n    <div class=\"kole-pwd\" id=\"pwd1\">\n      <div class=\"kole-pwd-field\">\n        <input class=\"kole-pwd-input\" type=\"password\" role=\"group\" placeholder=\"请输入密码\" />\n        <button class=\"kole-pwd-toggle\" type=\"button\">显示</button>\n      </div>\n      <div class=\"kole-pwd-strength\">\n        <span class=\"kole-pwd-bar\"></span>\n        <span class=\"kole-pwd-bar\"></span>\n        <span class=\"kole-pwd-bar\"></span>\n      </div>\n      <div class=\"kole-pwd-tip\"></div>\n    </div>\n  </div>\n  <div class=\"kole-demo\">\n    <div class=\"kole-demo__title\">关闭强度条</div>\n    <div class=\"kole-pwd\" id=\"pwd2\">\n      <div class=\"kole-pwd-field\">\n        <input class=\"kole-pwd-input\" type=\"password\" role=\"group\" placeholder=\"请输入密码\" />\n        <button class=\"kole-pwd-toggle\" type=\"button\">显示</button>\n      </div>\n      <div class=\"kole-pwd-tip\"></div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>PasswordInput 密码输入</h2>\n<p>可见切换 + 强度检测，适用于注册 / 修改密码等场景。</p>\n<div>基础用法（含强度条）</div>\n<div class=\"kole-pwd\" id=\"pwd1\">\n  <div class=\"kole-pwd-field\">\n    <input class=\"kole-pwd-input\" type=\"password\" role=\"group\" placeholder=\"请输入密码\" />\n    <button class=\"kole-pwd-toggle\" type=\"button\">显示</button>\n  </div>\n  <div class=\"kole-pwd-strength\">\n    <span class=\"kole-pwd-bar\"></span>\n    <span class=\"kole-pwd-bar\"></span>\n    <span class=\"kole-pwd-bar\"></span>\n  </div>\n  <div class=\"kole-pwd-tip\"></div>\n</div>\n<div>关闭强度条</div>\n<div class=\"kole-pwd\" id=\"pwd2\">\n  <div class=\"kole-pwd-field\">\n    <input class=\"kole-pwd-input\" type=\"password\" role=\"group\" placeholder=\"请输入密码\" />\n    <button class=\"kole-pwd-toggle\" type=\"button\">显示</button>\n  </div>\n  <div class=\"kole-pwd-tip\"></div>\n</div>",
    "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      <KolePasswordInput\n        value={pwd}\n        placeholder=\"请输入密码\"\n        showStrength\n        onChange={setPwd}\n      />\n      <KolePasswordInput\n        value={pwdPlain}\n        placeholder=\"请输入密码\"\n        showStrength={false}\n        onChange={setPwdPlain}\n      />\n    </>\n  );\n}",
    "vue3": "<template>\n  <KolePasswordInput v-model=\"pwd\" placeholder=\"请输入密码\" :show-strength=\"true\" />\n  <KolePasswordInput v-model=\"pwdPlain\" placeholder=\"请输入密码\" :show-strength=\"false\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePasswordInput } from 'kole-ui/vue3';\n\nconst pwd = ref('');\nconst pwdPlain = ref('');\n</script>",
    "vue2": "<template>\n  <div>\n    <KolePasswordInput v-model=\"pwd\" placeholder=\"请输入密码\" :show-strength=\"true\" />\n    <KolePasswordInput v-model=\"pwdPlain\" placeholder=\"请输入密码\" :show-strength=\"false\" />\n  </div>\n</template>\n\n<script>\nimport { KolePasswordInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePasswordInput },\n  data() {\n    return { pwd: '', pwdPlain: '' };\n  }\n};\n</script>",
    "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<string>('');\n  const [pwdPlain, setPwdPlain] = useState<string>('');\n\n  const fields: ReadonlyArray<PasswordField> = [\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      <KolePasswordInput\n        value={withStrength.value}\n        placeholder={withStrength.placeholder}\n        showStrength={withStrength.showStrength}\n        onChange={setPwd}\n      />\n      <KolePasswordInput\n        value={plain.value}\n        placeholder={plain.placeholder}\n        showStrength={plain.showStrength}\n        onChange={setPwdPlain}\n      />\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <KolePasswordInput v-model=\"pwd\" placeholder=\"请输入密码\" :show-strength=\"true\" />\n  <KolePasswordInput v-model=\"pwdPlain\" placeholder=\"请输入密码\" :show-strength=\"false\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KolePasswordInput } from 'kole-ui/vue3';\n\ninterface PasswordField {\n  key: 'with-strength' | 'plain';\n  placeholder: string;\n  showStrength: boolean;\n}\n\nconst fields: ReadonlyArray<PasswordField> = [\n  { key: 'with-strength', placeholder: '请输入密码', showStrength: true },\n  { key: 'plain', placeholder: '请输入密码', showStrength: false },\n];\n\nconst pwd = ref<string>('');\nconst pwdPlain = ref<string>('');\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KolePasswordInput v-model=\"pwd\" placeholder=\"请输入密码\" :show-strength=\"true\" />\n    <KolePasswordInput v-model=\"pwdPlain\" placeholder=\"请输入密码\" :show-strength=\"false\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePasswordInput } from 'kole-ui/vue2';\n\ninterface PasswordField {\n  key: 'with-strength' | 'plain';\n  placeholder: string;\n  showStrength: boolean;\n}\n\nexport default Vue.extend({\n  components: { KolePasswordInput },\n  data(): { pwd: string; pwdPlain: string; fields: ReadonlyArray<PasswordField> } {\n    return {\n      pwd: '',\n      pwdPlain: '',\n      fields: [\n        { key: 'with-strength', placeholder: '请输入密码', showStrength: true },\n        { key: 'plain', placeholder: '请输入密码', showStrength: false },\n      ],\n    };\n  },\n});\n</script>"
   },
   "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"
  }
 ]
}