Vuetify

ショップ

企業向け

v-inputコンポーネントは、独自のカスタム入力を作成するためのベースラインを提供します。これは、プリペンド/アペンドスロット、メッセージ、およびデフォルトスロットで構成されます。このコンポーネントを拡張することを 推奨 しますが、単体でも使用できます。

v-input には4つの主要領域があります。prepended slot、appended slot、default slot、およびmessages。これらは、すべてのフォームコンポーネント間で共有されるコアロジックを構成します。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

v-inputは、データ読み込み表示などで使用できる loading 状態を持っています。注: v-text-fieldは単なる例です。

v-inputhint を持つことができ、hint で入力の使い方をユーザに伝えることができます。persistent-hint propはメッセージが表示されていない場合に常にヒントを表示するようにします。

バリデーション可能なVuetifyコンポーネントとして、success propを使用してv-inputを成功状態に設定することができ、success-messages propを使用してメッセージを追加することができます。

バリデーション可能なVuetifyコンポーネントとして、error propを使用してv-inputをエラー状態に設定することができ、メッセージはerror-messages propを使用して追加することができます。error-countプロパティを使用して、表示するエラー メッセージ数を決定できます。

error-countプロパティを使用することで、複数のエラーをv-inputに追加することができます。

trueもしくはエラーメッセージを返す関数を追加することで、v-inputにカスタムバリデーションを追加することができます。

hide-detailsautoを設定すると、の表示するべきメッセージ (ヒントやエラーメッセージなど) がある場合のみ表示されます。

v-inputには append およびprepend スロットがあります。それらにカスタムアイコンを配置できます。

v-inputclick:appendclick:prependイベントをスロットに追加できます。注意:v-text-fieldは例として使用しています。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!