UNPKG

vuetify

Version:

Vue Material Component Framework

1,104 lines 593 kB
{ "VAlert/title": { "type": "string\n", "description": "Specify a title text for the component." }, "VAlert/text": { "type": "string\n", "description": "Specify content text for the component." }, "VAlert/border": { "type": "boolean | 'top' | 'end' | 'bottom' | 'start'\n", "description": "Adds a colored border to the component." }, "VAlert/border-color": { "type": "string\n", "description": "Specifies the color of the border. Accepts any color value." }, "VAlert/closable": { "type": "boolean\n", "description": "Adds a close icon that can hide the alert." }, "VAlert/close-icon": { "type": "any\n", "description": "Change the default icon used for **closable** alerts." }, "VAlert/type": { "type": "'success' | 'info' | 'warning' | 'error'\n", "description": "Create a specialized alert that uses a contextual color and has a pre-defined icon." }, "VAlert/close-label": { "type": "string\n", "description": "Text used for *aria-label* on **closable** alerts. Can also be customized globally in [Internationalization](/customization/internationalization)." }, "VAlert/icon": { "type": "any\n", "description": "Apply a specific icon using the [v-icon](/components/icons/) component." }, "VAlert/model-value": { "type": "boolean\n", "description": "Controls whether the component is visible or hidden." }, "VAlert/prominent": { "type": "boolean\n", "description": "Displays a larger vertically centered icon to draw more attention." }, "VAlert/density": { "type": "'default' | 'comfortable' | 'compact'\n", "description": "Adjusts the vertical height used by the component." }, "VAlert/height": { "type": "string | number\n", "description": "Sets the height for the component." }, "VAlert/max-height": { "type": "string | number\n", "description": "Sets the maximum height for the component." }, "VAlert/max-width": { "type": "string | number\n", "description": "Sets the maximum width for the component." }, "VAlert/min-height": { "type": "string | number\n", "description": "Sets the minimum height for the component." }, "VAlert/min-width": { "type": "string | number\n", "description": "Sets the minimum width for the component." }, "VAlert/width": { "type": "string | number\n", "description": "Sets the width for the component." }, "VAlert/elevation": { "type": "string | number\n", "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)." }, "VAlert/location": { "type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n", "description": "Specifies the component's location. Can combine by using a space separated string." }, "VAlert/position": { "type": "'static' | 'relative' | 'fixed' | 'absolute' | 'sticky'\n", "description": "Sets the position for the component." }, "VAlert/rounded": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)." }, "VAlert/tile": { "type": "boolean\n", "description": "Removes the component's border-radius." }, "VAlert/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VAlert/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VAlert/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VAlert/variant": { "type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n", "description": "Applies a distinct style to the component." }, "VAlertTitle/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VApp/full-height": { "type": "boolean\n", "description": "Sets the component height to 100%." }, "VApp/overlaps": { "type": "string[]\n", "description": "**FOR INTERNAL USE ONLY**" }, "VApp/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VAppBar/image": { "type": "string\n", "description": "Specifies a [v-img](/components/images) as the component's background." }, "VAppBar/title": { "type": "string\n", "description": "Specify a title text for the component." }, "VAppBar/flat": { "type": "boolean\n", "description": "Removes the component's **box-shadow**." }, "VAppBar/collapse": { "type": "boolean\n", "description": "Morphs the component into a collapsed state, reducing its maximum width." }, "VAppBar/model-value": { "type": "boolean\n", "description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array." }, "VAppBar/location": { "type": "'top' | 'bottom'\n", "description": "Aligns the component towards the top or bottom." }, "VAppBar/absolute": { "type": "boolean\n", "description": "Applies position: absolute to the component." }, "VAppBar/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VAppBar/density": { "type": "'default' | 'prominent' | 'comfortable' | 'compact'\n", "description": "Adjusts the vertical height used by the component." }, "VAppBar/extended": { "type": "boolean\n", "description": "Use this prop to increase the height of the toolbar _without_ using the `extension` slot for adding content. May be used in conjunction with the **extension-height** prop, and any of the other props that affect the height of the toolbar, e.g. **prominent**, **dense**, etc., **WITH THE EXCEPTION** of **height**." }, "VAppBar/extension-height": { "type": "string | number\n", "description": "Designate an explicit height for the `extension` slot." }, "VAppBar/floating": { "type": "boolean\n", "description": "Applies **display: inline-flex** to the component." }, "VAppBar/height": { "type": "string | number\n", "description": "Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. **prominent**, **dense**, **extended**, etc." }, "VAppBar/border": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**." }, "VAppBar/elevation": { "type": "string | number\n", "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)." }, "VAppBar/rounded": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)." }, "VAppBar/tile": { "type": "boolean\n", "description": "Removes any applied **border-radius** from the component." }, "VAppBar/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VAppBar/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VAppBar/name": { "type": "string\n", "description": "Assign a specific name for layout registration." }, "VAppBar/order": { "type": "string | number\n", "description": "Adjust the order of the component in relation to its registration order." }, "VAppBar/scroll-target": { "type": "string\n", "description": "The element to target for scrolling events. Uses `window` by default." }, "VAppBar/scroll-threshold": { "type": "string | number\n", "description": "The amount of scroll distance down before **scroll-behavior** activates." }, "VAppBar/scroll-behavior": { "type": " | (string & {})\n | 'hide'\n | 'inverted'\n | 'collapse'\n | 'elevate'\n | 'fade-image'\n", "description": "Specify an action to take when the scroll position of **scroll-target** reaches **scroll-threshold**. Accepts any combination of hide, inverted, collapse, elevate, and fade-image. Multiple values can be used, separated by a space." }, "VAppBarNavIcon/symbol": { "type": "any\n", "description": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/)." }, "VAppBarNavIcon/flat": { "type": "boolean\n", "description": "Removes the button box shadow. This is different than using the 'flat' variant." }, "VAppBarNavIcon/active": { "type": "boolean\n", "description": "Controls the **active** state of the item. This is typically used to highlight the component." }, "VAppBarNavIcon/base-color": { "type": "string\n", "description": "Sets the color of component when not focused." }, "VAppBarNavIcon/prepend-icon": { "type": "any\n", "description": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content." }, "VAppBarNavIcon/append-icon": { "type": "any\n", "description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot." }, "VAppBarNavIcon/block": { "type": "boolean\n", "description": "Expands the button to 100% of available space." }, "VAppBarNavIcon/readonly": { "type": "boolean\n", "description": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard." }, "VAppBarNavIcon/slim": { "type": "boolean\n", "description": "Reduces padding to 0 8px." }, "VAppBarNavIcon/stacked": { "type": "boolean\n", "description": "Displays the button as a flex-column." }, "VAppBarNavIcon/ripple": { "type": "boolean | { class: string }\n", "description": "Applies the [v-ripple](/directives/ripple) directive." }, "VAppBarNavIcon/value": { "type": "any\n", "description": "The value used when the component is selected in a group. If not provided, a unique ID will be used." }, "VAppBarNavIcon/text": { "type": "string\n", "description": "Specify content text for the component." }, "VAppBarNavIcon/border": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**." }, "VAppBarNavIcon/density": { "type": "'default' | 'comfortable' | 'compact'\n", "description": "Adjusts the vertical height used by the component." }, "VAppBarNavIcon/height": { "type": "string | number\n", "description": "Sets the height for the component." }, "VAppBarNavIcon/max-height": { "type": "string | number\n", "description": "Sets the maximum height for the component." }, "VAppBarNavIcon/max-width": { "type": "string | number\n", "description": "Sets the maximum width for the component." }, "VAppBarNavIcon/min-height": { "type": "string | number\n", "description": "Sets the minimum height for the component." }, "VAppBarNavIcon/min-width": { "type": "string | number\n", "description": "Sets the minimum width for the component." }, "VAppBarNavIcon/width": { "type": "string | number\n", "description": "Sets the width for the component." }, "VAppBarNavIcon/elevation": { "type": "string | number\n", "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)." }, "VAppBarNavIcon/disabled": { "type": "boolean\n", "description": "Removes the ability to click or target the component." }, "VAppBarNavIcon/selected-class": { "type": "string\n", "description": "Configure the active CSS class applied when an item is selected." }, "VAppBarNavIcon/loading": { "type": "string | boolean\n", "description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color." }, "VAppBarNavIcon/location": { "type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n", "description": "Specifies the component's location. Can combine by using a space separated string." }, "VAppBarNavIcon/position": { "type": "'static' | 'relative' | 'fixed' | 'absolute' | 'sticky'\n", "description": "Sets the position for the component." }, "VAppBarNavIcon/rounded": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)." }, "VAppBarNavIcon/tile": { "type": "boolean\n", "description": "Removes any applied **border-radius** from the component." }, "VAppBarNavIcon/href": { "type": "string\n", "description": "Designates the component as anchor and applies the **href** attribute." }, "VAppBarNavIcon/replace": { "type": "boolean\n", "description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation." }, "VAppBarNavIcon/exact": { "type": "boolean\n", "description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation." }, "VAppBarNavIcon/to": { "type": "RouteLocationRaw\n", "description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation." }, "VAppBarNavIcon/size": { "type": "string | number\n", "description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**." }, "VAppBarNavIcon/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VAppBarNavIcon/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VAppBarNavIcon/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VAppBarNavIcon/variant": { "type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n", "description": "Applies a distinct style to the component." }, "VAppBarNavIcon/icon": { "type": "any\n", "description": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_." }, "VAppBarTitle/text": { "type": "string\n", "description": "Specify content text for the component." }, "VAppBarTitle/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VAutocomplete/label": { "type": "string\n", "description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component." }, "VAutocomplete/auto-select-first": { "type": "boolean | 'exact'\n", "description": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches." }, "VAutocomplete/clear-on-select": { "type": "boolean\n", "description": "Reset the search text when a selection is made while using the **multiple** prop." }, "VAutocomplete/search": { "type": "string\n", "description": "Text input used to filter items." }, "VAutocomplete/filter-mode": { "type": "'some' | 'every' | 'union' | 'intersection'\n", "description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters." }, "VAutocomplete/no-filter": { "type": "boolean\n", "description": "Do not apply filtering when searching. Useful when data is being filtered server side." }, "VAutocomplete/custom-filter": { "type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/filter.ts#L19-L19\" target=\"_blank\">FilterFunction</a>\n", "description": "Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted." }, "VAutocomplete/reverse": { "type": "boolean\n", "description": "Reverses the orientation." }, "VAutocomplete/flat": { "type": "boolean\n", "description": "Removes box shadow when using a variant with elevation." }, "VAutocomplete/custom-key-filter": { "type": "unknown\n", "description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified." }, "VAutocomplete/filter-keys": { "type": "string | string[]\n", "description": "Array of specific keys to filter on the item." }, "VAutocomplete/chips": { "type": "boolean\n", "description": "Changes display of selections to chips." }, "VAutocomplete/closable-chips": { "type": "boolean\n", "description": "Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components." }, "VAutocomplete/close-text": { "type": "string\n", "description": "Text set to to the inputs `aria-label` and `title` when input menu is closed." }, "VAutocomplete/type": { "type": "string\n", "description": "Sets input type." }, "VAutocomplete/open-text": { "type": "string\n", "description": "Text set to to the inputs **aria-label** and **title** when input menu is open." }, "VAutocomplete/eager": { "type": "boolean\n", "description": "Forces the component's content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO." }, "VAutocomplete/hide-no-data": { "type": "boolean\n", "description": "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." }, "VAutocomplete/hide-selected": { "type": "boolean\n", "description": "Do not display in the select menu items that are already selected." }, "VAutocomplete/list-props": { "type": "unknown\n", "description": "Pass props through to the `v-list` component. Accepts an object with anything from [v-list](/api/v-list/#props) props, camelCase keys are recommended." }, "VAutocomplete/base-color": { "type": "string\n", "description": "Sets the color of the input when it is not focused." }, "VAutocomplete/bg-color": { "type": "string\n", "description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VAutocomplete/disabled": { "type": "boolean\n", "description": "Removes the ability to click or target the input." }, "VAutocomplete/multiple": { "type": "boolean\n", "description": "Changes select to multiple. Accepts array for value." }, "VAutocomplete/density": { "type": "'default' | 'comfortable' | 'compact'\n", "description": "Adjusts the vertical height used by the component." }, "VAutocomplete/max-width": { "type": "string | number\n", "description": "Sets the maximum width for the component." }, "VAutocomplete/min-width": { "type": "string | number\n", "description": "Sets the minimum width for the component." }, "VAutocomplete/width": { "type": "string | number\n", "description": "Sets the width for the component." }, "VAutocomplete/items": { "type": "any[]\n", "description": "Can be an array of objects or strings. By default objects should have **title** and **value** properties, and can optionally have a **props** property containing any [VListItem props](/api/v-list-item/#props). Keys to use for these can be changed with the **item-title**, **item-value**, and **item-props** props." }, "VAutocomplete/item-title": { "type": "SelectItemKey<any>\n", "description": "Property on supplied `items` that contains its title." }, "VAutocomplete/item-value": { "type": "SelectItemKey<any>\n", "description": "Property on supplied `items` that contains its value." }, "VAutocomplete/item-children": { "type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L73-L77\" target=\"_blank\">SelectItemKey</a>\n", "description": "This property currently has **no effect**." }, "VAutocomplete/item-props": { "type": "SelectItemKey<any>\n", "description": "Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component." }, "VAutocomplete/return-object": { "type": "boolean\n", "description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**." }, "VAutocomplete/value-comparator": { "type": "(a: any, b: any) => boolean\n", "description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop." }, "VAutocomplete/rounded": { "type": "string | number | boolean\n", "description": "Adds a border radius to the input." }, "VAutocomplete/tile": { "type": "boolean\n", "description": "Removes any applied **border-radius** from the component." }, "VAutocomplete/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VAutocomplete/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VAutocomplete/variant": { "type": " | 'outlined'\n | 'plain'\n | 'underlined'\n | 'filled'\n | 'solo'\n | 'solo-inverted'\n | 'solo-filled'\n", "description": "Applies a distinct style to the component." }, "VAutocomplete/name": { "type": "string\n", "description": "Sets the component's name attribute." }, "VAutocomplete/menu": { "type": "boolean\n", "description": "Renders with the menu open by default." }, "VAutocomplete/menu-icon": { "type": "any\n", "description": "Sets the the spin icon." }, "VAutocomplete/menu-props": { "type": "unknown\n", "description": "Pass props through to the `v-menu` component. Accepts an object with anything from [v-menu](/api/v-menu/#props) props, camelCase keys are recommended." }, "VAutocomplete/id": { "type": "string\n", "description": "Sets the DOM id on the component." }, "VAutocomplete/model-value": { "type": "any\n", "description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array." }, "VAutocomplete/transition": { "type": "string | boolean | (TransitionProps & { component: Component })\n", "description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition." }, "VAutocomplete/no-data-text": { "type": "string\n", "description": "Text shown when no items are provided to the component." }, "VAutocomplete/open-on-clear": { "type": "boolean\n", "description": "Open's the menu whenever the clear icon is clicked." }, "VAutocomplete/item-color": { "type": "string\n", "description": "Sets color of selected items." }, "VAutocomplete/autofocus": { "type": "boolean\n", "description": "Enables autofocus." }, "VAutocomplete/counter": { "type": "string | number | boolean\n", "description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation." }, "VAutocomplete/prefix": { "type": "string\n", "description": "Displays prefix text." }, "VAutocomplete/placeholder": { "type": "string\n", "description": "Sets the input’s placeholder text." }, "VAutocomplete/persistent-placeholder": { "type": "boolean\n", "description": "Forces placeholder to always be visible." }, "VAutocomplete/persistent-counter": { "type": "boolean\n", "description": "Forces counter to always be visible." }, "VAutocomplete/suffix": { "type": "string\n", "description": "Displays suffix text." }, "VAutocomplete/role": { "type": "string\n", "description": "The role attribute applied to the input." }, "VAutocomplete/append-icon": { "type": "any\n", "description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot." }, "VAutocomplete/center-affix": { "type": "boolean\n", "description": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center." }, "VAutocomplete/prepend-icon": { "type": "any\n", "description": "Prepends an icon to the outnside the component's input, uses the same syntax as `v-icon`." }, "VAutocomplete/hide-spin-buttons": { "type": "boolean\n", "description": "Hides spin buttons on the input when type is set to `number`." }, "VAutocomplete/hint": { "type": "string\n", "description": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property." }, "VAutocomplete/persistent-hint": { "type": "boolean\n", "description": "Forces [hint](#props-hint) to always be visible." }, "VAutocomplete/messages": { "type": "string | string[]\n", "description": "Displays a list of messages or a single message if using a string." }, "VAutocomplete/direction": { "type": "'horizontal' | 'vertical'\n", "description": "Changes the direction of the input." }, "VAutocomplete/error": { "type": "boolean\n", "description": "Puts the input in a manual error state." }, "VAutocomplete/error-messages": { "type": "string | string[]\n", "description": "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." }, "VAutocomplete/max-errors": { "type": "string | number\n", "description": "Control the maximum number of shown errors from validation." }, "VAutocomplete/readonly": { "type": "boolean\n", "description": "Puts input in readonly state." }, "VAutocomplete/rules": { "type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20\" target=\"_blank\">ValidationRule</a>[]\n", "description": "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. The input field will enter an error state if a function returns (or any value in the array contains) `false` or is a `string`." }, "VAutocomplete/validate-on": { "type": " | 'lazy'\n | 'blur'\n | 'input'\n | 'submit'\n | 'blur lazy'\n | 'input lazy'\n | 'submit lazy'\n | 'lazy blur'\n | 'lazy input'\n | 'lazy submit'\n", "description": "Change what type of event triggers validation to run." }, "VAutocomplete/focused": { "type": "boolean\n", "description": "Forces a focused state styling on the component." }, "VAutocomplete/hide-details": { "type": "boolean | 'auto'\n", "description": "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." }, "VAutocomplete/clearable": { "type": "boolean\n", "description": "Allows for the component to be cleared." }, "VAutocomplete/clear-icon": { "type": "any\n", "description": "The icon used when the **clearable** prop is set to true." }, "VAutocomplete/active": { "type": "boolean\n", "description": "Controls the **active** state of the item. This is typically used to highlight the component." }, "VAutocomplete/persistent-clear": { "type": "boolean\n", "description": "Always show the clearable icon when the input is dirty (By default it only shows on hover)." }, "VAutocomplete/prepend-inner-icon": { "type": "any\n", "description": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot." }, "VAutocomplete/single-line": { "type": "boolean\n", "description": "Label does not move on focus/dirty." }, "VAutocomplete/loading": { "type": "string | boolean\n", "description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color." }, "VAutocomplete/counter-value": { "type": "number | ((value: any) => number)\n", "description": "Function returns the counter display text." }, "VAutocomplete/model-modifiers": { "type": "unknown\n", "description": "**FOR INTERNAL USE ONLY**" }, "VAvatar/start": { "type": "boolean\n", "description": "Applies margin at the end of the component." }, "VAvatar/end": { "type": "boolean\n", "description": "Applies margin at the start of the component." }, "VAvatar/icon": { "type": "any\n", "description": "Apply a specific icon using the [v-icon](/components/icons/) component." }, "VAvatar/image": { "type": "string\n", "description": "Apply a specific image using [v-img](/components/images/)." }, "VAvatar/text": { "type": "string\n", "description": "Specify content text for the component." }, "VAvatar/density": { "type": "'default' | 'comfortable' | 'compact'\n", "description": "Adjusts the vertical height used by the component." }, "VAvatar/rounded": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)." }, "VAvatar/tile": { "type": "boolean\n", "description": "Removes any applied **border-radius** from the component." }, "VAvatar/size": { "type": "string | number\n", "description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**." }, "VAvatar/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VAvatar/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VAvatar/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VAvatar/variant": { "type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'\n", "description": "Applies a distinct style to the component." }, "VBadge/bordered": { "type": "boolean\n", "description": "Applies a **2px** by default and **1.5px** border around the badge when using the **dot** property." }, "VBadge/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VBadge/content": { "type": "string | number\n", "description": "Text content to show in the badge." }, "VBadge/dot": { "type": "boolean\n", "description": "Reduce the size of the badge and hide its contents." }, "VBadge/floating": { "type": "boolean\n", "description": "Elevates the badge above the slotted content." }, "VBadge/icon": { "type": "any\n", "description": "Apply a specific icon using the [v-icon](/components/icons/) component." }, "VBadge/inline": { "type": "boolean\n", "description": "Moves the badge to be inline with the wrapping element. Supports the usage of the **left** prop." }, "VBadge/label": { "type": "string\n", "description": "The **aria-label** used for the badge." }, "VBadge/max": { "type": "string | number\n", "description": "Sets the maximum number allowed when using the **content** prop with a `number` like value. If the content number exceeds the maximum value, a `+` suffix is added." }, "VBadge/model-value": { "type": "boolean\n", "description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array." }, "VBadge/offset-x": { "type": "string | number\n", "description": "Offset the badge on the x-axis." }, "VBadge/offset-y": { "type": "string | number\n", "description": "Offset the badge on the y-axis." }, "VBadge/text-color": { "type": "string\n", "description": "Applies a specified color to the control text - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VBadge/location": { "type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n", "description": "Specifies the component's location. Can combine by using a space separated string." }, "VBadge/rounded": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)." }, "VBadge/tile": { "type": "boolean\n", "description": "Removes any applied **border-radius** from the component." }, "VBadge/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VBadge/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VBadge/transition": { "type": "string | boolean | (TransitionProps & { component: Component })\n", "description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition." }, "VBanner/text": { "type": "string\n", "description": "Specify content text for the component." }, "VBanner/avatar": { "type": "string\n", "description": "Designates a specific src image to pass to the thumbnail." }, "VBanner/bg-color": { "type": "string\n", "description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VBanner/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VBanner/icon": { "type": "any\n", "description": "Apply a specific icon using the [v-icon](/components/icons/) component." }, "VBanner/stacked": { "type": "boolean\n", "description": "Forces the banner actions onto a new line. This is not applicable when the banner has `lines=\"one\"`." }, "VBanner/sticky": { "type": "boolean\n", "description": "Applies `position: sticky` to the component with `top: 0`. You can find more information on the [MDN documentation for sticky position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)." }, "VBanner/border": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**." }, "VBanner/density": { "type": "'default' | 'comfortable' | 'compact'\n", "description": "Adjusts the vertical height used by the component." }, "VBanner/height": { "type": "string | number\n", "description": "Sets the height for the component." }, "VBanner/max-height": { "type": "string | number\n", "description": "Sets the maximum height for the component." }, "VBanner/max-width": { "type": "string | number\n", "description": "Sets the maximum width for the component." }, "VBanner/min-height": { "type": "string | number\n", "description": "Sets the minimum height for the component." }, "VBanner/min-width": { "type": "string | number\n", "description": "Sets the minimum width for the component." }, "VBanner/width": { "type": "string | number\n", "description": "Sets the width for the component." }, "VBanner/mobile": { "type": "boolean\n", "description": "Applies the mobile banner styles." }, "VBanner/mobile-breakpoint": { "type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n", "description": "Overrides the display configuration default screen size that the component should be considered in mobile." }, "VBanner/elevation": { "type": "string | number\n", "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)." }, "VBanner/location": { "type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>\n", "description": "Specifies the component's location. Can combine by using a space separated string." }, "VBanner/position": { "type": "'sticky' | 'static' | 'relative' | 'fixed' | 'absolute'\n", "description": "Sets the position for the component." }, "VBanner/rounded": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)." }, "VBanner/tile": { "type": "boolean\n", "description": "Removes any applied **border-radius** from the component." }, "VBanner/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VBanner/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VBanner/lines": { "type": "'one' | 'two' | 'three'\n", "description": "The amount of visible lines of text before it truncates." }, "VBannerActions/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VBannerActions/density": { "type": "string\n", "description": "Adjusts the vertical height used by the component." }, "VBannerText/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VBottomNavigation/base-color": { "type": "string\n", "description": "Sets the color of component when not focused." }, "VBottomNavigation/bg-color": { "type": "string\n", "description": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VBottomNavigation/color": { "type": "string\n", "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)." }, "VBottomNavigation/grow": { "type": "boolean\n", "description": "Force all [v-btn](/components/buttons) children to take up all available horizontal space." }, "VBottomNavigation/mode": { "type": "string\n", "description": "Changes the orientation and active state styling of the component." }, "VBottomNavigation/height": { "type": "string | number\n", "description": "Sets the height for the component." }, "VBottomNavigation/active": { "type": "boolean\n", "description": "Controls the **active** state of the item. This is typically used to highlight the component." }, "VBottomNavigation/border": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**." }, "VBottomNavigation/density": { "type": "'default' | 'comfortable' | 'compact'\n", "description": "Adjusts the vertical height used by the component." }, "VBottomNavigation/elevation": { "type": "string | number\n", "description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation)." }, "VBottomNavigation/rounded": { "type": "string | number | boolean\n", "description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius)." }, "VBottomNavigation/tile": { "type": "boolean\n", "description": "Removes any applied **border-radius** from the component." }, "VBottomNavigation/name": { "type": "string\n", "description": "Assign a specific name for layout registration." }, "VBottomNavigation/order": { "type": "string | number\n", "description": "Adjust the order of the component in relation to its registration order." }, "VBottomNavigation/absolute": { "type": "boolean\n", "description": "Applies **position: absolute** to the component." }, "VBottomNavigation/tag": { "type": "string\n", "description": "Specify a custom tag used on the root element." }, "VBottomNavigation/model-value": { "type": "unknown\n", "description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array." }, "VBottomNavigation/multiple": { "type": "boolean\n", "description": "Allows one to select multiple items." }, "VBottomNavigation/max": { "type": "number\n", "description": "Sets a maximum number of selections that can be made." }, "VBottomNavigation/selected-class": { "type": "string\n", "description": "Configure the active CSS class applied when an item is selected." }, "VBottomNavigation/disabled": { "type": "boolean\n", "description": "Puts all children components into a disabled state." }, "VBottomNavigation/mandatory": { "type": "boolean | 'force'\n", "description": "Forces at least one item to always be selected (if available)." }, "VBottomNavigation/theme": { "type": "string\n", "description": "Specify a theme for this component and all of its children." }, "VBottomSheet/activator": { "type": "Element | 'parent' | (string & {}) | ComponentPublicInstance\n", "description": "Explicitly sets the overlay's activator." }, "VBottomSheet/inset": { "type": "boolean\n", "description": "Reduces the sheet content maximum width to 70%." }, "VBottomSheet/fullscreen": { "type": "boolean\n", "description": "Changes layout for fullscreen display." }, "VBottomSheet/retain-focus": { "type": "boolean\n", "description": "Tab focus will return to the first child of the dialog by default. Disable this when using external tools that require focus such as TinyMCE or vue-clipboard." }, "VBottomSheet/scrollable": { "type": "boolean\n", "description": "When set to true, expects a `v-card` and a `v-card-text` component with a designated height. For more information, check out the [scrollable example](/components/dialogs#scrollable)." }, "VBottomSheet/absolute": { "type": "boolean\n", "description": "Applies **position: absolute** to the content element." }, "VBottomSheet/close-on-back": { "type": "boolean\n", "description": "Closes the overlay content when the browser's back button is pressed or `$router.back()` is called, cancelling the original navigation. `persistent` overlays will cancel navigation and animate as if they were clicked outside instead of closing." }, "VBottomSheet/contained": { "type": "boolean\n", "description": "Limits the size of the component and scrim to its offset parent. Implies `absolute` and `attach`. (Note: The parent element must have position: relative.)." }, "VBottomSheet/content-class": { "type": "any\n", "description": "Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the `v-app` component (unless the **attach** prop is provided) and is not targetable by classes passed directly on the component." }, "VBottomSheet/content-props": { "type": "any\n", "description": "Apply custom properties to the content." }, "VBottomSheet/disabled": { "type": "boolean\n", "description": "Removes the ability to click or target the component." }, "VBottomSheet/opacity": { "type": "string | number\n", "description": "Sets the overlay opacity." }, "VBottomSheet/no-click-animation": { "type": "boolean\n", "description": "Disables the bounce effect when clicking outside of a `v-dialog`'s content when using the **persistent** prop." }, "VBottomSheet/model-value": { "type": "boolean\n", "description": "The v