vuetify3

class trame.widgets.vuetify3.Template(children=None, **kwargs)

Bases: AbstractElement

The standard html content template element. This is mostly used by vue's slot system.

Parameters:

children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element
v_slot – The slot this template corresponds to

class trame.widgets.vuetify3.VAlert(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VAlert component. See more info and examples.

Args:

title (string):

Specify a title text for the component.

text (string):

Specify content text for the component.

border (boolean, ‘top’, ‘end’, ‘bottom’, ‘start’):

Adds a colored border to the component.

border_color (string):

Specifies the color of the border. Accepts any color value.

closable (boolean):

Adds a close icon that can hide the alert.

close_icon (enum):

Change the default icon used for closable alerts.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

type (‘success’, ‘info’, ‘warning’, ‘error’):

Create a specialized alert that uses a contextual color and has a pre-defined icon.

close_label (string):

Text used for aria-label on closable alerts. Can also be customized globally in [Internationalization](/customization/internationalization).

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: false, string, (string, [string, number])[], js_fn, FunctionalComponent

]

model_value (boolean):

Controls whether the component is visible or hidden.

prominent (boolean):

Displays a larger vertically centered icon to draw more attention.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

position (‘static’, ‘relative’, ‘fixed’, ‘absolute’, ‘sticky’):

Sets the position for the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes the component’s border-radius.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

click_close (event):

Emitted when close icon is clicked.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VAlertTitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VAlertTitle component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VApp(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VApp component. See more info and examples.

Args:

full_height (boolean):: Sets the component height to 100%.
overlaps (string[]):: FOR INTERNAL USE ONLY
theme (string):: Specify a theme for this component and all of its children.

class trame.widgets.vuetify3.VAppBar(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VAppBar component. See more info and examples.

Args:

flat (boolean):

Removes the component’s box-shadow.

tag (string):

Specify a custom tag used on the root element.

name (string):

Assign a specific name for layout registration.

title (string):

Specify a title text for the component.

theme (string):

Specify a theme for this component and all of its children.

image (string):

Specifies a [v-img](/components/images) as the component’s background.

collapse (boolean):

Morphs the component into a collapsed state, reducing its maximum width.

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (‘top’, ‘bottom’):

Aligns the component towards the top or bottom.

absolute (boolean):

Applies position: absolute to the component.

color (string):

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).

density (‘default’, ‘prominent’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

extended (boolean):

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.

extension_height (string, number):

Designate an explicit height for the extension slot.

floating (boolean):

Applies display: inline-flex to the component.

height (string, number):

Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. prominent, dense, extended, etc.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

order (string, number):

Adjust the order of the component in relation to its registration order.

scroll_target (string):

The element to target for scrolling events. Uses window by default.

scroll_threshold (string, number):

The amount of scroll distance down before scroll-behavior activates.

scroll_behavior (enum):

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.

Enum values: [: (string & {}), ‘hide’, ‘fully-hide’, ‘inverted’, ‘collapse’, ‘elevate’, ‘fade-image’

]

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VAppBarNavIcon(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VAppBarNavIcon component. See more info and examples.

Args:

symbol (any):

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/).

text (string):

Specify content text for the component.

flat (boolean):

Removes the button box shadow. This is different than using the ‘flat’ variant.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.

Enum values: [: boolean, string, (string, [string, number])[], js_fn, FunctionalComponent

]

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

position (‘static’, ‘relative’, ‘fixed’, ‘absolute’, ‘sticky’):

Sets the position for the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

replace (boolean):

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.

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

active_color (string):

The applied color when the component is in an active state.

base_color (string):

Sets the color of component when not focused.

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

block (boolean):

Expands the button to 100% of available space.

readonly (boolean):

Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.

slim (boolean):

Reduces padding to 0 8px.

stacked (boolean):

Displays the button as a flex-column.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

disabled (boolean):

Removes the ability to click or target the component.

selected_class (string):

Configure the active CSS class applied when an item is selected.

loading (string, boolean):

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.

href (string):

Designates the component as anchor and applies the href attribute.

exact (boolean):

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.

to (RouteLocationRaw):

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.

size (string, number):

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.

class trame.widgets.vuetify3.VAppBarTitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VAppBarTitle component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
text (string):: Specify content text for the component.

class trame.widgets.vuetify3.VAutocomplete(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VAutocomplete component. See more info and examples.

Args:

flat (boolean):

Removes box shadow when using a variant with elevation.

type (string):

Sets input type.

reverse (boolean):

Reverses the orientation.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

menu (boolean):

Renders with the menu open by default.

search (string):

Text input used to filter items.

theme (string):

Specify a theme for this component and all of its children.

items (any[]):

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.

id (string):

Sets the DOM id on the component.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

rounded (string, number, boolean):

Adds a border radius to the input.

tile (boolean):

Removes any applied border-radius from the component.

auto_select_first (boolean, ‘exact’):

When searching, will always highlight the first option and select it on blur. exact will only highlight and select exact matches.

clear_on_select (boolean):

Reset the search text when a selection is made while using the multiple prop.

filter_mode (‘every’, ‘some’, ‘union’, ‘intersection’):

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. - some: There is at least one match from either the custom filter or the custom key filter. - every: All columns match either the custom filter or the custom key filter. - union: There is at least one match from the custom filter, or all columns match the custom key filters. - intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

no_filter (boolean):

Do not apply filtering when searching. Useful when data is being filtered server side.

custom_filter (FilterFunction):

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.

custom_key_filter (unknown):

Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified.

filter_keys (string, string[]):

Array of specific keys to filter on the item.

chips (boolean):

Changes display of selections to chips.

closable_chips (boolean):

Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.

close_text (string):

Text set to to the inputs aria-label and title when input menu is closed.

open_text (string):

Text set to to the inputs aria-label and title when input menu is open.

eager (boolean):

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.

hide_no_data (boolean):

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.

hide_selected (boolean):

Do not display in the select menu items that are already selected.

list_props (unknown):

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.

base_color (string):

Sets the color of the input when it is not focused.

bg_color (string):

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).

disabled (boolean):

Removes the ability to click or target the input.

multiple (boolean):

Changes select to multiple. Accepts array for value.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

item_title (SelectItemKey<any>):

Property on supplied items that contains its title.

item_value (SelectItemKey<any>):

Property on supplied items that contains its value.

item_children (SelectItemKey):

This property currently has no effect.

item_props (SelectItemKey<any>):

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.

return_object (boolean):

Changes the selection behavior to return the object directly rather than the value specified with item-value.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

menu_icon (enum):

Sets the the spin icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

menu_props (unknown):

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.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

no_data_text (string):

Text shown when no items are provided to the component.

open_on_clear (boolean):

Open’s the menu whenever the clear icon is clicked.

item_color (string):

Sets color of selected items.

autofocus (boolean):

Enables autofocus.

counter (string, number, boolean):

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

prefix (string):

Displays prefix text.

placeholder (string):

Sets the input’s placeholder text.

persistent_placeholder (boolean):

Forces placeholder to always be visible.

persistent_counter (boolean):

Forces counter to always be visible.

suffix (string):

Displays suffix text.

role (string):

The role attribute applied to the input.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

The icon used when the clearable prop is set to true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

prepend_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

single_line (boolean):

Label does not move on focus/dirty.

loading (string, boolean):

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.

counter_value (number, js_fn):

Function returns the counter display text.

model_modifiers (unknown):

FOR INTERNAL USE ONLY

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when append icon is clicked.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

update_search (event):

Event emitted when the search value changes.

update_menu (event):

Event that is emitted when the component’s menu state changes.

class trame.widgets.vuetify3.VAvatar(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VAvatar component. See more info and examples.

Args:

text (string):

Specify content text for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

end (boolean):

Applies margin at the start of the component.

start (boolean):

Applies margin at the end of the component.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

size (string, number):

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.

image (string):

Apply a specific image using [v-img](/components/images/).

class trame.widgets.vuetify3.VBadge(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBadge component. See more info and examples.

Args:

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

bordered (boolean):

Applies a 2px by default and 1.5px border around the badge when using the dot property.

content (string, number):

Text content to show in the badge.

dot (boolean):

Reduce the size of the badge and hide its contents.

floating (boolean):

Move the badge further away from the slotted content. Equivalent to an 8px offset.

inline (boolean):

Display as an inline block instead of absolute position. location, floating, and offset will have no effect.

label (string):

The aria-label used for the badge.

max (string, number):

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.

offset_x (string, number):

Offset the badge on the x-axis.

offset_y (string, number):

Offset the badge on the y-axis.

text_color (string):

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).

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

class trame.widgets.vuetify3.VBanner(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBanner component. See more info and examples.

Args:

text (string):

Specify content text for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

position (‘static’, ‘relative’, ‘fixed’, ‘absolute’, ‘sticky’):

Sets the position for the component.

sticky (boolean):

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).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

stacked (boolean):

Forces the banner actions onto a new line. This is not applicable when the banner has lines=”one”.

avatar (string):

Designates a specific src image to pass to the thumbnail.

bg_color (string):

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).

mobile (boolean):

Applies the mobile banner styles.

mobile_breakpoint (number, ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’):

Overrides the display configuration default screen size that the component should be considered in mobile.

lines (‘one’, ‘two’, ‘three’):

The amount of visible lines of text before it truncates.

class trame.widgets.vuetify3.VBannerActions(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBannerActions component. See more info and examples.

Args:

density (string):: Adjusts the vertical height used by the component.
color (string):: 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).

class trame.widgets.vuetify3.VBannerText(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBannerText component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VBottomNavigation(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBottomNavigation component. See more info and examples.

Args:

border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
model_value (unknown):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
density (‘default’, ‘comfortable’, ‘compact’):: Adjusts the vertical height used by the component.
height (string, number):: Sets the height for the component.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
absolute (boolean):: Applies position: absolute to the component.
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
color (string):: 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).
name (string):: Assign a specific name for layout registration.
active (boolean):: Controls the active state of the item. This is typically used to highlight the component.
base_color (string):: Sets the color of component when not focused.
disabled (boolean):: Puts all children components into a disabled state.
selected_class (string):: Configure the active CSS class applied when an item is selected.
max (number):: Sets a maximum number of selections that can be made.
bg_color (string):: 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).
mode (string):: Changes the orientation and active state styling of the component.
grow (boolean):: Force all [v-btn](/components/buttons) children to take up all available horizontal space.
order (string, number):: Adjust the order of the component in relation to its registration order.
multiple (boolean):: Allows one to select multiple items.
mandatory (boolean, ‘force’):: Forces at least one item to always be selected (if available).
update_modelValue (event):: Event that is emitted when the component’s model changes.
update_active (event):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VBottomNavigation.json))

class trame.widgets.vuetify3.VBottomSheet(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBottomSheet component. See more info and examples.

Args:

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

location (Anchor):

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..

absolute (boolean):

Applies position: absolute to the content element.

theme (string):

Specify a theme for this component and all of its children.

disabled (boolean):

Removes the ability to click or target the component.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component }), { component: Component }

]

activator ((string & {}), Element, ‘parent’, ComponentPublicInstance):

Explicitly sets the overlay’s activator.

inset (boolean):

Reduces the sheet content maximum width to 70%.

fullscreen (boolean):

Changes layout for fullscreen display.

retain_focus (boolean):

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.

scrollable (boolean):

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).

close_on_back (boolean):

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.

contained (boolean):

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content_class (any):

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.

content_props (any):

Apply custom properties to the content.

opacity (string, number):

Sets the overlay opacity.

no_click_animation (boolean):

Disables the bounce effect when clicking outside of the content element when using the persistent prop.

persistent (boolean):

Clicking outside of the element or pressing esc key will not deactivate it.

scrim (string, boolean):

Accepts true/false to enable background, and string to define color.

z_index (string, number):

The z-index used for the component.

target (enum):

For locationStrategy=”connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

Enum values: [: (string & {}), Element, ‘parent’, ‘cursor’, ComponentPublicInstance, [number, number]

]

activator_props (unknown):

Apply custom properties to the activator.

open_on_click (boolean):

Activate the component when the activator is clicked.

open_on_hover (boolean):

Activate the component when the activator is hovered.

open_on_focus (boolean):

Activate the component when the activator is focused.

close_on_content_click (boolean):

Closes component when you click on its content.

close_delay (string, number):

Milliseconds to wait before closing component. Only applies to hover and focus events.

open_delay (string, number):

Milliseconds to wait before opening component. Only applies to hover and focus events.

eager (boolean):

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.

location_strategy (LocationStrategyFn):

A function used to specifies how the component should position relative to its activator.

origin (Anchor):

Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).

offset (string, number, number[]):

A single value that offsets content away from the target based upon what side it is on.

scroll_strategy (ScrollStrategyFn):

Strategy used when the component is activate and user scrolls.

attach (string, boolean, Element):

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VBreadcrumbs(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBreadcrumbs component. See more info and examples.

Args:

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

color (string):

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).

active_color (string):

The applied color when the component is in an active state.

disabled (boolean):

Removes the ability to click or target the component.

bg_color (string):

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).

divider (string):

Specifies the dividing character between items.

active_class (string):

The class applied to the component when it is in an active state.

items (enum):

An array of strings or objects used for automatically generating children components.

Enum values: [: (, string, (Partial<LinkProps> & { title: string; disabled: boolean }))[]

]

class trame.widgets.vuetify3.VBreadcrumbsDivider(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBreadcrumbsDivider component. See more info and examples.

Args:

divider (string, number):: Specifies the dividing character between items.

class trame.widgets.vuetify3.VBreadcrumbsItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBreadcrumbsItem component. See more info and examples.

Args:

title (string):: Specify a title text for the component.
tag (string):: Specify a custom tag used on the root element.
color (string):: 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).
replace (boolean):: 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.
active (boolean):: Controls the active state of the item. This is typically used to highlight the component.
active_color (string):: The applied color when the component is in an active state.
disabled (boolean):: Removes the ability to click or target the component.
href (string):: Designates the component as anchor and applies the href attribute.
exact (boolean):: 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.
to (RouteLocationRaw):: 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.
active_class (string):: The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation.

class trame.widgets.vuetify3.VBtn(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBtn component. See more info and examples.

Args:

symbol (any):

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/).

flat (boolean):

Removes the button box shadow. This is different than using the ‘flat’ variant.

tag (string):

Specify a custom tag used on the root element.

replace (boolean):

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.

theme (string):

Specify a theme for this component and all of its children.

size (string, number):

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.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

text (string):

Specify content text for the component.

exact (boolean):

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.

base_color (string):

Sets the color of component when not focused.

active_color (string):

The applied color when the component is in an active state.

disabled (boolean):

Removes the ability to click or target the component.

slim (boolean):

Reduces padding to 0 8px.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

block (boolean):

Expands the button to 100% of available space.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

readonly (boolean):

Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

loading (string, boolean):

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.

stacked (boolean):

Displays the button as a flex-column.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

selected_class (string):

Configure the active CSS class applied when an item is selected.

position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):

Sets the position for the component.

href (string):

Designates the component as anchor and applies the href attribute.

to (RouteLocationRaw):

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.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.

Enum values: [: boolean, string, (string, [string, number])[], js_fn, FunctionalComponent

]

group_selected (event):

Event that is emitted when an item is selected within a group.

class trame.widgets.vuetify3.VBtnGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBtnGroup component. See more info and examples.

Args:

border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
density (‘default’, ‘comfortable’, ‘compact’):: Adjusts the vertical height used by the component.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
color (string):: 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).
variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):: Applies a distinct style to the component.
base_color (string):: Sets the color of component when not focused.
divided (boolean):: Add dividers between children [v-btn](/components/buttons) components.

class trame.widgets.vuetify3.VBtnToggle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VBtnToggle component. See more info and examples.

Args:

border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
model_value (unknown):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
density (‘default’, ‘comfortable’, ‘compact’):: Adjusts the vertical height used by the component.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
rounded (string, number, boolean):: Round edge buttons.
tile (boolean):: Removes the component’s border-radius.
tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
color (string):: 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).
variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):: Applies a distinct style to the component.
base_color (string):: Sets the color of component when not focused.
disabled (boolean):: Puts all children components into a disabled state.
selected_class (string):: Configure the active CSS class applied when an item is selected.
max (number):: Sets a maximum number of selections that can be made.
multiple (boolean):: Allows one to select multiple items.
mandatory (boolean, ‘force’):: Forces at least one item to always be selected (if available).
divided (boolean):: Add dividers between children [v-btn](/components/buttons) components.
update_modelValue (event):: Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VCalendar(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCalendar component. See more info and examples.

Args:

title (string):: Specify a title text for the component.
text (string):: Specify content text for the component.
model_value (unknown[]):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
disabled (boolean):: Removes the ability to click or target the component.
max (unknown):: Maximum date or value that can be selected.
hide_header (boolean):: Determines whether the header is hidden in the calendar view.
hide_week_number (boolean):: Toggles the display of week numbers in a calendar view.
month (string, number):: Specifies the month for the calendar view.
show_adjacent_months (boolean):: Shows or hides days from adjacent months.
year (string, number):: Specifies the year for the calendar view.
weekdays (number[]):: Specifies which days of the week to display.
weeks_in_month (‘static’, ‘dynamic’):: A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.
first_day_of_week (string, number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/calendar.json))
allowed_dates (unknown[], js_fn):: Determines which dates are selectable.
display_value (unknown):: The value that determines the month to show. This is different from modelValue, which determines the selected value.
min (unknown):: Minimum date or value that can be selected.
hide_day_header (boolean):: Determines whether the day header is visible in the calendar day view.
intervals (number):: Total number of intervals in a day view.
day (unknown):: Represents the specific day associated with the interval.
day_index (number):: Index of the day this interval is a part of, in a week or month view.
events (any[]):: Array of events specific to this interval.
interval_divisions (number):: Number of subdivisions within this interval.
interval_duration (number):: Duration of this specific interval in minutes.
interval_height (number):: Height of the interval in pixels in the calendar view.
interval_format (string, Function):: Formatting rule for displaying the interval, as a string or function.
interval_start (number):: Starting time for this specific interval.
next_icon (string):: The icon to use for the next button.
prev_icon (string):: The icon to use for the prev button.
view_mode (‘month’, ‘day’, ‘week’):: The current view mode of the calendar.
update_modelValue (event):: Event that is emitted when the component’s model changes.
next (event):: Emitted when moving to the next time period.
prev (event):: Emitted when moving to the previous time period.

