'v-overflow-btn' は、ユーザーがリストから項目を選択できるようにするために使用されます。editable, overflow, segmentedの3つのバリエーションがあります。
items propにオブジェクトを使用する場合は、オブジェクトの既存のプロパティにitem-textとitem-valueを関連付ける必要があります。これらの値はデフォルトで text および value に設定され、変更もできます。
menu-propsのautoプロパティは、デフォルトの入力スタイルでのみサポートされています。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
メニューが画面からオーバーフローするのを許可する
v-iconと同じ構文を使用し、コンポーネントにアイコンを追加します
v-iconと同じ構文を使用して、入力コンポーネント外側の後方にアイコンを追加します
このコンポーネントが detach するべき DOM 要素を指定します。String の場合、任意の有効な querySelector が指定でき、Object の場合、任意の有効な Node が指定できます。デフォルトでは、root の v-app コンポーネントを attach します。
検索時には、常に最初のオプションを強調表示します
Enables autofocus
inputの背景色を変更します
Keeps a local unique copy of all items that have been passed through the items prop.
選択項目の表示をチップに変更
Applied when using clearable and the input is dirty
入力クリア機能を追加します（デフォルトのアイコンは、Material Icons の clear ）
指定された色をコントロールに適用します。利用できるのは色の名前 (たとえば、success または purple) または css 表記の色 (#033またはrgba(255, 0, 0, 0.5)) です。colors のページ で、組み込みクラスのリストが確認できます。
Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
Applies the dark theme variant to the component. This will default the components color to white unless you've configured your application theme to dark or if you are using the color prop on the component. You can find more information on the Material Design documentation for dark themes.
選択中のチップに削除アイコンを追加します（chipsオプションと併用）
Reduces the input height
Disables keyboard lookup
入力を無効にする
コンポーネントのコンテンツを mounted 時に render することを強制します。この機能は、SEO のために crawl させたい DOM の中に render されないコンテンツを持っているときに役に立ちます。
Creates an editable button
入力を手動でエラー状態にします。
一度に表示するエラーの数を設定します。
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
Applies the alternate filled input style
The function used for filtering items
soloまたはsolo-inverted propを使用するときに要素に追加されたエレベーション（影）を削除する。
Designates input type as full-width
Sets the height of the input
Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
表示するオプションがない場合、メニューを非表示にします。結果が非同期でフェッチされる前にメニューが開かないようにするのに役立ちます。 items配列がまだ開いていない場合は、変化したときにメニューを開く効果もあります。
Do not display in the select menu items that are already selected
ヒントを設定します。
コンポーネントにDOM idを設定します
選択した項目の色を設定します
Set property of items's disabled value
items のテキスト値のプロパティを設定します
Set property of items's value - must be primitive. Dot notation is supported. Note: This is currently not supported with v-combobox GitHub Issue
Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. This can be changed using the item-text, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
{
text: string | number | object
value: string | number | object
disabled: boolean
divider: boolean
header: string
}ラベルを設定します。
コンポーネントにlightテーマを適用します。
loader の高さを指定します。
線形プログレス バーを表示します。 進行状況バー (任意のマテリアルカラーまたはテーマカラー - primary, secondary, success, info, warning, error) に適用する色を指定する文字列、あるいはコンポーネント color (color propで設定 - コンポーネントでサポートされている場合) またはprimary色を使用する真偽値を指定できます。
Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"
文字列を使用している場合は、メッセージまたはメッセージの一覧を表示します。
Changes select to multiple. Accepts array for value
データが存在しない場合に表示するテキストです。
検索時にフィルタリングを適用しません。データをサーバー側でフィルタリングしている場合に便利です。
clearable propを使用する場合、クリアすると、選択メニューは現在の状態に応じて開くか、開いたままになります
アウトラインスタイルを適用します。
ヒントを常に表示します
プレースホルダーを設定します
前につけるプレフィックステキストを表示します
Prepends an icon to the component, uses the same syntax as v-icon
v-iconと同じ構文を使用して、入力コンポーネント内の先頭にアイコンを追加します
読み取り専用状態に設定します。
item-value で指定された値ではなく、オブジェクトを直接返すように選択動作を変更します。
入力方向を反転します。
Adds a border radius to the input
入力値を引数として取り、エラーメッセージとともにtrue / falseまたはstringを返す関数の配列を受け入れます
検索値。.sync 修飾子と共に使用できます。
Creates a segmented button
Round if outlined and increase border-radius if filled. Must be used with either outlined or filled
Label does not move on focus/dirty
Changes display of selections to chips with the small property
入力のスタイルを変更
フォーカスされるまで要素の不透明度を減らす
入力を手動で成功状態にします。
Puts the input in a success state and passes through custom success messages.
後につけるサフィックステキストを表示します
Sets input type
blurイベントまでバリデーションを遅らせる
The input's value
The comparison algorithm used for values. More info
Adds an item inside the input and after input content
Adds an item after menu content
Adds an item outside the input and after input content
デフォルトの Vue slot
Define a custom item appearance
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}デフォルトのラベルを置き換えます
Customize the messages slot.
{
key: number, // the messages index
message: string, // the message
}フィルタの結果が存在しない場合に表示されます。
Adds an item outside the input and before input content
Adds an item inside the input and before input content
Adds an item before menu content
Slot for custom progress linear (displayed when loading prop is not equal to Boolean False)
Define a custom selection appearance
{
parent: VueComponent
item: object
index: number
select: function
selected: boolean
disabled: boolean
}Emitted when the input is blurred
Eventユーザーの操作によって値が変更されたときに発生します。
anyEmitted when input is clicked
MouseEventアペンドアイコンがクリックされたときに発生します
EventEmitted when appended outer icon is clicked
Eventクリアアイコンをクリックしたときに発生します。
Eventプリペンドアイコンがクリックされたときに発生します
EventEmitted when prepended inner icon is clicked
Eventコンポーネントがフォーカスされている場合に発生します。
Event更新されたバウンドモデル
anyany キーが押されたときに発生します。
KeyboardEventクリック時、押された（pressed）ときに発生します
MouseEventクリック後、放された（released）ときに発生します
MouseEventerror.sync イベント
booleanキーボードの矢印を使用してメニュー項目を選択するときに発生します
numbersearch-input.sync イベント
string$border-radius-root $border-radius-root 0 0 !default;48px !default;42px !default;12px !default;12px !default;16px !default;38px !default;8px 16px !default;$border-radius-root !default;0 1px 6px 0 rgba(32,33,36,0.28) !default;2 !default;2px 0 !default;16px !default;calc(50% - 10px) !default;12px !default;0 4px 6px 0 rgba(32,33,36,0.28) !default;0 0 $border-radius-root $border-radius-root !default;thin 0 !default;48px !default;-16px !default;16px !default;48px !default;以下に、簡単な例から複雑な例まで示します。
You can add a counter to v-overflow-btn to control the max char count
v-overflow-btnは、ユーザーが操作するのを防ぐために無効にすることができます。
dense propを使用して、オーバーフローボタンの高さを減らし、リスト項目の最大高さを下げることができます。
editable v-overflow-btn can be directly edited, just as v-text-field
テキスト フィールドは、ボックスデザインと共に使用できます。このモードでは、append および prepend アイコンprop はサポートされません。
hint プロパティを使用して、ヒントを追加できます。
v-overflow-btn は、下にlinear progress bar を表示する loading 状態を持つことができます。
You can set underlying v-menu props using menu-props property
v-overflow-btnは readonly モードにすることができ、非アクティブになりますが、色は変更されません。
segmented v-overflow-btn has and additional divider between the content and the icon