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

# Hint

テキスト フィールドの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

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

# Progress

ボトムラインの代わりにプログレスバーを表示できます。 テキストフィールドと同じ色で不確定な状態のデフォルトのプログレスバーを使うか、progressスロットでカスタマイズすることができます。

# その他

# カスタムバリデーション

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

# Full width with counter

全幅(full width)のテキストフィールドを使うと無限の入力を作成できます。 この例ではv-dividerでフィールドを区切っています。

# パスワード入力

HTML input type passwordを使うと、追加のアイコンとコールバックを使って可視性を制御できます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:11/12/2024, 6:59:50 AM