class trame.widgets.vuetify3.VCalendarDay(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCalendarDay component. See more info and examples.

Args:

hide_day_header (boolean):: Determines whether the day header is visible in the calendar day view.
intervals (number):: Specifies the total number of time intervals for the day in the calendar view.
day (unknown):: Represents the specific day associated with the interval.
day_index (number):: Index of the day this interval is a part of, in a week or month view.
events (any[]):: Array of events specific to this interval.
interval_divisions (number):: Number of subdivisions within this interval.
interval_duration (number):: Duration of this specific interval in minutes.
interval_height (number):: Height of the interval in pixels in the calendar view.
interval_format (string, Function):: Formatting rule for displaying the interval, as a string or function.
interval_start (number):: Starting time for this specific interval.

class trame.widgets.vuetify3.VCalendarHeader(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCalendarHeader component. See more info and examples.

Args:

title (string):: Specify a title text for the component.
text (string):: Specify content text for the component.
next_icon (string):: The icon to use for the next button.
prev_icon (string):: The icon to use for the prev button.
view_mode (‘day’, ‘month’, ‘week’):: The current view mode of the calendar.
click_next (event):: Event emitted when clicking the next button.
click_prev (event):: Event emitted when clicking the prev button.
click_toToday (event):: Event emitted when clicking the today button.

class trame.widgets.vuetify3.VCalendarInterval(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCalendarInterval component. See more info and examples.

Args:

day (unknown):: Represents the specific day associated with the interval.
day_index (number):: Index of the day this interval is a part of, in a week or month view.
events (any[]):: Array of events specific to this interval.
interval_divisions (number):: Number of subdivisions within this interval.
interval_duration (number):: Duration of this specific interval in minutes.
interval_height (number):: Height of the interval in pixels in the calendar view.
interval_format (string, Function):: Formatting rule for displaying the interval, as a string or function.
interval_start (number):: Starting time for this specific interval.
index (number):: Index or position of the interval in the day view.

class trame.widgets.vuetify3.VCalendarIntervalEvent(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCalendarIntervalEvent component. See more info and examples.

Args:

interval_divisions (number):: Number of subdivisions within the interval for this event.
interval_duration (number):: Duration of the interval in which this event occurs, in minutes.
interval_height (number):: Height of the interval in the calendar view, in pixels.
all_day (boolean):: Indicates whether the event spans the entire day.
interval (unknown):: The specific time interval this event is associated with.
event (unknown):: The event object associated with this calendar interval.

class trame.widgets.vuetify3.VCalendarMonthDay(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCalendarMonthDay component. See more info and examples.

Args:

title (string, number):: Specify a title text for the component.
color (string):: 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).
disabled (boolean):: Removes the ability to click or target the component.
active (boolean):: Controls the active state of the item. This is typically used to highlight the component.
day (unknown):: Represents the specific day in the month view of the calendar.
events (any[]):: Array of events associated with this specific day.

class trame.widgets.vuetify3.VCard(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCard component. See more info and examples.

Args:

title (string, number):

Specify a title text for the component.

text (string, number):

Specify content text for the component.

flat (boolean):

Removes the card’s elevation.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

position (‘static’, ‘relative’, ‘fixed’, ‘absolute’, ‘sticky’):

Sets the position for the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

replace (boolean):

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.

link (boolean):

Designates that the component is a link. This is automatic when using the href or to prop.

prepend_icon (enum):

Prepends a [v-icon](/components/icons/) component to the header.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

disabled (boolean):

Removes the ability to click or target the component.

loading (string, boolean):

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.

href (string):

Designates the component as anchor and applies the href attribute.

exact (boolean):

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.

to (RouteLocationRaw):

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.

image (string):

Apply a specific background image to the component.

subtitle (string, number):

Specify a subtitle text for the component.

append_avatar (string):

Appends a [v-avatar](/components/avatars/) component after default content in the append slot.

hover (boolean):

Applies 4dp of elevation when hovered (default 2dp). You can find more information on the [elevation page](/styles/elevation).

prepend_avatar (string):

Prepends a [v-avatar](/components/avatars/) component in the prepend slot before default content.

class trame.widgets.vuetify3.VCardActions(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCardActions component. See more info and examples.

class trame.widgets.vuetify3.VCardItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCardItem component. See more info and examples.

Args:

title (string, number):

Specify a title text for the component.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

subtitle (string, number):

Specify a subtitle text for the component.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

append_avatar (string):

Appends a [v-avatar](/components/avatars/) component after default content in the append slot.

prepend_avatar (string):

Prepends a [v-avatar](/components/avatars/) component in the prepend slot before default content.

class trame.widgets.vuetify3.VCardSubtitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCardSubtitle component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
opacity (string, number):: Sets the component’s opacity value

class trame.widgets.vuetify3.VCardText(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCardText component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
opacity (string, number):: Sets the component’s opacity value

class trame.widgets.vuetify3.VCardTitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCardTitle component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VCarousel(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCarousel component. See more info and examples.

Args:

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

reverse (boolean):

Reverse the normal transition direction.

height (string, number):

Sets the height for the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

Applies a color to the navigation dots - 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).

disabled (boolean):

Removes the ability to click or target the component.

selected_class (string):

Configure the active CSS class applied when an item is selected.

progress (string, boolean):

Displays a carousel progress bar. Requires the cycle prop and interval.

mandatory (boolean, ‘force’):

Forces at least one item to always be selected (if available).

next_icon (enum):

The displayed icon for forcing pagination to the next item.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

The displayed icon for forcing pagination to the previous item.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

interval (string, number):

The duration between image cycles. Requires the cycle prop.

cycle (boolean):

Determines if the carousel should cycle through images.

delimiter_icon (enum):

Sets icon for carousel delimiter.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_delimiters (boolean):

Hides the carousel’s bottom delimiters.

hide_delimiter_background (boolean):

Hides the bottom delimiter background.

continuous (boolean):

Determines whether carousel is continuous.

show_arrows (string, boolean):

Displays arrows for next/previous navigation.

touch (TouchHandlers):

Provide a custom left and right function when swiped left or right.

direction (‘horizontal’, ‘vertical’):

The transition direction when changing windows.

vertical_delimiters (boolean, ‘left’, ‘right’):

Displays carousel delimiters vertically.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VCarouselItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCarouselItem component. See more info and examples.

Args:

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

absolute (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VImg.json))

color (string):

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).

height (string, number):

Sets the height for the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

eager (boolean):

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.

disabled (boolean):

Prevents the item from becoming active when using the “next” and “prev” buttons or the toggle method.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

content_class (any):

Apply a custom class to the internal content element.

transition (string, boolean):

The transition to use when switching from lazy-src to src. Can be one of the [built in](/styles/transitions/) or custom transition.

options (IntersectionObserverInit):

Options that are passed to the [Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) constructor.

selected_class (string):

Configure the active CSS class applied when an item is selected.

position (string):

Applies [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) styles to the image and placeholder elements.

alt (string):

Alternate text for screen readers. Leave empty for decorative images.

cover (boolean):

Resizes the background image to cover the entire container.

draggable (boolean, ‘true’, ‘false’):

Controls the draggable behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable).

gradient (string):

The gradient to apply to the image. Only supports [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) syntax, anything else should be done with classes.

lazy_src (string):

Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied.

NOTE: This prop has no effect unless either height or aspect-ratio

are provided.

sizes (string):

For use with srcset, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).

src (enum):

The image URL. This prop is mandatory.

Enum values: [: string, { src: string; srcset: string; lazySrc: string; aspect: number }

]

srcset (string):

A set of alternate images to use based on device size. [Read more…](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).

aspect_ratio (string, number):

Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted.

inline (boolean):

Display as an inline element instead of a block, also disables flex-grow.

crossorigin (‘’, ‘anonymous’, ‘use-credentials’):

Specify that images should be fetched with CORS enabled [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#crossorigin)

referrerpolicy (enum):

Define which referrer is sent when fetching the resource [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy)

Enum values: [: ‘origin’, ‘no-referrer’, ‘no-referrer-when-downgrade’, ‘origin-when-cross-origin’, ‘same-origin’, ‘strict-origin’, ‘strict-origin-when-cross-origin’, ‘unsafe-url’

]

reverse_transition (string, boolean):

Sets the reverse transition.

class trame.widgets.vuetify3.VCheckbox(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCheckbox component. See more info and examples.

Args:

type (string):

Provides the default type for children selection controls.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

base_color (string):

Sets the color of the input when it is not focused.

disabled (boolean):

Removes the ability to click or target the component.

multiple (boolean):

Changes expected model to an array.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

indeterminate (boolean):

Sets an indeterminate state for the checkbox.

indeterminate_icon (enum):

The icon used when in an indeterminate state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_value (any):

Sets value for truthy state.

false_value (any):

Sets value for falsy state.

defaults_target (string):

The target component to provide defaults values for.

false_icon (enum):

The icon used when inactive.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_icon (enum):

The icon used when active.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when appended icon is clicked.

update_focused (event):

Event that is emitted when the component’s focus state changes.

class trame.widgets.vuetify3.VCheckboxBtn(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCheckboxBtn component. See more info and examples.

Args:

type (string):

Provides the default type for children selection controls.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

error (boolean):

Puts the input in a manual error state.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

name (string):

Sets the component’s name attribute.

base_color (string):

Sets the color of the input when it is not focused.

readonly (boolean):

Puts input in readonly state.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

disabled (boolean):

Removes the ability to click or target the component.

inline (boolean):

Puts children inputs into a row.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

multiple (boolean):

Changes select to multiple. Accepts array for value.

indeterminate (boolean):

Puts the control in an indeterminate state. Used with the [indeterminate-icon](#props-indeterminate-icon) property.

indeterminate_icon (enum):

Icon used when the component is in an indeterminate state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_value (any):

Sets value for truthy state.

false_value (any):

Sets value for falsy state.

defaults_target (string):

The target component to provide defaults values for.

id (string):

Sets the DOM id on the component.

false_icon (enum):

The icon used when inactive.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_icon (enum):

The icon used when active.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

update_modelValue (event):

Event that is emitted when the component’s model changes.

update_indeterminate (event):

Event that is emitted when the component’s indeterminate state changes.

class trame.widgets.vuetify3.VChip(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VChip component. See more info and examples.

Args:

filter (boolean):

Displays a selection icon when selected.

tag (string):

Specify a custom tag used on the root element.

label (boolean):

Applies a medium size border radius.

link (boolean):

Designates that the component is a link. This is automatic when using the href or to prop.

replace (boolean):

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.

theme (string):

Specify a theme for this component and all of its children.

size (string, number):

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.

value (any):

The value used when a child of a [v-chip-group](/components/chip-groups).

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

text (string):

Specify content text for the component.

exact (boolean):

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.

active_class (string):

The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation.

disabled (boolean):

Removes the ability to click or target the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

selected_class (string):

Configure the active CSS class applied when an item is selected.

href (string):

Designates the component as anchor and applies the href attribute.

to (RouteLocationRaw):

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.

append_avatar (string):

Appends a [v-avatar](/components/avatars/) component after default content in the append slot.

prepend_avatar (string):

Prepends a [v-avatar](/components/avatars/) component in the prepend slot before default content.

draggable (boolean):

Makes the chip draggable.

closable (boolean):

Adds remove button and then a chip can be closed.

close_icon (enum):

Change the default icon used for close chips.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

close_label (string):

Text used for aria-label on the close button in close chips. Can also be customized globally in [Internationalization](/customization/internationalization).

filter_icon (enum):

Change the default icon used for filter chips.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

pill (boolean):

Remove v-avatar padding.

update_modelValue (event):

Event that is emitted when the component’s model changes.

group_selected (event):

Event that is emitted when an item is selected within a group.

click_close (event):

Emitted when close icon is clicked.

class trame.widgets.vuetify3.VChipGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VChipGroup component. See more info and examples.

Args:

symbol (any):

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/).

filter (boolean):

Applies an checkmark icon in front of every chip for using it like a filter.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

disabled (boolean):

Puts all children components into a disabled state.

selected_class (string):

Configure the active CSS class applied when an item is selected.

max (number):

Sets a maximum number of selections that can be made.

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

mobile_breakpoint (number, ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’):

Sets the designated mobile breakpoint for the component.

multiple (boolean):

Allows one to select multiple items.

mandatory (boolean, ‘force’):

Forces at least one item to always be selected (if available).

next_icon (enum):

Specify the icon to use for the next icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Specify the icon to use for the prev icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

show_arrows (string, boolean):

Force the display of the pagination arrows.

direction (‘horizontal’, ‘vertical’):

Switch between horizontal and vertical modes.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

column (boolean):

Remove horizontal pagination and wrap items as needed.

center_active (boolean):

Forces the selected chip to be centered.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VClassIcon(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VClassIcon component. See more info and examples.

Args:

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

tag (string):

Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VCode(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCode component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VCol(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCol component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
order (string, number):: Sets the default [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) for the column.
offset (string, number):: Sets the default offset for the column.
cols (string, number, boolean):: Sets the default number of columns the component extends. Available options are: 1 -> 12 and auto.
sm (string, number, boolean):: Changes the number of columns on small and greater breakpoints.
md (string, number, boolean):: Changes the number of columns on medium and greater breakpoints.
lg (string, number, boolean):: Changes the number of columns on large and greater breakpoints.
xl (string, number, boolean):: Changes the number of columns on extra large and greater breakpoints.
xxl (string, number, boolean):: Changes the number of columns on extra extra large and greater breakpoints.
offset_sm (string, number):: Changes the offset of the component on small and greater breakpoints.
offset_md (string, number):: Changes the offset of the component on medium and greater breakpoints.
offset_lg (string, number):: Changes the offset of the component on large and greater breakpoints.
offset_xl (string, number):: Changes the offset of the component on extra large and greater breakpoints.
offset_xxl (string, number):: Changes the offset of the component on extra extra large and greater breakpoints.
order_sm (string, number):: Changes the order of the component on small and greater breakpoints.
order_md (string, number):: Changes the order of the component on medium and greater breakpoints.
order_lg (string, number):: Changes the order of the component on large and greater breakpoints.
order_xl (string, number):: Changes the order of the component on extra large and greater breakpoints.
order_xxl (string, number):: Changes the order of the component on extra extra large and greater breakpoints.
align_self (‘start’, ‘end’, ‘center’, ‘auto’, ‘baseline’, ‘stretch’):: Applies the [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) css property. Available options are: start, center, end, auto, baseline and stretch.

class trame.widgets.vuetify3.VColorPicker(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VColorPicker component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

mode (‘rgb’, ‘rgba’, ‘hsl’, ‘hsla’, ‘hex’, ‘hexa’):

The current selected input type. Syncable with v-model:mode.

theme (string):

Specify a theme for this component and all of its children.

model_value (string, Record<string, unknown>):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

disabled (boolean):

Removes the ability to click or target the component.

width (string, number):

Sets the width of the color picker.

position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):

Sets the position for the component.

canvas_height (string, number):

Height of canvas.

dot_size (string, number):

Changes the size of the selection dot on the canvas.

hide_canvas (boolean):

Hides canvas.

hide_sliders (boolean):

Hides sliders.

hide_inputs (boolean):

Hides inputs.

modes ((‘rgb’, ‘rgba’, ‘hsl’, ‘hsla’, ‘hex’, ‘hexa’)[]):

Sets available input types.

show_swatches (boolean):

Displays color swatches.

swatches_max_height (string, number):

Sets the maximum height of the swatches section.

swatches (enum):

Sets the available color swatches to select from. 2D array of rows and columns, accepts any color format the picker does.

Enum values: [

(, string, number, { readonly h: number readonly s: number readonly v: number readonly a?: number, undefined

}, { readonly r: number readonly g: number

readonly b: number readonly a?: number, undefined }, { readonly h: number readonly s: number readonly l: number readonly a?: number, undefined })[][]

]

update_modelValue (event):

Event that is emitted when the component’s model changes.

update_mode (event):

Selected mode.

class trame.widgets.vuetify3.VCombobox(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCombobox component. See more info and examples.

Args:

flat (boolean):

Removes box shadow when using a variant with elevation.

type (string):

Sets input type.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

error (boolean):

Puts the input in a manual error state.

reverse (boolean):

Reverses the orientation.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

rounded (string, number, boolean):

Adds a border radius to the input.

tile (boolean):

Removes any applied border-radius from the component.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

name (string):

Sets the component’s name attribute.

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

base_color (string):

Sets the color of the input when it is not focused.

prepend_icon (enum):

Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

readonly (boolean):

Puts input in readonly state.

disabled (boolean):

Removes the ability to click or target the input.

loading (string, boolean):

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.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

bg_color (string):

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).

menu (boolean):

Renders with the menu open by default.

multiple (boolean):

Changes select to multiple. Accepts array for value.

eager (boolean):

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.

items (any[]):

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.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

id (string):

Sets the DOM id on the component.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

auto_select_first (boolean, ‘exact’):

When searching, will always highlight the first option and select it on blur. exact will only highlight and select exact matches.

clear_on_select (boolean):

Reset the search text when a selection is made while using the multiple prop.

filter_mode (‘every’, ‘some’, ‘union’, ‘intersection’):

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. - some: There is at least one match from either the custom filter or the custom key filter. - every: All columns match either the custom filter or the custom key filter. - union: There is at least one match from the custom filter, or all columns match the custom key filters. - intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

no_filter (boolean):

Disables all item filtering.

custom_filter (FilterFunction):

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.

custom_key_filter (unknown):

Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified.

filter_keys (string, string[]):

Array of specific keys to filter on the item.

chips (boolean):

Changes display of selections to chips.

closable_chips (boolean):

Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.

close_text (string):

Text set to to the inputs aria-label and title when input menu is closed.

open_text (string):

Text set to to the inputs aria-label and title when input menu is open.

hide_no_data (boolean):

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.

hide_selected (boolean):

Do not display in the select menu items that are already selected.

list_props (unknown):

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.

item_title (SelectItemKey<any>):

Property on supplied items that contains its title.

item_value (SelectItemKey<any>):

Property on supplied items that contains its value.

item_children (SelectItemKey):

This property currently has no effect.

item_props (SelectItemKey<any>):

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.

return_object (boolean):

Changes the selection behavior to return the object directly rather than the value specified with item-value.

menu_icon (enum):

Sets the the spin icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

menu_props (unknown):

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.

no_data_text (string):

Text shown when no items are provided to the component.

open_on_clear (boolean):

Open’s the menu whenever the clear icon is clicked.

item_color (string):

Sets color of selected items.

autofocus (boolean):

Enables autofocus.

counter (string, number, boolean):

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

prefix (string):

Displays prefix text.

placeholder (string):

Sets the input’s placeholder text.

persistent_placeholder (boolean):

Forces placeholder to always be visible.

persistent_counter (boolean):

Forces counter to always be visible.

suffix (string):

Displays suffix text.

role (string):

The role attribute applied to the input.

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

The icon used when the clearable prop is set to true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

prepend_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

single_line (boolean):

Label does not move on focus/dirty.

counter_value (number, js_fn):

Function returns the counter display text.

model_modifiers (unknown):

FOR INTERNAL USE ONLY

delimiters (string[]):

Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys.

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when append icon is clicked.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

update_search (event):

Event emitted when the search value changes.

update_menu (event):

Event that is emitted when the component’s menu state changes.

class trame.widgets.vuetify3.VComponentIcon(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VComponentIcon component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

class trame.widgets.vuetify3.VConfirmEdit(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VConfirmEdit component. See more info and examples.

Args:

model_value (unknown):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
color (string):: 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).
cancel_text (string):: Text for the cancel button
ok_text (string):: Text for the ok button
cancel (event):: The event emitted when the user clicks the Cancel button
update_modelValue (event):: Event that is emitted when the component’s model changes.
save (event):: The event emitted when the user clicks the Save button

class trame.widgets.vuetify3.VContainer(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VContainer component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
height (string, number):: Sets the height for the component.
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Sets the width for the component.
fluid (boolean):: Removes viewport maximum-width size breakpoints.

class trame.widgets.vuetify3.VCounter(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VCounter component. See more info and examples.

Args:

value (string, number):

Sets the current counter value.

disabled (boolean):

Removes the ability to click or target the component.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component }), { component: Component }

]

active (boolean):

Determines whether the counter is visible or not.

max (string, number):

Sets the maximum allowed value.

class trame.widgets.vuetify3.VDataIterator(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDataIterator component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

search (string):

Text input used to filter items.

items (unknown[]):

An array of strings or objects used for automatically generating children components.

model_value (any[]):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

filter_mode (‘every’, ‘some’, ‘union’, ‘intersection’):

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. - some: There is at least one match from either the custom filter or the custom key filter. - every: All columns match either the custom filter or the custom key filter. - union: There is at least one match from the custom filter, or all columns match the custom key filters. - intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

no_filter (boolean):

Disables all item filtering.

custom_filter (FilterFunction):

Function to filter items.

custom_key_filter (unknown):

Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified.

filter_keys (string, string[]):

Array of specific keys to filter on the item.

select_strategy (‘single’, ‘page’, ‘all’):

Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list).

item_value (SelectItemKey):

Property on supplied items that contains its value.

return_object (boolean):

Changes the selection behavior to return the object directly rather than the value specified with item-value.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component }), { component: Component; hideOnLeave: boolean }

]

loading (boolean):

If true and no items are provided, then a loading text will be shown.

item_selectable (SelectItemKey):

Property on supplied items that contains the boolean value indicating if the item is selectable.

show_select (boolean):

Shows the column with checkboxes for selecting items in the list.

page (string, number):

The current displayed page number (1-indexed).

sort_by (SortItem):

Changes which item property (or properties) should be used for sort order. Can be used with .sync modifier.

multi_sort (boolean):

If true then one can sort on multiple properties.

must_sort (boolean):

If true then one can not disable sorting, it will always switch between ascending and descending.

custom_key_sort (unknown):

Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified.

items_per_page (string, number):

Changes how many items per page should be visible. Can be used with .sync modifier. Setting this prop to -1 will display all items on the page.

expand_on_click (boolean):

Expands item when the row is clicked.

show_expand (boolean):

Shows the expand icon.

expanded (string[]):

Array of expanded items. Can be used with .sync modifier.

group_by (SortItem):

Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: group or [‘group’]. When using an array, only the first element is considered. Can be used with .sync modifier.

update_modelValue (event):

Event that is emitted when the component’s model changes.

update_expanded (event):

The .sync event for expanded prop.

update_groupBy (event):

The .sync event for groupBy prop.

update_page (event):

The .sync event for page prop.

update_itemsPerPage (event):

The .sync event for itemsPerPage prop.

update_sortBy (event):

The .sync event for sortBy prop.

update_options (event):

The .sync event for options prop.

update_currentItems (event):

The .sync event for currentItems prop.

class trame.widgets.vuetify3.VDataTable(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDataTable component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

search (string):

Text input used to filter items.

theme (string):

Specify a theme for this component and all of its children.

items (any[]):

An array of strings or objects used for automatically generating children components.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height of the table rows.

height (string, number):

Set an explicit height of table.

filter_mode (‘every’, ‘some’, ‘union’, ‘intersection’):

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. - some: There is at least one match from either the custom filter or the custom key filter. - every: All columns match either the custom filter or the custom key filter. - union: There is at least one match from the custom filter, or all columns match the custom key filters. - intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

no_filter (boolean):

Disables all item filtering.

custom_filter (FilterFunction):

Function to filter items.

custom_key_filter (unknown):

Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified.

filter_keys (string, string[]):

Array of specific keys to filter on the item.

hide_no_data (boolean):

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.

select_strategy (‘single’, ‘page’, ‘all’):

Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list).

width (string, number):

Sets the width for the component.

item_value (SelectItemKey<any>):

Property on supplied items that contains its value.

return_object (boolean):

Changes the selection behavior to return the object directly rather than the value specified with item-value.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

no_data_text (string):

Text shown when no items are provided to the component.

loading (string, boolean):

Displays loading slot if set to true

sticky (boolean):

Sticks the header to the top of the table.

next_icon (enum):

Next icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Previous icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

item_selectable (SelectItemKey<any>):

Property on supplied items that indicates whether the item is selectable.

show_select (boolean):

Shows the select checkboxes in both the header and rows (if using default rows).

page (string, number):

The current displayed page number (1-indexed).

sort_by (SortItem):

Changes which item property (or properties) should be used for sort order. Can be used with .sync modifier.

multi_sort (boolean):

If true then one can sort on multiple properties.

must_sort (boolean):

If true then one can not disable sorting, it will always switch between ascending and descending.

custom_key_sort (unknown):

Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified.

items_per_page (string, number):

Changes how many items per page should be visible. Can be used with .sync modifier. Setting this prop to -1 will display all items on the page.

expand_on_click (boolean):

Expands item when the row is clicked.

show_expand (boolean):

Shows the expand toggle in default rows.

expanded (string[]):

Whether the item is expanded or not.

group_by (SortItem):

Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: group or [‘group’]. When using an array, only the first element is considered. Can be used with .sync modifier.

header_props (unknown):

Pass props to the default header. See [v-data-table-headers API](/api/v-data-table-headers) for more information.

cell_props (enum):

An object of additional props to be passed to each <td> in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in cellProps in a headers object, the value from the headers object will be used.

Enum values: [

Record<string, any>, (( data: Pick< ItemKeySlot<any>,: ‘value’, ‘item’, ‘index’, ‘internalItem’, js_fn

]

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

disable_sort (boolean):

Disables sorting completely.

headers (enum):

An array of objects that each describe a header column. See the example below for a definition of all properties.

Enum values: [

{ readonly key?:, (string & {}), ‘data-table-group’, ‘data-table-select’, ‘data-table-expand’, undefined readonly value?: SelectItemKey<any>

readonly title?: string, undefined readonly fixed?: boolean,

undefined readonly align?: ‘start’, ‘end’, ‘center’, undefined: readonly width?: string, number, undefined readonly minWidth?:

string, undefined readonly maxWidth?: string, undefined readonly nowrap?: boolean, undefined readonly headerProps?: { readonly [x: string]: any }, undefined readonly cellProps?:, { readonly [x: string]: any }, (( data: Pick< ItemKeySlot<any>,

‘value’, ‘item’, ‘index’, js_fn, undefined readonly

sortable?: boolean, undefined readonly sort?: DataTableCompareFunction<any>, undefined readonly sortRaw?: DataTableCompareFunction<any>, undefined readonly filter?: FilterFunction, undefined readonly mobile?: boolean, undefined readonly children?: readonly any[], undefined}[]

]

loading_text (string):

Text shown when the data is loading.

mobile_breakpoint (number, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’, ‘xs’):

Overrides the display configuration default screen size that the component should be considered in mobile.

row_props (enum):

An object of additional props to be passed to each <tr> in the table body. Also accepts a function that will be called for each row.

Enum values: [: Record<string, any>, (( data: Pick<ItemKeySlot<any>, ‘item’, ‘index’, js_fn

]

hide_default_body (boolean):

Hides the default body.

hide_default_footer (boolean):

Hides the default footer. This has no effect on v-data-table-virtual.

hide_default_header (boolean):

Hides the default header.

sort_asc_icon (enum):

Icon used for ascending sort button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

sort_desc_icon (enum):

Icon used for descending sort button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

fixed_header (boolean):

Fixed header to top of table.

fixed_footer (boolean):

Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.

hover (boolean):

Adds a hover effects to a table rows.

first_icon (enum):

First icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

last_icon (enum):

Last icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

items_per_page_text (string):

Text for items-per-page dropdown.

page_text (string):

Label for page number.

first_page_label (string):

Label for first page.

prev_page_label (string):

Label for previous page.

next_page_label (string):

Label for next page.

last_page_label (string):

Label for last page.

items_per_page_options ((number, { title: string; value: number })[]):

Array of options to show in the items-per-page dropdown.

show_current_page (boolean):

Show current page number between prev/next icons.

update_modelValue (event):

Emits when the component’s model changes.

update_expanded (event):

Emits when the expanded property of the options prop is updated.

update_groupBy (event):

Emits when the group-by property of the options property is updated.

update_page (event):

Emits when the page property of the options prop is updated.

update_itemsPerPage (event):

Emits when the items-per-page property of the options prop is updated.

update_sortBy (event):

Emits when the sortBy property of the options prop is updated.

update_options (event):

Emits when one of the options properties is updated.

update_currentItems (event):

Emits with the items currently being displayed.

class trame.widgets.vuetify3.VDataTableFooter(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDataTableFooter component. See more info and examples.

Args:

next_icon (enum):

Next icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Previous icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

first_icon (enum):

First icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

last_icon (enum):

Last icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

items_per_page_text (string):

Text for items-per-page dropdown.

page_text (string):

Label for page number.

first_page_label (string):

Label for first page.

prev_page_label (string):

Label for previous page.

next_page_label (string):

Label for next page.

last_page_label (string):

Label for last page.

items_per_page_options ((number, { title: string; value: number })[]):

Array of options to show in the items-per-page dropdown.

show_current_page (boolean):

Show current page number between prev/next icons.

class trame.widgets.vuetify3.VDataTableHeaders(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDataTableHeaders component. See more info and examples.

Args:

sticky (boolean):

Sticks the header to the top of the table.

color (string):

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).

loading (string, boolean):

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.

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

mobile_breakpoint (number, ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’):

Overrides the display configuration default screen size that the component should be considered in mobile.

disable_sort (boolean):

Toggles rendering of sort button.

multi_sort (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))

sort_asc_icon (enum):

Icon used for ascending sort button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

sort_desc_icon (enum):

Icon used for descending sort button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

header_props (unknown):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))

class trame.widgets.vuetify3.VDataTableRow(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDataTableRow component. See more info and examples.

Args:

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

mobile_breakpoint (number, ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’):

Overrides the display configuration default screen size that the component should be considered in mobile.

item (unknown):

Data (key, index and column values) of the displayed item.

index (number):

Row index.

cell_props (enum):

Props to be applied to the cell.

Enum values: [

Record<string, any>, (( data: Pick< ItemKeySlot<unknown>,: ‘value’, ‘item’, ‘index’, ‘column’, js_fn

]

contextmenu (event):

The event emitted when the user clicks the context menu button.

dblclick (event):

The event emitted when the user double clicks the row.

class trame.widgets.vuetify3.VDataTableRows(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDataTableRows component. See more info and examples.

Args:

loading (string, boolean):

Displays loading slot if set to true

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

mobile_breakpoint (number, ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’):

Overrides the display configuration default screen size that the component should be considered in mobile.

items (DataTableItem):

An array of strings or objects used for automatically generating children components.

hide_no_data (boolean):

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.

no_data_text (string):

Text shown when no items are provided to the component.

cell_props (enum):

An object of additional props to be passed to each <td> in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in cellProps in a headers object, the value from the headers object will be used.

Enum values: [

Record<string, any>, (( data: Pick< ItemKeySlot<any>,: ‘value’, ‘item’, ‘index’, ‘column’, js_fn

]

loading_text (string):

Text shown when the data is loading.

row_props (enum):

An object of additional props to be passed to each <tr> in the table body. Also accepts a function that will be called for each row.

Enum values: [: Record<string, any>, (( data: Pick<ItemKeySlot<any>, ‘item’, ‘index’, js_fn

]

class trame.widgets.vuetify3.VDataTableServer(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDataTableServer component. See more info and examples.

Args:

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Use the height prop to set the height of the table.

width (string, number):

Sets the width for the component.

sticky (boolean):

Sticks the header to the top of the table.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

search (string):

Text input used to filter items.

loading (string, boolean):

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.

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

mobile_breakpoint (number, ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’):

Overrides the display configuration default screen size that the component should be considered in mobile.

items (any[]):

An array of strings or objects used for automatically generating children components.

next_icon (enum):

Next icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Previous icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hover (boolean):

Will add a hover effect to a table’s row when the mouse is over it.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

hide_no_data (boolean):

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.

select_strategy (‘single’, ‘page’, ‘all’):

Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list).

item_value (SelectItemKey<any>):

Property on supplied items that contains its value.

return_object (boolean):

Changes the selection behavior to return the object directly rather than the value specified with item-value.

no_data_text (string):

Text shown when no items are provided to the component.

first_icon (enum):

First icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

last_icon (enum):

Last icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

items_per_page_text (string):

Text for items-per-page dropdown.

page_text (string):

Label for page number.

first_page_label (string):

Label for first page.

prev_page_label (string):

Label for previous page.

next_page_label (string):

Label for next page.

last_page_label (string):

Label for last page.

items_per_page_options ((number, { title: string; value: number })[]):

Array of options to show in the items-per-page dropdown.

show_current_page (boolean):

Show current page number between prev/next icons.

headers (enum):

An array of objects that each describe a header column.

Enum values: [

{ readonly key?:, (string & {}), ‘data-table-expand’, ‘data-table-select’, ‘data-table-group’, undefined readonly value?: SelectItemKey<Record<string, any>> readonly title?: string, undefined readonly fixed?: boolean, undefined readonly align?: ‘end’, ‘start’, ‘center’, undefined

readonly width?: string, number, undefined readonly minWidth?:

string, undefined readonly maxWidth?: string, undefined readonly nowrap?: boolean, undefined readonly headerProps?: { readonly [x: string]: any }, undefined readonly cellProps?:, ((

data: Pick< ItemKeySlot<any>, ‘value’, ‘item’,

‘index’, js_fn, { readonly [x: string]: any }, undefined readonly sortable?: boolean, undefined readonly sort?: DataTableCompareFunction<any>, undefined readonly sortRaw?: DataTableCompareFunction<any>, undefined readonly filter?: FilterFunction, undefined readonly mobile?: boolean, undefined readonly children?:, readonly {

readonly key?:, (string & {}), ‘data-table-expand’, ‘data-table-select’,

‘data-table-group’, undefined readonly value?: SelectItemKey<Record<string, any>> readonly title?: string, undefined readonly fixed?: boolean, undefined readonly align?: ‘end’, ‘start’, ‘center’, undefined readonly width?: string, number, undefined

readonly minWidth?: string, undefined readonly

maxWidth?: string, undefined readonly nowrap?: boolean, undefined readonly headerProps?: { readonly [x: string]: any }, undefined readonly cellProps?:, ((

data: Pick< ItemKeySlot<any>,

‘value’, ‘item’, ‘index’, js_fn, { readonly [x: string]: any }, undefined readonly sortable?: boolean, undefined

readonly sort?: DataTableCompareFunction<any>, undefined
readonly sortRaw?: DataTableCompareFunction<any>, undefined readonly filter?: FilterFunction, undefined readonly

mobile?: boolean, undefined readonly children?: readonly any[], undefined }[], undefined}[]

]

disable_sort (boolean):

Toggles rendering of sort button.

multi_sort (boolean):

Allows sorting by multiple columns.

sort_asc_icon (enum):

Icon used for ascending sort button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

sort_desc_icon (enum):

Icon used for descending sort button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

header_props (unknown):

Pass props to the default header. See [v-data-table-server API](/api/v-data-table-server) for more information.

cell_props (enum):

An object of additional props to be passed to each <td> in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in cellProps in a headers object, the value from the headers object will be used.

Enum values: [

Record<string, any>, (( data: Pick< ItemKeySlot<any>,: ‘value’, ‘item’, ‘index’, ‘column’, js_fn

]

sort_by (SortItem):

Array of column keys and sort orders that determines the sort order of the table.

page (string, number):

The current displayed page number (1-indexed).

expanded (string[]):

Whether the item is expanded or not.

expand_on_click (boolean):

Expands item when the row is clicked.

loading_text (string):

Text shown when the data is loading.

row_props (enum):

An object of additional props to be passed to each <tr> in the table body. Also accepts a function that will be called for each row.

Enum values: [: Record<string, any>, (( data: Pick<ItemKeySlot<any>, ‘item’, ‘index’, js_fn

]

group_by (SortItem):

Defines the grouping of the table items.

items_length (string, number):

Number of all items.

items_per_page (string, number):

The number of items to display on each page.

hide_default_body (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))

hide_default_footer (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))

hide_default_header (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))

show_expand (boolean):

Shows the expand icon.

item_selectable (SelectItemKey<any>):

Property on supplied items that indicates whether the item is selectable.

show_select (boolean):

Shows the column with checkboxes for selecting items in the list.

must_sort (boolean):

Forces sorting on the column(s).

custom_key_sort (unknown):

Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified.

fixed_header (boolean):

Use the fixed-header prop together with the height prop to fix the header to the top of the table.

fixed_footer (boolean):

Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.

update_modelValue (event):

Emits when the component’s model changes.

update_expanded (event):

Emits when the expanded property of the options prop is updated.

update_page (event):

Emits when the page property of the options prop is updated.

update_itemsPerPage (event):

Emits when the items-per-page property of the options prop is updated.

update_sortBy (event):

Emits when the sort-by property of the options prop is updated.

update_options (event):

Emits when one of the options properties is updated.

update_groupBy (event):

Emits when the group-by property of the options property is updated.

class trame.widgets.vuetify3.VDataTableVirtual(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDataTableVirtual component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

search (string):

Text input used to filter items.

theme (string):

Specify a theme for this component and all of its children.

items (any[]):

An array of strings or objects used for automatically generating children components.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Use the height prop to set the height of the table.

filter_mode (‘every’, ‘some’, ‘union’, ‘intersection’):

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. - some: There is at least one match from either the custom filter or the custom key filter. - every: All columns match either the custom filter or the custom key filter. - union: There is at least one match from the custom filter, or all columns match the custom key filters. - intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

no_filter (boolean):

Disables all item filtering.

custom_filter (FilterFunction):

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.

custom_key_filter (unknown):

Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified.

filter_keys (string, string[]):

Array of specific keys to filter on the item.

hide_no_data (boolean):

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.

select_strategy (‘single’, ‘page’, ‘all’):

Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list).

width (string, number):

Sets the width for the component.

item_value (SelectItemKey<any>):

Property on supplied items that contains its value.

return_object (boolean):

Changes the selection behavior to return the object directly rather than the value specified with item-value.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

no_data_text (string):

Text shown when no items are provided to the component.

loading (string, boolean):

Displays loading slot if set to true

sticky (boolean):

Sticks the header to the top of the table.

item_selectable (SelectItemKey<any>):

Property on supplied items that indicates whether the item is selectable.

show_select (boolean):

Shows the column with checkboxes for selecting items in the list.

sort_by (SortItem):

Array of column keys and sort orders that determines the sort order of the table.

multi_sort (boolean):

Allows sorting by multiple columns.

must_sort (boolean):

Forces sorting on the column(s).

custom_key_sort (unknown):

Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified.

expand_on_click (boolean):

Expands item when the row is clicked.

show_expand (boolean):

Shows the expand icon.

expanded (string[]):

Whether the item is expanded or not.

group_by (SortItem):

Defines the grouping of the table items.

header_props (unknown):

Pass props to the default header.

cell_props (enum):

An object of additional props to be passed to each <td> in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in cellProps in a headers object, the value from the headers object will be used.

Enum values: [

Record<string, any>, (( data: Pick< ItemKeySlot<any>,: ‘value’, ‘item’, ‘index’, ‘internalItem’, js_fn

]

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

disable_sort (boolean):

Toggles rendering of sort button.

headers (enum):

An array of objects that each describe a header column.

Enum values: [

{ readonly key?:, (string & {}), ‘data-table-group’, ‘data-table-select’, ‘data-table-expand’, undefined readonly value?: SelectItemKey<Record<string, any>> readonly title?: string, undefined readonly fixed?: boolean, undefined readonly align?: ‘start’, ‘end’, ‘center’, undefined

readonly width?: string, number, undefined readonly minWidth?:

string, undefined readonly maxWidth?: string, undefined readonly nowrap?: boolean, undefined readonly headerProps?: { readonly [x: string]: any }, undefined readonly cellProps?:, { readonly [x: string]: any }, (( data: Pick< ItemKeySlot<any>,

‘value’, ‘item’, ‘index’, js_fn, undefined readonly

sortable?: boolean, undefined readonly sort?: DataTableCompareFunction<any>, undefined readonly sortRaw?: DataTableCompareFunction<any>, undefined readonly filter?: FilterFunction, undefined readonly mobile?: boolean, undefined readonly children?:, readonly {

readonly key?:, (string & {}), ‘data-table-group’, ‘data-table-select’,

‘data-table-expand’, undefined readonly value?: SelectItemKey<Record<string, any>> readonly title?: string, undefined readonly fixed?: boolean, undefined readonly align?: ‘start’, ‘end’, ‘center’, undefined readonly width?: string, number, undefined

readonly minWidth?: string, undefined readonly

maxWidth?: string, undefined readonly nowrap?: boolean, undefined readonly headerProps?: { readonly [x: string]: any }, undefined readonly cellProps?:, { readonly [x: string]: any }, (( data: Pick< ItemKeySlot<any>,

‘value’, ‘item’, ‘index’, js_fn, undefined

readonly sortable?: boolean, undefined readonly sort?:

DataTableCompareFunction<any>, undefined readonly sortRaw?: DataTableCompareFunction<any>, undefined readonly filter?: FilterFunction, undefined readonly mobile?: boolean, undefined

readonly children?: readonly any[], undefined }[],

undefined}[]

]

loading_text (string):

Text shown when the data is loading.

mobile_breakpoint (number, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’, ‘xs’):

Overrides the display configuration default screen size that the component should be considered in mobile.

row_props (enum):

An object of additional props to be passed to each <tr> in the table body. Also accepts a function that will be called for each row.

Enum values: [: Record<string, any>, (( data: Pick<ItemKeySlot<any>, ‘item’, ‘index’, js_fn

]

hide_default_body (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))

hide_default_footer (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))

hide_default_header (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/DataTable.json))

sort_asc_icon (enum):

Icon used for ascending sort button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

sort_desc_icon (enum):

Icon used for descending sort button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

fixed_header (boolean):

Use the fixed-header prop together with the height prop to fix the header to the top of the table.

fixed_footer (boolean):

Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.

hover (boolean):

Will add a hover effect to a table’s row when the mouse is over it.

item_height (string, number):

Height in pixels of each item to display.

update_modelValue (event):

Emits when the component’s model changes.

update_expanded (event):

Emits when the expanded property of the options prop is updated.

update_groupBy (event):

Emits when the group-by property of the options property is updated.

update_sortBy (event):

Emits when the sort-by property of the options prop is updated.

update_options (event):

Emits when one of the options properties is updated.

class trame.widgets.vuetify3.VDateInput(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDateInput component. See more info and examples.

Args:

flat (boolean):

Removes box shadow when using a variant with elevation.

tag (string):

Specify a custom tag used on the root element.

type (string):

Sets input type.

reverse (boolean):

Reverses the orientation.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

header (string):

Text shown when no display-date is set.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

title (string):

Specify a title text for the component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height of the input.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

Adds a border radius to the input.

tile (boolean):

Removes any applied border-radius from the component.

text (string):

Specify content text for the component.

base_color (string):

Sets the color of the input when it is not focused.

bg_color (string):

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).

disabled (boolean):

Removes the ability to click or target the input.

multiple (number, boolean, (string & {}), ‘range’):

Allow the selection of multiple dates. The range value selects all dates between two selections.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Width of the picker.

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

transition (string):

The transition used when changing months into the future

autofocus (boolean):

Enables autofocus.

counter (string, number, boolean):

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

prefix (string):

Displays prefix text.

placeholder (string):

Sets the input’s placeholder text.

persistent_placeholder (boolean):

Forces placeholder to always be visible.

persistent_counter (boolean):

Forces counter to always be visible.

suffix (string):

Displays suffix text.

role (string):

The role attribute applied to the input.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

append_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the append-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

The icon used when the clearable prop is set to true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

dirty (boolean):

Manually apply the dirty state styling.

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

prepend_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

single_line (boolean):

Label does not move on focus/dirty.

loading (string, boolean):

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.

counter_value (number, js_fn):

Function returns the counter display text.

model_modifiers (unknown):

FOR INTERNAL USE ONLY

position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):

Sets the position for the component.

next_icon (enum):

Sets the icon for next month/year button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Sets the icon for previous month/year button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

view_mode (‘month’, ‘months’, ‘year’):

Determines which picker in the date or month picker is being displayed. Allowed values: ‘month’, ‘months’, ‘year’.

month (string, number):

Sets the month.

reverse_transition (string):

The transition used when changing months into the past

cancel_text (string):

Text for the cancel button

ok_text (string):

Text for the ok button

max (unknown):

Maximum allowed date/month (ISO 8601 format).

hide_actions (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDateInput.json))

mode_icon (enum):

Icon displayed next to the current month and year, toggles year selection when clicked.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

year (number):

Sets the year.

hide_weekdays (boolean):

Hides the weekdays.

show_week (boolean):

Toggles visibility of the week numbers in the body of the calendar.

show_adjacent_months (boolean):

Toggles visibility of days from previous and next months.

weekdays (number[]):

Array of weekdays.

weeks_in_month (‘static’, ‘dynamic’):

A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.

first_day_of_week (string, number):

Sets the first day of the week, starting with 0 for Sunday.

allowed_dates (unknown[], js_fn):

Restricts which dates can be selected.

display_value (unknown):

The value that determines the month to show. This is different from modelValue, which determines the selected value.

min (unknown):

Minimum allowed date/month (ISO 8601 format).

landscape (boolean):

Changes the picker to landscape mode.

hide_header (boolean):

Hides the header.

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when append icon is clicked.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

class trame.widgets.vuetify3.VDatePicker(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDatePicker component. See more info and examples.

Args:

title (string):

Specify a title text for the component.

text (string):

Specify content text for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Width of the picker.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

position (‘static’, ‘relative’, ‘fixed’, ‘absolute’, ‘sticky’):

Sets the position for the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

active (string, string[]):

Controls the active state of the item. This is typically used to highlight the component.

disabled (boolean):

Removes the ability to click or target the component.

max (unknown):

Maximum allowed date/month (ISO 8601 format).

transition (string):

The transition used when changing months into the future

bg_color (string):

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).

header (string):

Text shown when no display-date is set.

multiple (number, boolean, (string & {}), ‘range’):

Allow the selection of multiple dates. The range value selects all dates between two selections.

hide_header (boolean):

Hides the header.

month (string, number):

Sets the month.

show_adjacent_months (boolean):

Toggles visibility of days from previous and next months.

year (number):

Sets the year.

weekdays (number[]):

Array of weekdays.

weeks_in_month (‘static’, ‘dynamic’):

A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.

first_day_of_week (string, number):

Sets the first day of the week, starting with 0 for Sunday.

allowed_dates (unknown[], js_fn):

Restricts which dates can be selected.

display_value (unknown):

The value that determines the month to show. This is different from modelValue, which determines the selected value.

min (unknown):

Minimum allowed date/month (ISO 8601 format).

next_icon (enum):

Sets the icon for next month/year button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Sets the icon for previous month/year button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

view_mode (‘month’, ‘year’, ‘months’):

Determines which picker in the date or month picker is being displayed. Allowed values: ‘month’, ‘months’, ‘year’.

mode_icon (enum):

Icon displayed next to the current month and year, toggles year selection when clicked.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_weekdays (boolean):

Hides the weekdays.

show_week (boolean):

Toggles visibility of the week numbers in the body of the calendar.

reverse_transition (string):

The transition used when changing months into the past

landscape (boolean):

Changes the picker to landscape mode.

update_modelValue (event):

Event that is emitted when the component’s model changes.

update_month (event):

Emitted when the month changes.

update_year (event):

Emitted when the year changes.

update_viewMode (event):

Emitted when the view mode changes.

class trame.widgets.vuetify3.VDatePickerControls(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDatePickerControls component. See more info and examples.

Args:

text (string):

Specify content text for the component.

disabled (string, boolean, string[]):

Removes the ability to click or target the component.

active (string, string[]):

Controls the active state of the item. This is typically used to highlight the component.

next_icon (enum):

Icon used for the next button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Icon used for the previous button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

view_mode (‘month’, ‘months’, ‘year’):

Sets the view mode of the date picker.

mode_icon (enum):

Icon used for the mode button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

click_next (event):

Event fired when clicking the next button.

click_prev (event):

Event fired when clicking the previous button.

click_year (event):

Event fired when clicking the date text.

click_month (event):

Event fired when clicking on the month.

click_text (event):

Event fired when clicking the year.

class trame.widgets.vuetify3.VDatePickerHeader(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDatePickerHeader component. See more info and examples.

Args:

color (string):

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).

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

transition (string):

Sets the transition when the header changes.

header (string):

Sets the header content.

click_append (event):

Emitted when appended icon is clicked.

class trame.widgets.vuetify3.VDatePickerMonth(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDatePickerMonth component. See more info and examples.

Args:

model_value (unknown[]):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
color (string):: 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).
disabled (boolean):: Removes the ability to click or target the component.
multiple (number, boolean, (string & {}), ‘range’):: Sets the multiple of the month.
transition (string):: The transition used when changing months into the future
month (string, number):: Sets the month.
reverse_transition (string):: The transition used when changing months into the past
max (unknown):: Sets the maximum date of the month.
year (string, number):: Sets the year.
hide_weekdays (boolean):: Hide the days of the week letters.
show_week (boolean):: Show the week number.
show_adjacent_months (boolean):: Show adjacent months.
weekdays (number[]):: Sets the weekdays of the month.
weeks_in_month (‘static’, ‘dynamic’):: A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.
first_day_of_week (string, number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/calendar.json))
allowed_dates (unknown[], js_fn):: Sets the allowed dates of the month.
display_value (unknown):: The value that determines the month to show. This is different from modelValue, which determines the selected value.
min (unknown):: Sets the minimum date of the month.
update_modelValue (event):: Event that is emitted when the component’s model changes.
update_month (event):: Fired when the month changes.
update_year (event):: Fired when the year changes.

class trame.widgets.vuetify3.VDatePickerMonths(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDatePickerMonths component. See more info and examples.

Args:

model_value (number):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
height (string, number):: Sets the height for the component.
color (string):: 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).
max (unknown):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonths.json))
year (number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonths.json))
min (unknown):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDatePickerMonths.json))
update_modelValue (event):: Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VDatePickerYears(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDatePickerYears component. See more info and examples.

Args:

model_value (number):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
color (string):: 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).
height (string, number):: Sets the height for the component.
max (unknown):: Sets the maximum date of the month.
min (unknown):: Sets the minimum date of the month.
update_modelValue (event):: Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VDefaultsProvider(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDefaultsProvider component. See more info and examples.

Args:

disabled (boolean):: Turns off all calculations of new default values for improved performance in situations where defaults propagation isn’t necessary.
reset (string, number):: Reset the default values up the nested chain by {n} amount.
root (string, boolean):: Force current defaults to match the application root defaults.
scoped (boolean):: Prevents the ability for default values to be inherited from parent components.
defaults ({ global: Record<string, unknown> [string]: Record<string, unknown>}):: Specify new default prop values for components. Keep in mind that this will be merged with previously defined values.

class trame.widgets.vuetify3.VDialog(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDialog component. See more info and examples.

Args:

theme (string):

Specify a theme for this component and all of its children.

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..

absolute (boolean):

Applies position: absolute to the content element.

height (string, number):

Sets the height for the component.

eager (boolean):

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.

disabled (boolean):

Removes the ability to click or target the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

activator ((string & {}), Element, ‘parent’, ComponentPublicInstance):

Explicitly sets the overlay’s activator.

close_on_back (boolean):

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.

contained (boolean):

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content_class (any):

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.

content_props (any):

Apply custom properties to the content.

opacity (string, number):

Sets the overlay opacity.

no_click_animation (boolean):

Disables the bounce effect when clicking outside of a v-dialog’s content when using the persistent prop.

persistent (boolean):

Clicking outside of the element or pressing esc key will not deactivate it.

scrim (string, boolean):

Accepts true/false to enable background, and string to define color.

z_index (string, number):

The z-index used for the component.

target (enum):

For locationStrategy=”connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

Enum values: [: (string & {}), Element, ‘parent’, ‘cursor’, ComponentPublicInstance, [number, number]

]

activator_props (unknown):

Apply custom properties to the activator.

open_on_click (boolean):

Activate the component when the activator is clicked.

open_on_hover (boolean):

Designates whether component should activate when its activator is hovered.

open_on_focus (boolean):

Activate the component when the activator is focused.

close_on_content_click (boolean):

Closes component when you click on its content.

close_delay (string, number):

Milliseconds to wait before closing component. Only applies to hover and focus events.

open_delay (string, number):

Milliseconds to wait before opening component. Only applies to hover and focus events.

location_strategy (LocationStrategyFn):

A function used to specifies how the component should position relative to its activator.

origin (Anchor):

Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).

offset (string, number, number[]):

A single value that offsets content away from the target based upon what side it is on.

scroll_strategy (ScrollStrategyFn):

Strategy used when the component is activate and user scrolls.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component }), { component: Component }

]

attach (string, boolean, Element):

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default.

fullscreen (boolean):

Changes layout for fullscreen display.

retain_focus (boolean):

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.

scrollable (boolean):

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).

update_modelValue (event):

Event that is emitted when the component’s model changes.

afterEnter (event):

Event that fires after the overlay has finished transitioning in.

afterLeave (event):

Event that fires after the overlay has finished transitioning out.

class trame.widgets.vuetify3.VDialogBottomTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDialogBottomTransition component. See more info and examples.

Args:

disabled (boolean):: Removes the ability to click or target the component.
mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VDialogTopTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDialogTopTransition component. See more info and examples.

Args:

disabled (boolean):: Removes the ability to click or target the component.
mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VDialogTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDialogTransition component. See more info and examples.

Args:

target (HTMLElement, [number, number]):: Sets the target element for the transition.

class trame.widgets.vuetify3.VDivider(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDivider component. See more info and examples.

Args:

length (string, number):: Sets the dividers length. Default unit is px.
theme (string):: Specify a theme for this component and all of its children.
color (string):: 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).
inset (boolean):: Adds indentation (72px) for normal dividers, reduces max height for vertical.
opacity (string, number):: Sets the component’s opacity value
vertical (boolean):: Displays dividers vertically.
thickness (string, number):: Sets the dividers thickness. Default unit is px.

class trame.widgets.vuetify3.VEmptyState(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VEmptyState component. See more info and examples.

Args:

title (string):

Specify a title text for the component.

theme (string):

Specify a theme for this component and all of its children.

size (string, number):

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.

image (string):

Apply a specific image using [v-img](/components/images/).

color (string):

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).

height (string, number):

Sets the height for the component.

text (string):

Specify content text for the component.

bg_color (string):

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).

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

href (string):

The URL the action button links to.

to (string):

The URL the action button links to.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

headline (string):

A large headline often used for 404 pages.

action_text (string):

The text used for the action button.

justify (‘start’, ‘end’, ‘center’):

Control the justification of the text.

text_width (string, number):

Sets the width of the text container.

click_action (event):

Event emitted when the action button is clicked.

class trame.widgets.vuetify3.VExpandTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VExpandTransition component. See more info and examples.

Args:

disabled (boolean):: Removes the ability to click or target the component.
mode (‘default’, ‘in-out’, ‘out-in’):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).

class trame.widgets.vuetify3.VExpandXTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VExpandXTransition component. See more info and examples.

Args:

disabled (boolean):: Removes the ability to click or target the component.
mode (‘default’, ‘in-out’, ‘out-in’):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).

class trame.widgets.vuetify3.VExpansionPanel(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VExpansionPanel component. See more info and examples.

Args:

title (string):

Specify a title text for the component.

text (string):

Specify content text for the component.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

static (boolean):

Remove title size expansion when selected.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

color (string):

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).

readonly (boolean):

Makes the expansion panel content read only.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

value (any):

Controls the opened/closed state of content.

disabled (boolean):

Disables the expansion-panel content.

selected_class (string):

Configure the active CSS class applied when an item is selected.

bg_color (string):

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).

eager (boolean):

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.

expand_icon (enum):

Icon used when the expansion panel is in a expandable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon used when the expansion panel is in a collapsable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_actions (boolean):

Hide the expand icon in the content title.

focusable (boolean):

Makes the expansion panel content focusable.

group_selected (event):

Event that is emitted when an item is selected within a group.

class trame.widgets.vuetify3.VExpansionPanelText(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VExpansionPanelText component. See more info and examples.

Args:

eager (boolean):: 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.

class trame.widgets.vuetify3.VExpansionPanelTitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VExpansionPanelTitle component. See more info and examples.

Args:

color (string):

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).

height (string, number):

Sets the height for the component.

expand_icon (enum):

Icon used when the expansion panel is in a expandable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon used when the expansion panel is in a collapsable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

static (boolean):

Remove title size expansion when selected.

readonly (boolean):

Makes the expansion panel content read only.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

hide_actions (boolean):

Hide the expand icon in the content title.

focusable (boolean):

Makes the expansion panel headers focusable.

class trame.widgets.vuetify3.VExpansionPanels(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VExpansionPanels component. See more info and examples.

Args:

flat (boolean):

Removes the expansion-panel’s elevation and borders.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

static (boolean):

Remove title size expansion when selected.

rounded (string, number, boolean):

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).

tile (boolean):

Removes the border-radius.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (‘default’, ‘inset’, ‘accordion’, ‘popout’):

Applies a distinct style to the component.

readonly (boolean):

Makes the entire expansion panel read only.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

disabled (boolean):

Puts all children components into a disabled state.

selected_class (string):

Configure the active CSS class applied when an item is selected.

max (number):

Sets a maximum number of selections that can be made.

bg_color (string):

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).

multiple (boolean):

Allows one to select multiple items.

mandatory (boolean, ‘force’):

Forces at least one item to always be selected (if available).

eager (boolean):

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.

expand_icon (enum):

Icon used when the expansion panel is in a expandable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon used when the expansion panel is in a collapsable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_actions (boolean):

Hide the expand icon in the content title.

focusable (boolean):

Makes the expansion-panel headers focusable.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VFab(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFab component. See more info and examples.

Args:

symbol (any):

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/).

flat (boolean):

Removes the button box shadow. This is different than using the ‘flat’ variant.

tag (string):

Specify a custom tag used on the root element.

name (string):

Assign a specific name for layout registration.

replace (boolean):

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.

layout (boolean):

If true, will effect layout dimensions based on size and position.

theme (string):

Specify a theme for this component and all of its children.

size (string, number):

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.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

The location of the fab relative to the layout. Only works when using app.

absolute (boolean):

Applies position: absolute to the component.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

extended (boolean):

An alternate style for the FAB that expects text.

height (string, number):

Sets the height for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

order (string, number):

Adjust the order of the component in relation to its registration order.

text (string):

Specify content text for the component.

exact (boolean):

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.

base_color (string):

Sets the color of component when not focused.

active_color (string):

The applied color when the component is in an active state.

disabled (boolean):

Removes the ability to click or target the component.

slim (boolean):

Reduces padding to 0 8px.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

offset (boolean):

Translates the Fab up or down, depending on if location is set to top or bottom.

block (boolean):

Expands the button to 100% of available space.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

readonly (boolean):

Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

loading (string, boolean):

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.

stacked (boolean):

Displays the button as a flex-column.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

selected_class (string):

Configure the active CSS class applied when an item is selected.

position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):

Sets the position for the component.

href (string):

Designates the component as anchor and applies the href attribute.

to (RouteLocationRaw):

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.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.

Enum values: [: boolean, string, (string, [string, number])[], js_fn, FunctionalComponent

]

app (boolean):

If true, attaches to the closest layout and positions according to the value of location.

appear (boolean):

Used to control the animation of the FAB.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VFabTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFabTransition component. See more info and examples.

Args:

disabled (boolean):: Removes the ability to click or target the component.
mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VFadeTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFadeTransition component. See more info and examples.

Args:

disabled (boolean):: Removes the ability to click or target the component.
mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VField(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VField component. See more info and examples.

Args:

flat (boolean):

Removes box shadow when using a variant with elevation.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

error (boolean):

Puts the input in a manual error state.

reverse (boolean):

Reverses the orientation.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

base_color (string):

Sets the color of the input when it is not focused.

disabled (boolean):

Removes the ability to click or target the input.

loading (string, boolean):

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.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

bg_color (string):

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).

id (string):

Sets the DOM id on the component.

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

focused (boolean):

Forces a focused state styling on the component.

append_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the append-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

The icon used when the clearable prop is set to true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

dirty (boolean):

Manually apply the dirty state styling.

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

prepend_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

single_line (boolean):

Label does not move on focus/dirty.

update_modelValue (event):

Event that is emitted when the component’s model changes.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

class trame.widgets.vuetify3.VFieldLabel(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFieldLabel component. See more info and examples.

Args:

floating (boolean):: Elevates the label above the slotted content.

class trame.widgets.vuetify3.VFileInput(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFileInput component. See more info and examples.

Args:

flat (boolean):

Removes box shadow when using a variant with elevation.

reverse (boolean):

Reverses the orientation.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value (File, File[]):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

chips (boolean):

Changes display of selections to chips.

base_color (string):

Sets the color of the input when it is not focused.

bg_color (string):

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).

disabled (boolean):

Removes the ability to click or target the input.

multiple (boolean):

Adds the multiple attribute to the input, allowing multiple file selections.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

counter (boolean):

Displays the number of selected files.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

append_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the append-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

The icon used when the clearable prop is set to true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

dirty (boolean):

Manually apply the dirty state styling.

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

prepend_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

single_line (boolean):

Label does not move on focus/dirty.

loading (string, boolean):

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.

counter_size_string (string):

The text displayed when using the counter and show-size props. Can also be customized globally on the [internationalization page](/customization/internationalization).

counter_string (string):

The text displayed when using the counter prop. Can also be customized globally on the [internationalization page](/customization/internationalization).

hide_input (boolean):

Display the icon only without the input (file names).

show_size (boolean, 1000, 1024):

Sets the displayed size of selected file(s). When using true will default to _1000_ displaying (kB, MB, GB) while _1024_ will display (KiB, MiB, GiB).

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when append icon is clicked.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

click_control (event):

Emitted when the main input is clicked.

mousedown_control (event):

Event that is emitted when using mousedown on the main control area.

class trame.widgets.vuetify3.VFileUpload(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFileUpload component. See more info and examples.

Args:

title (string):

Specify a title text for the component.

length (string, number):

Sets the dividers length. Default unit is px.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

model_value (File, File[]):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

position (‘static’, ‘relative’, ‘fixed’, ‘absolute’, ‘sticky’):

Sets the position for the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

name (string):

Sets the component’s name attribute.

disabled (boolean):

Removes the ability to click or target the component.

multiple (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUpload.json))

opacity (string, number):

Sets the component’s opacity value

scrim (string, boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUpload.json))

close_delay (string, number):

Milliseconds to wait before closing component. Only applies to hover and focus events.

open_delay (string, number):

Milliseconds to wait before opening component. Only applies to hover and focus events.

subtitle (string):

Specify a subtitle text for the component.

clearable (boolean):

Allows for the component to be cleared.

thickness (string, number):

Sets the dividers thickness. Default unit is px.

browse_text (string):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUpload.json))

divider_text (string):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUpload.json))

hide_browse (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUpload.json))

show_size (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUpload.json))

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VFileUploadItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFileUploadItem component. See more info and examples.

Args:

title (string, number):

Generates a v-list-item-title component with the supplied value. Note that this overrides the native [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with v-bind:title.attr instead.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

Applies specified color to the control when in an active state or input-value is true - 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),

variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

replace (boolean):

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.

link (boolean):

Designates that the component is a link. This is automatic when using the href or to prop.

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

active_color (string):

The applied color when the component is in an active state.

base_color (string):

Sets the color of component when not focused.

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

slim (boolean):

Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

value (any):

The value used for selection. Obtained from [v-list](/api/v-list)’s v-model:selected when the item is selected.

disabled (boolean):

Removes the ability to click or target the component.

href (string):

Designates the component as anchor and applies the href attribute.

exact (boolean):

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.

to (RouteLocationRaw):

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.

lines (false, ‘one’, ‘two’, ‘three’):

The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.

nav (boolean):

Reduces the width v-list-item takes up as well as adding a border radius.

active_class (string):

The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation.

subtitle (string, number):

Specify a subtitle text for the component.

append_avatar (string):

Appends a [v-avatar](/components/avatars/) component after default content in the append slot.

prepend_avatar (string):

Prepends a [v-avatar](/components/avatars/) component in the prepend slot before default content.

clearable (boolean):

Allows for the component to be cleared.

show_size (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUploadItem.json))

file (File):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUploadItem.json))

file_icon (string):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUploadItem.json))

click_remove (event):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VFileUploadItem.json))

