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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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_tabsv-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:
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:
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))