# Text fields
テキスト フィールド コンポーネントは、ユーザーが入力した情報を収集するために使用されます。
# 使い方
単純なテキストフィールドはプレースホルダやラベルがあります。
# API
# サンプル
# Props
# Counter
counter プロパティを使用して、文字制限をユーザに通知します。 カウンターはそれ自体でバリデーションを行いません。内蔵バリデーションシステムあるいは3rdパーティのライブラリとペアリングする必要があります。 カウンタは counter-value prop とスコープ付きスロット counter でカスタマイズできます。
# Clearable
When clearable, you can customize the clear icon with clear-icon. Note that readonly will not remove the clear icon, to prevent readonly inputs from being cleared you should also disable clearable.
# 色の変更
必要に応じて、テキストフィールドをマテリアルデザインパレットの任意の色に変更できます。 以下は、バリデーションを含むカスタムフォームの実装例です。
# Dense
dense プロパティでテキストフィールドの高さを減らすことができます。
# 無効および読み取り専用
テキストフィールドは disabled または readonly にできます。
# Filled
テキストフィールドは、ボックスデザインで使用できます。
# 詳細の非表示
hide-detailsがauto
に設定されている場合、表示すべきメッセージ(ヒント、エラーメッセージ、カウンタ値など) がある場合にのみ表示されます。
# Hint
テキスト フィールドのhint プロパティは、指定された文字列をテキスト フィールドの下に追加します。 persistent-hint(永続的なヒント)を使用すると、テキストフィールドがフォーカスされていないときにヒントが表示されます。 Hintプロップはsolo モードではサポートされて_いません_。
# Icons
prepend-icon, append-icon と append-outer-icon propsを使用して、テキストフィールドにアイコンを追加できます。
# アウトライン
テキストフィールドは、アウトラインデザインで使用できます。
# プレフィックスとサフィックス
prefix と suffix プロパティを使用すると、テキストフィールドの横に変更できないテキストを追加できます。
# Shaped
shaped テキストフィールドは、 outlined で描画されている場合は丸められ、 filledの場合はborder-radiusが高くなります。
# Single line
シングルライン・テキストフィールドは、フォーカスされた時や入力済のとき、ラベルをフロートしません。
# Solo
テキストフィールドは、ソロデザインで使用できます。
# バリデーション
Vuetify には rules プロパティを通じた簡単な検証が含まれています。 このプロパティは function
, boolean
, string
の混合配列を受け付けます。 入力値が変更されると、配列の各要素が検証されます。 関数は現在の v-model を引数として渡し、 true
/ false
または、エラーメッセージを含む string
のいずれかを返す必要があります。
# イベント
# アイコンイベント
click:prepend
、click:append
、click:append-outer
、click:clear
は、それぞれのアイコンをクリックしたときに発生します。 スロットが代わりに使用されている場合、これらのイベントは発生しないことに注意してください。
# Slots
# アイコンスロット
prepend
/append
/append-outer
アイコンを使う代わりに、スロットを使って入力の機能を拡張することができます。
# Label
label
スロットでテキストフィールドのラベルを定義できます - HTMLコンテンツを使用することができます
# Progress
ボトムラインの代わりにプログレスバーを表示できます。 テキストフィールドと同じ色で不確定な状態のデフォルトのプログレスバーを使うか、progress
スロットでカスタマイズすることができます。
# その他
# カスタムバリデーション
v-form
または vuelidate や vee-validation などのサードパーティープラグインで構築されている間、検証プロセスを合理化することができます。 自分でコントロールすることができます
# Full width with counter
全幅(full width)のテキストフィールドを使うと無限の入力を作成できます。 この例ではv-divider
でフィールドを区切っています。
# パスワード入力
HTML input type passwordを使うと、追加のアイコンとコールバックを使って可視性を制御できます。