class trame.widgets.vuetify3.VFooter(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFooter component. See more info and examples.

Args:

border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
height (string, number):: Sets the height for the component.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
absolute (boolean):: Applies position: absolute to the component.
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
color (string):: 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).
name (string):: Assign a specific name for layout registration.
order (string, number):: Adjust the order of the component in relation to its registration order.
app (boolean):: Determines the position of the footer. If true, the footer would be given a fixed position at the bottom of the viewport. If false, the footer is set to the bottom of the page.

class trame.widgets.vuetify3.VForm(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VForm component. See more info and examples.

Args:

model_value (boolean):

The value representing the validity of the form. If the value is null then no validation has taken place yet, or the form has been reset. Otherwise the value will be a boolean that indicates if validation has passed or not.

readonly (boolean):

Puts all children inputs into a readonly state.

disabled (boolean):

Puts all children inputs into a disabled state.

validate_on (enum):

Changes the events in which validation occurs.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

fast_fail (boolean):

Stop validation as soon as any rules fail.

update_modelValue (event):

Event emitted when the form’s validity changes.

submit (event):

Emitted when form is submitted.

class trame.widgets.vuetify3.VHover(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VHover component. See more info and examples.

Args:

model_value (boolean):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
disabled (boolean):: Removes hover functionality.
close_delay (string, number):: Milliseconds to wait before closing component. Only applies to hover and focus events.
open_delay (string, number):: Milliseconds to wait before opening component. Only applies to hover and focus events.
update_modelValue (event):: Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VIcon(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VIcon component. See more info and examples.

Args:

end (boolean):

Applies margin at the start of the component.

start (boolean):

Applies margin at the end of the component.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

disabled (boolean):

Removes the ability to click or target the component.

size (string, number):

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.

class trame.widgets.vuetify3.VImg(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VImg component. See more info and examples.

Args:

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

position (string):

Applies [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) styles to the image and placeholder elements.

absolute (boolean):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VImg.json))

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

color (string):

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).

inline (boolean):

Display as an inline element instead of a block, also disables flex-grow.

transition (enum):

The transition to use when switching from lazy-src to src. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

content_class (any):

Apply a custom class to the internal content element.

eager (boolean):

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.

options (IntersectionObserverInit):

Options that are passed to the [Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) constructor.

draggable (boolean, ‘true’, ‘false’):

Controls the draggable behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable).

