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 v-alert component. See more info and examples here.

Parameters:

density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
type – Specify a success, info, warning or error alert. Uses the contextual color and has a pre-defined icon.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
elevation – See description here.
location – See description here.
position – Specifies the type of positioning method used for an element. Available options are: static, relative, fixed, absolute, and sticky.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component
text – Specify subtitle/body text for the alert.
border – Puts a border on the alert. Accepts top | end | bottom | start.
border_color – Specifies the color of the border. Accepts any color value.
closable – Adds a close icon that can hide the alert.
close_icon – Change the default icon used for closable alerts.
close_label – See description here.
icon – Designates a specific icon.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
prominent – Displays a larger vertically centered icon to draw more attention.
title – Specify title text for the alert.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-alert-title component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-app component. See more info and examples here.

Parameters:

full_height – Sets the component height to 100%
overlaps – See description here.
theme – Specify a theme for this component and all of its children

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

Bases: AbstractElement

Vuetify’s v-app-bar component. See more info and examples here.

Parameters:

image – The src used for v-img. For additional customization options, use the image slot.
title – See description here.
flat – Removes the component’s box-shadow.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
location – See description here.
absolute – Applies position: absolute to the component.
collapse – Morphs the component into a collapsed state, reducing its maximum width.
color – See description here.
density – See description here.
extended – 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 – Designate an explicit height for the extension slot.
floating – Applies display: inline-flex to the component.
height – See description here.
border – Applies border styles to component.
elevation – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
name – See description here.
order – See description here.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-app-bar-nav-icon component. See more info and examples here.

Parameters:: icon – See description here.

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

Bases: AbstractElement

Vuetify’s v-app-bar-title component. See more info and examples here.

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

Bases: AbstractElement

Vuetify’s v-autocomplete component. See more info and examples here.

Parameters:

label – See description here.
type – Sets input type
search – See description here.
filter_mode – See description here.
no_filter – Do not apply filtering when searching. Useful when data is being filtered server side
custom_filter – See description here.
custom_key_filter – See description here.
reverse – See description here.
filter_keys – See description here.
chips – Changes display of selections to chips
closable_chips – See description here.
eager – Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
hide_no_data – 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 – Do not display in the select menu items that are already selected
menu – See description here.
menu_icon – See description here.
menu_props – See description here.
id – See description here.
disabled – Removes the ability to click or target the input
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
theme – Specify a theme for this component and all of its children
transition – See description here.
name – See description here.
multiple – Changes select to multiple. Accepts array for value
no_data_text – Text shown when no items are provided to the component
open_on_clear – When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
value_comparator – Apply a custom comparison algorithm used for values
items – Can be an array of objects or array of strings. When using objects, will look for a title, value and disabled keys. This can be changed using the item-title, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
item_title – See description here.
item_value – See description here.
item_children – See description here.
item_props – See description here.
return_object – Changes the selection behavior to return the object directly rather than the value specified with item-value
autofocus – Enables autofocus
hint – See description here.
persistent_hint – See description here.
prefix – Displays prefix text
placeholder – Sets the input’s placeholder text
persistent_placeholder – Forces placeholder to always be visible
persistent_counter – See description here.
suffix – Displays suffix text
append_icon – Appends an icon to the outside the component’s input, uses same syntax as v-icon
prepend_icon – Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon
messages – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
error – See description here.
error_messages – 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 – See description here.
readonly – Puts input in readonly state
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. 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 – See description here.
focused – Forces a focused state styling on the component.
hide_details – 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
bg_color – See description here.
clearable – Allows for the component to be cleared
clear_icon – See description here.
active – Controls the active state of the item. This is typically used to highlight the component
color – See description here.
persistent_clear – See description here.
prepend_inner_icon – See description here.
single_line – Label does not move on focus/dirty
variant – Applies a distinct style to the component
loading – 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 – Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
counter_value – See description here.

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-autocomplete.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-autocomplete.json))
click_clear – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-autocomplete.json))
click_appendInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-autocomplete.json))
click_prependInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-autocomplete.json))
update_search – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-autocomplete.json))
update_menu – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-autocomplete.json))

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

Bases: AbstractElement

Vuetify’s v-avatar component. See more info and examples here.

Parameters:

start – See description here.
end – See description here.
icon – See description here.
image – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
rounded – See description here.
size – 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.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component

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

Bases: AbstractElement

Vuetify’s v-badge component. See more info and examples here.

Parameters:

location – Changes the location of the badge. Possible values are top, bottom, start, end, top start, top end, bottom start, bottom end.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
transition – See description here.
bordered – Applies a 2px by default and 1.5px border around the badge when using the dot property.
color – See description here.
content – Text content to show in the badge.
dot – Reduce the size of the badge and hide its contents.
floating – See description here.
icon – Designates a specific icon to render in the badge.
inline – Moves the badge to be inline with the wrapping element. Supports the usage of the left prop.
label – The aria-label used for the badge
max – 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.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
offset_x – Offset the badge on the x-axis.
offset_y – Offset the badge on the y-axis.
text_color – See description here.

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

Bases: AbstractElement

Vuetify’s v-banner component. See more info and examples here.

Parameters:

border – Applies border styles to component.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
elevation – See description here.
location – See description here.
position – Specifies the type of positioning method used for an element. Available options are: static, relative, fixed, absolute, and sticky.
sticky – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
avatar – Designates a specific src image to pass to the thumbnail.
color – See description here.
icon – Designates a specific icon.
stacked – See description here.
text – See description here.
lines – See description here.

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

Bases: AbstractElement

Vuetify’s v-banner-actions component. See more info and examples here.

Parameters:

color – See description here.
density – See description here.

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

Bases: AbstractElement

Vuetify’s v-banner-text component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-bottom-navigation component. See more info and examples here.

Parameters:

border – Applies border styles to component.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
elevation – See description here.
rounded – See description here.
name – See description here.
order – See description here.
absolute – See description here.
tag – Specify a custom tag used on the root element.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
multiple – Allows one to select mulitple items.
max – Sets a maximum number of selections that can be made.
selected_class – Configure the selected CSS class.
disabled – Puts all children components into a disabled state
mandatory – Forces at least one item to always be selected (if available).
theme – Specify a theme for this component and all of its children
bg_color – See description here.
color – See description here.
grow – See description here.
mode – Changes the orientation and active state styling of the component. Available options are horizontal and shift.
height – See description here.
active – Controls the active state of the item. This is typically used to highlight the component

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-breadcrumbs component. See more info and examples here.

Parameters:

divider – Specifies the dividing character between items.
active_class – The class applied to the component when it is in an active state
active_color – See description here.
bg_color – See description here.
color – See description here.
disabled – Removes the ability to click or target the component
icon – See description here.
items – An array of strings or objects used for automatically generating children components
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
rounded – See description here.
tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s v-breadcrumbs-divider component. See more info and examples here.

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

Bases: AbstractElement

Vuetify’s v-breadcrumbs-item component. See more info and examples here.

Parameters:

href – Designates the component as anchor and applies the href attribute.
replace – See description here.
exact – See description here.
to – See description here.
tag – Specify a custom tag used on the root element.
active – Controls the active state of the item. This is typically used to highlight the component
active_class – See description here.
active_color – See description here.
color – See description here.
disabled – Removes the ability to click or target the component
title – See description here.

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

Bases: AbstractElement

Vuetify’s v-btn component. See more info and examples here.

Parameters:

symbol – See description here.
border – Applies border styles to component.
flat – Removes the button box shadow.
rounded – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
elevation – See description here.
value – The value used when the component is selected in a group. If not provided, a unique ID will be used.
disabled – Removes the ability to click or target the component
selected_class – Configure the active CSS class applied when the item is selected.
loading – See description here.
location – See description here.
position – Specifies the type of positioning method used for an element. Available options are: static, relative, fixed, absolute, and sticky.
href – Designates the component as anchor and applies the href attribute.
replace – See description here.
exact – See description here.
to – See description here.
size – 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.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component
active – Controls the active state of the item. This is typically used to highlight the component
prepend_icon – See description here.
append_icon – See description here.
block – Expands the button to 100% of available space.
stacked – Displays the button as a flex-column.
ripple – See description here.
icon – Designates the button as icon. Button will become _round_ and applies the text prop.

