# Inputs
v-input は、独自のカスタム入力フィールドを作成するための基本のコンポーネントを提供します。 v-input は prepend/append スロット、メッセージ、およびデフォルトのスロットで構成されています。 このコンポーネントは拡張して使用することが_推奨されます_が、拡張せずにそのまま使用することもできます。
# 使い方
v-input は4つの領域を備えています。 prepend スロット、append スロット、メッセージ、そしてデフォルトのスロットです。 これらのスロットで構成されるコアのロジックは、すべてのフォーム コンポーネント間で共有されます。
# API
# 注意事項
v-input コンポーネントは、Vuetifyのすべてのフォームコントロールのラッパーとして使用されています。 v-inputでは属性を内部の入力に渡すことを想定しているため、属性は継承しないことに注意してください。
# サンプル
# Props
# Error
バリデーション可能な他のVuetifyのコンポーネントと同様に、v-input は error 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-input は success propを使用して成功状態に設定することができます。success-messages propを使用すると、メッセージを追加できます。
# イベント
# クリックスロット
v-input では、click:append と click:prepend イベントをスロットに持たせることができます。 注: ここでは例として v-text-field を使用しています。
# Slots
# append と prepend
v-input は append スロットと prepend スロットを備えます。 これらを使ってカスタムアイコンを配置することができます。