alt (string):

Alternate text for screen readers. Leave empty for decorative images.

cover (boolean):

Resizes the background image to cover the entire container.

gradient (string):

The gradient to apply to the image. Only supports [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) syntax, anything else should be done with classes.

lazy_src (string):

Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied.

NOTE: This prop has no effect unless either height or aspect-ratio

are provided.

sizes (string):

For use with srcset, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).

src (enum):

The image URL. This prop is mandatory.

Enum values: [: string, { src: string; srcset: string; lazySrc: string; aspect: number }

]

srcset (string):

A set of alternate images to use based on device size. [Read more…](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).

aspect_ratio (string, number):

Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted.

crossorigin (‘’, ‘anonymous’, ‘use-credentials’):

Specify that images should be fetched with CORS enabled [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#crossorigin)

referrerpolicy (enum):

Define which referrer is sent when fetching the resource [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy)

Enum values: [: ‘origin’, ‘no-referrer’, ‘no-referrer-when-downgrade’, ‘origin-when-cross-origin’, ‘same-origin’, ‘strict-origin’, ‘strict-origin-when-cross-origin’, ‘unsafe-url’

]

error (event):

Emitted if the image fails to load.

load (event):

Emitted when the image is loaded.

loadstart (event):

Emitted when the image starts to load.

class trame.widgets.vuetify3.VInfiniteScroll(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VInfiniteScroll component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
mode (‘intersect’, ‘manual’):: Specifies if content should load automatically when scrolling (intersect) or manually (manual).
color (string):: 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).
height (string, number):: Sets the height for the component.
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Sets the width for the component.
direction (‘horizontal’, ‘vertical’):: Specifies if scroller is vertical or horizontal.
side (‘start’, ‘end’, ‘both’):: Specifies the side where new content should appear. Either the start, end, or both sides.
margin (string, number):: Value sent to the intersection observer. Will make the observer trigger earlier, by the margin (px) value supplied.
load_more_text (string):: Text shown in default load more button, when in manual mode.
empty_text (string):: Text shown when there is no more content to load.
load (event):: Emitted when reaching the start / end threshold, or if triggered when using manual mode.

class trame.widgets.vuetify3.VInput(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VInput component. See more info and examples.

Args:

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

disabled (boolean):

Removes the ability to click or target the component.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when appended icon is clicked.

update_focused (event):

Event that is emitted when the component’s focus state changes.

class trame.widgets.vuetify3.VItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VItem component. See more info and examples.

Args:

value (any):: The value used when the component is selected in a group. If not provided, a unique ID will be used.
disabled (boolean):: Removes the ability to click or target the component.
selected_class (string):: Configure the active CSS class applied when an item is selected.
group_selected (event):: Event that is emitted when an item is selected within a group.

class trame.widgets.vuetify3.VItemGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VItemGroup component. See more info and examples.

Args:

model_value (unknown):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
disabled (boolean):: Puts all children components into a disabled state.
selected_class (string):: Configure the selected CSS class. This class will be available in v-item default scoped slot.
max (number):: Sets a maximum number of selections that can be made.
multiple (boolean):: Allows one to select multiple items.
mandatory (boolean, ‘force’):: Forces at least one item to always be selected (if available).
update_modelValue (event):: Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VKbd(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VKbd component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VLabel(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VLabel component. See more info and examples.

Args:

text (string):: Specify content text for the component.
theme (string):: Specify a theme for this component and all of its children.

class trame.widgets.vuetify3.VLayout(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VLayout component. See more info and examples.

Args:

full_height (boolean):: Sets the component height to 100%.
overlaps (string[]):: FOR INTERNAL USE ONLY
height (string, number):: Sets the height for the component.
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Sets the width for the component.

class trame.widgets.vuetify3.VLayoutItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VLayoutItem component. See more info and examples.

Args:

model_value (boolean):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
position (‘top’, ‘bottom’, ‘left’, ‘right’):: The position of the item.
absolute (boolean):: Applies position: absolute to the component.
name (string):: Assign a specific name for layout registration.
size (string, number):: Sets the height and width of the component.
order (string, number):: Adjust the order of the component in relation to its registration order.

class trame.widgets.vuetify3.VLazy(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VLazy component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

options (IntersectionObserverInit):

Options that are passed to the [Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) constructor.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VLigatureIcon(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VLigatureIcon component. See more info and examples.

Args:

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

tag (string):

Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VList(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VList component. See more info and examples.

Args:

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (‘text’, ‘flat’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

active_color (string):

The applied color when the component is in an active state.

base_color (string):

Sets the color of component when not focused.

slim (boolean):

Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation.

disabled (boolean):

Puts all children inputs into a disabled state.

bg_color (string):

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).

lines (false, ‘one’, ‘two’, ‘three’):

Designates a minimum-height for all children v-list-item components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.

nav (boolean):

An alternative styling that reduces v-list-item width and rounds the corners. Typically used with [v-navigation-drawer](/components/navigation-drawers).

mandatory (boolean):

Forces at least one item to always be selected (if available).

active_class (string):

The class applied to the component when it is in an active state.

items (any[]):

Can be an array of objects or strings. By default objects should have a title property, and can optionally have a props property containing any [VListItem props](/api/v-list-item/#props), a value property to allow selection, and a children property containing more item objects. Keys to use for these can be changed with the item-title, item-value, item-props, and item-children props.

selected (unknown):

An array containing the values of currently selected items. Can be two-way bound with v-model:selected.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

expand_icon (enum):

Icon to display when the list item is collapsed.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon to display when the list item is expanded.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

activatable (boolean):

Designates whether the list items are activatable.

selectable (boolean):

Designates whether the list items are selectable.

opened (unknown):

An array containing the values of currently opened groups. Can be two-way bound with v-model:opened.

activated (any):

Array of ids of activated nodes.

active_strategy (ActiveStrategy):

Affects how items with children behave when activated. - leaf: Only leaf nodes (items without children) can be activated. - independent: All nodes can be activated whether they have children or not. - classic: Activating a parent node will cause all children to be activated.

select_strategy (SelectStrategy):

Affects how items with children behave when selected. - leaf: Only leaf nodes (items without children) can be selected. - independent: All nodes can be selected whether they have children or not. - classic: Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.

open_strategy (OpenStrategy):

Affects how items with children behave when expanded. - multiple: Any number of groups can be open at once. - single: Only one group at each level can be open, opening a group will cause others to close. - list: Multiple, but all other groups will close when an item is selected.

item_type (string):

Designates the key on the supplied items that is used for determining the nodes type.

item_title (SelectItemKey<any>):

Property on supplied items that contains its title.

item_value (SelectItemKey<any>):

Property on supplied items that contains its value.

item_children (SelectItemKey<any>):

Property on supplied items that contains its children.

item_props (SelectItemKey<any>):

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.

return_object (boolean):

Changes the selection behavior to return the object directly rather than the value specified with item-value.

click_open (event):

Emitted when the list item is opened.

click_select (event):

Emitted when the list item is selected.

update_opened (event):

Emitted when the list item is opened.

update_selected (event):

Emitted when the list item is selected.

update_activated (event):

Emitted when the list item is activated.

click_activate (event):

Emitted when the list item is activated.

class trame.widgets.vuetify3.VListGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VListGroup component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

title (string):

Specify a title text for the component.

value (any):

Expands / Collapse the list-group.

color (string):

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).

base_color (string):

Sets the color of component when not focused.

active_color (string):

The applied color when the component is in an active state.

expand_icon (enum):

Icon to display when the list item is collapsed.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon to display when the list item is expanded.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

fluid (boolean):

Removes the left padding assigned for action icons from group items.

subgroup (boolean):

Designate the component as nested list group.

class trame.widgets.vuetify3.VListImg(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VListImg component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VListItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VListItem component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

link (boolean):

Designates that the component is a link. This is automatic when using the href or to prop.

nav (boolean):

Reduces the width v-list-item takes up as well as adding a border radius.

title (string, number):

Generates a v-list-item-title component with the supplied value. Note that this overrides the native [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with v-bind:title.attr instead.

replace (boolean):

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.

theme (string):

Specify a theme for this component and all of its children.

value (any):

The value used for selection. Obtained from [v-list](/api/v-list)’s v-model:selected when the item is selected.

color (string):

Applies specified color to the control when in an active state or input-value is true - 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),

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

exact (boolean):

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.

subtitle (string, number):

Specify a subtitle text for the component.

base_color (string):

Sets the color of component when not focused.

active_color (string):

The applied color when the component is in an active state.

active_class (string):

The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation.

disabled (boolean):

Removes the ability to click or target the component.

lines (false, ‘one’, ‘two’, ‘three’):

The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.

slim (boolean):

Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

href (string):

Designates the component as anchor and applies the href attribute.

to (RouteLocationRaw):

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.

append_avatar (string):

Appends a [v-avatar](/components/avatars/) component after default content in the append slot.

prepend_avatar (string):

Prepends a [v-avatar](/components/avatars/) component in the prepend slot before default content.

class trame.widgets.vuetify3.VListItemAction(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VListItemAction component. See more info and examples.

Args:

end (boolean):: Applies margin at the start of the component.
start (boolean):: Applies margin at the end of the component.
tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VListItemMedia(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VListItemMedia component. See more info and examples.

Args:

end (boolean):: Applies margin at the start of the component.
start (boolean):: Applies margin at the end of the component.
tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VListItemSubtitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VListItemSubtitle component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
opacity (string, number):: Sets the component’s opacity value

class trame.widgets.vuetify3.VListItemTitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VListItemTitle component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VListSubheader(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VListSubheader component. See more info and examples.

Args:

title (string):: Specify a title text for the component.
sticky (boolean):: Sticks the header to the top of the table.
tag (string):: Specify a custom tag used on the root element.
color (string):: 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).
inset (boolean):: Insets the subheader without additional spacing, aligning it flush with the surrounding content.

class trame.widgets.vuetify3.VLocaleProvider(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VLocaleProvider component. See more info and examples.

Args:

messages (unknown):: Displays a list of messages or a single message if using a string.
locale (string):: Specify a locale to use.
fallback_locale (string):: Specify a fallback locale to use when a locale is not found.
rtl (boolean):: Specify a RTL mode.

class trame.widgets.vuetify3.VMain(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VMain component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
height (string, number):: Sets the height for the component.
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Sets the width for the component.
scrollable (boolean):: Specify a custom scrollable function.

class trame.widgets.vuetify3.VMenu(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VMenu component. See more info and examples.

Args:

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

height (string, number):

Sets the height for the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component. Use auto to use the activator width.

width (string, number):

Sets the width for the component.

location (Anchor):

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..

theme (string):

Specify a theme for this component and all of its children.

disabled (boolean):

Removes the ability to click or target the component.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component }), { component: Component }

]

activator ((string & {}), Element, ‘parent’, ComponentPublicInstance):

Explicitly sets the overlay’s activator.

close_on_back (boolean):

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.

contained (boolean):

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content_class (any):

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.

content_props (any):

Apply custom properties to the content.

opacity (string, number):

Sets the overlay opacity.

no_click_animation (boolean):

Disables the bounce effect when clicking outside of the content element when using the persistent prop.

persistent (boolean):

Clicking outside of the element or pressing esc key will not deactivate it.

scrim (string, boolean):

Accepts true/false to enable background, and string to define color.

z_index (string, number):

The z-index used for the component.

target (enum):

For locationStrategy=”connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

Enum values: [: (string & {}), Element, ‘parent’, ‘cursor’, ComponentPublicInstance, [number, number]

]

activator_props (unknown):

Apply custom properties to the activator.

open_on_click (boolean):

Designates whether menu should open on activator click.

open_on_hover (boolean):

Designates whether menu should open on activator hover.

open_on_focus (boolean):

Activate the component when the activator is focused.

close_on_content_click (boolean):

Designates if menu should close when its content is clicked.

close_delay (string, number):

Milliseconds to wait before closing component. Only works with the open-on-hover prop.

open_delay (string, number):

Milliseconds to wait before opening component. Only works with the open-on-hover prop.

eager (boolean):

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.

location_strategy (LocationStrategyFn):

A function used to specifies how the component should position relative to its activator.

origin (Anchor):

Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).

offset (string, number, number[]):

A single value that offsets content away from the target based upon what side it is on.

scroll_strategy (ScrollStrategyFn):

Strategy used when the component is activate and user scrolls.

attach (string, boolean, Element):

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator.

id (string):

The unique identifier of the component.

submenu (boolean):

Opens with right arrow and closes on left instead of up/down. Implies location=”end”. Directions are reversed for RTL.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VMessages(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VMessages component. See more info and examples.

Args:

color (string):

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).

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component }), { component: Component; leaveAbsolute: boolean; group: boolean }

]

messages (string, string[]):

Displays a list of messages or a single message if using a string.

active (boolean):

Determines whether the messages are visible or not.

class trame.widgets.vuetify3.VNavigationDrawer(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VNavigationDrawer component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
name (string):: Assign a specific name for layout registration.
theme (string):: Specify a theme for this component and all of its children.
image (string):: Apply a specific background image to the component.
model_value (boolean):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
location (‘top’, ‘left’, ‘right’, ‘bottom’, ‘start’, ‘end’):: Controls the edge of the screen the drawer is attached to.
absolute (boolean):: Applies position: absolute to the component.
color (string):: 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).
floating (boolean):: A floating drawer has no visible container (no border-right).
border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
order (string, number):: Adjust the order of the component in relation to its registration order.
width (string, number):: Sets the width for the component.
persistent (boolean):: Clicking outside or pressing esc key will not dismiss the dialog.
scrim (string, boolean):: Determines whether an overlay is used when a temporary drawer is open. Accepts true/false to enable background, and string to define color.
close_delay (string, number):: Milliseconds to wait before closing component. Only applies to hover and focus events.
open_delay (string, number):: Milliseconds to wait before opening component. Only applies to hover and focus events.
sticky (boolean):: When true, the drawer will remain visible when scrolling past the top of the page.
mobile (boolean):: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint
mobile_breakpoint (number, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’, ‘xs’):: Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the temporary prop, or activate the bottom prop when the breakpoint value is met. Setting the value to 0 will disable this functionality.
disable_resize_watcher (boolean):: Prevents the automatic opening or closing of the drawer when resized, based on whether the device is mobile or desktop.
disable_route_watcher (boolean):: Disables opening of navigation drawer when route changes.
expand_on_hover (boolean):: Collapses the drawer to a mini-variant until hovering with the mouse.
permanent (boolean):: The drawer remains visible regardless of screen size.
rail (boolean):: Sets the component width to the rail-width value.
rail_width (string, number):: Sets the width for the component when rail is enabled.
temporary (boolean):: A temporary drawer sits above its application and uses a scrim (overlay) to darken the background.
touchless (boolean):: Disable mobile touch functionality.
update_modelValue (event):: Event that is emitted when the component’s model changes.
update_rail (event):: Event that is emitted when the rail model changes.

class trame.widgets.vuetify3.VNoSsr(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VNoSsr component. See more info and examples.

class trame.widgets.vuetify3.VNumberInput(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VNumberInput component. See more info and examples.

Args:

flat (boolean):

Removes box shadow when using a variant with elevation.

type (string):

Sets input type.

model_value (Number):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

error (boolean):

Puts the input in a manual error state.

reverse (boolean):

Reverses the orientation.

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

rounded (string, number, boolean):

Adds a border radius to the input.

tile (boolean):

Removes any applied border-radius from the component.

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

name (string):

Sets the component’s name attribute.

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

base_color (string):

Sets the color of the input when it is not focused.

prepend_icon (enum):

Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

readonly (boolean):

Puts input in readonly state.

disabled (boolean):

Removes the ability to click or target the input.

loading (string, boolean):

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.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

max (number):

Specifies the maximum allowable value for the input.

bg_color (string):

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).

inset (boolean):

Applies an indentation to the dividers used in the stepper buttons.

min (number):

Specifies the minimum allowable value for the input.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

id (string):

Sets the DOM id on the component.

autofocus (boolean):

Enables autofocus.

counter (string, number, boolean):

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

prefix (string):

Displays prefix text.

placeholder (string):

Sets the input’s placeholder text.

persistent_placeholder (boolean):

Forces placeholder to always be visible.

persistent_counter (boolean):

Forces counter to always be visible.

suffix (string):

Displays suffix text.

role (string):

The role attribute applied to the input.

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

The icon used when the clearable prop is set to true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

dirty (boolean):

Manually apply the dirty state styling.

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

single_line (boolean):

Label does not move on focus/dirty.

counter_value (number, js_fn):

Function returns the counter display text.

model_modifiers (unknown):

FOR INTERNAL USE ONLY

control_variant (‘default’, ‘split’, ‘stacked’):

The color of the control. It defaults to the value of variant prop.

hide_input (boolean):

Hide the input field.

step (number):

Defines the interval between allowed values when the user increments or decrements the input

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when append icon is clicked.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

class trame.widgets.vuetify3.VOtpInput(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VOtpInput component. See more info and examples.

Args:

length (string, number):

The OTP field’s length.

type (‘number’, ‘text’, ‘password’):

Supported types: text, password, number.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

model_value (string, number):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

height (string, number):

Sets the height for the component.

rounded (string, number, boolean):

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).

divider (string):

Specifies the dividing character between items.

base_color (string):

Sets the color of the input when it is not focused.

bg_color (string):

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).

disabled (boolean):

Removes the ability to click or target the input.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

autofocus (boolean):

Automatically focuses the first input on page load

placeholder (string):

Sets the input’s placeholder text.

focused (boolean):

Forces a focused state styling on the component.

loading (string, boolean):

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.

focus_all (boolean):

Puts all inputs into a focus state when any are focused

update_modelValue (event):

Event that is emitted when the component’s model changes.

update_focused (event):

Emitted when the input is focused or blurred

finish (event):

Emitted when the input is filled completely and cursor is blurred.

class trame.widgets.vuetify3.VOverlay(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VOverlay component. See more info and examples.

Args:

theme (string):

Specify a theme for this component and all of its children.

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..

absolute (boolean):

Applies position: absolute to the content element.

height (string, number):

Sets the height for the component.

eager (boolean):

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.

disabled (boolean):

Removes the ability to click or target the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

activator ((string & {}), Element, ‘parent’, ComponentPublicInstance):

Explicitly sets the overlay’s activator.

close_on_back (boolean):

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.

contained (boolean):

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content_class (any):

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.

content_props (any):

Apply custom properties to the content.

opacity (string, number):

Sets the overlay opacity.

no_click_animation (boolean):

Disables the bounce effect when clicking outside of the content element when using the persistent prop.

persistent (boolean):

Clicking outside of the element or pressing esc key will not deactivate it.

scrim (string, boolean):

Accepts true/false to enable background, and string to define color.

z_index (string, number):

The z-index used for the component.

target (enum):

For locationStrategy=”connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

Enum values: [: (string & {}), Element, ‘parent’, ‘cursor’, ComponentPublicInstance, [number, number]

]

activator_props (unknown):

Apply custom properties to the activator.

open_on_click (boolean):

Activate the component when the activator is clicked.

open_on_hover (boolean):

Activate the component when the activator is hovered.

open_on_focus (boolean):

Activate the component when the activator is focused.

close_on_content_click (boolean):

Closes component when you click on its content.

close_delay (string, number):

Milliseconds to wait before closing component. Only applies to hover and focus events.

open_delay (string, number):

Milliseconds to wait before opening component. Only applies to hover and focus events.

location_strategy (LocationStrategyFn):

A function used to specifies how the component should position relative to its activator.

origin (Anchor):

Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).

offset (string, number, number[]):

A single value that offsets content away from the target based upon what side it is on.

scroll_strategy (ScrollStrategyFn):

Strategy used when the component is activate and user scrolls.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

attach (string, boolean, Element):

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default.

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_outside (event):

Event that fires when clicking outside an active overlay.

afterEnter (event):

Event that fires after the overlay has finished transitioning in.

afterLeave (event):

Event that fires after the overlay has finished transitioning out.

class trame.widgets.vuetify3.VPagination(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VPagination component. See more info and examples.

Args:

length (string, number):

The number of pages.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

size (string, number):

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.

model_value (number):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

Applies specified color to the selected page button - 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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

active_color (string):

The applied color when the component is in an active state.

disabled (boolean):

Removes the ability to click or target the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

start (string, number):

Specify the starting page.

next_icon (enum):

The icon to use for the next button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

The icon to use for the prev button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

first_icon (enum):

The icon to use for the first button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

last_icon (enum):

The icon to use for the last button.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

aria_label (string):

Label for the root element.

total_visible (string, number):

Specify the total visible pagination numbers.

page_aria_label (string):

Label for each page button.

current_page_aria_label (string):

Label for the currently selected page.

first_aria_label (string):

Label for the go to first button.

previous_aria_label (string):

Label for the previous button.

next_aria_label (string):

Label for the next button.

last_aria_label (string):

Label for the go to last button.

ellipsis (string):

Text to show between page buttons when truncating the list.

show_first_last_page (boolean):

Show buttons for going to first and last page.

update_modelValue (event):

Event that is emitted when the component’s model changes.

next (event):

Emitted when clicking on go to next button.

prev (event):

Emitted when clicking on go to previous button.

first (event):

Emitted when clicking on go to first button.

last (event):

Emitted when clicking on go to last button.

class trame.widgets.vuetify3.VParallax(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VParallax component. See more info and examples.

Args:

scale (string, number):: The scale of the parallax image.

class trame.widgets.vuetify3.VPicker(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VPicker component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
title (string):: Specify a title text for the component.
theme (string):: Specify a theme for this component and all of its children.
location (Anchor):: Specifies the component’s location. Can combine by using a space separated string.
color (string):: 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).
height (string, number):: Sets the height for the component.
border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
bg_color (string):: 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).
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Sets the width for the component.
position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):: Sets the position for the component.
landscape (boolean):: Puts the picker into landscape mode.
hide_header (boolean):: Hide the picker header.

class trame.widgets.vuetify3.VPickerTitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VPickerTitle component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VProgressCircular(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VProgressCircular component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
size (string, number):: Sets the diameter of the circle in pixels.
model_value (string, number):: The percentage value for current progress.
color (string):: 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).
bg_color (string):: 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).
width (string, number):: Sets the stroke of the circle in pixels.
indeterminate (boolean, ‘disable-shrink’):: Constantly animates, use when loading progress is unknown. If set to the string ‘disable-shrink’ it will use a simpler animation that does not run on the main thread.
rotate (string, number):: Rotates the circle start point in degrees.

class trame.widgets.vuetify3.VProgressLinear(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VProgressLinear component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
reverse (boolean):: Displays reversed progress (right to left in LTR mode and left to right in RTL).
theme (string):: Specify a theme for this component and all of its children.
model_value (string, number):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
location (Anchor):: Specifies the component’s location. Can combine by using a space separated string.
absolute (boolean):: Applies position: absolute to the component.
color (string):: 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).
height (string, number):: Sets the height for the component.
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
bg_color (string):: 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).
opacity (string, number):: Set the opacity of the progress bar.
active (boolean):: Reduce the height to 0, hiding component.
indeterminate (boolean):: Constantly animates, use when loading progress is unknown.
max (string, number):: Sets the maximum value the progress can reach.
bg_opacity (string, number):: Background opacity, if null it defaults to 0.3 if background color is not specified or 1 otherwise.
buffer_value (string, number):: The percentage value for the buffer.
buffer_color (string):: Sets the color of the buffer bar.
buffer_opacity (string, number):: Set the opacity of the buffer bar.
clickable (boolean):: Clicking on the progress track will automatically set the value.
stream (boolean):: An alternative style for portraying loading that works in tandem with buffer-value.
striped (boolean):: Adds a stripe background to the filled portion of the progress component.
rounded_bar (boolean):: Applies a border radius to the progress bar.
update_modelValue (event):: Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VPullToRefresh(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VPullToRefresh component. See more info and examples.

Args:

disabled (boolean):: Removes the ability to click or target the component.
pull_down_threshold (number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VPullToRefresh.json))
load (event):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VPullToRefresh.json))

class trame.widgets.vuetify3.VRadio(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VRadio component. See more info and examples.

Args:

type (string):

Provides the default type for children selection controls.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

base_color (string):

Sets the color of the input when it is not focused.

disabled (boolean):

Removes the ability to click or target the component.

multiple (boolean):

Changes select to multiple. Accepts array for value.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

readonly (boolean):

Puts input in readonly state.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

inline (boolean):

Puts children inputs into a row.

true_value (any):

Sets value for truthy state.

false_value (any):

Sets value for falsy state.

defaults_target (string):

The target component to provide defaults values for.

false_icon (enum):

The icon used when inactive.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_icon (enum):

The icon used when active.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

class trame.widgets.vuetify3.VRadioGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VRadioGroup component. See more info and examples.

Args:

type (string):

Provides the default type for children selection controls.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

disabled (boolean):

Removes the ability to click or target the component.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

inline (boolean):

Displays radio buttons in row.

defaults_target (string):

The target component to provide defaults values for.

false_icon (enum):

The icon used when inactive.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_icon (enum):

The icon used when active.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when appended icon is clicked.

update_focused (event):

Event that is emitted when the component’s focus state changes.

class trame.widgets.vuetify3.VRangeSlider(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VRangeSlider component. See more info and examples.

Args:

reverse (boolean):

Reverses the slider direction.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value ((string, number)[]):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

disabled (boolean):

Removes the ability to click or target the component.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

ripple (boolean):

Applies the [v-ripple](/directives/ripple) directive.

strict (boolean):

Disallows dragging the ending thumb past the starting thumb and vice versa.

max (string, number):

Sets the maximum allowed value.

min (string, number):

Sets the minimum allowed value.

step (string, number):

If greater than 0, sets step interval for ticks.

thumb_color (string):

Sets the thumb and thumb label color.

thumb_label (boolean, ‘always’):

Show thumb label. If true it shows label when using slider. If set to ‘always’ it always shows label.

thumb_size (string, number):

Controls the size of the thumb label.

show_ticks (boolean, ‘always’):

Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks.

ticks (number[], Record<number, string>):

Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks.

tick_size (string, number):

Controls the size of ticks

track_color (string):

Sets the track’s color

track_fill_color (string):

Sets the track’s fill color

track_size (string, number):

Sets the track’s size (height).

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when appended icon is clicked.

update_focused (event):

Event that is emitted when the component’s focus state changes.

start (event):

Slider value emitted at start of slider movement.

end (event):

Slider value emitted at the end of slider movement.

class trame.widgets.vuetify3.VRating(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VRating component. See more info and examples.

Args:

length (string, number):

The amount of items to show.

tag (string):

Specify a custom tag used on the root element.

name (string):

Sets the component’s name attribute.

theme (string):

Specify a theme for this component and all of its children.

size (string, number):

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.

model_value (string, number):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

active_color (string):

The applied color when the component is in an active state.

disabled (boolean):

Removes the ability to click or target the component.

readonly (boolean):

Removes all hover effects and pointer events.

clearable (boolean):

Allows for the component to be cleared by clicking on the current value.

ripple (boolean):

Applies the [v-ripple](/directives/ripple) directive.

hover (boolean):

Provides visual feedback when hovering over icons.

item_aria_label (string):

The aria-label used for each item.

empty_icon (enum):

The icon displayed when empty.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

full_icon (enum):

The icon displayed when full.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

half_increments (boolean):

Allows the selection of half increments.

item_label_position (string):

Position of item labels. Accepts ‘top’ and ‘bottom’.

item_labels (string[]):

Array of labels to display next to each item..

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VResponsive(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VResponsive component. See more info and examples.

Args:

height (string, number):: Sets the height for the component.
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Sets the width for the component.
content_class (any):: Apply a custom class to the internal content element.
aspect_ratio (string, number):: Sets a base aspect ratio, calculated as width/height. This will only set a minimum height, the component can still grow if it has a lot of content.
inline (boolean):: Display as an inline element instead of a block, also disables flex-grow.

class trame.widgets.vuetify3.VRow(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VRow component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

align (‘start’, ‘end’, ‘center’, ‘baseline’, ‘stretch’):

Applies the [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) css property. Available options are: start, center, end, baseline and stretch.

justify (enum):

Applies the [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) css property. Available options are: start, center, end, space-between and space-around.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘stretch’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

dense (boolean):

Reduces the gutter between `v-col`s.

no_gutters (boolean):

Removes the gutter between `v-col`s.

align_sm (‘start’, ‘end’, ‘center’, ‘baseline’, ‘stretch’):

Changes the align-items property on small and greater breakpoints.

align_md (‘start’, ‘end’, ‘center’, ‘baseline’, ‘stretch’):

Changes the align-items property on medium and greater breakpoints.

align_lg (‘start’, ‘end’, ‘center’, ‘baseline’, ‘stretch’):

Changes the align-items property on large and greater breakpoints.

align_xl (‘start’, ‘end’, ‘center’, ‘baseline’, ‘stretch’):

Changes the align-items property on extra large and greater breakpoints.

align_xxl (‘start’, ‘end’, ‘center’, ‘baseline’, ‘stretch’):

Changes the align-items property on extra extra large and greater breakpoints.

justify_sm (enum):

Changes the justify-content property on small and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

justify_md (enum):

Changes the justify-content property on medium and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

justify_lg (enum):

Changes the justify-content property on large and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

justify_xl (enum):

Changes the justify-content property on extra large and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

justify_xxl (enum):

Changes the justify-content property on extra extra large and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

align_content_sm (enum):

Changes the align-content property on small and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘stretch’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

align_content_md (enum):

Changes the align-content property on medium and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘stretch’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

align_content_lg (enum):

Changes the align-content property on large and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘stretch’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

align_content_xl (enum):

Changes the align-content property on extra large and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘stretch’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

align_content_xxl (enum):

Changes the align-content property on extra extra large and greater breakpoints.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘stretch’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

align_content (enum):

Applies the [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) css property. Available options are: start, center, end, space-between, space-around and stretch.

Enum values: [: ‘start’, ‘end’, ‘center’, ‘stretch’, ‘space-between’, ‘space-around’, ‘space-evenly’

]

class trame.widgets.vuetify3.VScaleTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VScaleTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VScrollXReverseTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VScrollXReverseTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VScrollXTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VScrollXTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VScrollYReverseTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VScrollYReverseTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VScrollYTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VScrollYTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VSelect(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSelect component. See more info and examples.

Args:

flat (boolean):

Removes box shadow when using a variant with elevation.

type (string):

Sets input type.

reverse (boolean):

Reverses the orientation.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

menu (boolean):

Renders with the menu open by default.

theme (string):

Specify a theme for this component and all of its children.

items (any[]):

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.

id (string):

Sets the DOM id on the component.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

rounded (string, number, boolean):

Adds a border radius to the input.

tile (boolean):

Removes any applied border-radius from the component.

chips (boolean):

Changes display of selections to chips.

closable_chips (boolean):

Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.

close_text (string):

Text set to to the inputs aria-label and title when input menu is closed.

open_text (string):

Text set to to the inputs aria-label and title when input menu is open.

eager (boolean):

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.

hide_no_data (boolean):

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.

hide_selected (boolean):

Do not display in the select menu items that are already selected.

list_props (unknown):

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.

base_color (string):

Sets the color of the input when it is not focused.

bg_color (string):

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).

disabled (boolean):

Removes the ability to click or target the input.

multiple (boolean):

Changes select to multiple. Accepts array for value.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width of the select’s v-menu content.

width (string, number):

Sets the width for the component.

item_title (SelectItemKey<any>):

Property on supplied items that contains its title.

item_value (SelectItemKey<any>):

Set property of items’s value - must be primitive. Dot notation is supported. Note: This is currently not supported with v-combobox [GitHub Issue](https://github.com/vuetifyjs/vuetify/issues/5479).

item_children (SelectItemKey):

This property currently has no effect.

item_props (SelectItemKey<any>):

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.

return_object (boolean):

Changes the selection behavior to return the object directly rather than the value specified with item-value.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

menu_icon (enum):

Sets the the spin icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

menu_props (unknown):

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.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component }), { component: Component }

]

no_data_text (string):

Text shown when no items are provided to the component.

open_on_clear (boolean):

When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state.

item_color (string):

Sets color of selected items.

autofocus (boolean):

Enables autofocus.

counter (string, number, boolean):

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

prefix (string):

Displays prefix text.

placeholder (string):

Sets the input’s placeholder text.

persistent_placeholder (boolean):

Forces placeholder to always be visible.

persistent_counter (boolean):

Forces counter to always be visible.

suffix (string):

Displays suffix text.

role (string):

The role attribute applied to the input.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

The icon used when the clearable prop is set to true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

prepend_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

single_line (boolean):

Label does not move on focus/dirty.

loading (string, boolean):

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.

counter_value (number, js_fn):

Function returns the counter display text.

model_modifiers (unknown):

FOR INTERNAL USE ONLY

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when append icon is clicked.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

update_menu (event):

Event that is emitted when the component’s menu state changes.

class trame.widgets.vuetify3.VSelectionControl(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSelectionControl component. See more info and examples.

Args:

type (string):

Provides the default type for children selection controls.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

base_color (string):

Sets the color of the input when it is not focused.

disabled (boolean):

Removes the ability to click or target the component.

multiple (boolean):

Changes select to multiple. Accepts array for value.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

readonly (boolean):

Puts input in readonly state.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

inline (boolean):

Puts children inputs into a row.

true_value (any):

Sets value for truthy state.

false_value (any):

Sets value for falsy state.

defaults_target (string):

The target component to provide defaults values for.

false_icon (enum):

The icon used when inactive.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_icon (enum):

The icon used when active.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VSelectionControlGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSelectionControlGroup component. See more info and examples.

Args:

type (string):

Provides the default type for children selection controls.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

disabled (boolean):

Removes the ability to click or target the component.

multiple (boolean):

Changes select to multiple. Accepts array for value.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

readonly (boolean):

Puts input in readonly state.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

inline (boolean):

Puts children inputs into a row.

defaults_target (string):

The target component to provide defaults values for.

false_icon (enum):

The icon used when inactive.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_icon (enum):

The icon used when active.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VSheet(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSheet component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
location (Anchor):: Specifies the component’s location. Can combine by using a space separated string.
color (string):: 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).
height (string, number):: Sets the height for the component.
border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Sets the width for the component.
position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):: Sets the position for the component.

class trame.widgets.vuetify3.VSkeletonLoader(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSkeletonLoader component. See more info and examples.

Args:

type (enum):

A string delimited list of skeleton components to create such as type=”text@3” or type=”card, list-item”. Will recursively generate a corresponding skeleton from the provided string. Also supports short-hand for multiple elements such as article@3 and paragraph@2 which will generate 3 _article_ skeletons and 2 _paragraph_ skeletons. Please see below for a list of available pre-defined options.

Enum values: [: (string & {}), ‘article’, ‘button’, ‘table’, ‘image’, ‘text’, ‘chip’, ‘subtitle’, ‘divider’, ‘actions’, ‘avatar’, ‘heading’, ‘sentences’, ‘paragraph’, ‘ossein’, ‘card’, ‘card-avatar’, ‘date-picker’, ‘date-picker-options’, ‘date-picker-days’, ‘list-item’, ‘list-item-avatar’, ‘list-item-two-line’, ‘list-item-avatar-two-line’, ‘list-item-three-line’, ‘list-item-avatar-three-line’, ‘table-heading’, ‘table-thead’, ‘table-tbody’, ‘table-row-divider’, ‘table-row’, ‘table-tfoot’, (, (string & {}), ‘article’, ‘button’, ‘table’, ‘image’, ‘text’, ‘chip’, ‘subtitle’, ‘divider’, ‘actions’, ‘avatar’, ‘heading’, ‘sentences’, ‘paragraph’, ‘ossein’, ‘card’, ‘card-avatar’, ‘date-picker’, ‘date-picker-options’, ‘date-picker-days’, ‘list-item’, ‘list-item-avatar’, ‘list-item-two-line’, ‘list-item-avatar-two-line’, ‘list-item-three-line’, ‘list-item-avatar-three-line’, ‘table-heading’, ‘table-thead’, ‘table-tbody’, ‘table-row-divider’, ‘table-row’, ‘table-tfoot’

)[]

]

theme (string):

Specify a theme for this component and all of its children.

color (string):

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).

height (string, number):

Sets the height for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

loading (boolean):

Applies a loading animation with a on-hover loading cursor. A value of false will only work when there is content in the default slot.

loading_text (string):

aria-label for the element in a loading state.

boilerplate (boolean):

Remove the loading animation from the skeleton.

class trame.widgets.vuetify3.VSlideGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSlideGroup component. See more info and examples.

Args:

symbol (any):

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/).

tag (string):

Specify a custom tag used on the root element.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

disabled (boolean):

Puts all children components into a disabled state.

multiple (boolean):

Allows one to select multiple items.

mandatory (boolean, ‘force’):

Forces at least one item to always be selected (if available).

direction (‘horizontal’, ‘vertical’):

Switch between horizontal and vertical modes.

selected_class (string):

Configure the active CSS class applied when an item is selected.

next_icon (enum):

The appended slot when arrows are shown.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

The prepended slot when arrows are shown.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

max (number):

Sets a maximum number of selections that can be made.

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

mobile_breakpoint (number, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’, ‘xs’):

Sets the designated mobile breakpoint for the component.

center_active (boolean):

Forces the selected component to be centered.

show_arrows (string, boolean):

Change when the overflow arrow indicators are shown. By default, arrows always display on Desktop when the container is overflowing. When the container overflows on mobile, arrows are not shown by default. A show-arrows value of true allows these arrows to show on Mobile if the container overflowing. A value of desktop always displays arrows on Desktop while a value of mobile always displays arrows on Mobile. A value of always always displays arrows on Desktop and Mobile. Find more information on how to customize breakpoint thresholds on the [breakpoints page](/customizing/breakpoints).

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VSlideGroupItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSlideGroupItem component. See more info and examples.

Args:

value (any):: The value used when the component is selected in a group. If not provided, a unique ID will be used.
disabled (boolean):: Removes the ability to click or target the component.
selected_class (string):: Configure the active CSS class applied when an item is selected.
group_selected (event):: Event that is emitted when an item is selected within a group.

class trame.widgets.vuetify3.VSlideXReverseTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSlideXReverseTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VSlideXTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSlideXTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VSlideYReverseTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSlideYReverseTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VSlideYTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSlideYTransition component. See more info and examples.

Args:

mode (string):: Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/api/built-in-components.html#transition).
disabled (boolean):: Removes the ability to click or target the component.
origin (string):: Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).
group (boolean):: Creates a transition-group component. You can find more information in the [vue docs](https://vuejs.org/api/built-in-components.html#transitiongroup).
hide_on_leave (boolean):: Hides the leaving element (no exit animation).
leave_absolute (boolean):: Absolutely positions the leaving element (useful for [FLIP](https://aerotwist.com/blog/flip-your-animations/)).

class trame.widgets.vuetify3.VSlider(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSlider component. See more info and examples.

Args:

reverse (boolean):

Reverses the slider direction.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value (string, number):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

disabled (boolean):

Removes the ability to click or target the component.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

ripple (boolean):

Applies the [v-ripple](/directives/ripple) directive.

max (string, number):

Sets the maximum allowed value.

min (string, number):

Sets the minimum allowed value.

step (string, number):

If greater than 0, sets step interval for ticks.

thumb_color (string):

Sets the thumb and thumb label color.

thumb_label (boolean, ‘always’):

Show thumb label. If true it shows label when using slider. If set to ‘always’ it always shows label.

thumb_size (string, number):

Controls the size of the thumb label.

show_ticks (boolean, ‘always’):

Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks.

ticks (number[], Record<number, string>):

Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks.

tick_size (string, number):

Controls the size of ticks

track_color (string):

Sets the track’s color

track_fill_color (string):

Sets the track’s fill color

track_size (string, number):

Sets the track’s size (height).

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when appended icon is clicked.

update_focused (event):

Event that is emitted when the component’s focus state changes.

start (event):

Slider value emitted at start of slider movement.

end (event):

Slider value emitted at the end of slider movement.

class trame.widgets.vuetify3.VSnackbar(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSnackbar component. See more info and examples.

Args:

theme (string):

Specify a theme for this component and all of its children.

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..

absolute (boolean):

Applies position: absolute to the content element.

color (string):

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).

height (string, number):

Sets the height for the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

text (string):

Specify content text for the component.

eager (boolean):

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.

disabled (boolean):

Removes the ability to click or target the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

activator ((string & {}), Element, ‘parent’, ComponentPublicInstance):

Explicitly sets the overlay’s activator.

close_on_back (boolean):

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.

contained (boolean):

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content_class (any):

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.

content_props (any):

Apply custom properties to the content.

opacity (string, number):

Sets the overlay opacity.

z_index (string, number):

The z-index used for the component.

target (enum):

For locationStrategy=”connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

Enum values: [: (string & {}), Element, ‘parent’, ‘cursor’, ComponentPublicInstance, [number, number]

]

activator_props (unknown):

Apply custom properties to the activator.

open_on_click (boolean):

Activate the component when the activator is clicked.

open_on_hover (boolean):

Activate the component when the activator is hovered.

open_on_focus (boolean):

Activate the component when the activator is focused.

close_on_content_click (boolean):

Closes component when you click on its content.

close_delay (string, number):

Milliseconds to wait before closing component. Only applies to hover and focus events.

open_delay (string, number):

Milliseconds to wait before opening component. Only applies to hover and focus events.

location_strategy (LocationStrategyFn):

A function used to specifies how the component should position relative to its activator.

origin (Anchor):

Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).

offset (string, number, number[]):

A single value that offsets content away from the target based upon what side it is on.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

attach (string, boolean, Element):

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default.

vertical (boolean):

Stacks snackbar content on top of the actions (button).

position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):

Sets the position for the component.

multi_line (boolean):

Gives the snackbar a larger minimum height.

timer (string, boolean):

Display a progress bar that counts down until the snackbar closes. Pass a string to set a custom color, otherwise uses info.

timeout (string, number):

Time (in milliseconds) to wait until snackbar is automatically hidden. Use -1 to keep open indefinitely (0 in version < 2.3 ). It is recommended for this number to be between 4000 and 10000. Changes to this property will reset the timeout.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VSnackbarQueue(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSnackbarQueue component. See more info and examples.

Args:

theme (string):

Specify a theme for this component and all of its children.

model_value ( }):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..

absolute (boolean):

Applies position: absolute to the content element.

color (string):

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).

height (string, number):

Sets the height for the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

text (string):

Specify content text for the component.

close_text (string):

The text used in the close button when using the closable prop.

eager (boolean):

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.

disabled (boolean):

Removes the ability to click or target the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

activator ((string & {}), Element, ‘parent’, ComponentPublicInstance):

Explicitly sets the overlay’s activator.

close_on_back (boolean):

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.

contained (boolean):

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content_class (any):

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.

content_props (any):

Apply custom properties to the content.

opacity (string, number):

Sets the overlay opacity.

z_index (string, number):

The z-index used for the component.

target (enum):

For locationStrategy=”connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

Enum values: [: (string & {}), Element, ‘parent’, ‘cursor’, ComponentPublicInstance, [number, number]

]

activator_props (unknown):

Apply custom properties to the activator.

open_on_click (boolean):

Activate the component when the activator is clicked.

open_on_hover (boolean):

Activate the component when the activator is hovered.

open_on_focus (boolean):

Activate the component when the activator is focused.

close_on_content_click (boolean):

Closes component when you click on its content.

close_delay (string, number):

Milliseconds to wait before closing component. Only applies to hover and focus events.

open_delay (string, number):

Milliseconds to wait before opening component. Only applies to hover and focus events.

location_strategy (LocationStrategyFn):

A function used to specifies how the component should position relative to its activator.

origin (Anchor):

Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).

offset (string, number, number[]):

A single value that offsets content away from the target based upon what side it is on.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

attach (string, boolean, Element):

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default.

vertical (boolean):

Stacks snackbar content on top of the actions (button).

position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):

Sets the position for the component.

closable (string, boolean):

Adds a dismiss button that closes the active snackbar.

multi_line (boolean):

Gives the snackbar a larger minimum height.

timer (string, boolean):

Display a progress bar that counts down until the snackbar closes. Pass a string to set a custom color, otherwise uses info.

timeout (string, number):

Time (in milliseconds) to wait until snackbar is automatically hidden. Use -1 to keep open indefinitely (0 in version < 2.3 ). It is recommended for this number to be between 4000 and 10000. Changes to this property will reset the timeout.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VSpacer(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSpacer component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VSparkline(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSparkline component. See more info and examples.

Args:

type (‘trend’, ‘bar’):: Choose between a trendline or bars.
fill (boolean):: Using the fill property allows you to better customize the look and feel of your sparkline.
id (string):: The id of the component.
model_value ((number, { value: number })[]):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
color (string):: 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).
height (string, number):: Height of the SVG trendline or bars.
width (string, number):: Width of the SVG trendline or bars.
item_value (string):: The value of the item.
gradient (string[]):: An array of colors to use as a linear-gradient.
max (string, number):: The maximum value of the sparkline.
min (string, number):: The minimum value of the sparkline.
labels ((number, { value: number })[]):: An array of string labels that correspond to the same index as its data counterpart.
auto_line_width (boolean):: Automatically expand bars to use space efficiently.
auto_draw (boolean):: Trace the length of the line when first rendered.
auto_draw_duration (string, number):: Amount of time (in ms) to run the trace animation.
auto_draw_easing (string):: The easing function to use for the trace animation.
gradient_direction (‘top’, ‘left’, ‘right’, ‘bottom’):: The direction the gradient should run.
label_size (string, number):: The label font size.
line_width (string, number):: The thickness of the line, in px.
padding (string, number):: Low smooth or high line-width values may result in cropping, increase padding to compensate.
show_labels (boolean):: Show labels below each data point.
smooth (boolean):: Number of px to use as a corner radius. true defaults to 8, false is 0.

class trame.widgets.vuetify3.VSpeedDial(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSpeedDial component. See more info and examples.

Args:

theme (string):

Specify a theme for this component and all of its children.

id (string):

The unique identifier of the component.

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..

height (string, number):

Sets the height for the component.

eager (boolean):

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.

disabled (boolean):

Removes the ability to click or target the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component. Use auto to use the activator width.

width (string, number):

Sets the width for the component.

activator ((string & {}), Element, ‘parent’, ComponentPublicInstance):

Explicitly sets the overlay’s activator.

submenu (boolean):

Opens with right arrow and closes on left instead of up/down. Implies location=”end”. Directions are reversed for RTL.

close_on_back (boolean):

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.

contained (boolean):

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content_class (any):

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.

content_props (any):

Apply custom properties to the content.

opacity (string, number):

Sets the overlay opacity.

no_click_animation (boolean):

Disables the bounce effect when clicking outside of the content element when using the persistent prop.

persistent (boolean):

Clicking outside of the element or pressing esc key will not deactivate it.

scrim (string, boolean):

Accepts true/false to enable background, and string to define color.

z_index (string, number):

The z-index used for the component.

target (enum):

For locationStrategy=”connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

Enum values: [: (string & {}), Element, ‘parent’, ‘cursor’, ComponentPublicInstance, [number, number]

]

activator_props (unknown):

Apply custom properties to the activator.

open_on_click (boolean):

Designates whether menu should open on activator click.

open_on_hover (boolean):

Opens speed-dial on hover.

open_on_focus (boolean):

Activate the component when the activator is focused.

close_on_content_click (boolean):

Designates if menu should close when its content is clicked.

close_delay (string, number):

Milliseconds to wait before closing component. Only works with the open-on-hover prop.

open_delay (string, number):

Milliseconds to wait before opening component. Only works with the open-on-hover prop.

location_strategy (LocationStrategyFn):

A function used to specifies how the component should position relative to its activator.

origin (Anchor):

Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).

offset (string, number, number[]):

A single value that offsets content away from the target based upon what side it is on.

scroll_strategy (ScrollStrategyFn):

Strategy used when the component is activate and user scrolls.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component }), { component: Component }

]

attach (string, boolean, Element):

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VStepper(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepper component. See more info and examples.

Args:

flat (boolean):

Removes the stepper’s elevation.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

items ((string, Record<string, any>)[]):

An array of strings or objects used for automatically generating children components.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the component’s location. Can combine by using a space separated string.

color (string):

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).

height (string, number):

Sets the height for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

bg_color (string):

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).