Events

Parameters:: group_selected – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-btn.json))

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

Bases: AbstractElement

Vuetify’s v-btn-group component. See more info and examples here.

Parameters:

border – Applies border styles to component.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
elevation – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component
divided – See description here.

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

Bases: AbstractElement

Vuetify’s v-btn-toggle component. See more info and examples here.

Parameters:

model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
multiple – Allows one to select mulitple items.
max – Sets a maximum number of selections that can be made.
selected_class – Configure the selected CSS class.
disabled – Puts all children components into a disabled state
mandatory – Forces at least one item to always be selected (if available).

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-card component. See more info and examples here.

Parameters:

theme – Specify a theme for this component and all of its children
border – Applies border styles to component.
flat – Removes the card’s elevation.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
elevation – See description here.
loading – See description here.
location – See description here.
position – Specifies the type of positioning method used for an element. Available options are: static, relative, fixed, absolute, and sticky.
rounded – See description here.
href – Designates the component as anchor and applies the href attribute.
replace – See description here.
exact – See description here.
to – See description here.
tag – Specify a custom tag used on the root element.
color – See description here.
variant – Applies a distinct style to the component
text – Generates a v-card-text component with the supplied value
link – See description here.
append_avatar – See description here.
append_icon – See description here.
disabled – Removes the ability to click or target the component
hover – See description here.
image – See description here.
prepend_avatar – See description here.
prepend_icon – See description here.
ripple – See description here.
subtitle – Generates a v-card-subtitle component with the supplied value
title – Generates a v-card-title component with the supplied value

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

Bases: AbstractElement

Vuetify’s v-card-actions component. See more info and examples here.

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

Bases: AbstractElement

Vuetify’s v-card-item component. See more info and examples here.

Parameters:

density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
append_avatar – See description here.
append_icon – See description here.
prepend_avatar – See description here.
prepend_icon – See description here.
subtitle – MISSING DESCRIPTION
title – MISSING DESCRIPTION

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

Bases: AbstractElement

Vuetify’s v-card-subtitle component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-card-text component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-card-title component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-carousel component. See more info and examples here.

Parameters:

color – See description here.
cycle – Determines if the carousel should cycle through images.
delimiter_icon – Sets icon for carousel delimiter
height – See description here.
hide_delimiters – Hides the carousel’s bottom delimiters.
hide_delimiter_background – Hides the bottom delimiter background.
interval – The duration between image cycles. Requires the cycle prop.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
progress – Displays a carousel progress bar. Requires the cycle prop and interval.
show_arrows – Displays arrows for next/previous navigation.
vertical_delimiters – Displays carousel delimiters vertically.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-carousel-item component. See more info and examples here.

Parameters:: value – See description here.

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

Bases: AbstractElement

Vuetify’s v-checkbox component. See more info and examples here.

Parameters:

id – See description here.
append_icon – Appends an icon to the component, uses the same syntax as v-icon
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
messages – See description here.
type – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
disabled – Removes the ability to click or target the component
error – See description here.
error_messages – 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 – See description here.
name – Sets the component’s name attribute
label – See description here.
readonly – See description here.
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
focused – Forces a focused state styling on the component.
hide_details – 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
indeterminate – Sets an indeterminate state for the checkbox
indeterminate_icon – The icon used when in an indeterminate state
true_value – See description here.
false_value – See description here.
value – The input’s value
color – See description here.
inline – See description here.
false_icon – The icon used when inactive
true_icon – The icon used when active
ripple – See description here.
multiple – Changes expected model to an array
value_comparator – Apply a custom comparison algorithm used for values
theme – Specify a theme for this component and all of its children

Events

Parameters:

click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-checkbox.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-checkbox.json))
update_focused – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-checkbox.json))

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

Bases: AbstractElement

Vuetify’s v-checkbox-btn component. See more info and examples here.

Parameters:

indeterminate – See description here.
indeterminate_icon – See description here.
type – See description here.
label – See description here.
true_value – See description here.
false_value – See description here.
value – See description here.
color – See description here.
disabled – Removes the ability to click or target the component
error – See description here.
id – See description here.
inline – See description here.
false_icon – See description here.
true_icon – See description here.
ripple – See description here.
multiple – See description here.
name – See description here.
readonly – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
value_comparator – Apply a custom comparison algorithm used for values
theme – Specify a theme for this component and all of its children
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
update_indeterminate – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-checkbox-btn.json))

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

Bases: AbstractElement

Vuetify’s v-chip component. See more info and examples here.

Parameters:

border – Applies border styles to component.
filter – Displays a selection icon when selected
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
elevation – See description here.
value – See description here.
disabled – Removes the ability to click or target the component
selected_class – Configure the active CSS class applied when the item is selected.
rounded – See description here.
href – Designates the component as anchor and applies the href attribute.
replace – See description here.
exact – See description here.
to – See description here.
size – 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.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component
text – See description here.
link – Explicitly define the chip as a link
active_class – See description here.
append_avatar – See description here.
append_icon – See description here.
closable – Adds remove button and then a chip can be closed
close_icon – Change the default icon used for close chips
close_label – See description here.
draggable – Makes the chip draggable
filter_icon – Change the default icon used for filter chips
label – Applies a medium size border radius
pill – Remove v-avatar padding
prepend_avatar – See description here.
prepend_icon – See description here.
ripple – Applies the v-ripple directive
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array

Events

Parameters:

click_close – Emitted when close icon is clicked
update_modelValue – Event that is emitted when the component’s model changes
group_selected – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-chip.json))
clickOnce – MISSING DESCRIPTION

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

Bases: AbstractElement

Vuetify’s v-chip-group component. See more info and examples here.

Parameters:

model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
multiple – Allows one to select mulitple items.
max – Sets a maximum number of selections that can be made.
selected_class – Configure the selected CSS class.
disabled – Puts all children components into a disabled state
mandatory – Forces at least one item to always be selected (if available).
filter – Applies an checkmark icon in front of every chip for using it like a filter
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component
column – Remove horizontal pagination and wrap items as needed
value_comparator – Apply a custom comparison algorithm used for values

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-class-icon component. See more info and examples here.

Parameters:

icon – MISSING DESCRIPTION
tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-code component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-col component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.
cols – Sets the default number of columns the component extends. Available options are: 1 -> 12 and auto.
offset – Sets the default offset for the column.
order – See description here.
align_self – See description here.

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

Bases: AbstractElement

Vuetify’s v-color-picker component. See more info and examples here.

Parameters:

elevation – See description here.
rounded – See description here.
theme – Specify a theme for this component and all of its children
canvas_height – Height of canvas
disabled – Removes the ability to click or target the component
dot_size – Changes the size of the selection dot on the canvas
hide_canvas – Hides canvas
hide_sliders – Hides sliders
hide_inputs – Hides inputs
mode – Sets mode of inputs. Available modes are ‘rgba’, ‘hsla’, and ‘hexa’. Can be synced with the .sync modifier.
modes – See description here.
show_swatches – Displays color swatches
swatches_max_height – Sets the maximum height of the swatches section
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
width – Sets the width of the color picker
swatches – Sets the available color swatches to select from - This prop only accepts rgba hex strings

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
update_mode – Selected mode

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

Bases: AbstractElement

Vuetify’s v-combobox component. See more info and examples here.

Parameters:

label – See description here.
type – Sets input type
filter_mode – See description here.
no_filter – See description here.
custom_filter – See description here.
custom_key_filter – See description here.
reverse – See description here.
filter_keys – See description here.
chips – Changes display of selections to chips
closable_chips – See description here.
eager – Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
hide_no_data – See description here.
hide_selected – Do not display in the select menu items that are already selected
menu – See description here.
menu_icon – See description here.
menu_props – See description here.
id – See description here.
disabled – Removes the ability to click or target the input
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
theme – Specify a theme for this component and all of its children
transition – See description here.
name – See description here.
multiple – Changes select to multiple. Accepts array for value
no_data_text – Text shown when no items are provided to the component
open_on_clear – When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
value_comparator – Apply a custom comparison algorithm used for values
items – Can be an array of objects or array of strings. When using objects, will look for a title, value and disabled keys. This can be changed using the item-title, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
item_title – See description here.
item_value – See description here.
item_children – See description here.
item_props – See description here.
return_object – Changes the selection behavior to return the object directly rather than the value specified with item-value
autofocus – Enables autofocus
hint – See description here.
persistent_hint – See description here.
prefix – Displays prefix text
placeholder – Sets the input’s placeholder text
persistent_placeholder – Forces placeholder to always be visible
persistent_counter – See description here.
suffix – Displays suffix text
append_icon – Appends an icon to the outside the component’s input, uses same syntax as v-icon
prepend_icon – Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon
messages – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
error – See description here.
error_messages – 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 – See description here.
readonly – Puts input in readonly state
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. 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 – See description here.
focused – Forces a focused state styling on the component.
hide_details – 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
bg_color – See description here.
clearable – Allows for the component to be cleared
clear_icon – See description here.
active – Controls the active state of the item. This is typically used to highlight the component
color – See description here.
persistent_clear – See description here.
prepend_inner_icon – See description here.
single_line – Label does not move on focus/dirty
variant – Applies a distinct style to the component
loading – 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 – Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
counter_value – See description here.
delimiters – Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys.

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-combobox.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-combobox.json))
click_clear – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-combobox.json))
click_appendInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-combobox.json))
click_prependInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-combobox.json))
update_search – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-combobox.json))
update_menu – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-combobox.json))

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

Bases: AbstractElement

Vuetify’s v-component-icon component. See more info and examples here.

Parameters:

icon – MISSING DESCRIPTION
tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-container component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.
fluid – Removes viewport maximum-width size breakpoints.

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

Bases: AbstractElement

Vuetify’s v-counter component. See more info and examples here.

Parameters:

transition – See description here.
value – See description here.
active – Determines whether the counter is visible or not
max – See description here.

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

Bases: AbstractElement

Vuetify’s v-data-table component. See more info and examples here.

Parameters:

items – An array of strings or objects used for automatically generating children components
item_title – See description here.
item_value – See description here.
item_children – See description here.
item_props – See description here.
return_object – See description here.
headers – An array of objects that each describe a header column. See the example below for a definition of all properties
hide_no_data – MISSING DESCRIPTION
no_data_text – Text shown when no items are provided to the component
height – Set an explicit height of table
width – Sets the width for the component
fixed_header – Fixed header to top of table
fixed_footer – MISSING DESCRIPTION
expand_on_click – MISSING DESCRIPTION
show_expand – Shows the expand toggle in default rows
expanded – MISSING DESCRIPTION
group_by – 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
show_select – Shows the select checkboxes in both the header and rows (if using default rows)
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
sort_by – Changes which item property (or properties) should be used for sort order. Can be used with .sync modifier
multi_sort – If true then one can sort on multiple properties
must_sort – If true then one can not disable sorting, it will always switch between ascending and descending
page – The current displayed page number (1-indexed)
items_per_page – 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
filter_mode – See description here.
no_filter – See description here.
custom_filter – Function to filter items
custom_key_filter – See description here.
filter_keys – See description here.
search – Text input used to filter items

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
update_page – Emits when the page property of the options prop is updated
update_itemsPerPage – MISSING DESCRIPTION
update_sortBy – MISSING DESCRIPTION
update_options – Emits when one of the options properties is updated
update_groupBy – MISSING DESCRIPTION
update_expanded – MISSING DESCRIPTION
click_row – Emits when a table row is clicked. This event provides 2 arguments: the first is the item data that was clicked and the second is the other related data provided by the item slot. NOTE: will not emit when table rows are defined through a slot such as item or body.

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

Bases: AbstractElement

Vuetify’s v-data-table-row component. See more info and examples here.

Parameters:: item – MISSING DESCRIPTION

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

Bases: AbstractElement

Vuetify’s v-data-table-rows component. See more info and examples here.

Parameters:

loading – MISSING DESCRIPTION
loading_text – MISSING DESCRIPTION
hide_no_data – MISSING DESCRIPTION
items – An array of strings or objects used for automatically generating children components
no_data_text – Text shown when no items are provided to the component
row_height – MISSING DESCRIPTION

Events

Parameters:: click_row – MISSING DESCRIPTION

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

Bases: AbstractElement

Vuetify’s v-data-table-server component. See more info and examples here.

Parameters:

items – An array of strings or objects used for automatically generating children components
item_title – See description here.
item_value – See description here.
item_children – See description here.
item_props – See description here.
return_object – See description here.
headers – Array of header items to display
hide_no_data – MISSING DESCRIPTION
no_data_text – Text shown when no items are provided to the component
height – Set an explicit height of table
width – Sets the width for the component
fixed_header – Fixed header to top of table
fixed_footer – MISSING DESCRIPTION
expand_on_click – MISSING DESCRIPTION
show_expand – Shows the expand toggle in default rows
expanded – MISSING DESCRIPTION
show_select – Shows the select checkboxes in both the header and rows (if using default rows)
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
sort_by – Changes which item property (or properties) should be used for sort order. Can be used with .sync modifier
multi_sort – If true then one can sort on multiple properties
must_sort – If true then one can not disable sorting, it will always switch between ascending and descending
page – The current displayed page number (1-indexed)
items_per_page – 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
group_by – 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
color – See description here.
loading – MISSING DESCRIPTION
loading_text – MISSING DESCRIPTION
items_length – MISSING DESCRIPTION

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
update_page – Emits when the page property of the options prop is updated
update_itemsPerPage – MISSING DESCRIPTION
update_sortBy – MISSING DESCRIPTION
update_options – Emits when one of the options properties is updated
update_expanded – MISSING DESCRIPTION
update_groupBy – MISSING DESCRIPTION
click_row – Emits when a table row is clicked. This event provides 2 arguments: the first is the item data that was clicked and the second is the other related data provided by the item slot. NOTE: will not emit when table rows are defined through a slot such as item or body.

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

Bases: AbstractElement

Vuetify’s v-data-table-virtual component. See more info and examples here.

Parameters:

items – An array of strings or objects used for automatically generating children components
item_title – See description here.
item_value – See description here.
item_children – See description here.
item_props – See description here.
return_object – See description here.
headers – Array of header items to display
hide_no_data – MISSING DESCRIPTION
no_data_text – Text shown when no items are provided to the component
height – Set an explicit height of table
width – Sets the width for the component
fixed_header – Fixed header to top of table
fixed_footer – MISSING DESCRIPTION
group_by – 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
expand_on_click – MISSING DESCRIPTION
show_expand – Shows the expand toggle in default rows
expanded – MISSING DESCRIPTION
show_select – Shows the select checkboxes in both the header and rows (if using default rows)
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
sort_by – Changes which item property (or properties) should be used for sort order. Can be used with .sync modifier
multi_sort – If true then one can sort on multiple properties
must_sort – If true then one can not disable sorting, it will always switch between ascending and descending
visible_items – MISSING DESCRIPTION
item_height – MISSING DESCRIPTION
filter_mode – See description here.
no_filter – See description here.
custom_filter – Function to filter items
custom_key_filter – See description here.
filter_keys – See description here.
search – Text input used to filter items

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
update_sortBy – MISSING DESCRIPTION
update_options – Emits when one of the options properties is updated
update_groupBy – MISSING DESCRIPTION
update_expanded – MISSING DESCRIPTION
click_row – Emits when a table row is clicked. This event provides 2 arguments: the first is the item data that was clicked and the second is the other related data provided by the item slot. NOTE: will not emit when table rows are defined through a slot such as item or body.

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

Bases: AbstractElement

Vuetify’s v-defaults-provider component. See more info and examples here.

Parameters:

reset – See description here.
root – See description here.
scoped – See description here.
defaults – 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 v-dialog component. See more info and examples here.

Parameters:

activator – See description here.
fullscreen – Changes layout for fullscreen display.
scrollable – See description here.
retain_focus – 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.
absolute – Applies position: absolute to the content element.
close_on_back – 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 – Limits the size of the component and scrim to its offset parent. Implies absolute and attach.
content_class – 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 – See description here.
disabled – Removes the ability to click or target the component
no_click_animation – Disables the bounce effect when clicking outside of a v-dialog’s content when using the persistent prop.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
persistent – Clicking outside of the element or pressing esc key will not deactivate it.
scrim – See description here.
z_index – The z-index used for the component
activator_props – See description here.
open_on_click – See description here.
open_on_hover – Designates whether component should activate when its activator is hovered.
open_on_focus – See description here.
close_on_content_click – See description here.
close_delay – Milliseconds to wait before closing component. Only applies to hover and focus events.
open_delay – Milliseconds to wait before opening component. Only applies to hover and focus events.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
eager – See description here.
location_strategy – See description here.
location – Aligns the component towards the top, bottom, right, left, can be combined like for example top right
origin – See description here.
offset – See description here.
scroll_strategy – See description here.
theme – Specify a theme for this component and all of its children
transition – See description here.
attach – Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This attachs to the root v-app component by default

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-dialog-bottom-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-dialog-top-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-dialog-transition component. See more info and examples here.

Parameters:: target – See description here.

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

Bases: AbstractElement

Vuetify’s v-divider component. See more info and examples here.

Parameters:

theme – Specify a theme for this component and all of its children
length – Sets the dividers length. Default unit is px.
color – See description here.
inset – Adds indentation (72px) for normal dividers, reduces max height for vertical.
thickness – Sets the dividers thickness. Default unit is px.
vertical – Displays dividers vertically.

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

Bases: AbstractElement

Vuetify’s v-expand-transition component. See more info and examples here.

Parameters:: mode – Sets the transition mode (does not apply to transition-group).

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

Bases: AbstractElement

Vuetify’s v-expand-x-transition component. See more info and examples here.

Parameters:: mode – Sets the transition mode (does not apply to transition-group).

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

Bases: AbstractElement

Vuetify’s v-expansion-panel component. See more info and examples here.

Parameters:

elevation – See description here.
value – Controls the opened/closed state of content
disabled – Disables the expansion-panel content
selected_class – Configure the active CSS class applied when the item is selected.
eager – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
color – See description here.
expand_icon – See description here.
collapse_icon – See description here.
hide_actions – See description here.
ripple – See description here.
readonly – Makes the expansion-panel content read only.
title – See description here.
text – See description here.
bg_color – See description here.

Events

Parameters:: group_selected – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-expansion-panel.json))

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

Bases: AbstractElement

Vuetify’s v-expansion-panel-text component. See more info and examples here.

Parameters:: eager – See description here.

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

Bases: AbstractElement

Vuetify’s v-expansion-panel-title component. See more info and examples here.

Parameters:

color – See description here.
expand_icon – See description here.
collapse_icon – See description here.
hide_actions – See description here.
ripple – See description here.
readonly – See description here.

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

Bases: AbstractElement

Vuetify’s v-expansion-panels component. See more info and examples here.

Parameters:

model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
multiple – Allows one to select mulitple items.
max – Sets a maximum number of selections that can be made.
selected_class – Configure the selected CSS class.
disabled – Puts all children components into a disabled state
mandatory – Forces at least one item to always be selected (if available).
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component
readonly – Makes the entire expansion-panel read only.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-fab-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-fade-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-field component. See more info and examples here.

Parameters:

label – See description here.
id – See description here.
focused – Forces a focused state styling on the component.
append_inner_icon – See description here.
bg_color – See description here.
clearable – Allows for the component to be cleared
clear_icon – See description here.
active – Controls the active state of the item. This is typically used to highlight the component
color – See description here.
dirty – Manually apply the dirty state styling
disabled – Removes the ability to click or target the input
error – See description here.
persistent_clear – See description here.
prepend_inner_icon – See description here.
reverse – See description here.
single_line – Label does not move on focus/dirty
variant – Applies a distinct style to the component
theme – Specify a theme for this component and all of its children
loading – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array

Events

Parameters:

click_clear – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-field.json))
click_appendInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-field.json))
click_prependInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-field.json))
update_modelValue – Event that is emitted when the component’s model changes
click_control – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-field.json))
update_focused – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-field.json))

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

Bases: AbstractElement

Vuetify’s v-field-label component. See more info and examples here.

Parameters:: floating – See description here.

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

Bases: AbstractElement

Vuetify’s v-file-input component. See more info and examples here.

Parameters:

id – See description here.
append_icon – Appends an icon to the component, uses the same syntax as v-icon
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
messages – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
disabled – Removes the ability to click or target the input
error – See description here.
error_messages – 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 – See description here.
name – See description here.
label – See description here.
readonly – Puts input in readonly state
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
focused – Forces a focused state styling on the component.
reverse – See description here.
hide_details – 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 – See description here.
bg_color – See description here.
clearable – Allows for the component to be cleared
clear_icon – See description here.
active – Controls the active state of the item. This is typically used to highlight the component
color – See description here.
dirty – Manually apply the dirty state styling
persistent_clear – See description here.
prepend_inner_icon – See description here.
single_line – Label does not move on focus/dirty
variant – Applies a distinct style to the component
theme – Specify a theme for this component and all of its children
loading – 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
chips – Changes display of selections to chips
counter – See description here.
counter_size_string – See description here.
counter_string – See description here.
multiple – Adds the multiple attribute to the input, allowing multiple file selections.
hint – See description here.
persistent_hint – See description here.
placeholder – See description here.
show_size – 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).

Events

Parameters:

click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-file-input.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-file-input.json))
click_clear – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-file-input.json))
click_appendInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-file-input.json))
click_prependInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-file-input.json))
click_control – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-file-input.json))
update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-footer component. See more info and examples here.

Parameters:

border – Applies border styles to component.
elevation – See description here.
name – See description here.
order – See description here.
absolute – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
app – See description here.
color – See description here.
height – See description here.

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

Bases: AbstractElement

Vuetify’s v-form component. See more info and examples here.

Parameters:

disabled – Puts all children inputs into a disabled state
fast_fail – Stop validation as soon as any rules fail.
readonly – Puts all children inputs into a readonly state.
model_value – 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.
validate_on – Changes the events in which validation occurs.

Events

Parameters:

submit – Emitted when form is submitted
update_modelValue – Event emitted when the form’s validity changes

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

Bases: AbstractElement

Vuetify’s v-hover component. See more info and examples here.

Parameters:

close_delay – Milliseconds to wait before closing component. Only applies to hover and focus events.
open_delay – Milliseconds to wait before opening component. Only applies to hover and focus events.
disabled – Removes hover functionality
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-icon component. See more info and examples here.

Parameters:

color – See description here.
start – See description here.
end – See description here.
icon – Designates a specific icon.
size – 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.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children

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

Bases: AbstractElement

Vuetify’s v-img component. See more info and examples here.

Parameters:

transition – The transition to use when switching from lazy-src to src.
aspect_ratio – Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted.
alt – Alternate text for screen readers. Leave empty for decorative images.
cover – Resizes the background image to cover the entire container.
eager – Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
gradient – See description here.
lazy_src – See description here.
options – See description here.
sizes – See description here.
src – The image URL. This prop is mandatory.
srcset – See description here.
width – See description here.

Events

Parameters:

loadstart – Emitted when the image starts to load
load – Emitted when the image is loaded
error – Emitted if the image fails to load

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

Bases: AbstractElement

Vuetify’s v-input component. See more info and examples here.

Parameters:

id – See description here.
append_icon – Appends an icon to the component, uses the same syntax as v-icon
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
messages – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
disabled – Removes the ability to click or target the component
error – Puts the input in a manual error state
error_messages – 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 – See description here.
name – See description here.
label – See description here.
readonly – Puts input in readonly state
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
focused – Forces a focused state styling on the component.
hide_details – 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

Events

Parameters:

click_prepend – Emitted when prepended icon is clicked
click_append – Emitted when appended icon is clicked
update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-item component. See more info and examples here.

