OverflowBtn
OverflowBtn is used to give the user the ability to select items from the list. It has 3 variations: editable, overflow and segmented.
info
For more details about Vuetify’s usage of OverflowBtn component, click OverflowBtn page.
For more prop explanations, click Vuetify OverflowBtn API page.
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| appendIcon | Appends an icon to the component, uses the same syntax as Icon. | string | undefined |
| autoSelectFirst | When searching, will always highlight the first option. | boolean | false |
| autofocus | Enables autofocus. | boolean | false |
| allowOverflow | Allow the menu to overflow off the screen. | boolean | true |
| chips | Changes display of selections to chips. | boolean | false |
| cacheItems | Keeps a local unique copy of all items that have been passed through the items prop. | boolean | false |
| class | Allows custom properties to take effect. | string | undefined |
| clearIcon | Applied when using clearable and the input is dirty. | string | undefined |
| clearable | Add input clear functionality, default icon is Material Design Icons mdi-clear. | boolean | false |
| counter | Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. | boolean-number-string | undefined |
| counterValue | - | function | null |
| dark | Applies the dark theme. | boolean | false |
| deletableChips | Adds a remove icon to selected chips. | boolean | false |
| dense | Reduces the input height. | boolean | false |
| editable | Creates an editable button. | boolean | false |
| eager | Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. | boolean | false |
| error | Puts the input in a manual error state. | boolean | false |
| errorCount | The total number of errors that should display at once. | number-string | 1 |
| errorMessages | 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. | string-array | [] |
| filter | The filtering algorithm used when searching. | function | (item, queryText, itemText) => {} |
| height | Sets the height of the input. | number-string | undefined |
| hint | Hint text. | string | undefined |
| itemDisabled | Set property of items’s disabled value. | string - array - function | disabled |
| itemText | Set property of items’s text value | string - array - function | text |
| itemValue | Set property of items’s value - must be primitive. Dot notation is supported. | string - array - function | value |
| items | 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. | array | [] |
| label | Sets input label. | string | undefined |
| loading | Displays linear progress bar. | boolean-string | false |
| menuProps | Pass props through to the Menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }". | string - array - object | |
| multiple | Changes select to multiple. Accepts array for value. | boolean | false |
| openOnClear | When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state. | boolean | false |
| persistentHint | Forces hint to always be visible. | boolean | false |
| prependInnerIcon | Prepends an icon inside the component’s input, uses the same syntax as Icon. | string | undefined |
| rules | Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. | array | [] |
| searchInput | Search value. | string | undefined |
| segmented | Creates a segmented button. | boolean | false |
| smallChips | Changes display of selections to chips with the small property. | boolean | false |
| success | Puts the input in a manual success state. | boolean | false |
| successMessages | Puts the input in a success state and passes through custom success messages. | string-array | [] |
| validateOnBlur | Delays validation until blur event. | boolean | false |
| tabindex | Allows component to give and receive focus. | number | undefined |
| value | The input’s value. | any | undefined |
| visible | Visibility of OverflowBtn component. | boolean | true |