disabled (boolean):

Puts all children components into a disabled state.

multiple (boolean):

Allows one to select multiple items.

mandatory (boolean, ‘force’):

Forces at least one item to always be selected (if available).

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

item_title (string):

Property on supplied items that contains its title.

item_value (string):

Property on supplied items that contains its value.

selected_class (string):

Configure the active CSS class applied when an item is selected.

position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):

Sets the position for the component.

max (number):

Sets a maximum number of selections that can be made.

mobile (boolean):

Forces the stepper into a mobile state, removing labels from stepper items.

mobile_breakpoint (number, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’, ‘xs’):

Overrides the display configuration default screen size that the component should be considered in mobile.

hide_actions (boolean):

Hide actions bar (prev and next buttons).

alt_labels (boolean):

Places the labels beneath the step.

complete_icon (enum):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/Stepper.json))

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

edit_icon (enum):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/Stepper.json))

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

editable (boolean):

Marks step as editable.

error_icon (enum):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/Stepper.json))

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

non_linear (boolean):

Allow user to jump to any step.

prev_text (string):

The text used for the Prev button.

next_text (string):

The text used for the Next button.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VStepperActions(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperActions component. See more info and examples.

Args:

color (string):: 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).
disabled (boolean, ‘next’, ‘prev’):: Removes the ability to click or target the component.
prev_text (string):: The text used for the Prev button.
next_text (string):: The text used for the Next button.
click_next (event):: Event emitted when clicking the next button.
click_prev (event):: Event emitted when clicking the prev button.