Parameters:

value – The value used when the component is selected in a group. If not provided, a unique ID will be used.
disabled – Removes the ability to click or target the component
selected_class – Configure the active CSS class applied when the item is selected.

Events

Parameters:: group_selected – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-item.json))

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

Bases: AbstractElement

Vuetify’s v-item-group component. See more info and examples here.

Parameters:

model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
multiple – Allows one to select mulitple items.
max – Sets a maximum number of selections that can be made.
selected_class – Configure the selected CSS class. This class will be available in v-item default scoped slot.
disabled – Puts all children components into a disabled state
mandatory – Forces at least one item to always be selected (if available).
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-kbd component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-label component. See more info and examples here.

Parameters:

theme – Specify a theme for this component and all of its children
text – Specify the displayed label text
clickable – See description here.

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

Bases: AbstractElement

Vuetify’s v-layout component. See more info and examples here.

Parameters:

full_height – Sets the component height to 100%
overlaps – See description here.

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

Bases: AbstractElement

Vuetify’s v-layout-item component. See more info and examples here.

Parameters:

name – See description here.
order – See description here.
absolute – See description here.
position – See description here.
size – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array

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

Bases: AbstractElement

Vuetify’s v-lazy component. See more info and examples here.

Parameters:

height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
tag – Specify a custom tag used on the root element.
transition – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
options – See description here.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-ligature-icon component. See more info and examples here.

Parameters:

icon – MISSING DESCRIPTION
tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-list component. See more info and examples here.

Parameters:

active_color – See description here.
active_class – The class applied to the component when it is in an active state
bg_color – See description here.
disabled – Puts all children inputs into a disabled state
nav – See description here.
lines – See description here.
mandatory – See description here.
select_strategy – See description here.
open_strategy – See description here.
opened – See description here.
selected – See description here.
border – Applies border styles to component.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
elevation – See description here.
item_type – See description here.
items – An array of strings or objects used for automatically generating children components
item_title – See description here.
item_value – See description here.
item_children – See description here.
item_props – See description here.
return_object – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component

Events

Parameters:

update_selected – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-list.json))
update_opened – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-list.json))
click_open – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-list.json))
click_select – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-list.json))

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

Bases: AbstractElement

Vuetify’s v-list-group component. See more info and examples here.

Parameters:

title – See description here.
active_color – See description here.
color – See description here.
collapse_icon – See description here.
expand_icon – See description here.
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
append_icon – Appends an icon to the component, uses the same syntax as v-icon
fluid – See description here.
subgroup – See description here.
value – Expands / Collapse the list-group
tag – Specify a custom tag used on the root element.
items – See description here.

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

Bases: AbstractElement

Vuetify’s v-list-img component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-list-item component. See more info and examples here.

Parameters:

title – Generates a v-list-item-title component with the supplied value
subtitle – Generates a v-list-item-subtitle component with the supplied value
active_class – See description here.
active_color – The applied color when a v-list-item is in an active state
append_avatar – See description here.
append_icon – See description here.
disabled – Removes the ability to click or target the component
nav – See description here.
prepend_avatar – See description here.
prepend_icon – See description here.
value – The value used for selection.
active – Controls the active state of the item. This is typically used to highlight the component
link – See description here.
ripple – MISSING DESCRIPTION
border – Applies border styles to component.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
elevation – See description here.
rounded – See description here.
href – Designates the component as anchor and applies the href attribute.
replace – See description here.
exact – See description here.
to – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component
lines – See description here.

Events

Parameters:: clickOnce – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-list-item.json))

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

Bases: AbstractElement

Vuetify’s v-list-item-action component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.
start – See description here.
end – See description here.

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

Bases: AbstractElement

Vuetify’s v-list-item-media component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.
start – See description here.
end – See description here.

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

Bases: AbstractElement

Vuetify’s v-list-item-subtitle component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-list-item-title component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-list-subheader component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.
color – See description here.
inset – See description here.
sticky – See description here.
title – See description here.

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

Bases: AbstractElement

Vuetify’s v-locale-provider component. See more info and examples here.

Parameters:

locale – See description here.
fallback_locale – See description here.
messages – See description here.
rtl – See description here.

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

Bases: AbstractElement

Vuetify’s v-main component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.
scrollable – See description here.

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

Bases: AbstractElement

Vuetify’s v-menu component. See more info and examples here.

Parameters:

activator – See description here.
id – See description here.
close_on_back – 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 – Limits the size of the component and scrim to its offset parent. Implies absolute and attach.
content_class – 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 – See description here.
disabled – Removes the ability to click or target the component
no_click_animation – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
persistent – See description here.
scrim – See description here.
z_index – The z-index used for the component
activator_props – See description here.
open_on_click – Designates whether menu should open on activator click
open_on_hover – Designates whether menu should open on activator hover
open_on_focus – See description here.
close_on_content_click – Designates if menu should close when its content is clicked
close_delay – Milliseconds to wait before closing component. Only works with the open-on-hover prop
open_delay – Milliseconds to wait before opening component. Only works with the open-on-hover prop
height – Sets the height for the component.
max_height – Sets the max height of the menu content
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
eager – See description here.
location_strategy – See description here.
location – Aligns the component towards the top, bottom, right, left, can be combined like for example top right
origin – See description here.
offset – See description here.
scroll_strategy – See description here.
theme – Specify a theme for this component and all of its children
transition – See description here.
attach – Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This attachs to the root v-app component by default

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-messages component. See more info and examples here.

Parameters:

transition – See description here.
active – Determines whether the messages are visible or not
color – See description here.
messages – See description here.

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

Bases: AbstractElement

Vuetify’s v-navigation-drawer component. See more info and examples here.

Parameters:

border – Applies border styles to component.
elevation – See description here.
name – See description here.
order – See description here.
absolute – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
disable_resize_watcher – Will automatically open/close drawer when resized depending if mobile or desktop.
disable_route_watcher – Disables opening of navigation drawer when route changes
expand_on_hover – Collapses the drawer to a mini-variant until hovering with the mouse
floating – A floating drawer has no visible container (no border-right)
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
permanent – The drawer remains visible regardless of screen size
rail – See description here.
rail_width – See description here.
scrim – See description here.
image – See description here.
temporary – A temporary drawer sits above its application and uses a scrim (overlay) to darken the background
touchless – Disable mobile touch functionality
width – See description here.
location – See description here.
sticky – See description here.

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
update_rail – Event that is emitted when the rail model changes

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

Bases: AbstractElement

Vuetify’s v-no-ssr component. See more info and examples here.

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

Bases: AbstractElement

Vuetify’s v-overlay component. See more info and examples here.

Parameters:

activator – See description here.
absolute – Applies position: absolute to the content element.
close_on_back – 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 – Limits the size of the component and scrim to its offset parent. Implies absolute and attach.
content_class – 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 – See description here.
disabled – Removes the ability to click or target the component
no_click_animation – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
persistent – See description here.
scrim – See description here.
z_index – The z-index used for the component
activator_props – See description here.
open_on_click – See description here.
open_on_hover – See description here.
open_on_focus – See description here.
close_on_content_click – See description here.
close_delay – Milliseconds to wait before closing component. Only applies to hover and focus events.
open_delay – Milliseconds to wait before opening component. Only applies to hover and focus events.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
eager – See description here.
location_strategy – See description here.
location – Aligns the component towards the top, bottom, right, left, can be combined like for example top right
origin – See description here.
offset – See description here.
scroll_strategy – See description here.
theme – Specify a theme for this component and all of its children
transition – See description here.
attach – Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This attachs to the root v-app component by default

Events

Parameters:

click_outside – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-overlay.json))
update_modelValue – Event that is emitted when the component’s model changes
afterLeave – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-overlay.json))

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

Bases: AbstractElement

Vuetify’s v-pagination component. See more info and examples here.

Parameters:

border – Applies border styles to component.
length – The number of pages
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
elevation – See description here.
rounded – See description here.
size – 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.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
variant – Applies a distinct style to the component
active_color – See description here.
start – Specify the starting page
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
disabled – Removes the ability to click or target the component
total_visible – Specify the total visible pagination numbers
first_icon – The icon to use for the first button
prev_icon – The icon to use for the prev button
next_icon – The icon to use for the next button
last_icon – The icon to use for the last button
aria_label – Label for the root element
page_aria_label – Label for each page button
current_page_aria_label – Label for the currently selected page
first_aria_label – Label for the go to first button
previous_aria_label – Label for the previous button
next_aria_label – Label for the next button
last_aria_label – Label for the go to last button
ellipsis – Text to show between page buttons when truncating the list
show_first_last_page – Show buttons for going to first and last page

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
first – Emitted when clicking on go to first button
prev – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-pagination.json))
next – Emitted when clicking on go to next button
last – Emitted when clicking on go to last button

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

Bases: AbstractElement

Vuetify’s v-parallax component. See more info and examples here.

Parameters:: scale – See description here.

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

Bases: AbstractElement

Vuetify’s v-progress-circular component. See more info and examples here.

Parameters:

size – Sets the diameter of the circle in pixels
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
bg_color – See description here.
color – See description here.
model_value – The percentage value for current progress
rotate – Rotates the circle start point in degrees
width – Sets the stroke of the circle in pixels
indeterminate – 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.

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

Bases: AbstractElement

Vuetify’s v-progress-linear component. See more info and examples here.

Parameters:

location – See description here.
reverse – Displays reversed progress (right to left in LTR mode and left to right in RTL)
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
absolute – Applies position: absolute to the component
active – Reduce the height to 0, hiding component
bg_color – See description here.
bg_opacity – Background opacity, if null it defaults to 0.3 if background color is not specified or 1 otherwise
buffer_value – The percentage value for the buffer
clickable – See description here.
color – See description here.
height – See description here.
indeterminate – Constantly animates, use when loading progress is unknown.
max – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
stream – An alternative style for portraying loading that works in tandem with buffer-value
striped – Adds a stripe background to the filled portion of the progress component
rounded_bar – See description here.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-radio component. See more info and examples here.

Parameters:

label – See description here.
true_value – See description here.
false_value – See description here.
value – See description here.
color – See description here.
disabled – Removes the ability to click or target the component
error – See description here.
id – See description here.
inline – See description here.
false_icon – The icon used when inactive
true_icon – The icon used when active
ripple – See description here.
type – See description here.
multiple – See description here.
name – Sets the component’s name attribute
readonly – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
value_comparator – Apply a custom comparison algorithm used for values
theme – Specify a theme for this component and all of its children
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.

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

Bases: AbstractElement

Vuetify’s v-radio-group component. See more info and examples here.

Parameters:

id – See description here.
append_icon – Appends an icon to the component, uses the same syntax as v-icon
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
messages – See description here.
type – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
disabled – Removes the ability to click or target the component
error – See description here.
error_messages – 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 – See description here.
name – Sets the component’s name attribute
label – See description here.
readonly – See description here.
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
focused – Forces a focused state styling on the component.
hide_details – 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
color – See description here.
inline – Displays radio buttons in row
false_icon – See description here.
true_icon – See description here.
ripple – See description here.
value_comparator – Apply a custom comparison algorithm used for values
theme – Specify a theme for this component and all of its children
height – See description here.

Events

Parameters:

click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-radio-group.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-radio-group.json))
update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-range-slider component. See more info and examples here.

Parameters:

focused – Forces a focused state styling on the component.
id – See description here.
append_icon – Appends an icon to the component, uses the same syntax as v-icon
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
messages – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
disabled – Removes the ability to click or target the component
error – See description here.
error_messages – 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 – See description here.
name – See description here.
label – See description here.
readonly – See description here.
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
reverse – See description here.
hide_details – 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
max – See description here.
min – See description here.
step – See description here.
thumb_color – See description here.
thumb_label – See description here.
thumb_size – See description here.
show_ticks – See description here.
ticks – See description here.
tick_size – See description here.
color – See description here.
track_color – See description here.
track_fill_color – See description here.
track_size – See description here.
rounded – See description here.
elevation – See description here.
strict – See description here.

Events

Parameters:

click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-range-slider.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-range-slider.json))
update_focused – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-range-slider.json))
update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-rating component. See more info and examples here.

Parameters:

length – The amount of items to show
name – See description here.
active_color – See description here.
color – See description here.
clearable – Allows for the component to be cleared by clicking on the current value
disabled – Removes the ability to click or target the component
half_increments – Allows the selection of half increments
hover – Provides visual feedback when hovering over icons
readonly – Removes all hover effects and pointer events
ripple – See description here.
item_aria_label – See description here.
empty_icon – The icon displayed when empty
full_icon – The icon displayed when full
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
item_label_position – Position of item labels. Accepts ‘top’ and ‘bottom’.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
size – 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.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
item_labels – Array of labels to display next to each item.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-responsive component. See more info and examples here.

Parameters:

height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
aspect_ratio – 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
content_class – 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

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

Bases: AbstractElement

Vuetify’s v-row component. See more info and examples here.

Parameters:

align – See description here.
justify – See description here.
align_content – See description here.
tag – Specify a custom tag used on the root element.
dense – Reduces the gutter between `v-col`s.
no_gutters – Removes the gutter between `v-col`s.

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

Bases: AbstractElement

Vuetify’s v-scale-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-scroll-x-reverse-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-scroll-x-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-scroll-y-reverse-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-scroll-y-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-select component. See more info and examples here.

Parameters:

label – See description here.
type – Sets input type
chips – Changes display of selections to chips
closable_chips – See description here.
eager – Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
hide_no_data – See description here.
hide_selected – Do not display in the select menu items that are already selected
menu – See description here.
menu_icon – See description here.
menu_props – See description here.
id – See description here.
disabled – Removes the ability to click or target the input
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
reverse – See description here.
theme – Specify a theme for this component and all of its children
transition – See description here.
name – See description here.
multiple – Changes select to multiple. Accepts array for value
no_data_text – Text shown when no items are provided to the component
open_on_clear – When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
value_comparator – Apply a custom comparison algorithm used for values
items – Can be an array of objects or array of strings. When using objects, will look for a title, value and disabled keys. This can be changed using the item-title, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
item_title – See description here.
item_value – See description here.
item_children – See description here.
item_props – See description here.
return_object – Changes the selection behavior to return the object directly rather than the value specified with item-value
autofocus – Enables autofocus
hint – See description here.
persistent_hint – See description here.
prefix – Displays prefix text
placeholder – Sets the input’s placeholder text
persistent_placeholder – Forces placeholder to always be visible
persistent_counter – See description here.
suffix – Displays suffix text
append_icon – Appends an icon to the outside the component’s input, uses same syntax as v-icon
prepend_icon – Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon
messages – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
error – See description here.
error_messages – 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 – See description here.
readonly – Puts input in readonly state
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. 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 – See description here.
focused – Forces a focused state styling on the component.
hide_details – 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
bg_color – See description here.
clearable – Allows for the component to be cleared
clear_icon – See description here.
active – Controls the active state of the item. This is typically used to highlight the component
color – See description here.
persistent_clear – See description here.
prepend_inner_icon – See description here.
single_line – Label does not move on focus/dirty
variant – Applies a distinct style to the component
loading – 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 – Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
counter_value – See description here.

Events

Parameters:

update_modelValue – Event that is emitted when the component’s model changes
click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-select.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-select.json))
click_clear – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-select.json))
click_appendInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-select.json))
click_prependInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-select.json))
update_menu – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-select.json))

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

Bases: AbstractElement

Vuetify’s v-selection-control component. See more info and examples here.

Parameters:

type – See description here.
label – See description here.
true_value – See description here.
false_value – See description here.
value – See description here.
color – See description here.
disabled – Removes the ability to click or target the component
error – See description here.
id – See description here.
inline – See description here.
false_icon – See description here.
true_icon – See description here.
ripple – See description here.
multiple – See description here.
name – See description here.
readonly – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
value_comparator – Apply a custom comparison algorithm used for values
theme – Specify a theme for this component and all of its children
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-selection-control-group component. See more info and examples here.

