# Text fields

テキスト フィールド コンポーネントは、ユーザーが入力した情報を収集するために使用されます。

# 使い方

単純なテキストフィールドはプレースホルダやラベルがあります。

# API

# サンプル

# Props

# Counter

counter プロパティを使用して、文字制限をユーザに通知します。 カウンターはそれ自体でバリデーションを行いません。内蔵バリデーションシステムあるいは3rdパーティのライブラリとペアリングする必要があります。 カウンタは counter-value prop とスコープ付きスロット counter でカスタマイズできます。

# Clearable

clearableを指定した場合、クリアアイコンを clear-icon でカスタマイズできます。

# 色の変更

必要に応じて、テキストフィールドをマテリアルデザインパレットの任意の色に変更できます。 以下は、バリデーションを含むカスタムフォームの実装例です。

# Dense

dense プロパティでテキストフィールドの高さを減らすことができます。

# 無効および読み取り専用

テキストフィールドは disabled または readonly にできます。

# Filled

テキストフィールドは、ボックスデザインで使用できます。 append-iconprepend-icon props は、このモードではサポート_されていません_。

# 詳細の非表示

hide-detailsauto に設定されている場合、表示すべきメッセージ(ヒント、エラーメッセージ、カウンタ値など) がある場合にのみ表示されます。

# ヒント

テキスト フィールドのhint プロパティは、指定された文字列をテキスト フィールドの下に追加します。 persistent-hint(永続的なヒント)を使用すると、テキストフィールドがフォーカスされていないときにヒントが表示されます。 Hintプロップはsolo モードではサポートされて_いません_。

# Icons

prepend-icon, append-iconappend-outer-icon propsを使用して、テキストフィールドにアイコンを追加できます。

# アウトライン

テキストフィールドは、アウトラインデザインで使用できます。

# プレフィックスとサフィックス

prefixsuffix プロパティを使用すると、テキストフィールドの横に変更できないテキストを追加できます。

# Shaped

shaped テキストフィールドは、 outlined で描画されている場合は丸められ、 filledの場合はborder-radiusが高くなります。

# Single line

シングルライン・テキストフィールドは、フォーカスされた時や入力済のとき、ラベルをフロートしません。

# Solo

テキストフィールドは、ソロデザインで使用できます。

# バリデーション

Vuetify には rules プロパティを通じた簡単な検証が含まれています。 このプロパティは function, boolean, string の混合配列を受け付けます。 入力値が変更されると、配列の各要素が検証されます。 関数は現在の v-model を引数として渡し、 true / false または、エラーメッセージを含む string のいずれかを返す必要があります。

# イベント

# アイコンイベント

click:prependclick:appendclick:append-outerclick:clearは、それぞれのアイコンをクリックしたときに発生します。 スロットが代わりに使用されている場合、これらのイベントは発生しないことに注意してください。

# Slots

# アイコンスロット

prepend/append/append-outerアイコンを使う代わりに、スロットを使って入力の機能を拡張することができます。

# ラベル

label スロットでテキストフィールドのラベルを定義できます - HTMLコンテンツを使用することができます

# Progress

You can display a progress bar instead of the bottom line. You can use the default indeterminate progress having same color as the text field or designate a custom one using the progress slot

# その他

# Custom validation

v-form または vuelidatevee-validation などのサードパーティープラグインで構築されている間、検証プロセスを合理化することができます。 自分でコントロールすることができます

# Full width with counter

Full width text fields allow you to create boundless inputs. In this example, we use a v-divider to separate the fields.

# パスワード入力

HTML inut type passwordを使用すると、追加アイコンとコールバックを使用して可視性を制御できます。

準備はできましたか?

チーム によって選択された関連コンテンツで学習を続けるか、下のナビゲーションリンクを使用してページ間を移動します。
GitHub でこのページを編集する
最終更新日:05/07/2021, 12:56:43 AM