class trame.widgets.vuetify3.VStepperHeader(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperHeader component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.

class trame.widgets.vuetify3.VStepperItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperItem component. See more info and examples.

Args:

error (boolean):

Puts the stepper item in a manual error state.

title (string):

Specify a title text for the component.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

color (string):

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).

subtitle (string):

Specify a subtitle text for the component.

disabled (boolean):

Removes the ability to click or target the component.

rules (ValidationRule):

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.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

selected_class (string):

Configure the active CSS class applied when an item is selected.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

complete_icon (enum):

Icon to display when step is marked as completed.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

edit_icon (enum):

Icon to display when step is editable.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

editable (boolean):

Marks step as editable.

error_icon (enum):

Icon to display when step has an error.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

complete (boolean):

Marks step as complete.

group_selected (event):

Event that is emitted when an item is selected within a group.

class trame.widgets.vuetify3.VStepperVertical(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperVertical component. See more info and examples.

Args:

flat (boolean):

Removes the expansion-panel’s elevation and borders.

tag (string):

Specify a custom tag used on the root element.

theme (string):

Specify a theme for this component and all of its children.

items ((string, Record<string, any>)[]):

An array of strings or objects used for automatically generating children components.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes the border-radius.

eager (boolean):

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.

bg_color (string):

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).