Parameters:

color – See description here.
disabled – Removes the ability to click or target the component
error – See description here.
id – See description here.
inline – See description here.
false_icon – See description here.
true_icon – See description here.
ripple – See description here.
type – See description here.
multiple – See description here.
name – See description here.
readonly – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
value_comparator – Apply a custom comparison algorithm used for values
theme – Specify a theme for this component and all of its children
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
defaults_target – See description here.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-sheet component. See more info and examples here.

Parameters:

border – Applies border styles to component.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
elevation – See description here.
location – See description here.
position – Specifies the type of positioning method used for an element. Available options are: static, relative, fixed, absolute, and sticky.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.

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

Bases: AbstractElement

Vuetify’s v-slide-group component. See more info and examples here.

Parameters:

symbol – See description here.
center_active – Forces the selected component to be centered
direction – See description here.
next_icon – The appended slot when arrows are shown
prev_icon – The prepended slot when arrows are shown
show_arrows – See description here.
tag – Specify a custom tag used on the root element.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
multiple – Allows one to select mulitple items.
max – Sets a maximum number of selections that can be made.
selected_class – Configure the selected CSS class.
disabled – Puts all children components into a disabled state
mandatory – Forces at least one item to always be selected (if available).

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-slide-group-item component. See more info and examples here.

Parameters:

selected_class – Configure the active CSS class applied when the item is selected.
value – The value used when the component is selected in a group. If not provided, a unique ID will be used.
disabled – Removes the ability to click or target the component

Events

Parameters:: group_selected – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-slide-group-item.json))

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

Bases: AbstractElement

Vuetify’s v-slide-x-reverse-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-slide-x-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-slide-y-reverse-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-slide-y-transition component. See more info and examples here.

Parameters:

group – See description here.
hide_on_leave – Hides the leaving element (no exit animation)
leave_absolute – See description here.
mode – See description here.
origin – See description here.

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

Bases: AbstractElement

Vuetify’s v-slider component. See more info and examples here.

Parameters:

focused – Forces a focused state styling on the component.
disabled – Removes the ability to click or target the component
error – Puts the input in a manual error state
readonly – Puts input in readonly state
max – Sets the maximum allowed value
min – Sets the minimum allowed value
step – If greater than 0, sets step interval for ticks
thumb_color – Sets the thumb and thumb label color
thumb_label – Show thumb label. If true it shows label when using slider. If set to ‘always’ it always shows label.
thumb_size – Controls the size of the thumb label.
show_ticks – See description here.
ticks – Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks.
tick_size – Controls the size of ticks
color – See description here.
track_color – Sets the track’s color
track_fill_color – Sets the track’s fill color
track_size – See description here.
direction – See description here.
reverse – See description here.
rounded – See description here.
elevation – See description here.
id – See description here.
append_icon – Appends an icon to the component, uses the same syntax as v-icon
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
messages – Displays a list of messages or message if using a string
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
error_messages – 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 – See description here.
name – See description here.
label – See description here.
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
hide_details – 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

Events

Parameters:

click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-slider.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-slider.json))
update_focused – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-slider.json))
update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-snackbar component. See more info and examples here.

Parameters:

activator – See description here.
multi_line – Gives the snackbar a larger minimum height.
vertical – Stacks snackbar content on top of the actions (button).
timeout – 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.
location – Aligns the component towards the top, bottom, right, left, can be combined like for example top right
position – Specifies the type of positioning method used for an element. Available options are: static, relative, fixed, absolute, and sticky.
absolute – Applies position: absolute to the component.
rounded – See description here.
color – See description here.
variant – Applies a distinct style to the component
theme – Specify a theme for this component and all of its children
close_on_back – 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 – Limits the size of the component and scrim to its offset parent. Implies absolute and attach.
content_class – 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 – See description here.
disabled – Removes the ability to click or target the component
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
z_index – The z-index used for the component
activator_props – See description here.
open_on_click – See description here.
open_on_hover – See description here.
open_on_focus – See description here.
close_on_content_click – See description here.
close_delay – Milliseconds to wait before closing component. Only applies to hover and focus events.
open_delay – Milliseconds to wait before opening component. Only applies to hover and focus events.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
eager – See description here.
location_strategy – See description here.
origin – See description here.
offset – See description here.
transition – See description here.
attach – Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This attachs to the root v-app component by default

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-spacer component. See more info and examples here.

Parameters:: tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-svg-icon component. See more info and examples here.

Parameters:

icon – MISSING DESCRIPTION
tag – Specify a custom tag used on the root element

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

Bases: AbstractElement

Vuetify’s v-switch component. See more info and examples here.

Parameters:

id – See description here.
append_icon – Appends an icon to the component, uses the same syntax as v-icon
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
messages – See description here.
type – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
disabled – Removes the ability to click or target the component
error – See description here.
error_messages – 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 – See description here.
name – See description here.
label – See description here.
readonly – See description here.
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
focused – Forces a focused state styling on the component.
flat – Display component without elevation. Default elevation for thumb is 4dp, flat resets it
hide_details – 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
true_value – See description here.
false_value – See description here.
value – The input’s value
color – See description here.
inline – See description here.
false_icon – See description here.
true_icon – See description here.
ripple – See description here.
multiple – Changes expected model to an array
value_comparator – Apply a custom comparison algorithm used for values
theme – Specify a theme for this component and all of its children
indeterminate – See description here.
inset – Enlarge the v-switch track to encompass the thumb
loading – 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

Events

Parameters:

click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-switch.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-switch.json))
update_focused – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-switch.json))
update_modelValue – Event that is emitted when the component’s model changes
update_indeterminate – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-switch.json))

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

Bases: AbstractElement

Vuetify’s v-system-bar component. See more info and examples here.

Parameters:

elevation – See description here.
name – See description here.
order – See description here.
absolute – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
color – See description here.
height – Sets the height for the component.
window – Increases the system bar height to 32px (24px default).

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

Bases: AbstractElement

Vuetify’s v-tab component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.
href – Designates the component as anchor and applies the href attribute.
replace – See description here.
exact – See description here.
to – See description here.
value – The value used when the component is selected in a group. If not provided, a unique ID will be used.
disabled – Removes the ability to click or target the component
selected_class – Configure the active CSS class applied when the item is selected.
theme – Specify a theme for this component and all of its children
fixed – See description here.
prepend_icon – See description here.
append_icon – See description here.
stacked – See description here.
title – See description here.
ripple – See description here.
color – See description here.
slider_color – See description here.
hide_slider – See description here.
direction – See description here.
icon – See description here.

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

Bases: AbstractElement

Vuetify’s v-table component. See more info and examples here.

Parameters:

density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
fixed_header – See description here.
fixed_footer – See description here.
height – See description here.
hover – See description here.

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

Bases: AbstractElement

Vuetify’s v-tabs component. See more info and examples here.

Parameters:

density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
tag – Specify a custom tag used on the root element.
align_tabs – See description here.
color – See description here.
direction – Changes the direction of the tabs. Can be either horizontal or vertical.
fixed_tabs – v-tabs-item min-width 160px, max-width 360px
items – The items to display in the component. This can be an array of strings or objects with a property title
stacked – See description here.
bg_color – See description here.
grow – Force v-tab’s to take up all available space
height – Sets the height of the tabs bar
hide_slider – Hide’s the generated v-tabs-slider
slider_color – Changes the background color of an auto-generated v-tabs-slider
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
mandatory – See description here.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-text-field component. See more info and examples here.

Parameters:

