# Inputs

v-input は、独自のカスタム入力フィールドを作成するための基本のコンポーネントを提供します。 v-input は prepend/append スロット、メッセージ、およびデフォルトのスロットで構成されています。 このコンポーネントは拡張して使用することが_推奨されます_が、拡張せずにそのまま使用することもできます。

# 使い方

v-input は4つの領域を備えています。 prepend スロット、append スロット、メッセージ、そしてデフォルトのスロットです。 これらのスロットで構成されるコアのロジックは、すべてのフォーム コンポーネント間で共有されます。

# API

# 注意事項

# サンプル

# Props

# Error

バリデーション可能な他のVuetifyのコンポーネントと同様に、v-inputerror prop を使ってエラー状態に設定することができます。error-messages prop を使うと、エラーメッセージも追加できます。 error-count プロパティを使うと、表示するエラーメッセージの数を指定できます。

# Error count

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

# Hide details (詳細の非表示)

hide-details prop を auto に設定すると、ヒントやエラーメッセージなど、表示するものがある場合にのみメッセージが表示されます。

# Hint

v-input には hint を指定できます。これにより、input の使い方をユーザに伝えることができます。 persistent-hint prop を設定すると、表示するメッセージがない場合に常時ヒントを表示します。

# Loading

v-input には loading 状態があり、データをロード中であることを示したい場合などに使用できます。 注: ここでは例として v-text-field を使用しています。

# ルール

v-input にはカスタムのバリデーションルールを追加できます。ルールには、trueまたはエラーメッセージを返す関数を追加します。 注: ここでは例として v-text-field を使用しています。

# Success

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

# イベント

# クリックスロット

v-input では、click:appendclick:prepend イベントをスロットに持たせることができます。 注: ここでは例として v-text-field を使用しています。

# Slots

# append と prepend

v-inputappend スロットと prepend スロットを備えます。 これらを使ってカスタムアイコンを配置することができます。

準備はできましたか?

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