disabled (boolean):

Puts all children components into a disabled state.

expand_icon (enum):

Icon used when the expansion panel is in a expandable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon used when the expansion panel is in a collapsable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

multiple (boolean):

Allows one to select multiple items.

mandatory (boolean, ‘force’):

Forces at least one item to always be selected (if available).

item_title (string):

Property on supplied items that contains its title.

item_value (string):

Property on supplied items that contains its value.

variant (‘default’, ‘accordion’, ‘inset’, ‘popout’):

Applies a distinct style to the component.

readonly (boolean):

Makes the entire expansion panel read only.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

selected_class (string):

Configure the active CSS class applied when an item is selected.

max (number):

Sets a maximum number of selections that can be made.

mobile (boolean):

Forces the stepper into a mobile state, removing labels from stepper items.

mobile_breakpoint (number, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’, ‘xs’):

Overrides the display configuration default screen size that the component should be considered in mobile.

hide_actions (boolean):

Hide actions bar (prev and next buttons).

focusable (boolean):

Makes the expansion-panel headers focusable.

alt_labels (boolean):

Places the labels beneath the step.

complete_icon (enum):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/Stepper.json))

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

edit_icon (enum):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/Stepper.json))

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

editable (boolean):

Marks step as editable.

error_icon (enum):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/Stepper.json))

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

non_linear (boolean):

Allow user to jump to any step.

prev_text (string):

The text used for the Prev button.

next_text (string):

The text used for the Next button.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VStepperVerticalActions(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperVerticalActions component. See more info and examples.

Args:

color (string):: 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).
disabled (boolean, ‘next’, ‘prev’):: Removes the ability to click or target the component.
prev_text (string):: The text used for the Prev button.
next_text (string):: The text used for the Next button.
click_next (event):: Event emitted when clicking the next button.
click_prev (event):: Event emitted when clicking the prev button.

class trame.widgets.vuetify3.VStepperVerticalItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperVerticalItem component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

error (boolean):

Puts the stepper item in a manual error state.

title (string):

Specify a title text for the component.

value (any):

Controls the opened/closed state of content.

color (string):

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).

height (string, number):

Sets the height for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

text (string):

Specify content text for the component.

eager (boolean):

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.

subtitle (string):

Specify a subtitle text for the component.

bg_color (string):

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).

disabled (boolean):

Disables the expansion-panel content.

expand_icon (enum):

Icon used when the expansion panel is in a expandable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon used when the expansion panel is in a collapsable state.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

static (boolean):

Remove title size expansion when selected.

readonly (boolean):

Makes the expansion panel content read only.

rules (ValidationRule):

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.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

selected_class (string):

Configure the active CSS class applied when an item is selected.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_actions (boolean):

Hide the expand icon in the content title.

focusable (boolean):

Makes the expansion panel content focusable.

complete_icon (enum):

Icon to display when step is marked as completed.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

edit_icon (enum):

Icon to display when step is editable.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

editable (boolean):

Marks step as editable.

error_icon (enum):

Icon to display when step has an error.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

complete (boolean):

Marks step as complete.

click_next (event):

Event emitted when clicking the next button

click_prev (event):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VStepperVerticalItem.json))

click_finish (event):

Event emitted when clicking the finish button

class trame.widgets.vuetify3.VStepperWindow(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperWindow component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
reverse (boolean):: Reverse the normal transition direction.
theme (string):: Specify a theme for this component and all of its children.
model_value (any):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
disabled (boolean):: Removes the ability to click or target the component.
direction (‘horizontal’, ‘vertical’):: The transition direction when changing windows.
selected_class (string):: Configure the active CSS class applied when an item is selected.
update_modelValue (event):: Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VStepperWindowItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperWindowItem component. See more info and examples.

Args:

value (any):: The value used when the component is selected in a group. If not provided, a unique ID will be used.
eager (boolean):: 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.
disabled (boolean):: Prevents the item from becoming active when using the “next” and “prev” buttons or the toggle method.
transition (string, boolean):: The transition used when the component progressing through items. Can be one of the [built in](/styles/transitions/) or custom transition.
selected_class (string):: Configure the active CSS class applied when an item is selected.
reverse_transition (string, boolean):: Sets the reverse transition.

class trame.widgets.vuetify3.VSvgIcon(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSvgIcon component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

class trame.widgets.vuetify3.VSwitch(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSwitch component. See more info and examples.

Args:

flat (boolean):

Display component without elevation. Default elevation for thumb is 4dp, flat resets it.

type (string):

Provides the default type for children selection controls.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

base_color (string):

Sets the color of the input when it is not focused.

disabled (boolean):

Removes the ability to click or target the component.

multiple (boolean):

Changes expected model to an array.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

loading (string, boolean):

Displays circular 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.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

inline (boolean):

Puts children inputs into a row.

indeterminate (boolean):

Sets an indeterminate state for the switch.

true_value (any):

Sets value for truthy state.

false_value (any):

Sets value for falsy state.

defaults_target (string):

The target component to provide defaults values for.

false_icon (enum):

The icon used when inactive.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_icon (enum):

The icon used when active.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

inset (boolean):

Enlarge the v-switch track to encompass the thumb.

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when appended icon is clicked.

update_focused (event):

Event that is emitted when the component’s focus state changes.

update_indeterminate (event):

Event that is emitted when the component’s indeterminate state changes.

class trame.widgets.vuetify3.VSystemBar(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSystemBar component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
name (string):: Assign a specific name for layout registration.
theme (string):: Specify a theme for this component and all of its children.
absolute (boolean):: Applies position: absolute to the component.
color (string):: 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).
height (string, number):: Sets the height for the component.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
order (string, number):: Adjust the order of the component in relation to its registration order.
window (boolean):: Increases the system bar height to 32px (24px default).

class trame.widgets.vuetify3.VTab(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTab component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

replace (boolean):

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.

fixed (boolean):

Forces component to take up all available space up to their maximum width (300px), and centers it.

theme (string):

Specify a theme for this component and all of its children.

size (string, number):

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.

value (any):

The value used when the component is selected in a group. If not provided, a unique ID will be used.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

text (string):

Specify content text for the component.

exact (boolean):

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.

base_color (string):

Sets the color of component when not focused.

active_color (string):

The applied color when the component is in an active state.

disabled (boolean):

Removes the ability to click or target the component.

slim (boolean):

Reduces padding to 0 8px.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

direction (‘horizontal’, ‘vertical’):

Changes the direction of the tabs. Can be either horizontal or vertical.

readonly (boolean):

Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.

loading (string, boolean):

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.

stacked (boolean):

Displays the tab as a flex-column.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

selected_class (string):

Configure the active CSS class applied when an item is selected.

href (string):

Designates the component as anchor and applies the href attribute.

to (RouteLocationRaw):

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.

icon (enum):

Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.

Enum values: [: boolean, string, (string, [string, number])[], js_fn, FunctionalComponent

]

slider_color (string):

Applies specified color to the slider when active on that component - 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).

hide_slider (boolean):

Hides the active tab slider component (no exit or enter animation).

class trame.widgets.vuetify3.VTable(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTable component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
density (‘default’, ‘comfortable’, ‘compact’):: Adjusts the vertical height used by the component.
height (string, number):: Use the height prop to set the height of the table.
fixed_header (boolean):: Use the fixed-header prop together with the height prop to fix the header to the top of the table.
fixed_footer (boolean):: Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.
hover (boolean):: Will add a hover effect to a table’s row when the mouse is over it.

class trame.widgets.vuetify3.VTabs(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTabs component. See more info and examples.

Args:

symbol (any):

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/).

tag (string):

Specify a custom tag used on the root element.

items ((string, number, Record<string, any>)[]):

The items to display in the component. This can be an array of strings or objects with a property text.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

Applies specified color to the selected tab - 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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height of the tabs bar.

bg_color (string):

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).

disabled (boolean):

Puts all children components into a disabled state.

multiple (boolean):

Allows one to select multiple items.

mandatory (boolean, ‘force’):

Forces at least one item to always be selected (if available).

direction (‘horizontal’, ‘vertical’):

Changes the direction of the tabs. Can be either horizontal or vertical.

stacked (boolean):

Apply the stacked prop to all children v-tab components.

selected_class (string):

Configure the active CSS class applied when an item is selected.

next_icon (enum):

Right pagination icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Left pagination icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

max (number):

Sets a maximum number of selections that can be made.

mobile (boolean):

Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint

mobile_breakpoint (number, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’, ‘xs’):

Sets the designated mobile breakpoint for the component.

center_active (boolean):

Forces the selected tab to be centered.

show_arrows (string, boolean):

Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop.

slider_color (string):

Changes the background color of an auto-generated v-tabs-slider.

hide_slider (boolean):

Hide’s the generated v-tabs-slider.

align_tabs (‘title’, ‘start’, ‘end’, ‘center’):

Aligns the tabs to the start, center, or end of container. Also accepts title to align with the v-toolbar-title component.

fixed_tabs (boolean):

v-tabs-item min-width 160px, max-width 360px.

grow (boolean):

Force v-tab’s to take up all available space.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VTabsWindow(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTabsWindow component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
reverse (boolean):: Reverse the normal transition direction.
theme (string):: Specify a theme for this component and all of its children.
model_value (any):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
disabled (boolean):: Removes the ability to click or target the component.
direction (‘horizontal’, ‘vertical’):: The transition direction when changing windows.
selected_class (string):: Configure the active CSS class applied when an item is selected.
update_modelValue (event):: Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VTabsWindowItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTabsWindowItem component. See more info and examples.

Args:

value (any):: The value used when the component is selected in a group. If not provided, a unique ID will be used.
eager (boolean):: 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.
disabled (boolean):: Prevents the item from becoming active when using the “next” and “prev” buttons or the toggle method.
transition (string, boolean):: The transition used when the component progressing through items. Can be one of the [built in](/styles/transitions/) or custom transition.
selected_class (string):: Configure the active CSS class applied when an item is selected.
reverse_transition (string, boolean):: Sets the reverse transition.

class trame.widgets.vuetify3.VTextField(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTextField component. See more info and examples.

Args:

flat (boolean):

Removes elevation (shadow) added to element when using the solo or solo-inverted props.

type (string):

Sets input type.

reverse (boolean):

Reverses the input orientation.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

rounded (string, number, boolean):

Adds a border radius to the input.

tile (boolean):

Removes any applied border-radius from the component.

base_color (string):

Sets the color of the input when it is not focused.

bg_color (string):

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).

disabled (boolean):

Removes the ability to click or target the input.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

autofocus (boolean):

Enables autofocus.

counter (string, number, boolean):

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

prefix (string):

Displays prefix text.

placeholder (string):

Sets the input’s placeholder text.

persistent_placeholder (boolean):

Forces placeholder to always be visible.

persistent_counter (boolean):

Forces counter to always be visible.

suffix (string):

Displays suffix text.

role (string):

The role attribute applied to the input.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

append_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the append-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

Applied when using clearable and the input is dirty.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

dirty (boolean):

Manually apply the dirty state styling.

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

prepend_inner_icon (enum):

Prepends an icon inside the component’s input, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

single_line (boolean):

Label does not move on focus/dirty.

loading (string, boolean):

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.

counter_value (number, js_fn):

Function returns the counter display text.

model_modifiers (unknown):

FOR INTERNAL USE ONLY

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when append icon is clicked.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

click_control (event):

Emitted when the main input is clicked.

mousedown_control (event):

Event that is emitted when using mousedown on the main control area.

class trame.widgets.vuetify3.VTextarea(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTextarea component. See more info and examples.

Args:

flat (boolean):

Removes box shadow when using a variant with elevation.

reverse (boolean):

Reverses the orientation.

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

theme (string):

Specify a theme for this component and all of its children.

id (string):

Sets the DOM id on the component.

model_value (any):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

color (string):

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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

base_color (string):

Sets the color of the input when it is not focused.

bg_color (string):

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).

disabled (boolean):

Removes the ability to click or target the input.

max_width (string, number):

Sets the maximum width for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (enum):

Applies a distinct style to the component.

Enum values: [: ‘outlined’, ‘plain’, ‘underlined’, ‘filled’, ‘solo’, ‘solo-inverted’, ‘solo-filled’

]

autofocus (boolean):

The element should be focused as soon as the page loads.

counter (string, number, true):

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

prefix (string):

Displays prefix text.

placeholder (string):

Sets the input’s placeholder text.

persistent_placeholder (boolean):

Forces placeholder to always be visible.

persistent_counter (boolean):

Forces counter to always be visible.

suffix (string):

Displays suffix text.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

center_affix (boolean):

Vertically align appendInner, prependInner, clearIcon and label in the center.

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

hide_spin_buttons (boolean):

Hides spin buttons on the input when type is set to number.

hint (string):

Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.

persistent_hint (boolean):

Forces [hint](#props-hint) to always be visible.

messages (string, string[]):

Displays a list of messages or a single message if using a string.

direction (‘horizontal’, ‘vertical’):

Changes the direction of the input.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

hide_details (boolean, ‘auto’):

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.

append_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the append-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

clearable (boolean):

Allows for the component to be cleared.

clear_icon (enum):

The icon used when the clearable prop is set to true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

dirty (boolean):

Manually apply the dirty state styling.

persistent_clear (boolean):

Always show the clearable icon when the input is dirty (By default it only shows on hover).

prepend_inner_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend-inner slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

single_line (boolean):

Label does not move on focus/dirty.

loading (string, boolean):

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.

counter_value ((value: any) => number):

Display the input length but do not provide any validation.

model_modifiers (unknown):

FOR INTERNAL USE ONLY

auto_grow (boolean):

Automatically grow the textarea depending on amount of text.

no_resize (boolean):

Remove resize handle.

rows (string, number):

Default row count.

max_rows (string, number):

Specifies the maximum number of rows for auto-grow.

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_prepend (event):

Emitted when prepended icon is clicked.

click_append (event):

Emitted when append icon is clicked.

update_focused (event):

Emitted when the input is focused or blurred

click_clear (event):

Emitted when clearable icon clicked.

click_appendInner (event):

Emitted when appended inner icon is clicked.

click_prependInner (event):

Emitted when prepended inner icon is clicked.

click_control (event):

Emitted when the main input is clicked.

mousedown_control (event):

Event that is emitted when using mousedown on the main control area.

class trame.widgets.vuetify3.VThemeProvider(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VThemeProvider component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
with_background (boolean):: Use the current value of $vuetify.theme.dark as opposed to the provided one.

class trame.widgets.vuetify3.VTimePicker(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTimePicker component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
title (string):: Specify a title text for the component.
theme (string):: Specify a theme for this component and all of its children.
model_value (any):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
location (Anchor):: Specifies the component’s location. Can combine by using a space separated string.
color (string):: 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).
height (string, number):: Sets the height for the component.
border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.
bg_color (string):: 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).
disabled (boolean):: Removes the ability to click or target the component.
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Width of the picker.
readonly (boolean):: Puts picker in readonly state.
position (‘fixed’, ‘relative’, ‘absolute’, ‘static’, ‘sticky’):: Sets the position for the component.
max (string):: Maximum allowed time.
min (string):: Minimum allowed time.
hide_header (boolean):: Hide the picker header.
scrollable (boolean):: Allows changing hour/minute with mouse scroll.
ampm_in_title (boolean):: Place AM/PM switch in title, not near the clock.
format (‘ampm’, ‘24hr’):: Defines the format of a time displayed in picker. Available options are ampm and 24hr.
use_seconds (boolean):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePicker.json))
allowed_hours (number[], js_fn):: Restricts which hours can be selected.
allowed_minutes (number[], js_fn):: Restricts which minutes can be selected.
allowed_seconds (number[], js_fn):: Restricts which seconds can be selected.
update_modelValue (event):: Event that is emitted when the component’s model changes.
update_hour (event):: Emitted when user selects the hour.
update_minute (event):: Emitted when user selects the minute.
update_period (event):: Emitted when user clicks the AM/PM button.
update_second (event):: Emitted when user selects the second.

class trame.widgets.vuetify3.VTimePickerClock(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTimePickerClock component. See more info and examples.

Args:

model_value (number):: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
color (string):: 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).
disabled (boolean):: Removes the ability to click or target the component.
readonly (boolean):: When true, the picker is in a read-only state, and users cannot modify the selected time.
max (number):: Defines the maximum time value that can be selected.
min (number):: Defines the minimum time value that can be selected.
scrollable (boolean):: Allows the time selection to be scrollable, enhancing user experience for devices with scroll inputs.
step (number):: Defines the increments between selectable times, such as a step of 1 for every minute or a larger step for every 5 or 15 minutes.
rotate (number):: Controls rotation, specifying the degree of rotation for the clock hands.
format (Function):: Specifies the format of the displayed time, either 12-hour or 24-hour, depending on the component’s setup.
ampm (boolean):: Displays time in a 12-hour format.
displayed_value (any):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerClock.json))
double (boolean):: If set, this probably indicates a double rotation or a mode where more than one set of values (like hours and minutes) is displayed on the clock at the same time.
allowed_values ((value: number) => boolean):: Restricts which hours can be selected.
change (event):: The event that is triggered when the selected time is changed.
input (event):: The updated bound model.

class trame.widgets.vuetify3.VTimePickerControls(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTimePickerControls component. See more info and examples.

Args:

value (number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
color (string):: 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).
disabled (boolean):: Removes the ability to click or target the component.
readonly (boolean):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
ampm_in_title (boolean):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
ampm (boolean):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
use_seconds (boolean):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
ampm_readonly (boolean):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
hour (number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
minute (number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
second (number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
period (string):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
selecting (number):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
update_period (event):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))
update_selecting (event):: MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTimePickerControls.json))

class trame.widgets.vuetify3.VTimeline(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTimeline component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
theme (string):: Specify a theme for this component and all of its children.
size (string, number):: 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.
density (‘default’, ‘comfortable’, ‘compact’):: Adjusts the vertical height used by the component.
direction (‘horizontal’, ‘vertical’):: Display timeline in a vertical or horizontal direction.
align (‘start’, ‘center’):: Places the timeline dot at the top or center of the timeline item.
justify (string):: Places timeline line at the center or automatically on the left or right side.
side (‘start’, ‘end’):: Display all timeline items on one side of the timeline, either before or after.
line_thickness (string, number):: Thickness of the timeline line.
line_color (string):: Color of the timeline line.
dot_color (string):: Color of the item dot.
fill_dot (boolean):: Remove outer border of item dot, making the color fill the entire dot.
hide_opposite (boolean):: Hide opposite content if it exists.
icon_color (string):: Color of the icon.
line_inset (string, number):: Specifies the distance between the line and the dot of timeline items.
truncate_line (‘start’, ‘end’, ‘both’):: Truncate timeline directly at the start or end of the line, or on both ends.

class trame.widgets.vuetify3.VTimelineItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTimelineItem component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

size (string, number):

Size of the item dot

density (‘default’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

icon (enum):

Apply a specific icon to the inside dot using the [v-icon](/components/icons/) component.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

dot_color (string):

Color of the item dot.

fill_dot (boolean):

Remove outer border of item dot, making the color fill the entire dot.

hide_dot (boolean):

Hide the timeline item dot.

hide_opposite (boolean):

Hide opposite content if it exists.

icon_color (string):

Color of the icon.

line_inset (string, number):

Specifies the distance between the line and the dot of the item.

class trame.widgets.vuetify3.VToolbar(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VToolbar component. See more info and examples.

Args:

flat (boolean):: Removes the toolbar’s box-shadow.
tag (string):: Specify a custom tag used on the root element.
title (string):: Specify a title text for the component.
theme (string):: Specify a theme for this component and all of its children.
image (string):: Specifies a [v-img](/components/images) as the component’s background.
collapse (boolean):: Puts the toolbar into a collapsed state reducing its maximum width.
absolute (boolean):: Applies position: absolute to the component.
color (string):: 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).
density (‘default’, ‘prominent’, ‘comfortable’, ‘compact’):: Adjusts the vertical height used by the component.
extended (boolean):: 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.
extension_height (string, number):: Specify an explicit height for the extension slot.
floating (boolean):: Applies display: inline-flex to the component.
height (string, number):: Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. prominent, dense, extended, etc.
border (string, number, boolean):: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.
elevation (string, number):: Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).
rounded (string, number, boolean):: 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).
tile (boolean):: Removes any applied border-radius from the component.

class trame.widgets.vuetify3.VToolbarItems(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VToolbarItems component. See more info and examples.

Args:

color (string):: 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).
variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):: Applies a distinct style to the component.

class trame.widgets.vuetify3.VToolbarTitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VToolbarTitle component. See more info and examples.

Args:

tag (string):: Specify a custom tag used on the root element.
text (string):: Specify content text for the component.

class trame.widgets.vuetify3.VTooltip(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTooltip component. See more info and examples.

Args:

theme (string):

Specify a theme for this component and all of its children.

id (string):

HTML id attribute of the tooltip overlay. If not set, a globally unique id will be used.

model_value (boolean):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

location (Anchor):

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both..

height (string, number):

Sets the height for the component.

text (string):

Specify content text for the component.

eager (boolean):

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.

disabled (boolean):

Removes the ability to click or target the component.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

activator ((string & {}), Element, ‘parent’, ComponentPublicInstance):

Explicitly sets the overlay’s activator.

close_on_back (boolean):

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.

contained (boolean):

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content_class (any):

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.

content_props (any):

Apply custom properties to the content.

opacity (string, number):

Sets the overlay opacity.

no_click_animation (boolean):

Disables the bounce effect when clicking outside of the content element when using the persistent prop.

scrim (string, boolean):

Accepts true/false to enable background, and string to define color.

z_index (string, number):

The z-index used for the component.

target (enum):

For locationStrategy=”connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

Enum values: [: (string & {}), Element, ‘parent’, ‘cursor’, ComponentPublicInstance, [number, number]

]

activator_props (unknown):

Apply custom properties to the activator.

open_on_click (boolean):

Designates whether the tooltip should open on activator click.

open_on_hover (boolean):

Designates whether the tooltip should open on activator hover.

open_on_focus (boolean):

Activate the component when the activator is focused.

close_on_content_click (boolean):

Closes component when you click on its content.

close_delay (string, number):

Delay (in ms) after which menu closes (when open-on-hover prop is set to true).

open_delay (string, number):

Delay (in ms) after which tooltip opens (when open-on-hover prop is set to true).

location_strategy (LocationStrategyFn):

A function used to specifies how the component should position relative to its activator.

origin (Anchor):

Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).

offset (string, number, number[]):

A single value that offsets content away from the target based upon what side it is on.

scroll_strategy (ScrollStrategyFn):

Strategy used when the component is activate and user scrolls.

transition (enum):

Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.

Enum values: [: string, boolean, (TransitionProps & { component: Component })

]

attach (string, boolean, Element):

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VTreeview(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTreeview component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

search (string):

The search model for filtering results.

theme (string):

Specify a theme for this component and all of its children.

items (unknown[]):

An array of items used to build the treeview.

model_value (unknown[]):

Allows one to control which nodes are selected. The array contains the values of currently selected items. It is equivalent to the v-model:selected

color (string):

Applies specified color to the active node - 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).

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

Provides an alternative active style for v-treeview node. Only visible when activatable is true and should not be used in conjunction with the shaped prop.

tile (boolean):

Removes any applied border-radius from the component.

filter_mode (‘every’, ‘some’, ‘union’, ‘intersection’):

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter. - some: There is at least one match from either the custom filter or the custom key filter. - every: All columns match either the custom filter or the custom key filter. - union: There is at least one match from the custom filter, or all columns match the custom key filters. - intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

no_filter (boolean):

Disables all item filtering.

custom_filter (FilterFunction):

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.

custom_key_filter (unknown):

Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified.

filter_keys (string, string[]):

Array of specific keys to filter on the item.

base_color (string):

Sets the color of component when not focused.

active_color (string):

The applied color when the component is in an active state.

active_class (string):

The class applied to the component when it is in an active state.

bg_color (string):

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).

disabled (boolean):

Disables selection for all nodes.

expand_icon (enum):

Icon used to indicate that a node can be expanded.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon to display when the list item is expanded.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

lines (false, ‘one’, ‘two’, ‘three’):

Designates a minimum-height for all children v-list-item components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.

slim (boolean):

Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation.

activatable (boolean):

Allows user to mark a node as active by clicking on it.

selectable (boolean):

Will render a checkbox next to each node allowing them to be selected. Additionally, the [openOnClick](/api/v-treeview/#props-open-on-click) property will be applied internally.

opened (any):

An array containing the values of currently opened groups. Can be two-way bound with v-model:opened.

activated (any):

Array of ids of activated nodes.

selected (any):

An array containing the values of currently selected items. Can be two-way bound with v-model:selected.

mandatory (boolean):

Forces at least one item to always be selected (if available).

active_strategy (ActiveStrategy):

Affects how items with children behave when activated. - leaf: Only leaf nodes (items without children) can be activated. - independent: All nodes can be activated whether they have children or not. - classic: Activating a parent node will cause all children to be activated.

select_strategy (SelectStrategy):

Affects how items with children behave when selected. - leaf: Only leaf nodes (items without children) can be selected. - independent: All nodes can be selected whether they have children or not. - classic: Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

item_title (SelectItemKey):

Property on supplied items that contains its title.

item_value (SelectItemKey):

Property on supplied items that contains its value.

item_children (SelectItemKey):

Property on supplied items that contains its children.

item_props (SelectItemKey):

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.

return_object (boolean):

When true will make v-model, active.sync and open.sync return the complete object instead of just the key.

value_comparator ((a: any, b: any) => boolean):

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

open_on_click (boolean):

When true will cause nodes to be opened by clicking anywhere on it, instead of only opening by clicking on expand icon. When using this prop with activatable you will be unable to mark nodes with children as active.

indeterminate_icon (enum):

Icon used when node is in an indeterminate state. Only visible when selectable is true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

false_icon (enum):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTreeviewChildren.json))

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

true_icon (enum):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTreeviewChildren.json))

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

open_all (boolean):

When true will cause all branch nodes to be opened when component is mounted.

loading_icon (string):

Icon used when node is in a loading state.

selected_color (string):

The color of the selection checkbox.

load_children ((item: unknown) => Promise<void>):

A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a item-children property that is an empty array. Supports returning a Promise.

update_modelValue (event):

Event that is emitted when the component’s model changes.

click_open (event):

Emits the item when it is clicked to open.

click_select (event):

Emits the item when it is clicked to select.

update_opened (event):

Emits the array of open items when this value changes.

update_selected (event):

Emits the array of selected items when this value changes.

update_activated (event):

Emits the array of active items when this value changes.

class trame.widgets.vuetify3.VTreeviewGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTreeviewGroup component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

title (string):

Specify a title text for the component.

value (any):

Expands / Collapse the list-group.

color (string):

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).

base_color (string):

Sets the color of component when not focused.

active_color (string):

The applied color when the component is in an active state.

expand_icon (enum):

Icon to display when the list item is collapsed.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

collapse_icon (enum):

Icon to display when the list item is expanded.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Prepends an icon to the component, uses the same syntax as v-icon.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

fluid (boolean):

Removes viewport maximum-width size breakpoints.

class trame.widgets.vuetify3.VTreeviewItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTreeviewItem component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

link (boolean):

Designates that the component is a link. This is automatic when using the href or to prop.

nav (boolean):

Reduces the width of v-list-item takes and adds a border radius.

title (string, number):

Generates a v-list-item-title component with the supplied value. Note that this overrides the native [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) attribute, that must be set with v-bind:title.attr instead.

replace (boolean):

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.

theme (string):

Specify a theme for this component and all of its children.

value (any):

The value used for selection. Obtained from [v-list](/api/v-list)’s v-model:selected when the item is selected.

color (string):

Applies specified color to the control when in an active state or input-value is true - 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),

density (‘default’, ‘comfortable’, ‘compact’):

Adjusts the vertical height used by the component.

height (string, number):

Sets the height for the component.

border (string, number, boolean):

Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

elevation (string, number):

Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).

rounded (string, number, boolean):

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).

tile (boolean):

Removes any applied border-radius from the component.

exact (boolean):

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.

subtitle (string, number):

Specify a subtitle text for the component.

base_color (string):

Sets the color of component when not focused.

active_color (string):

The applied color when the component is in an active state.

active_class (string):

The class applied to the component when it matches the current route. Find more information about the [active-class prop](https://router.vuejs.org/api/#active-class) on the [vue-router](https://router.vuejs.org/) documentation.

disabled (boolean):

Removes the ability to click or target the component.

lines (false, ‘one’, ‘two’, ‘three’):

The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.

slim (boolean):

Reduces the vertical padding or height of the v-treeview-item, making it more compact.

max_height (string, number):

Sets the maximum height for the component.

max_width (string, number):

Sets the maximum width for the component.

min_height (string, number):

Sets the minimum height for the component.

min_width (string, number):

Sets the minimum width for the component.

width (string, number):

Sets the width for the component.

variant (‘flat’, ‘text’, ‘elevated’, ‘tonal’, ‘outlined’, ‘plain’):

Applies a distinct style to the component.

append_icon (enum):

Creates a [v-icon](/api/v-icon/) component after default content in the append slot.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prepend_icon (enum):

Creates a [v-icon](/api/v-icon/) component in the prepend slot before default content.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

active (boolean):

Controls the active state of the item. This is typically used to highlight the component.

loading (boolean):

Places the v-treeview-item into a loading state.

ripple (boolean, { class: string }):

Applies the [v-ripple](/directives/ripple) directive.

href (string):

Designates the component as anchor and applies the href attribute.

to (RouteLocationRaw):

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.

append_avatar (string):

Appends a [v-avatar](/components/avatars/) component after default content in the append slot.

prepend_avatar (string):

Prepends a [v-avatar](/components/avatars/) component in the prepend slot before default content.

toggle_icon (enum):

Allows customization of the icon used to toggle the expansion and collapse of treeview branches.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

toggleExpand (event):

MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VTreeviewItem.json))

class trame.widgets.vuetify3.VValidation(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VValidation component. See more info and examples.

Args:

name (string):

Sets the component’s name attribute.

error (boolean):

Puts the input in a manual error state.

label (string):

Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

disabled (boolean):

Removes the ability to click or target the component.

error_messages (string, string[]):

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.

max_errors (string, number):

Control the maximum number of shown errors from validation.

readonly (boolean):

Puts input in readonly state.

rules (ValidationRule):

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.

validate_on (enum):

Change what type of event triggers validation to run.

Enum values: [: ‘eager’, ‘lazy’, ‘blur’, ‘input’, ‘submit’, ‘invalid-input’, ‘blur lazy’, ‘input lazy’, ‘submit lazy’, ‘invalid-input lazy’, ‘blur eager’, ‘input eager’, ‘submit eager’, ‘invalid-input eager’, ‘lazy blur’, ‘lazy input’, ‘lazy submit’, ‘lazy invalid-input’, ‘eager blur’, ‘eager input’, ‘eager submit’, ‘eager invalid-input’

]

validation_value (any):

The value used when applying validation rules.

focused (boolean):

Forces a focused state styling on the component.

update_modelValue (event):

Event that is emitted when the component’s model changes.

update_focused (event):

Event that is emitted when the component’s focus state changes.

class trame.widgets.vuetify3.VVirtualScroll(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VVirtualScroll component. See more info and examples.

Args:

items (unknown[]):: The array of items to display.
height (string, number):: Height of the component as a css value/
max_height (string, number):: Sets the maximum height for the component.
max_width (string, number):: Sets the maximum width for the component.
min_height (string, number):: Sets the minimum height for the component.
min_width (string, number):: Sets the minimum width for the component.
width (string, number):: Sets the width for the component.
item_height (string, number):: Height in pixels of each item to display.
renderless (boolean):: Disables default component rendering functionality.

class trame.widgets.vuetify3.VWindow(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VWindow component. See more info and examples.

Args:

tag (string):

Specify a custom tag used on the root element.

reverse (boolean):

Reverse the normal transition direction.

theme (string):

Specify a theme for this component and all of its children.

model_value (unknown):

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

disabled (boolean):

Removes the ability to click or target the component.

mandatory (boolean, ‘force’):

Forces at least one item to always be selected (if available).

direction (‘horizontal’, ‘vertical’):

The transition direction when changing windows.

selected_class (string):

Configure the active CSS class applied when an item is selected.

next_icon (enum):

Icon used for the “next” button if show-arrows is true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

prev_icon (enum):

Icon used for the “prev” button if show-arrows is true.

Enum values: [: string, (string, [string, number])[], js_fn, FunctionalComponent

]

show_arrows (string, boolean):

Display the “next” and “prev” buttons.

continuous (boolean):

If true, window will “wrap around” from the last item to the first, and from the first item to the last.

touch (TouchHandlers):

Provide a custom left and right function when swiped left or right.

update_modelValue (event):

Event that is emitted when the component’s model changes.

class trame.widgets.vuetify3.VWindowItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VWindowItem component. See more info and examples.

Args:

value (any):: The value used when the component is selected in a group. If not provided, a unique ID will be used.
disabled (boolean):: Prevents the item from becoming active when using the “next” and “prev” buttons or the toggle method.
selected_class (string):: Configure the active CSS class applied when an item is selected.
transition (string, boolean):: The transition used when the component progressing through items. Can be one of the [built in](/styles/transitions/) or custom transition.
eager (boolean):: 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.
reverse_transition (string, boolean):: Sets the reverse transition.
group_selected (event):: Event that is emitted when an item is selected within a group.

trame.widgets.vuetify3.dataframe_to_grid(dataframe, options={})

Transform a dataframe for use with a VDataTable

Args:

dataframe:: A pandas dataframe
options:: Control which columns are sortable, filterable, grouped, aligned, etc. A dictionary where keys are the columns from the dataframe and values are Vuetify DataTableHeader objects. See more info |header_doc_link|.

Returns:

The headers and rows for the table component.

Usage example:

headers, rows = vuetify.dataframe_to_grid(dataframe) VDataTable(headers=(“table_headers”, headers), items=(“table_rows”, rows))

Vuetify documentation