label – See description here.
type – Sets input type
autofocus – Enables autofocus
hint – See description here.
persistent_hint – See description here.
prefix – Displays prefix text
placeholder – Sets the input’s placeholder text
persistent_placeholder – Forces placeholder to always be visible
persistent_counter – See description here.
suffix – Displays suffix text
id – See description here.
append_icon – Appends an icon to the outside the component’s input, uses same syntax as v-icon
prepend_icon – Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon
messages – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
disabled – Removes the ability to click or target the input
error – See description here.
error_messages – 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 – See description here.
name – See description here.
readonly – Puts input in readonly state
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
focused – Forces a focused state styling on the component.
reverse – Reverses the input orientation
hide_details – 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 – See description here.
bg_color – See description here.
clearable – Allows for the component to be cleared
clear_icon – Applied when using clearable and the input is dirty
active – Controls the active state of the item. This is typically used to highlight the component
color – See description here.
dirty – Manually apply the dirty state styling
persistent_clear – See description here.
prepend_inner_icon – Prepends an icon inside the component’s input, uses the same syntax as v-icon
single_line – Label does not move on focus/dirty
variant – Applies a distinct style to the component
theme – Specify a theme for this component and all of its children
loading – 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 – Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
counter_value – See description here.

Events

Parameters:

click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-text-field.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-text-field.json))
click_clear – Emitted when clearable icon clicked
click_appendInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-text-field.json))
click_prependInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-text-field.json))
click_control – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-text-field.json))
click_input – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-text-field.json))
update_focused – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-text-field.json))
update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-textarea component. See more info and examples here.

Parameters:

id – See description here.
append_icon – Appends an icon to the component, uses the same syntax as v-icon
prepend_icon – Prepends an icon to the component, uses the same syntax as v-icon
messages – See description here.
direction – See description here.
density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
disabled – Removes the ability to click or target the input
error – See description here.
error_messages – 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 – See description here.
name – See description here.
label – See description here.
readonly – Puts input in readonly state
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
focused – Forces a focused state styling on the component.
reverse – See description here.
hide_details – 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 – See description here.
bg_color – See description here.
clearable – Allows for the component to be cleared
clear_icon – See description here.
active – Controls the active state of the item. This is typically used to highlight the component
color – See description here.
dirty – Manually apply the dirty state styling
persistent_clear – See description here.
prepend_inner_icon – See description here.
single_line – Label does not move on focus/dirty
variant – Applies a distinct style to the component
theme – Specify a theme for this component and all of its children
loading – 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
auto_grow – Automatically grow the textarea depending on amount of text
autofocus – See description here.
hint – See description here.
persistent_hint – See description here.
prefix – See description here.
placeholder – See description here.
persistent_placeholder – See description here.
persistent_counter – See description here.
no_resize – Remove resize handle
rows – Default row count
max_rows – See description here.
suffix – See description here.
counter – See description here.
counter_value – See description here.

Events

Parameters:

click_prepend – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-textarea.json))
click_append – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-textarea.json))
click_clear – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-textarea.json))
click_appendInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-textarea.json))
click_prependInner – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-textarea.json))
click_control – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-textarea.json))
update_focused – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-textarea.json))
update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-theme-provider component. See more info and examples here.

Parameters:

theme – Specify a theme for this component and all of its children
tag – Specify a custom tag used on the root element.
with_background – See description here.

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

Bases: AbstractElement

Vuetify’s v-timeline component. See more info and examples here.

Parameters:

density – Adjusts vertical spacing within the component. Available options are: default, comfortable, and compact.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children
justify – See description here.
line_inset – See description here.
line_thickness – See description here.
line_color – See description here.
align – See description here.
direction – Display timeline in a vertical or horizontal direction
side – See description here.
truncate_line – 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 v-timeline-item component. See more info and examples here.

Parameters:

rounded – See description here.
elevation – See description here.
size – Size of the item dot
tag – Specify a custom tag used on the root element.
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
dot_color – See description here.
fill_dot – Remove outer border of item dot, making the color fill the entire dot
hide_dot – Hide the timeline item dot
hide_opposite – Hide opposite content if it exists
icon – Specify icon to display inside dot
icon_color – Color of the icon
line_inset – See description here.
density – See description here.

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

Bases: AbstractElement

Vuetify’s v-toolbar component. See more info and examples here.

Parameters:

image – See description here.
title – See description here.
flat – Removes the toolbar’s box-shadow.
absolute – Applies position: absolute to the component.
collapse – Puts the toolbar into a collapsed state reducing its maximum width.
color – See description here.
density – See description here.
extended – 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 – Specify an explicit height for the extension slot.
floating – Applies display: inline-flex to the component.
height – Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. prominent, dense, extended, etc.
border – Applies border styles to component.
elevation – See description here.
rounded – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children

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

Bases: AbstractElement

Vuetify’s v-toolbar-items component. See more info and examples here.

Parameters:

color – See description here.
variant – Applies a distinct style to the component

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

Bases: AbstractElement

Vuetify’s v-toolbar-title component. See more info and examples here.

Parameters:

text – See description here.
tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s v-tooltip component. See more info and examples here.

Parameters:

activator – See description here.
id – See description here.
text – See description here.
close_on_back – 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 – Limits the size of the component and scrim to its offset parent. Implies absolute and attach.
content_class – 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 – See description here.
disabled – Removes the ability to click or target the component
no_click_animation – See description here.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
scrim – See description here.
z_index – The z-index used for the component
activator_props – See description here.
open_on_click – Designates whether the tooltip should open on activator click
open_on_hover – Designates whether the tooltip should open on activator hover
open_on_focus – See description here.
close_on_content_click – See description here.
close_delay – Delay (in ms) after which menu closes (when open-on-hover prop is set to true)
open_delay – Delay (in ms) after which tooltip opens (when open-on-hover prop is set to true)
height – Sets the height for the component.
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.
location_strategy – See description here.
location – Aligns the component towards the top, bottom, right, left, can be combined like for example top right
origin – See description here.
offset – See description here.
scroll_strategy – See description here.
theme – Specify a theme for this component and all of its children
transition – See description here.
attach – Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This attachs to the root v-app component by default

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-validation component. See more info and examples here.

Parameters:

disabled – Removes the ability to click or target the component
error – Puts the input in a manual error state
error_messages – 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 – See description here.
name – See description here.
label – See description here.
readonly – Puts input in readonly state
rules – Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
validate_on – See description here.
validation_value – See description here.
focused – Forces a focused state styling on the component.

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-virtual-scroll component. See more info and examples here.

Parameters:

items – The array of items to display
item_key – Required when using dynamic-item-height together with object items. Should point to a property with a unique value for each item.
item_height – Height in pixels of each item to display. When using dynamic-item-height this should be an average initial size.
visible_items – MISSING DESCRIPTION
height – Height of the component as a css value
max_height – Sets the maximum height for the component.
max_width – Sets the maximum width for the component.
min_height – Sets the minimum height for the component.
min_width – Sets the minimum width for the component.
width – Sets the width for the component.

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

Bases: AbstractElement

Vuetify’s v-window component. See more info and examples here.

Parameters:

continuous – If true, window will “wrap around” from the last item to the first, and from the first item to the last
reverse – Reverse the normal transition direction.
model_value – The v-model value of the component. If component supports the multiple prop, this defaults to an empty array
disabled – Removes the ability to click or target the component
next_icon – Icon used for the “next” button if show-arrows is true
prev_icon – Icon used for the “prev” button if show-arrows is true
show_arrows – Display the “next” and “prev” buttons
touch – Provide a custom left and right function when swiped left or right.
direction – See description here.
selected_class – See description here.
mandatory – See description here.
tag – Specify a custom tag used on the root element.
theme – Specify a theme for this component and all of its children

Events

Parameters:: update_modelValue – Event that is emitted when the component’s model changes

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

Bases: AbstractElement

Vuetify’s v-window-item component. See more info and examples here.

Parameters:

value – The value used when the component is selected in a group. If not provided, a unique ID will be used.
disabled – Prevents the item from becoming active when using the “next” and “prev” buttons or the toggle method
selected_class – Configure the active CSS class applied when the item is selected.
eager – See description here.
reverse_transition – Sets the reverse transition
transition – See description here.

Events

Parameters:: group_selected – MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/next/packages/api-generator/src/locale/en/v-window-item.json))

trame.widgets.vuetify3.dataframe_to_grid(dataframe, options={})

Transform a dataframe for use with a VDataTable

Parameters:

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

>>> headers, rows = vuetify.dataframe_to_grid(dataframe)
>>> VDataTable(
...     headers=("table_headers", headers),
...     items=("table_rows", rows))