v-overflow-btn is used to give the user the ability to select items from the list. It has 3 variations: editable, overflow and segmented
When using objects for the items prop, you must associate item-text and item-value with existing properties on your objects. These values are defaulted to text and value and can be changed.
The auto property of menu-props is only supported for the default input style.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Allow the menu to overflow off the screen
Appends an icon to the component, uses the same syntax as v-icon
Appends an icon to the outside the component's input, uses same syntax as v-icon
Gibt an, zu welchem DOM-Element diese Komponente sich trennen soll. String - Kann jeder gültige QuerySelector sein. Objekt - Lann jeder gültige Knoten sein. Dies wird standardmäßig an den Root-v-app Component anhängt.
When searching, will always highlight the first option
Enables autofocus
Changes the background-color of the input
Keeps a local unique copy of all items that have been passed through the items prop.
Changes display of selections to chips
Applied when using clearable and the input is dirty
Fügt die Funktionalität zum Löschen der Eingabe hinzu, das Standard-Icon ist das Material Icon clear
Wendet eine bestimmte Farbe für die Steuerung an - es kann der Name der Materialfarbe sein (zum Beispiel success oder purple) oder css-Farben (#033 oder rgba(255, 0, 0, 0.5)). Sie finden eine Liste der eingebauten Klassen auf der Farbseite.
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.
Adds a remove icon to selected chips
Reduces the input height
Disables keyboard lookup
Input deaktivieren
Erzwingt den Inhalt der Komponenten unter mount gezeichnet zu werden. Dies ist nützlich, wenn Sie Inhalte haben, die nicht im DOM dargestellt werden, aber für SEO crawlebar sein soll.
Creates an editable button
Stellt die Eingabe manuel in einen Fehlerzustand
Die Gesamtzahl der Fehler, die auf einmal angezeigt werden sollen
Stellt die Eingabe in einen Fehlerzustand und durchläuft benutzerdefinierte Fehlermeldungen. Wird mit allen Validierungen kombiniert, die vom rules-Prop auftreten. Dieses Feld wird keine Validierung auslösen
Applies the alternate filled input style
The function used for filtering items
Entfernt die Höhe (Schatten), welcher zum Element hinzugefügt wurde, wenn die solo oder solo-invertierten-Props verwendet werden
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
Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the items array changes if not already open.
Do not display in the select menu items that are already selected
Hint text
Setzt den DOM identifier auf der Komponente
Sets color of selected items
Set property of items's disabled value
Set property of items's text value
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
}Sets input label
Wendet die helle Theme-Variante für die Komponente an.
Legt die Höhe des Laders fest
Zeigt den linearen Fortschrittsbalken an. Kann entweder eine Zeichenfolge sein, die angibt, welche Farbe auf den Fortschrittsbalken angewendet wird (jede Materialfarbe oder Themenfarbe - primary, secondary, success, info, warning, error) oder ein Boolescher Wert, der die Komponenten-color (festgelegt durch das color-prop - sofern dies von der Komponente unterstützt wird) oder die Primärfarbe verwendet
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 }"
Zeigt eine Liste von Nachrichten oder eine einzelne Nachricht an, wenn eine Zeichenkette (string) verwendet wird
Changes select to multiple. Accepts array for value
Text wird angezeigt, wenn keine Daten vorhanden sind
Do not apply filtering when searching. Useful when data is being filtered server side
When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
Applies the outlined style to the input
Forces hint to always be visible
Sets the input’s placeholder text
Displays prefix text
Prepends an icon to the component, uses the same syntax as v-icon
Prepends an icon inside the component's input, uses the same syntax as v-icon
Setzt die Eingabe in einen schreibgeschützten Zustand
Changes the selection behavior to return the object directly rather than the value specified with item-value
Reverses the input orientation
Adds a border radius to the input
Akzeptiert ein Array von Funktionen, die einen Eingabewert als Argument annehmen und entweder true / false oder einen string mit einer Fehlermeldung zurückgeben
Search value. Can be used with .sync modifier.
Creates a segmented button
Round if outlined and increase border-radius if filled. Must be used with either outlined or filled
Das Label bewegt sich nicht für focus/dirty
Changes display of selections to chips with the small property
Ändert den Stil der Eingabe
Reduziert die Deckkraft des Elements wenn nicht fokussiert
Setzt die Eingabe manuel in einen Erfolgszustand
Stellt die Eingabe in einen Erfolgszustand ein und überträgt benutzerdefinierte Erfolgsmitteilungen.
Displays suffix text
Sets input type
Verzögert die Validierung bis zum 'blur'-Ereignis
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
Der Standard-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
}Ersetzt die Standardbezeichnung
Customize the messages slot.
{
key: number, // the messages index
message: string, // the message
}Wird angezeigt, wenn keine gefilterten Elemente vorhanden sind
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 für den benutzerdefinierten linearen Fortschritt (angezeigt wenn das loading-Props ungleich zu Boolean False ist)
Define a custom selection appearance
{
parent: VueComponent
item: object
index: number
select: function
selected: boolean
disabled: boolean
}Emitted when the input is blurred
EventEmitted when the input is changed by user interaction
anyEmitted when input is clicked
MouseEventEmitted when appended icon is clicked
EventEmitted when appended outer icon is clicked
EventEmitted when clearable icon clicked
EventEmitted when prepended icon is clicked
EventEmitted when prepended inner icon is clicked
EventEmitted when component is focused
EventDas aktualisierte gebundene Modell
anyEmitted when any key is pressed
KeyboardEventEmitted when click is pressed
MouseEventEmitted when click is released
MouseEventDas error.sync Ereignis
booleanEmitted when menu item is selected using keyboard arrows
numberThe search-input.sync event
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;Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
You can add a counter to v-overflow-btn to control the max char count
v-overflow-btn can be disabled in order to prevent a user from interacting with it
You can use dense prop to reduce overflow button height and lower max height of list items.
editable v-overflow-btn can be directly edited, just as v-text-field
Text fields can be used with an alternative box design. Append and prepend icon props are not supported in this mode.
You can add a hint for the user using the hint property
v-overflow-btn can have loading state with a linear progress bar under them
You can set underlying v-menu props using menu-props property
v-overflow-btn can be put into readonly mode, it'll become inactive but won't change the color
segmented v-overflow-btn has and additional divider between the content and the icon
Bereit für mehr? Weiter lesen mit: