パスワードフィールドのパスワード強度インジケーターを表示します。
import Password from 'primevue/password';
双方向バインディングはv-modelを使用して定義されます。
<Password v-model="value" :feedback="false" />
値が入力されている間、強度メーターがポップアップとして表示されます。
<Password v-model="value" />
ラベルは、promptLabel、weakLabel、mediumLabel、strongLabelプロパティによってコンポーネントレベルで翻訳されます。アプリケーション内のすべてのパスワードコンポーネントにグローバル翻訳を適用するには、ロケールを参照してください。
<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
toggleMaskが存在する場合、値をプレーンテキストとして表示するアイコンが表示されます。
<Password v-model="value" toggleMask />
オーバーレイをカスタマイズするために3つのスロットが含まれています。これらはheader、content、footerです。contentはデフォルトのメーターを上書きすることに注意してください。
<Password v-model="value">
<template #header>
<div class="font-semibold text-xm mb-4">Pick a password</div>
</template>
<template #footer>
<Divider />
<ul class="pl-2 ml-2 my-0 leading-normal">
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>
</template>
</Password>
フォーカス時に入力フィールドの上にフロートラベルが表示されます。詳細については、フロートラベルのドキュメントを参照してください。
<FloatLabel>
<Password v-model="value" inputId="password" />
<label for="password">Password</label>
</FloatLabel>
デフォルトのoutlinedスタイルよりも視覚的な強調表示の高いコンポーネントを表示するには、variantプロパティをfilledとして指定します。
<Password v-model="value" :feedback="false" variant="filled" />
invalidプロパティを使用して、検証に失敗したことを示す無効状態が表示されます。フォーム検証ライブラリと統合する際にこのスタイルを使用できます。
<Password v-model="value" :invalid="value === null" />
disabledが存在する場合、要素は編集およびフォーカスできません。
<Password disabled placeholder="Disabled" />
コンポーネントの説明値は、idプロパティと組み合わせてlabelタグを介して、またはaria-labelledby、aria-labelプロパティを使用して提供できます。タイピング中に、aria-liveを持つセクションを使用して、パスワードの強度の変更についてスクリーンリーダーに通知されます。
<label for="pwd1">Password</label>
<Password inputId="pwd1" />
<span id="pwd2">Password</span>
<Password aria-labelledby="pwd2" />
<Password aria-label="Password"/>
| キー | 機能 |
|---|---|
| tab | 入力にフォーカスを移動します。 |
| escape | 開いている場合は強度メーターを非表示にします。 |