vuetify3

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

Bases: AbstractElement

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

Parameters:

• children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

• v_slot – The slot this template corresponds to

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

Bases: AbstractElement

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

Parameters:

• title – Specify a title text for the component.

• text – Specify content text for the component.

• border – Adds a colored border to the component.

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

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

• close_label – See description here.

• icon – See description here.

• model_value – Controls whether the component is visible or hidden.

• prominent – Displays a larger vertically centered icon to draw more attention.

• density – Adjusts the vertical height used by the 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 – Specifies the component’s location. Can combine by using a space separated string.

• position – Sets the position for the component.

• 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:

• click_close – Emitted when close icon is clicked.

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

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

Bases: AbstractElement

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

Parameters:

tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

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

Parameters:

• full_height – Sets the component height to 100%.

• overlaps – FOR INTERNAL USE ONLY

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

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

Bases: AbstractElement

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

param image:

See description here.

type string:

param title:

Specify a title text for the component.

type string:

param flat:

Removes the component’s box-shadow.

type boolean:

param collapse:

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

type boolean:

param model_value:

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

type boolean:

param location:

Aligns the component towards the top or bottom.

type ‘top’ | ‘bottom’:

param absolute:

Applies position: absolute to the component.

type boolean:

param color:

See description here.

type string:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘prominent’ | ‘comfortable’ | ‘compact’:

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

type boolean:

param extension_height:

Designate an explicit height for the extension slot.

type string | number:

param floating:

Applies display: inline-flex to the component.

type boolean:

param height:

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

type string | number:

param border:

Applies border styles to component.

type string | number | boolean:

param elevation:

See description here.

type string | number:

param rounded:

See description here.

type string | number | boolean:

param tag:

Specify a custom tag used on the root element.

type string:

param theme:

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

type string:

param name:

Assign a specific name for layout registration.

type string:

param order:

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

type string | number:

param scroll_target:

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

type string:

param scroll_threshold:

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

type string | number:

param scroll_behavior:

Specify an action to take when the scroll position of scroll-target reaches scroll-threshold. Accepts any combination of hide, inverted, collapse, elevate, and fade-image. Multiple values can be used, separated by a space.

:type | (string & {})

‘hide’

‘inverted’

‘collapse’

‘elevate’

‘fade-image’:

Events

param update_modelValue:

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

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

Bases: AbstractElement

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

Parameters:

• symbol – See description here.

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

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

• slim – Reduces padding to 0 8px.

• stacked – Displays the button as a flex-column.

• ripple – See description here.

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

• text – Specify content text for the component.

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the 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.

• disabled – Removes the ability to click or target the component.

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

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

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

• position – Sets the position for the component.

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

• icon – See description here.

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

Bases: AbstractElement

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

Parameters:

• text – Specify content text for the component.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

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

param label:

See description here.

type string:

param auto_select_first:

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

type boolean | ‘exact’:

param search:

Text input used to filter items.

type string:

param filter_mode:

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter.

• some: There is at least one match from either the custom filter or the custom key filter.

• every: All columns match either the custom filter or the custom key filter.

• union: There is at least one match from the custom filter, or all columns match the custom key filters.

• intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

  type ‘some’ | ‘every’ | ‘union’ | ‘intersection’:

  param no_filter:

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

  type boolean:

  param custom_filter:

  Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/filter.ts#L19-L19” target=”_blank”>FilterFunction</a>:

  param reverse:

  Reverses the orientation.

  type boolean:

  param flat:

  Removes box shadow when using a variant with elevation.

  type boolean:

  param custom_key_filter:

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

  type unknown:

  param filter_keys:

  Array of specific keys to filter on the item.

  type string | string[]:

  param chips:

  Changes display of selections to chips.

  type boolean:

  param closable_chips:

  See description here.

  type boolean:

  param close_text:

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

  type string:

  param type:

  Sets input type.

  type string:

  param open_text:

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

  type string:

  param eager:

  Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

  type boolean:

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

  type boolean:

  param hide_selected:

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

  type boolean:

  param menu:

  Renders with the menu open by default.

  type boolean:

  param menu_icon:

  Sets the the spin icon.

  type any:

  param menu_props:

  See description here.

  type unknown:

  param id:

  Sets the DOM id on the component.

  type string:

  param disabled:

  Removes the ability to click or target the input.

  type boolean:

  param model_value:

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

  type any:

  param theme:

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

  type string:

  param transition:

  See description here.

  type string | boolean | (TransitionProps & { component:

  Component }):

  param name:

  Sets the component’s name attribute.

  type string:

  param multiple:

  Changes select to multiple. Accepts array for value.

  type boolean:

  param no_data_text:

  Text shown when no items are provided to the component.

  type string:

  param open_on_clear:

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

  type boolean:

  param item_color:

  Sets color of selected items.

  type string:

  param items:

  See description here.

  type any[]:

  param item_title:

  Property on supplied items that contains its title.

  type SelectItemKey<any>:

  param item_value:

  Property on supplied items that contains its value.

  type SelectItemKey<any>:

  param item_children:

  Property on supplied items that contains its children.

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L73-L77” target=”_blank”>SelectItemKey</a>:

  param item_props:

  Props object that will be applied to each item component. true will treat the original object as raw props and pass it directly to the component.

  type SelectItemKey<any>:

  param return_object:

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

  type boolean:

  param value_comparator:

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

  type (a:

  any, b: any) => boolean:

  param autofocus:

  Enables autofocus.

  type boolean:

  param counter:

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

  type string | number | boolean:

  param prefix:

  Displays prefix text.

  type string:

  param placeholder:

  Sets the input’s placeholder text.

  type string:

  param persistent_placeholder:

  Forces placeholder to always be visible.

  type boolean:

  param persistent_counter:

  Forces counter to always be visible.

  type boolean:

  param suffix:

  Displays suffix text.

  type string:

  param role:

  The role attribute applied to the input.

  type string:

  param append_icon:

  See description here.

  type any:

  param center_affix:

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

  type boolean:

  param prepend_icon:

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

  type any:

  param hide_spin_buttons:

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

  type boolean:

  param hint:

  See description here.

  type string:

  param persistent_hint:

  See description here.

  type boolean:

  param messages:

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

  type string | string[]:

  param direction:

  Changes the direction of the input.

  type ‘horizontal’ | ‘vertical’:

  param density:

  Adjusts the vertical height used by the component.

  type ‘default’ | ‘comfortable’ | ‘compact’:

  param error:

  Puts the input in a manual error state.

  type boolean:

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

  type string | string[]:

  param max_errors:

  Control the maximum number of shown errors from validation.

  type string | number:

  param readonly:

  Puts input in readonly state.

  type boolean:

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

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

  param validate_on:

  Change what type of event triggers validation to run.

  :type | ‘lazy’

  ‘blur’

  ‘input’

  ‘submit’

  ‘blur lazy’

  ‘input lazy’

  ‘submit lazy’

  ‘lazy blur’

  ‘lazy input’

  ‘lazy submit’: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param bg_color: See description here. :type string: :param clearable: Allows for the component to be cleared. :type boolean: :param clear_icon: The icon used when the clearable prop is set to true. :type any: :param active: Controls the active state of the item. This is typically used to highlight the component. :type boolean: :param color: See description here. :type string: :param base_color: Sets the color of the input when it is not focused. :type string: :param persistent_clear: Always show the clearable icon when the input is dirty (By default it only shows on hover). :type boolean: :param prepend_inner_icon: See description here. :type any: :param single_line: Label does not move on focus/dirty. :type boolean: :param variant: Applies a distinct style to the component. :type | ‘underlined’

  ‘outlined’

  ‘filled’

  ‘solo’

  ‘solo-inverted’

  ‘solo-filled’

  ‘plain’: :param 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. :type string | boolean: :param rounded: Adds a border radius to the input. :type string | number | boolean: :param counter_value: Function returns the counter display text. :type number | ((value: any) => number): :param model_modifiers: FOR INTERNAL USE ONLY :type unknown:

  Events

  param update_modelValue:

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

  param click_prepend:

  Emitted when prepended icon is clicked.

  param click_append:

  Emitted when append icon is clicked.

  param update_focused:

  Emitted when the input is focused or blurred

  param click_clear:

  Emitted when clearable icon clicked.

  param click_appendInner:

  Emitted when appended inner icon is clicked.

  param click_prependInner:

  Emitted when prepended inner icon is clicked.

  param update_search:

  Event emitted when the search value changes.

  param update_menu:

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

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

Bases: AbstractElement

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

Parameters:

• start – Applies margin at the end of the component.

• end – Applies margin at the start of the component.

• icon – See description here.

• image – See description here.

• text – Specify content text for the component.

• density – Adjusts the vertical height used by the component.

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

Parameters:

• 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 – Elevates the badge above the slotted content.

• icon – See description here.

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

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

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

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

Bases: AbstractElement

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

Parameters:

• text – Specify content text for the component.

• avatar – Designates a specific src image to pass to the thumbnail.

• bg_color – See description here.

• color – See description here.

• icon – See description here.

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

• sticky – See description here.

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the 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.

• mobile_breakpoint – See description here.

• elevation – See description here.

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

• position – Sets the position for the component.

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

• lines – The amount of visible lines of text before it truncates.

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

Bases: AbstractElement

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

Parameters:

• color – See description here.

• density – Adjusts the vertical height used by the component.

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

Bases: AbstractElement

Vuetify’s VBannerText 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 VBottomNavigation component. See more info and examples here.

Parameters:

• bg_color – See description here.

• color – See description here.

• grow – See description here.

• mode – Changes the orientation and active state styling of the component.

• height – Sets the height for the component.

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

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the component.

• elevation – See description here.

• rounded – See description here.

• name – Assign a specific name for layout registration.

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

• absolute – Applies position: absolute to the component.

• 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 multiple items.

• max – Sets a maximum number of selections that can be made.

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

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

Events

Parameters:

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

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

Bases: AbstractElement

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

param activator:

Explicitly sets the overlay’s activator.

type Element | ‘parent’ | (string & {}) | ComponentPublicInstance:

param inset:

Reduces the sheet content maximum width to 70%.

type boolean:

param fullscreen:

Changes layout for fullscreen display.

type boolean:

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

type boolean:

param scrollable:

See description here.

type boolean:

param absolute:

Applies position: absolute to the content element.

type boolean:

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

type boolean:

param contained:

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

type boolean:

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

type any:

param content_props:

Apply custom properties to the content.

type any:

param disabled:

Removes the ability to click or target the component.

type boolean:

param no_click_animation:

Disables the bounce effect when clicking outside of a v-dialog’s content when using the persistent prop.

type boolean:

param model_value:

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

type boolean:

param persistent:

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

type boolean:

param scrim:

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

type string | boolean:

param z_index:

The z-index used for the component.

type string | number:

param target:

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

:type | Element

‘parent’

‘cursor’

(string & {})

ComponentPublicInstance

[number, number]: :param activator_props: Apply custom properties to the activator. :type unknown: :param open_on_click: Activate the component when the activator is clicked. :type boolean: :param open_on_hover: Activate the component when the activator is hovered. :type boolean: :param open_on_focus: Activate the component when the activator is focused. :type boolean: :param close_on_content_click: Closes component when you click on its content. :type boolean: :param close_delay: Milliseconds to wait before closing component. Only applies to hover and focus events. :type string | number: :param open_delay: Milliseconds to wait before opening component. Only applies to hover and focus events. :type string | number: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param eager: Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. :type boolean: :param location_strategy: A function used to specifies how the component should position relative to its activator. :type ‘static’ | ‘connected’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L36-L40” target=”_blank”>LocationStrategyFn</a>: :param location: Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a>: :param origin: See description here. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a> | ‘auto’ | ‘overlap’: :param offset: A single value that offsets content away from the target based upon what side it is on. :type string | number | number[]: :param scroll_strategy: Strategy used when the component is activate and user scrolls. :type ‘none’ | ‘close’ | ‘block’ | ‘reposition’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L17-L17” target=”_blank”>ScrollStrategyFn</a>: :param theme: Specify a theme for this component and all of its children. :type string: :param transition: See description here. :type | { component: Component }

string

boolean

(TransitionProps & { component: Component }): :param attach: Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. :type string | boolean | Element:

Events

param update_modelValue:

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

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

Bases: AbstractElement

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

param divider:

Specifies the dividing character between items.

type string:

param active_class:

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

type string:

param active_color:

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

type string:

param bg_color:

See description here.

type string:

param color:

See description here.

type string:

param disabled:

Removes the ability to click or target the component.

type boolean:

param icon:

See description here.

type any:

param items:

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

:type (

string

(Partial<LinkProps> & { title: string; disabled: boolean })

)[]:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param rounded:

See description here.

type string | number | boolean:

param tag:

Specify a custom tag used on the root element.

type string:

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

Bases: AbstractElement

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

Parameters:

divider – Specifies the dividing character between items.

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

Bases: AbstractElement

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

Parameters:

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

• active_class – See description here.

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

• color – See description here.

• disabled – Removes the ability to click or target the component.

• title – Specify a title text for the component.

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

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

Bases: AbstractElement

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

Parameters:

• symbol – See description here.

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

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

• slim – Reduces padding to 0 8px.

• stacked – Displays the button as a flex-column.

• ripple – See description here.

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

• text – Specify content text for the component.

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the 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.

• disabled – Removes the ability to click or target the component.

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

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

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

• position – Sets the position for the component.

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

• icon – See description here.

Events

Parameters:

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

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

Bases: AbstractElement

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

Parameters:

• divided – See description here.

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the 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.

• color – See description here.

• variant – Applies a distinct style to the component.

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

Bases: AbstractElement

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

Parameters:

• divided – See description here.

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the component.

• elevation – See description here.

• rounded – Round edge buttons.

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

• 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 multiple items.

• max – Sets a maximum number of selections that can be made.

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

• 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.VCalendar(children=None, **kwargs)

Bases: AbstractElement

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

Parameters:

• hide_header – Determines whether the header is hidden in the calendar view.

• hide_week_number – Toggles the display of week numbers in a calendar view.

• allowed_dates – Determines which dates are selectable.

• disabled – Removes the ability to click or target the component.

• month – Specifies the month for the calendar view.

• show_adjacent_months – Shows or hides days from adjacent months.

• year – Specifies the year for the calendar view.

• weekdays – Specifies which days of the week to display.

• display_value – Value to display for the component, possibly a formatted date.

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

• max – Maximum date or value that can be selected.

• min – Minimum date or value that can be selected.

• hide_day_header – Determines whether the day header is visible in the calendar day view.

• intervals – Total number of intervals in a day view.

• day – Represents the specific day associated with the interval.

• day_index – Index of the day this interval is a part of, in a week or month view.

• events – Array of events specific to this interval.

• interval_divisions – Number of subdivisions within this interval.

• interval_duration – Duration of this specific interval in minutes.

• interval_height – Height of the interval in pixels in the calendar view.

• interval_format – Formatting rule for displaying the interval, as a string or function.

• interval_start – Starting time for this specific interval.

• next_icon – The icon to use for the next button.

• prev_icon – The icon to use for the prev button.

• title – Specify a title text for the component.

• text – Specify content text for the component.

• view_mode – The current view mode of the calendar.

Events

Parameters:

• next – Emitted when moving to the next time period.

• prev – Emitted when moving to the previous time period.

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

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

Bases: AbstractElement

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

Parameters:

• hide_day_header – Determines whether the day header is visible in the calendar day view.

• intervals – Specifies the total number of time intervals for the day in the calendar view.

• day – Represents the specific day associated with the interval.

• day_index – Index of the day this interval is a part of, in a week or month view.

• events – Array of events specific to this interval.

• interval_divisions – Number of subdivisions within this interval.

• interval_duration – Duration of this specific interval in minutes.

• interval_height – Height of the interval in pixels in the calendar view.

• interval_format – Formatting rule for displaying the interval, as a string or function.

• interval_start – Starting time for this specific interval.

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

Bases: AbstractElement

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

Parameters:

• next_icon – The icon to use for the next button.

• prev_icon – The icon to use for the prev button.

• title – Specify a title text for the component.

• text – Specify content text for the component.

• view_mode – The current view mode of the calendar.

Events

Parameters:

• click_next – Event emitted when clicking the next button.

• click_prev – Event emitted when clicking the prev button.

• click_toToday – Event emitted when clicking the today button.

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

Bases: AbstractElement

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

Parameters:

• index – Index or position of the interval in the day view.

• day – Represents the specific day associated with the interval.

• day_index – Index of the day this interval is a part of, in a week or month view.

• events – Array of events specific to this interval.

• interval_divisions – Number of subdivisions within this interval.

• interval_duration – Duration of this specific interval in minutes.

• interval_height – Height of the interval in pixels in the calendar view.

• interval_format – Formatting rule for displaying the interval, as a string or function.

• interval_start – Starting time for this specific interval.

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

Bases: AbstractElement

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

Parameters:

• all_day – Indicates whether the event spans the entire day.

• interval – The specific time interval this event is associated with.

• interval_divisions – Number of subdivisions within the interval for this event.

• interval_duration – Duration of the interval in which this event occurs, in minutes.

• interval_height – Height of the interval in the calendar view, in pixels.

• event – The event object associated with this calendar interval.

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

Bases: AbstractElement

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

Parameters:

• title – Specify a title text for the component.

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

• color – See description here.

• day – Represents the specific day in the month view of the calendar.

• disabled – Removes the ability to click or target the component.

• events – Array of events associated with this specific day.

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

Bases: AbstractElement

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

Parameters:

• title – Specify a title text for the component.

• subtitle – Specify a subtitle text for the component.

• text – Specify content text for the component.

• image – Apply a specific background image to the component.

• flat – Removes the card’s elevation.

• append_avatar – See description here.

• append_icon – See description here.

• disabled – Removes the ability to click or target the component.

• hover – See description here.

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

• prepend_avatar – See description here.

• prepend_icon – See description here.

• ripple – See description here.

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the 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.

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

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

• position – Sets the position for the component.

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

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

Bases: AbstractElement

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

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

Bases: AbstractElement

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

Parameters:

• title – Specify a title text for the component.

• subtitle – Specify a subtitle text for the component.

• append_avatar – See description here.

• append_icon – See description here.

• prepend_avatar – See description here.

• prepend_icon – See description here.

• density – Adjusts the vertical height used by the component.

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

Bases: AbstractElement

Vuetify’s VCardSubtitle 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 VCardText 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 VCardTitle 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 VCarousel 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 – Sets the height for the component.

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

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

• continuous – Determines whether carousel is continuous.

• next_icon – The displayed icon for forcing pagination to the next item.

• prev_icon – The displayed icon for forcing pagination to the previous item.

• reverse – Reverse the normal transition direction.

• show_arrows – Displays arrows for next/previous navigation.

• touch – Provide a custom left and right function when swiped left or right.

• direction – The transition direction when changing windows.

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

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

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

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

param alt:

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

type string:

param cover:

Resizes the background image to cover the entire container.

type boolean:

param draggable:

See description here.

type boolean | ‘true’ | ‘false’:

param eager:

Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

type boolean:

param gradient:

See description here.

type string:

param lazy_src:

See description here.

type string:

param options:

See description here.

type IntersectionObserverInit:

param sizes:

See description here.

type string:

param src:

The image URL. This prop is mandatory.

:type | string

{ src: string; srcset: string; lazySrc: string; aspect: number }: :param srcset: See description here. :type string: :param position: See description here. :type string: :param aspect_ratio: Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted. :type string | number: :param content_class: Apply a custom class to the internal content element. :type string: :param inline: Display as an inline element instead of a block, also disables flex-grow. :type boolean: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param transition: See description here. :type string | boolean: :param crossorigin: See description here. :type ‘’ | ‘anonymous’ | ‘use-credentials’: :param referrerpolicy: See description here. :type | ‘no-referrer’

‘no-referrer-when-downgrade’

‘origin’

‘origin-when-cross-origin’

‘same-origin’

‘strict-origin’

‘strict-origin-when-cross-origin’

‘unsafe-url’: :param reverse_transition: Sets the reverse transition. :type string | boolean: :param value: The value used when the component is selected in a group. If not provided, a unique ID will be used. :type any: :param disabled: Prevents the item from becoming active when using the “next” and “prev” buttons or the toggle method. :type boolean: :param selected_class: Configure the active CSS class applied when an item is selected. :type string:

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

Bases: AbstractElement

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

param label:

See description here.

type string:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param type:

Provides the default type for children selection controls.

type string:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param disabled:

Removes the ability to click or target the component.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type unknown:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘input’

‘blur’

‘submit’

‘input lazy’

‘blur lazy’

‘submit lazy’

‘lazy input’

‘lazy blur’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param indeterminate: Sets an indeterminate state for the checkbox. :type boolean: :param indeterminate_icon: The icon used when in an indeterminate state. :type any: :param base_color: See description here. :type string: :param true_value: Sets value for truthy state. :type any: :param false_value: Sets value for falsy state. :type any: :param value: The value used when the component is selected in a group. If not provided, a unique ID will be used. :type any: :param color: See description here. :type string: :param defaults_target: The target component to provide defaults values for. :type string: :param false_icon: The icon used when inactive. :type any: :param true_icon: The icon used when active. :type any: :param ripple: See description here. :type boolean: :param multiple: Changes expected model to an array. :type boolean: :param value_comparator: Apply a custom comparison algorithm to compare model-value and values contains in the items prop. :type (a: any, b: any) => boolean: :param theme: Specify a theme for this component and all of its children. :type string:

Events

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when appended icon is clicked.

param update_focused:

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

param update_modelValue:

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

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

Bases: AbstractElement

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

Parameters:

• label – See description here.

• indeterminate – See description here.

• indeterminate_icon – Icon used when the component is in an indeterminate state.

• type – Provides the default type for children selection controls.

• base_color – See description here.

• true_value – Sets value for truthy state.

• false_value – Sets value for falsy state.

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

• color – See description here.

• disabled – Removes the ability to click or target the component.

• defaults_target – The target component to provide defaults values for.

• error – Puts the input in a manual error state.

• id – Sets the DOM id on the component.

• inline – Puts children inputs into a row.

• false_icon – The icon used when inactive.

• true_icon – The icon used when active.

• ripple – See description here.

• multiple – Changes select to multiple. Accepts array for value.

• name – Sets the component’s name attribute.

• readonly – Puts input in readonly state.

• 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 to compare model-value and values contains in the items prop.

• density – Adjusts the vertical height used by the component.

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

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

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

Bases: AbstractElement

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

Parameters:

• label – Applies a medium size border radius.

• filter – Displays a selection icon when selected.

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

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

• pill – Remove v-avatar padding.

• prepend_avatar – See description here.

• prepend_icon – See description here.

• ripple – See description here.

• value – See description here.

• text – Specify content text for the component.

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

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the component.

• elevation – See description here.

• disabled – Removes the ability to click or target the component.

• selected_class – Configure the active CSS class applied when an 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.

Events

Parameters:

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

• click_close – Emitted when close icon is clicked.

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

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

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

Bases: AbstractElement

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

Parameters:

• column – Remove horizontal pagination and wrap items as needed.

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

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

• 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 multiple items.

• max – Sets a maximum number of selections that can be made.

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

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

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

Parameters:

• icon – See description here.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

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

Parameters:

tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

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

Parameters:

• cols – Sets the default number of columns the component extends. Available options are: 1 -> 12 and auto.

• sm – Changes the number of columns on small and greater breakpoints.

• md – Changes the number of columns on medium and greater breakpoints.

• lg – Changes the number of columns on large and greater breakpoints.

• xl – Changes the number of columns on extra large and greater breakpoints.

• xxl – Changes the number of columns on extra extra large and greater breakpoints.

• offset – Sets the default offset for the column.

• offset_sm – Changes the offset of the component on small and greater breakpoints.

• offset_md – Changes the offset of the component on medium and greater breakpoints.

• offset_lg – Changes the offset of the component on large and greater breakpoints.

• offset_xl – Changes the offset of the component on extra large and greater breakpoints.

• offset_xxl – Changes the offset of the component on extra extra large and greater breakpoints.

• order – See description here.

• order_sm – Changes the order of the component on small and greater breakpoints.

• order_md – Changes the order of the component on medium and greater breakpoints.

• order_lg – Changes the order of the component on large and greater breakpoints.

• order_xl – Changes the order of the component on extra large and greater breakpoints.

• order_xxl – Changes the order of the component on extra extra large and greater breakpoints.

• align_self – See description here.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

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

param canvas_height:

Height of canvas.

type string | number:

param disabled:

Removes the ability to click or target the component.

type boolean:

param dot_size:

Changes the size of the selection dot on the canvas.

type string | number:

param hide_canvas:

Hides canvas.

type boolean:

param hide_sliders:

Hides sliders.

type boolean:

param hide_inputs:

Hides inputs.

type boolean:

param mode:

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

type ‘rgb’ | ‘rgba’ | ‘hsl’ | ‘hsla’ | ‘hex’ | ‘hexa’:

param modes:

Sets available input types.

type (‘rgb’ | ‘rgba’ | ‘hsl’ | ‘hsla’ | ‘hex’ | ‘hexa’)[]:

param show_swatches:

Displays color swatches.

type boolean:

param swatches_max_height:

Sets the maximum height of the swatches section.

type string | number:

param model_value:

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

type string | Record<string, unknown>:

param color:

See description here.

type string:

param border:

Applies border styles to component.

type string | number | boolean:

param width:

Sets the width of the color picker.

type string | number:

param elevation:

See description here.

type string | number:

param position:

Sets the position for the component.

type ‘static’ | ‘relative’ | ‘fixed’ | ‘absolute’ | ‘sticky’:

param rounded:

See description here.

type string | number | boolean:

param tag:

Specify a custom tag used on the root element.

type string:

param theme:

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

type string:

param swatches:

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

:type (

string

number

{ readonly h: number readonly s: number readonly v: number readonly a?: number | undefined }

{ readonly r: number readonly g: number readonly b: number readonly a?: number | undefined }

{ readonly h: number readonly s: number readonly l: number readonly a?: number | undefined }

)[][]:

Events

param update_modelValue:

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

param update_mode:

Selected mode.

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

Bases: AbstractElement

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

param label:

See description here.

type string:

param auto_select_first:

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

type boolean | ‘exact’:

param filter_mode:

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter.

• some: There is at least one match from either the custom filter or the custom key filter.

• every: All columns match either the custom filter or the custom key filter.

• union: There is at least one match from the custom filter, or all columns match the custom key filters.

• intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

  type ‘some’ | ‘every’ | ‘union’ | ‘intersection’:

  param no_filter:

  Disables all item filtering.

  type boolean:

  param custom_filter:

  Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/filter.ts#L19-L19” target=”_blank”>FilterFunction</a>:

  param reverse:

  Reverses the orientation.

  type boolean:

  param flat:

  Removes box shadow when using a variant with elevation.

  type boolean:

  param custom_key_filter:

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

  type unknown:

  param filter_keys:

  Array of specific keys to filter on the item.

  type string | string[]:

  param chips:

  Changes display of selections to chips.

  type boolean:

  param closable_chips:

  See description here.

  type boolean:

  param close_text:

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

  type string:

  param type:

  Sets input type.

  type string:

  param open_text:

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

  type string:

  param eager:

  Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

  type boolean:

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

  type boolean:

  param hide_selected:

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

  type boolean:

  param menu:

  Renders with the menu open by default.

  type boolean:

  param menu_icon:

  Sets the the spin icon.

  type any:

  param menu_props:

  See description here.

  type unknown:

  param id:

  Sets the DOM id on the component.

  type string:

  param disabled:

  Removes the ability to click or target the input.

  type boolean:

  param model_value:

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

  type any:

  param theme:

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

  type string:

  param transition:

  See description here.

  type string | boolean | (TransitionProps & { component:

  Component }):

  param name:

  Sets the component’s name attribute.

  type string:

  param multiple:

  Changes select to multiple. Accepts array for value.

  type boolean:

  param no_data_text:

  Text shown when no items are provided to the component.

  type string:

  param open_on_clear:

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

  type boolean:

  param item_color:

  Sets color of selected items.

  type string:

  param items:

  See description here.

  type any[]:

  param item_title:

  Property on supplied items that contains its title.

  type SelectItemKey<any>:

  param item_value:

  Property on supplied items that contains its value.

  type SelectItemKey<any>:

  param item_children:

  Property on supplied items that contains its children.

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L73-L77” target=”_blank”>SelectItemKey</a>:

  param item_props:

  Props object that will be applied to each item component. true will treat the original object as raw props and pass it directly to the component.

  type SelectItemKey<any>:

  param return_object:

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

  type boolean:

  param value_comparator:

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

  type (a:

  any, b: any) => boolean:

  param autofocus:

  Enables autofocus.

  type boolean:

  param counter:

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

  type string | number | boolean:

  param prefix:

  Displays prefix text.

  type string:

  param placeholder:

  Sets the input’s placeholder text.

  type string:

  param persistent_placeholder:

  Forces placeholder to always be visible.

  type boolean:

  param persistent_counter:

  Forces counter to always be visible.

  type boolean:

  param suffix:

  Displays suffix text.

  type string:

  param role:

  The role attribute applied to the input.

  type string:

  param append_icon:

  See description here.

  type any:

  param center_affix:

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

  type boolean:

  param prepend_icon:

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

  type any:

  param hide_spin_buttons:

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

  type boolean:

  param hint:

  See description here.

  type string:

  param persistent_hint:

  See description here.

  type boolean:

  param messages:

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

  type string | string[]:

  param direction:

  Changes the direction of the input.

  type ‘horizontal’ | ‘vertical’:

  param density:

  Adjusts the vertical height used by the component.

  type ‘default’ | ‘comfortable’ | ‘compact’:

  param error:

  Puts the input in a manual error state.

  type boolean:

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

  type string | string[]:

  param max_errors:

  Control the maximum number of shown errors from validation.

  type string | number:

  param readonly:

  Puts input in readonly state.

  type boolean:

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

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

  param validate_on:

  Change what type of event triggers validation to run.

  :type | ‘lazy’

  ‘blur’

  ‘input’

  ‘submit’

  ‘blur lazy’

  ‘input lazy’

  ‘submit lazy’

  ‘lazy blur’

  ‘lazy input’

  ‘lazy submit’: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param bg_color: See description here. :type string: :param clearable: Allows for the component to be cleared. :type boolean: :param clear_icon: The icon used when the clearable prop is set to true. :type any: :param active: Controls the active state of the item. This is typically used to highlight the component. :type boolean: :param color: See description here. :type string: :param base_color: Sets the color of the input when it is not focused. :type string: :param persistent_clear: Always show the clearable icon when the input is dirty (By default it only shows on hover). :type boolean: :param prepend_inner_icon: See description here. :type any: :param single_line: Label does not move on focus/dirty. :type boolean: :param variant: Applies a distinct style to the component. :type | ‘underlined’

  ‘outlined’

  ‘filled’

  ‘solo’

  ‘solo-inverted’

  ‘solo-filled’

  ‘plain’: :param 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. :type string | boolean: :param rounded: Adds a border radius to the input. :type string | number | boolean: :param counter_value: Function returns the counter display text. :type number | ((value: any) => number): :param model_modifiers: FOR INTERNAL USE ONLY :type unknown: :param delimiters: Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys. :type string[]:

  Events

  param update_modelValue:

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

  param click_prepend:

  Emitted when prepended icon is clicked.

  param click_append:

  Emitted when append icon is clicked.

  param update_focused:

  Emitted when the input is focused or blurred

  param click_clear:

  Emitted when clearable icon clicked.

  param click_appendInner:

  Emitted when appended inner icon is clicked.

  param click_prependInner:

  Emitted when prepended inner icon is clicked.

  param update_search:

  Event emitted when the search value changes.

  param update_menu:

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

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

Bases: AbstractElement

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

Parameters:

• icon – See description here.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VConfirmEdit 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.

• color – See description here.

• cancel_text – See description here.

• ok_text – See description here.

Events

Parameters:

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

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

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

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

Bases: AbstractElement

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

Parameters:

• fluid – Removes viewport maximum-width size breakpoints.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

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

param active:

Determines whether the counter is visible or not.

type boolean:

param max:

Sets the maximum allowed value.

type string | number:

param value:

Sets the current counter value.

type string | number:

param transition:

See description here.

type | { component:

Component }

string

boolean

(TransitionProps & { component: Component }):

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

Bases: AbstractElement

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

param search:

Text input used to filter items.

type string:

param loading:

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

type boolean:

param items:

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

type any[]:

param item_value:

Property on supplied items that contains its value.

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L73-L77” target=”_blank”>SelectItemKey</a>:

param item_selectable:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L73-L77” target=”_blank”>SelectItemKey</a>:

param return_object:

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

type boolean:

param show_select:

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

type boolean:

param select_strategy:

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

type ‘single’ | ‘page’ | ‘all’:

param page:

The current displayed page number (1-indexed).

type string | number:

param model_value:

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

type any[]:

param value_comparator:

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

type (a:

any, b: any) => boolean:

param sort_by:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/sort.ts#L29-L29” target=”_blank”>SortItem</a>[]:

param multi_sort:

If true then one can sort on multiple properties.

type boolean:

param must_sort:

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

type boolean:

param custom_key_sort:

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

type unknown:

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

type string | number:

param expand_on_click:

Expands item when the row is clicked.

type boolean:

param show_expand:

Shows the expand icon.

type boolean:

param expanded:

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

type string[]:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/sort.ts#L29-L29” target=”_blank”>SortItem</a>[]:

param filter_mode:

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter.

• some: There is at least one match from either the custom filter or the custom key filter.

• every: All columns match either the custom filter or the custom key filter.

• union: There is at least one match from the custom filter, or all columns match the custom key filters.

• intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

  type ‘every’ | ‘some’ | ‘union’ | ‘intersection’:

  param no_filter:

  Disables all item filtering.

  type boolean:

  param custom_filter:

  Function to filter items.

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/filter.ts#L19-L19” target=”_blank”>FilterFunction</a>:

  param custom_key_filter:

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

  type unknown:

  param filter_keys:

  Array of specific keys to filter on the item.

  type string | string[]:

  param tag:

  Specify a custom tag used on the root element.

  type string:

  Events

  param update_modelValue:

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

  param update_groupBy:

  The .sync event for groupBy prop.

  param update_page:

  The .sync event for page prop.

  param update_itemsPerPage:

  The .sync event for itemsPerPage prop.

  param update_sortBy:

  The .sync event for sortBy prop.

  param update_options:

  The .sync event for options prop.

  param update_expanded:

  The .sync event for expanded prop.

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

Bases: AbstractElement

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

param width:

Sets the width for the component.

type string | number:

param cell_props:

See description here.

:type | Record<string, any>

(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param 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. :type string | boolean: :param headers: An array of objects that each describe a header column. See the example below for a definition of all properties. :type {

readonly key?:

‘data-table-group’

‘data-table-select’

‘data-table-expand’

(string & {})

undefined

readonly value?: SelectItemKey readonly title?: string | undefined readonly fixed?: boolean | undefined readonly align?: ‘start’ | ‘end’ | ‘center’ | undefined readonly width?: string | number | undefined readonly minWidth?: string | undefined readonly maxWidth?: string | undefined readonly headerProps?: { readonly [x: string]: any } | undefined readonly cellProps?:

{ readonly [x: string]: any }

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

undefined

readonly sortable?: boolean | undefined readonly sort?: DataTableCompareFunction<any> | undefined readonly filter?: FilterFunction | undefined readonly children?: readonly any[] | undefined

}[]:

param page:

The current displayed page number (1-indexed).

type string | number:

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

type string | number:

param loading_text:

Text shown when the data is loading.

type string:

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

type boolean:

param items:

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

type any[]:

param no_data_text:

Text shown when no items are provided to the component.

type string:

param row_props:

See description here.

:type | Record<string, any>

(( data: Pick<ItemKeySlot<any>, ‘item’ | ‘index’ | ‘internalItem’>, ) => Record<string, any>): :param search: Text input used to filter items. :type string: :param expand_on_click: Expands item when the row is clicked. :type boolean: :param show_expand: Shows the expand toggle in default rows. :type boolean: :param expanded: Whether the item is expanded or not. :type string[]: :param 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. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/sort.ts#L29-L29” target=”_blank”>SortItem</a>[]: :param item_value: Property on supplied items that contains its value. :type SelectItemKey<any>: :param item_selectable: Property on supplied items that indicates whether the item is selectable. :type SelectItemKey<any>: :param return_object: Changes the selection behavior to return the object directly rather than the value specified with item-value. :type boolean: :param show_select: Shows the select checkboxes in both the header and rows (if using default rows). :type boolean: :param select_strategy: Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list). :type ‘page’ | ‘single’ | ‘all’: :param model_value: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. :type unknown: :param value_comparator: Apply a custom comparison algorithm to compare model-value and values contains in the items prop. :type (a: any, b: any) => boolean: :param sort_by: Changes which item property (or properties) should be used for sort order. Can be used with .sync modifier. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/sort.ts#L29-L29” target=”_blank”>SortItem</a>[]: :param multi_sort: If true then one can sort on multiple properties. :type boolean: :param must_sort: If true then one can not disable sorting, it will always switch between ascending and descending. :type boolean: :param custom_key_sort: Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified. :type unknown: :param color: See description here. :type string: :param sticky: Sticks the header to the top of the table. :type boolean: :param sort_asc_icon: Icon used for ascending sort button. :type any: :param sort_desc_icon: Icon used for descending sort button. :type any: :param fixed_header: Fixed header to top of table. :type boolean: :param fixed_footer: Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table. :type boolean: :param height: Set an explicit height of table. :type string | number: :param hover: Adds a hover effects to a table rows. :type boolean: :param density: Adjusts the vertical height of the table rows. :type ‘default’ | ‘comfortable’ | ‘compact’: :param tag: Specify a custom tag used on the root element. :type string: :param theme: Specify a theme for this component and all of its children. :type string: :param filter_mode: Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter.

• some: There is at least one match from either the custom filter or the custom key filter.

• every: All columns match either the custom filter or the custom key filter.

• union: There is at least one match from the custom filter, or all columns match the custom key filters.

• intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

  type ‘every’ | ‘some’ | ‘union’ | ‘intersection’:

  param no_filter:

  Disables all item filtering.

  type boolean:

  param custom_filter:

  Function to filter items.

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/filter.ts#L19-L19” target=”_blank”>FilterFunction</a>:

  param custom_key_filter:

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

  type unknown:

  param filter_keys:

  Array of specific keys to filter on the item.

  type string | string[]:

  param prev_icon:

  Previous icon.

  type string:

  param next_icon:

  Next icon.

  type string:

  param first_icon:

  First icon.

  type string:

  param last_icon:

  Last icon.

  type string:

  param items_per_page_text:

  Text for items-per-page dropdown.

  type string:

  param page_text:

  Label for page number.

  type string:

  param first_page_label:

  Label for first page.

  type string:

  param prev_page_label:

  Label for previous page.

  type string:

  param next_page_label:

  Label for next page.

  type string:

  param last_page_label:

  Label for last page.

  type string:

  param items_per_page_options:

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

  type (number | { title:

  string; value: number })[]:

  param show_current_page:

  Show current page number between prev/next icons.

  type boolean:

  Events

  param update_expanded:

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

  param update_modelValue:

  Emits when the component’s model changes.

  param update_page:

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

  param update_itemsPerPage:

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

  param update_sortBy:

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

  param update_options:

  Emits when one of the options properties is updated.

  param update_groupBy:

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

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

Bases: AbstractElement

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

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

Bases: AbstractElement

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

param cell_props:

See description here.

:type | Record<string, any>

(( data: Pick< ItemKeySlot<unknown>, ‘value’ | ‘index’ | ‘item’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param index: Row index. :type number: :param item: Data (key, index and column values) of the displayed item. :type unknown:

Events

param contextmenu:

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

param dblclick:

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

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

Bases: AbstractElement

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

param cell_props:

See description here.

:type | Record<string, any>

(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param loading: Displays loading slot if set to true :type string | boolean: :param loading_text: Text shown when the data is loading. :type string: :param 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. :type boolean: :param items: An array of strings or objects used for automatically generating children components. :type (<a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/types.ts#L43-L49” target=”_blank”>DataTableItem</a> | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/group.ts#L18-L25” target=”_blank”>Group</a>)[]: :param no_data_text: Text shown when no items are provided to the component. :type string: :param row_props: See description here. :type | Record<string, any>

(( data: Pick<ItemKeySlot<any>, ‘item’ | ‘index’ | ‘internalItem’>, ) => Record<string, any>):

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

Bases: AbstractElement

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

param width:

Sets the width for the component.

type string | number:

param cell_props:

See description here.

:type | Record<string, any>

(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param 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. :type string | boolean: :param headers: An array of objects that each describe a header column. :type {

readonly key?:

‘data-table-group’

‘data-table-select’

‘data-table-expand’

(string & {})

undefined

readonly value?: SelectItemKey readonly title?: string | undefined readonly fixed?: boolean | undefined readonly align?: ‘start’ | ‘end’ | ‘center’ | undefined readonly width?: string | number | undefined readonly minWidth?: string | undefined readonly maxWidth?: string | undefined readonly headerProps?: { readonly [x: string]: any } | undefined readonly cellProps?:

{ readonly [x: string]: any }

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

undefined

readonly sortable?: boolean | undefined readonly sort?: DataTableCompareFunction<any> | undefined readonly filter?: FilterFunction | undefined readonly children?: readonly any[] | undefined

}[]:

param items_length:

Number of all items.

type string | number:

param page:

The current displayed page number (1-indexed).

type string | number:

param items_per_page:

The number of items to display on each page.

type string | number:

param loading_text:

Text shown when the data is loading.

type string:

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

type boolean:

param items:

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

type any[]:

param no_data_text:

Text shown when no items are provided to the component.

type string:

param row_props:

See description here.

:type | Record<string, any>

(( data: Pick<ItemKeySlot<any>, ‘item’ | ‘index’ | ‘internalItem’>, ) => Record<string, any>): :param search: Text input used to filter items. :type string: :param expand_on_click: Expands item when the row is clicked. :type boolean: :param show_expand: Shows the expand icon. :type boolean: :param expanded: Whether the item is expanded or not. :type string[]: :param group_by: Defines the grouping of the table items. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/sort.ts#L29-L29” target=”_blank”>SortItem</a>[]: :param item_value: Property on supplied items that contains its value. :type SelectItemKey<any>: :param item_selectable: Property on supplied items that indicates whether the item is selectable. :type SelectItemKey<any>: :param return_object: Changes the selection behavior to return the object directly rather than the value specified with item-value. :type boolean: :param show_select: Shows the column with checkboxes for selecting items in the list. :type boolean: :param select_strategy: Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list). :type ‘page’ | ‘single’ | ‘all’: :param model_value: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. :type unknown: :param value_comparator: Apply a custom comparison algorithm to compare model-value and values contains in the items prop. :type (a: any, b: any) => boolean: :param sort_by: Array of column keys and sort orders that determines the sort order of the table. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/sort.ts#L29-L29” target=”_blank”>SortItem</a>[]: :param multi_sort: Allows sorting by multiple columns. :type boolean: :param must_sort: Forces sorting on the column(s). :type boolean: :param custom_key_sort: Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified. :type unknown: :param color: See description here. :type string: :param sticky: Sticks the header to the top of the table. :type boolean: :param sort_asc_icon: Icon used for ascending sort button. :type any: :param sort_desc_icon: Icon used for descending sort button. :type any: :param fixed_header: Use the fixed-header prop together with the height prop to fix the header to the top of the table. :type boolean: :param fixed_footer: Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table. :type boolean: :param height: Use the height prop to set the height of the table. :type string | number: :param hover: Will add a hover effect to a table’s row when the mouse is over it. :type boolean: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param tag: Specify a custom tag used on the root element. :type string: :param theme: Specify a theme for this component and all of its children. :type string: :param prev_icon: Previous icon. :type string: :param next_icon: Next icon. :type string: :param first_icon: First icon. :type string: :param last_icon: Last icon. :type string: :param items_per_page_text: Text for items-per-page dropdown. :type string: :param page_text: Label for page number. :type string: :param first_page_label: Label for first page. :type string: :param prev_page_label: Label for previous page. :type string: :param next_page_label: Label for next page. :type string: :param last_page_label: Label for last page. :type string: :param items_per_page_options: Array of options to show in the items-per-page dropdown. :type (number | { title: string; value: number })[]: :param show_current_page: Show current page number between prev/next icons. :type boolean:

Events

param update_expanded:

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

param update_modelValue:

Emits when the component’s model changes.

param update_page:

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

param update_itemsPerPage:

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

param update_sortBy:

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

param update_options:

Emits when one of the options properties is updated.

param update_groupBy:

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

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

Bases: AbstractElement

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

param width:

Sets the width for the component.

type string | number:

param cell_props:

See description here.

:type | Record<string, any>

(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param headers: An array of objects that each describe a header column. :type {

readonly key?:

‘data-table-group’

‘data-table-select’

‘data-table-expand’

(string & {})

undefined

readonly value?: SelectItemKey readonly title?: string | undefined readonly fixed?: boolean | undefined readonly align?: ‘start’ | ‘end’ | ‘center’ | undefined readonly width?: string | number | undefined readonly minWidth?: string | undefined readonly maxWidth?: string | undefined readonly headerProps?: { readonly [x: string]: any } | undefined readonly cellProps?:

{ readonly [x: string]: any }

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

undefined

readonly sortable?: boolean | undefined readonly sort?: DataTableCompareFunction<any> | undefined readonly filter?: FilterFunction | undefined readonly children?: readonly any[] | undefined

}[]:

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

type string | boolean:

param loading_text:

Text shown when the data is loading.

type string:

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

type boolean:

param items:

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

type any[]:

param no_data_text:

Text shown when no items are provided to the component.

type string:

param row_props:

See description here.

:type | Record<string, any>

(( data: Pick<ItemKeySlot<any>, ‘item’ | ‘index’ | ‘internalItem’>, ) => Record<string, any>): :param search: Text input used to filter items. :type string: :param expand_on_click: Expands item when the row is clicked. :type boolean: :param show_expand: Shows the expand icon. :type boolean: :param expanded: Whether the item is expanded or not. :type string[]: :param group_by: Defines the grouping of the table items. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/sort.ts#L29-L29” target=”_blank”>SortItem</a>[]: :param item_value: Property on supplied items that contains its value. :type SelectItemKey<any>: :param item_selectable: Property on supplied items that indicates whether the item is selectable. :type SelectItemKey<any>: :param return_object: Changes the selection behavior to return the object directly rather than the value specified with item-value. :type boolean: :param show_select: Shows the column with checkboxes for selecting items in the list. :type boolean: :param select_strategy: Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list). :type ‘single’ | ‘page’ | ‘all’: :param model_value: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. :type unknown: :param value_comparator: Apply a custom comparison algorithm to compare model-value and values contains in the items prop. :type (a: any, b: any) => boolean: :param sort_by: Array of column keys and sort orders that determines the sort order of the table. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDataTable/composables/sort.ts#L29-L29” target=”_blank”>SortItem</a>[]: :param multi_sort: Allows sorting by multiple columns. :type boolean: :param must_sort: Forces sorting on the column(s). :type boolean: :param custom_key_sort: Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified. :type unknown: :param color: See description here. :type string: :param sticky: Sticks the header to the top of the table. :type boolean: :param sort_asc_icon: Icon used for ascending sort button. :type any: :param sort_desc_icon: Icon used for descending sort button. :type any: :param fixed_header: Use the fixed-header prop together with the height prop to fix the header to the top of the table. :type boolean: :param fixed_footer: Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table. :type boolean: :param height: Use the height prop to set the height of the table. :type string | number: :param hover: Will add a hover effect to a table’s row when the mouse is over it. :type boolean: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param tag: Specify a custom tag used on the root element. :type string: :param theme: Specify a theme for this component and all of its children. :type string: :param item_height: Height in pixels of each item to display. :type string | number: :param filter_mode: Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter.

• some: There is at least one match from either the custom filter or the custom key filter.

• every: All columns match either the custom filter or the custom key filter.

• union: There is at least one match from the custom filter, or all columns match the custom key filters.

• intersection: There is at least one match from the custom filter, and all columns match the custom key filters.

  type ‘every’ | ‘some’ | ‘union’ | ‘intersection’:

  param no_filter:

  Disables all item filtering.

  type boolean:

  param custom_filter:

  Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.

  type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/filter.ts#L19-L19” target=”_blank”>FilterFunction</a>:

  param custom_key_filter:

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

  type unknown:

  param filter_keys:

  Array of specific keys to filter on the item.

  type string | string[]:

  Events

  param update_expanded:

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

  param update_modelValue:

  Emits when the component’s model changes.

  param update_sortBy:

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

  param update_options:

  Emits when one of the options properties is updated.

  param update_groupBy:

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

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

Bases: AbstractElement

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

Parameters:

• header – Text shown when no display-date is set.

• title – Specify a title text for the component.

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

• disabled – Removes the ability to click or target the component.

• next_icon – Sets the icon for next month/year button.

• prev_icon – Sets the icon for previous month/year button.

• mode_icon – See description here.

• text – Specify content text for the component.

• view_mode – See description here.

• month – See description here.

• year – See description here.

• color – See description here.

• hide_weekdays – See description here.

• multiple – Allow the selection of multiple dates.

• show_week – Toggles visibility of the week numbers in the body of the calendar.

• allowed_dates – Restricts which dates can be selected.

• show_adjacent_months – Toggles visibility of days from previous and next months.

• weekdays – See description here.

• display_value – See description here.

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

• max – Maximum allowed date/month (ISO 8601 format).

• min – Minimum allowed date/month (ISO 8601 format).

• height – Sets the height for the component.

• bg_color – See description here.

• landscape – See description here.

• hide_header – See description here.

• border – Applies border styles to 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 – Width of the picker.

• elevation – See description here.

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

• position – Sets the position for the component.

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

Events

Parameters:

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

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

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

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

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

Bases: AbstractElement

Vuetify’s VDatePickerControls component. See more info and examples here.

Parameters:

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

• disabled – Removes the ability to click or target the component.

• next_icon – See description here.

• prev_icon – See description here.

• mode_icon – See description here.

• text – Specify content text for the component.

• view_mode – See description here.

Events

Parameters:

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

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

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

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

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

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

Bases: AbstractElement

Vuetify’s VDatePickerHeader component. See more info and examples here.

Parameters:

• append_icon – See description here.

• color – See description here.

• header – See description here.

• transition – See description here.

Events

Parameters:

click_append – Emitted when appended icon is clicked.

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

Bases: AbstractElement

Vuetify’s VDatePickerMonth component. See more info and examples here.

Parameters:

• color – See description here.

• hide_weekdays – See description here.

• multiple – See description here.

• show_week – See description here.

• allowed_dates – See description here.

• disabled – Removes the ability to click or target the component.

• month – See description here.

• show_adjacent_months – See description here.

• year – See description here.

• weekdays – See description here.

• display_value – See description here.

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

• max – See description here.

• min – See description here.

Events

Parameters:

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

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

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

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

Bases: AbstractElement

Vuetify’s VDatePickerMonths component. See more info and examples here.

Parameters:

• color – See description here.

• height – Sets the height for the component.

• 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.VDatePickerYears(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VDatePickerYears component. See more info and examples here.

Parameters:

• color – See description here.

• height – Sets the height for the component.

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

• min – See description here.

• max – See description here.

Events

Parameters:

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

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

Bases: AbstractElement

Vuetify’s VDefaultsProvider component. See more info and examples here.

param disabled:

Turns off all calculations of new default values for improved performance in situations where defaults propagation isn’t necessary.

type boolean:

param reset:

Reset the default values up the nested chain by {n} amount.

type string | number:

param root:

Force current defaults to match the application root defaults.

type string | boolean:

param scoped:

Prevents the ability for default values to be inherited from parent components.

type boolean:

param defaults:

Specify new default prop values for components. Keep in mind that this will be merged with previously defined values.

:type {

global: Record<string, unknown> [string]: Record<string, unknown>

}:

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

Bases: AbstractElement

Vuetify’s VDialog component. See more info and examples here.

param activator:

Explicitly sets the overlay’s activator.

type Element | ‘parent’ | (string & {}) | ComponentPublicInstance:

param fullscreen:

Changes layout for fullscreen display.

type boolean:

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

type boolean:

param scrollable:

See description here.

type boolean:

param absolute:

Applies position: absolute to the content element.

type boolean:

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

type boolean:

param contained:

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

type boolean:

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

type any:

param content_props:

Apply custom properties to the content.

type any:

param disabled:

Removes the ability to click or target the component.

type boolean:

param no_click_animation:

Disables the bounce effect when clicking outside of a v-dialog’s content when using the persistent prop.

type boolean:

param model_value:

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

type boolean:

param persistent:

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

type boolean:

param scrim:

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

type string | boolean:

param z_index:

The z-index used for the component.

type string | number:

param target:

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

:type | Element

‘parent’

‘cursor’

(string & {})

ComponentPublicInstance

[number, number]: :param activator_props: Apply custom properties to the activator. :type unknown: :param open_on_click: Activate the component when the activator is clicked. :type boolean: :param open_on_hover: Designates whether component should activate when its activator is hovered. :type boolean: :param open_on_focus: Activate the component when the activator is focused. :type boolean: :param close_on_content_click: Closes component when you click on its content. :type boolean: :param close_delay: Milliseconds to wait before closing component. Only applies to hover and focus events. :type string | number: :param open_delay: Milliseconds to wait before opening component. Only applies to hover and focus events. :type string | number: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param eager: Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. :type boolean: :param location_strategy: A function used to specifies how the component should position relative to its activator. :type ‘static’ | ‘connected’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L36-L40” target=”_blank”>LocationStrategyFn</a>: :param location: Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a>: :param origin: See description here. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a> | ‘auto’ | ‘overlap’: :param offset: A single value that offsets content away from the target based upon what side it is on. :type string | number | number[]: :param scroll_strategy: Strategy used when the component is activate and user scrolls. :type ‘none’ | ‘close’ | ‘block’ | ‘reposition’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L17-L17” target=”_blank”>ScrollStrategyFn</a>: :param theme: Specify a theme for this component and all of its children. :type string: :param transition: See description here. :type | { component: Component }

string

boolean

(TransitionProps & { component: Component }): :param attach: Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. :type string | boolean | Element:

Events

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VDialogBottomTransition component. See more info and examples here.

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

target – See description here.

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

Bases: AbstractElement

Vuetify’s VDivider component. See more info and examples here.

Parameters:

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

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

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

Bases: AbstractElement

Vuetify’s VExpandTransition component. See more info and examples here.

Parameters:

• disabled – Removes the ability to click or target the component.

• mode – See description here.

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

Bases: AbstractElement

Vuetify’s VExpandXTransition component. See more info and examples here.

Parameters:

• disabled – Removes the ability to click or target the component.

• mode – See description here.

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

Bases: AbstractElement

Vuetify’s VExpansionPanel component. See more info and examples here.

Parameters:

• title – Specify a title text for the component.

• text – Specify content text for the component.

• bg_color – See description here.

• 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 an item is selected.

• eager – Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

• rounded – See description here.

• tag – Specify a custom tag used on the root element.

• color – See description here.

• expand_icon – Icon used when the expansion panel is in a expandable state.

• collapse_icon – Icon used when the expansion panel is in a collapsable state.

• hide_actions – Hide the expand icon in the content title.

• static – See description here.

• ripple – See description here.

• readonly – Makes the expansion-panel content read only.

Events

Parameters:

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

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

Bases: AbstractElement

Vuetify’s VExpansionPanelText component. See more info and examples here.

Parameters:

eager – Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

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

Bases: AbstractElement

Vuetify’s VExpansionPanelTitle component. See more info and examples here.

Parameters:

• color – See description here.

• expand_icon – Icon used when the expansion panel is in a expandable state.

• collapse_icon – Icon used when the expansion panel is in a collapsable state.

• hide_actions – Hide the expand icon in the content title.

• static – See description here.

• ripple – See description here.

• readonly – See description here.

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

Bases: AbstractElement

Vuetify’s VExpansionPanels component. See more info and examples here.

Parameters:

• color – See description here.

• static – See description here.

• variant – Applies a distinct style to the component.

• readonly – Makes the entire expansion-panel read only.

• 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 multiple items.

• max – Sets a maximum number of selections that can be made.

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

• 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.VFabTransition(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VFabTransition component. See more info and examples here.

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

param label:

See description here.

type string:

param id:

Sets the DOM id on the component.

type string:

param focused:

Forces a focused state styling on the component.

type boolean:

param reverse:

Reverses the orientation.

type boolean:

param flat:

Removes box shadow when using a variant with elevation.

type boolean:

param append_inner_icon:

See description here.

type any:

param bg_color:

See description here.

type string:

param clearable:

Allows for the component to be cleared.

type boolean:

param clear_icon:

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

type any:

param active:

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

type boolean:

param center_affix:

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

type boolean:

param color:

See description here.

type string:

param base_color:

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

type string:

param dirty:

Manually apply the dirty state styling.

type boolean:

param disabled:

Removes the ability to click or target the input.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

param persistent_clear:

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

type boolean:

param prepend_inner_icon:

See description here.

type any:

param single_line:

Label does not move on focus/dirty.

type boolean:

param variant:

Applies a distinct style to the component.

:type | ‘underlined’

‘outlined’

‘filled’

‘solo’

‘solo-inverted’

‘solo-filled’

‘plain’: :param 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. :type string | boolean: :param rounded: See description here. :type string | number | boolean: :param theme: Specify a theme for this component and all of its children. :type string: :param model_value: The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. :type unknown:

Events

param update_focused:

Emitted when the input is focused or blurred

param click_clear:

Emitted when clearable icon clicked.

param click_appendInner:

Emitted when appended inner icon is clicked.

param click_prependInner:

Emitted when prepended inner icon is clicked.

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VFieldLabel component. See more info and examples here.

Parameters:

floating – Elevates the label above the slotted content.

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

Bases: AbstractElement

Vuetify’s VFileInput component. See more info and examples here.

param label:

See description here.

type string:

param counter:

Displays the number of selected files.

type boolean:

param flat:

Removes box shadow when using a variant with elevation.

type boolean:

param chips:

Changes display of selections to chips.

type boolean:

param counter_size_string:

See description here.

type string:

param counter_string:

See description here.

type string:

param multiple:

Adds the multiple attribute to the input, allowing multiple file selections.

type boolean:

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

type boolean | 1000 | 1024:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param reverse:

Reverses the orientation.

type boolean:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param disabled:

Removes the ability to click or target the input.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type File[]:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param append_inner_icon: See description here. :type any: :param bg_color: See description here. :type string: :param clearable: Allows for the component to be cleared. :type boolean: :param clear_icon: The icon used when the clearable prop is set to true. :type any: :param active: Controls the active state of the item. This is typically used to highlight the component. :type boolean: :param color: See description here. :type string: :param base_color: Sets the color of the input when it is not focused. :type string: :param dirty: Manually apply the dirty state styling. :type boolean: :param persistent_clear: Always show the clearable icon when the input is dirty (By default it only shows on hover). :type boolean: :param prepend_inner_icon: See description here. :type any: :param single_line: Label does not move on focus/dirty. :type boolean: :param variant: Applies a distinct style to the component. :type | ‘underlined’

‘outlined’

‘filled’

‘solo’

‘solo-inverted’

‘solo-filled’

‘plain’: :param 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. :type string | boolean: :param rounded: See description here. :type string | number | boolean: :param theme: Specify a theme for this component and all of its children. :type string:

Events

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when append icon is clicked.

param update_focused:

Emitted when the input is focused or blurred

param click_clear:

Emitted when clearable icon clicked.

param click_appendInner:

Emitted when appended inner icon is clicked.

param click_prependInner:

Emitted when prepended inner icon is clicked.

param click_control:

Emitted when the main input is clicked.

param mousedown_control:

Event that is emitted when using mousedown on the main control area.

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VFooter component. See more info and examples here.

Parameters:

• app – Determines the position of the footer. If true, the footer would be given a fixed position at the bottom of the viewport. If false, the footer is set to the bottom of the page.

• color – See description here.

• height – Sets the height for the component.

• border – Applies border styles to component.

• elevation – See description here.

• name – Assign a specific name for layout registration.

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

• absolute – Applies position: absolute to the component.

• 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.VForm(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VForm component. See more info and examples here.

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

type boolean:

param disabled:

Puts all children inputs into a disabled state.

type boolean:

param fast_fail:

Stop validation as soon as any rules fail.

type boolean:

param readonly:

Puts all children inputs into a readonly state.

type boolean:

param validate_on:

Changes the events in which validation occurs.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’:

Events

param update_modelValue:

Event emitted when the form’s validity changes.

param submit:

Emitted when form is submitted.

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

Bases: AbstractElement

Vuetify’s VHover component. See more info and examples here.

Parameters:

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

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

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

Parameters:

• color – See description here.

• start – Applies margin at the end of the component.

• end – Applies margin at the start of the component.

• icon – 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.

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

Bases: AbstractElement

Vuetify’s VImg component. See more info and examples here.

param alt:

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

type string:

param cover:

Resizes the background image to cover the entire container.

type boolean:

param draggable:

See description here.

type boolean | ‘true’ | ‘false’:

param eager:

Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

type boolean:

param gradient:

See description here.

type string:

param lazy_src:

See description here.

type string:

param options:

See description here.

type IntersectionObserverInit:

param sizes:

See description here.

type string:

param src:

The image URL. This prop is mandatory.

:type | string

{ src: string; srcset: string; lazySrc: string; aspect: number }: :param srcset: See description here. :type string: :param position: See description here. :type string: :param aspect_ratio: Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted. :type string | number: :param content_class: Apply a custom class to the internal content element. :type string: :param inline: Display as an inline element instead of a block, also disables flex-grow. :type boolean: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param transition: See description here. :type string | boolean | (TransitionProps & { component: Component }): :param crossorigin: See description here. :type ‘’ | ‘anonymous’ | ‘use-credentials’: :param referrerpolicy: See description here. :type | ‘no-referrer’

‘no-referrer-when-downgrade’

‘origin’

‘origin-when-cross-origin’

‘same-origin’

‘strict-origin’

‘strict-origin-when-cross-origin’

‘unsafe-url’:

Events

param error:

Emitted if the image fails to load.

param loadstart:

Emitted when the image starts to load.

param load:

Emitted when the image is loaded.

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

Bases: AbstractElement

Vuetify’s VInfiniteScroll component. See more info and examples here.

Parameters:

• color – See description here.

• direction – Specifies if scroller is vertical or horizontal.

• side – Specifies the side where new content should appear. Either the start, end, or both sides.

• mode – Specifies if content should load automatically when scrolling (intersect) or manually (manual).

• margin – Value sent to the intersection observer. Will make the observer trigger earlier, by the margin (px) value supplied.

• load_more_text – Text shown in default load more button, when in manual mode.

• empty_text – Text shown when there is no more content to load.

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

Events

Parameters:

load – Emitted when reaching the start / end threshold, or if triggered when using manual mode.

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

Bases: AbstractElement

Vuetify’s VInput component. See more info and examples here.

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param disabled:

Removes the ability to click or target the component.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param label:

See description here.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type unknown:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’:

Events

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when appended icon is clicked.

param update_focused:

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

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VItem 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 an item is selected.

Events

Parameters:

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

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

Bases: AbstractElement

Vuetify’s VItemGroup component. See more info and examples 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 multiple 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 VKbd 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 VLabel component. See more info and examples here.

Parameters:

• text – Specify content text for the component.

• clickable – Changes the cursor to a pointer when the mouse is over the element.

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

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

Bases: AbstractElement

Vuetify’s VLayout component. See more info and examples here.

Parameters:

• full_height – Sets the component height to 100%.

• overlaps – FOR INTERNAL USE ONLY

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

Bases: AbstractElement

Vuetify’s VLayoutItem component. See more info and examples here.

Parameters:

• position – See description here.

• size – Sets the height and width of the component.

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

• name – Assign a specific name for layout registration.

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

• absolute – Applies position: absolute to the component.

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

Bases: AbstractElement

Vuetify’s VLazy 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.

• options – See description here.

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

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

Parameters:

• icon – See description here.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VList component. See more info and examples here.

param base_color:

See description here.

type string:

param active_color:

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

type string:

param active_class:

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

type string:

param bg_color:

See description here.

type string:

param disabled:

Puts all children inputs into a disabled state.

type boolean:

param lines:

See description here.

type false | ‘one’ | ‘two’ | ‘three’:

param slim:

Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation.

type boolean:

param nav:

See description here.

type boolean:

param mandatory:

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

type boolean:

param select_strategy:

Affects how items with children behave when selected.

• leaf: Only leaf nodes (items without children) can be selected.

• independent: All nodes can be selected whether they have children or not.

• classic: Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.

  :type | ‘single-leaf’

  ‘leaf’

  ‘independent’

  ‘single-independent’

  ‘classic’

  <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/selectStrategies.ts#L5-L12” target=”_blank”>SelectStrategyFn</a>: :param open_strategy: Affects how items with children behave when expanded.

• multiple: Any number of groups can be open at once.

• single: Only one group at each level can be open, opening a group will cause others to close.

• list: Multiple, but all other groups will close when an item is selected.

  :type | ‘single’

  ‘multiple’

  ‘list’

  { open: <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/openStrategies.ts#L1-L8” target=”_blank”>OpenStrategyFn</a>; select: <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/openStrategies.ts#L10-L18” target=”_blank”>OpenSelectStrategyFn</a> }: :param opened: An array containing the values of currently opened groups. Can be two-way bound with v-model:opened. :type unknown[]: :param selected: An array containing the values of currently selected items. Can be two-way bound with v-model:selected. :type unknown[]: :param border: Applies border styles to component. :type string | number | boolean: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param elevation: See description here. :type string | number: :param item_type: See description here. :type string: :param items: See description here. :type any[]: :param item_title: Property on supplied items that contains its title. :type SelectItemKey<any>: :param item_value: Property on supplied items that contains its value. :type SelectItemKey<any>: :param item_children: Property on supplied items that contains its children. :type SelectItemKey<any>: :param item_props: Props object that will be applied to each item component. true will treat the original object as raw props and pass it directly to the component. :type SelectItemKey<any>: :param return_object: Changes the selection behavior to return the object directly rather than the value specified with item-value. :type boolean: :param value_comparator: Apply a custom comparison algorithm to compare model-value and values contains in the items prop. :type (a: any, b: any) => boolean: :param rounded: See description here. :type string | number | boolean: :param tag: Specify a custom tag used on the root element. :type string: :param theme: Specify a theme for this component and all of its children. :type string: :param color: See description here. :type string: :param variant: Applies a distinct style to the component. :type ‘flat’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘text’ | ‘plain’:

  Events

  param update_selected:

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

  param update_opened:

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

  param click_open:

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

  param click_select:

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

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

Bases: AbstractElement

Vuetify’s VListGroup component. See more info and examples here.

Parameters:

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

• base_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 – See description here.

• fluid – See description here.

• subgroup – See description here.

• title – Specify a title text for the component.

• value – Expands / Collapse the list-group.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VListImg 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 VListItem component. See more info and examples here.

Parameters:

• title – See description here.

• subtitle – Specify a subtitle text for the component.

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

• active_class – See description here.

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

• append_avatar – See description here.

• append_icon – See description here.

• base_color – See description here.

• disabled – Removes the ability to click or target the component.

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

• nav – See description here.

• prepend_avatar – See description here.

• prepend_icon – See description here.

• ripple – See description here.

• value – The value used for selection.

• slim – See description here.

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the 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.

• 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//packages/api-generator/src/locale/en/VListItem.json))

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

Bases: AbstractElement

Vuetify’s VListItemAction component. See more info and examples here.

Parameters:

• start – Applies margin at the end of the component.

• end – Applies margin at the start of the component.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VListItemMedia component. See more info and examples here.

Parameters:

• start – Applies margin at the end of the component.

• end – Applies margin at the start of the component.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VListItemSubtitle component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VListItemTitle 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 VListSubheader component. See more info and examples here.

Parameters:

• color – See description here.

• inset – See description here.

• sticky – See description here.

• title – Specify a title text for the component.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VLocaleProvider component. See more info and examples here.

Parameters:

• locale – See description here.

• fallback_locale – See description here.

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

• rtl – See description here.

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

Bases: AbstractElement

Vuetify’s VMain component. See more info and examples here.

Parameters:

• scrollable – See description here.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VMenu component. See more info and examples here.

param activator:

Explicitly sets the overlay’s activator.

type Element | ‘parent’ | (string & {}) | ComponentPublicInstance:

param id:

See description here.

type string:

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

type boolean:

param contained:

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

type boolean:

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

type any:

param content_props:

Apply custom properties to the content.

type any:

param disabled:

Removes the ability to click or target the component.

type boolean:

param no_click_animation:

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

type boolean:

param model_value:

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

type boolean:

param persistent:

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

type boolean:

param scrim:

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

type string | boolean:

param z_index:

The z-index used for the component.

type string | number:

param target:

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

:type | Element

‘parent’

‘cursor’

(string & {})

ComponentPublicInstance

[number, number]: :param activator_props: Apply custom properties to the activator. :type unknown: :param open_on_click: Designates whether menu should open on activator click. :type boolean: :param open_on_hover: Designates whether menu should open on activator hover. :type boolean: :param open_on_focus: Activate the component when the activator is focused. :type boolean: :param close_on_content_click: Designates if menu should close when its content is clicked. :type boolean: :param close_delay: Milliseconds to wait before closing component. Only works with the open-on-hover prop. :type string | number: :param open_delay: Milliseconds to wait before opening component. Only works with the open-on-hover prop. :type string | number: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. Use auto to use the activator width. :type string | number: :param width: Sets the width for the component. :type string | number: :param eager: Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. :type boolean: :param location_strategy: A function used to specifies how the component should position relative to its activator. :type ‘static’ | ‘connected’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L36-L40” target=”_blank”>LocationStrategyFn</a>: :param location: Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a>: :param origin: See description here. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a> | ‘auto’ | ‘overlap’: :param offset: A single value that offsets content away from the target based upon what side it is on. :type string | number | number[]: :param scroll_strategy: Strategy used when the component is activate and user scrolls. :type ‘none’ | ‘close’ | ‘block’ | ‘reposition’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L17-L17” target=”_blank”>ScrollStrategyFn</a>: :param theme: Specify a theme for this component and all of its children. :type string: :param transition: See description here. :type | { component: Component }

string

boolean

(TransitionProps & { component: Component }): :param attach: Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator. :type string | boolean | Element:

Events

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VMessages component. See more info and examples here.

param active:

Determines whether the messages are visible or not.

type boolean:

param color:

See description here.

type string:

param messages:

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

type string | string[]:

param transition:

See description here.

type | { component:

Component; leaveAbsolute: boolean; group: boolean }

string

boolean

(TransitionProps & { component: Component }):

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

Bases: AbstractElement

Vuetify’s VNavigationDrawer component. See more info and examples here.

Parameters:

• image – Apply a specific background image to the component.

• color – See description here.

• disable_resize_watcher – Prevents the automatic opening or closing of the drawer when resized, based on whether the device is 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 – Sets the component width to the rail-width value.

• rail_width – Sets the width for the component when rail is enabled.

• scrim – Determines whether an overlay is used when a temporary drawer is open. Accepts true/false to enable background, and string to define color.

• temporary – A temporary drawer sits above its application and uses a scrim (overlay) to darken the background.

• touchless – Disable mobile touch functionality.

• width – Sets the width for the component.

• location – See description here.

• sticky – See description here.

• border – Applies border styles to component.

• mobile_breakpoint – Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the temporary prop, or activate the bottom prop when the breakpoint value is met. Setting the value to 0 will disable this functionality.

• elevation – See description here.

• name – Assign a specific name for layout registration.

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

• absolute – Applies position: absolute to the component.

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

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

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

Bases: AbstractElement

Vuetify’s VOtpInput component. See more info and examples here.

param length:

The OTP field’s length.

type string | number:

param autofocus:

Automatically focuses the first input on page load

type boolean:

param divider:

Specifies the dividing character between items.

type string:

param focus_all:

Puts all inputs into a focus state when any are focused

type boolean:

param label:

See description here.

type string:

param type:

Supported types: text, password, number.

type ‘number’ | ‘text’ | ‘password’:

param model_value:

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

type string | number:

param placeholder:

Sets the input’s placeholder text.

type string:

param height:

Sets the height for the component.

type string | number:

param max_height:

Sets the maximum height for the component.

type string | number:

param max_width:

Sets the maximum width for the component.

type string | number:

param min_height:

Sets the minimum height for the component.

type string | number:

param min_width:

Sets the minimum width for the component.

type string | number:

param width:

Sets the width for the component.

type string | number:

param focused:

Forces a focused state styling on the component.

type boolean:

param bg_color:

See description here.

type string:

param color:

See description here.

type string:

param base_color:

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

type string:

param disabled:

Removes the ability to click or target the input.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

param variant:

Applies a distinct style to the component.

:type | ‘underlined’

‘outlined’

‘filled’

‘solo’

‘solo-inverted’

‘solo-filled’

‘plain’: :param 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. :type string | boolean: :param rounded: See description here. :type string | number | boolean: :param theme: Specify a theme for this component and all of its children. :type string:

Events

param update_focused:

Emitted when the input is focused or blurred

param finish:

Emitted when the input is filled completely and cursor is blurred.

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VOverlay component. See more info and examples here.

param activator:

Explicitly sets the overlay’s activator.

type Element | ‘parent’ | (string & {}) | ComponentPublicInstance:

param absolute:

Applies position: absolute to the content element.

type boolean:

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

type boolean:

param contained:

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

type boolean:

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

type any:

param content_props:

Apply custom properties to the content.

type any:

param disabled:

Removes the ability to click or target the component.

type boolean:

param no_click_animation:

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

type boolean:

param model_value:

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

type boolean:

param persistent:

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

type boolean:

param scrim:

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

type string | boolean:

param z_index:

The z-index used for the component.

type string | number:

param target:

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

:type | Element

‘parent’

‘cursor’

(string & {})

ComponentPublicInstance

[number, number]: :param activator_props: Apply custom properties to the activator. :type unknown: :param open_on_click: Activate the component when the activator is clicked. :type boolean: :param open_on_hover: Activate the component when the activator is hovered. :type boolean: :param open_on_focus: Activate the component when the activator is focused. :type boolean: :param close_on_content_click: Closes component when you click on its content. :type boolean: :param close_delay: Milliseconds to wait before closing component. Only applies to hover and focus events. :type string | number: :param open_delay: Milliseconds to wait before opening component. Only applies to hover and focus events. :type string | number: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param eager: Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. :type boolean: :param location_strategy: A function used to specifies how the component should position relative to its activator. :type ‘static’ | ‘connected’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L36-L40” target=”_blank”>LocationStrategyFn</a>: :param location: Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a>: :param origin: See description here. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a> | ‘auto’ | ‘overlap’: :param offset: A single value that offsets content away from the target based upon what side it is on. :type string | number | number[]: :param scroll_strategy: Strategy used when the component is activate and user scrolls. :type ‘none’ | ‘close’ | ‘block’ | ‘reposition’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L17-L17” target=”_blank”>ScrollStrategyFn</a>: :param theme: Specify a theme for this component and all of its children. :type string: :param transition: See description here. :type string | boolean | (TransitionProps & { component: Component }): :param attach: Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. :type string | boolean | Element:

Events

param click_outside:

Event that fires when clicking outside an active overlay.

param update_modelValue:

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

param afterLeave:

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

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

Bases: AbstractElement

Vuetify’s VPagination component. See more info and examples here.

Parameters:

• length – The number of pages.

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

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

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the component.

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

Events

Parameters:

• first – Emitted when clicking on go to first button.

• prev – Emitted when clicking on go to previous button.

• next – Emitted when clicking on go to next button.

• last – Emitted when clicking on go to last button.

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

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

Bases: AbstractElement

Vuetify’s VParallax component. See more info and examples here.

Parameters:

scale – See description here.

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

Bases: AbstractElement

Vuetify’s VPicker component. See more info and examples here.

Parameters:

• title – Specify a title text for the component.

• bg_color – See description here.

• landscape – See description here.

• hide_header – See description here.

• color – See description here.

• 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 – Specifies the component’s location. Can combine by using a space separated string.

• position – Sets the position for the component.

• 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.VPickerTitle(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VPickerTitle component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VProgressCircular component. See more info and examples here.

Parameters:

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

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

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

Parameters:

• 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 – Clicking on the progress track will automatically set the value.

• color – See description here.

• height – Sets the height for the component.

• indeterminate – Constantly animates, use when loading progress is unknown.

• max – Sets the maximum value the progress can reach.

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

• reverse – Displays reversed progress (right to left in LTR mode and left to right in RTL).

• 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 – Applies a border radius to the progress bar.

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

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

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

Parameters:

• label – See description here.

• base_color – See description here.

• true_value – Sets value for truthy state.

• false_value – Sets value for falsy state.

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

• color – See description here.

• disabled – Removes the ability to click or target the component.

• defaults_target – The target component to provide defaults values for.

• error – Puts the input in a manual error state.

• id – Sets the DOM id on the component.

• inline – Puts children inputs into a row.

• false_icon – The icon used when inactive.

• true_icon – The icon used when active.

• ripple – See description here.

• type – Provides the default type for children selection controls.

• multiple – Changes select to multiple. Accepts array for value.

• name – Sets the component’s name attribute.

• readonly – Puts input in readonly state.

• 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 to compare model-value and values contains in the items prop.

• density – Adjusts the vertical height used by the component.

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

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

Bases: AbstractElement

Vuetify’s VRadioGroup component. See more info and examples here.

param label:

See description here.

type string:

param height:

Sets the height of the input.

type string | number:

param type:

Provides the default type for children selection controls.

type string:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param disabled:

Removes the ability to click or target the component.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type unknown:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param color: See description here. :type string: :param defaults_target: The target component to provide defaults values for. :type string: :param inline: Displays radio buttons in row. :type boolean: :param false_icon: The icon used when inactive. :type any: :param true_icon: The icon used when active. :type any: :param ripple: See description here. :type boolean: :param value_comparator: Apply a custom comparison algorithm to compare model-value and values contains in the items prop. :type (a: any, b: any) => boolean: :param theme: Specify a theme for this component and all of its children. :type string:

Events

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when appended icon is clicked.

param update_focused:

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

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VRangeSlider component. See more info and examples here.

param label:

See description here.

type string:

param focused:

Forces a focused state styling on the component.

type boolean:

param reverse:

Reverses the slider direction.

type boolean:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param disabled:

Removes the ability to click or target the component.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type (string | number)[]:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param 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. :type boolean | ‘auto’: :param max: Sets the maximum allowed value. :type string | number: :param min: Sets the minimum allowed value. :type string | number: :param step: If greater than 0, sets step interval for ticks. :type string | number: :param thumb_color: Sets the thumb and thumb label color. :type string: :param thumb_label: Show thumb label. If true it shows label when using slider. If set to ‘always’ it always shows label. :type boolean | ‘always’: :param thumb_size: Controls the size of the thumb label. :type string | number: :param show_ticks: Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks. :type boolean | ‘always’: :param ticks: Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks. :type number[] | Record<number, string>: :param tick_size: Controls the size of ticks :type string | number: :param color: See description here. :type string: :param track_color: Sets the track’s color :type string: :param track_fill_color: Sets the track’s fill color :type string: :param track_size: Sets the track’s size (height). :type string | number: :param rounded: See description here. :type string | number | boolean: :param elevation: See description here. :type string | number: :param ripple: See description here. :type boolean: :param strict: Disallows dragging the ending thumb past the starting thumb and vice versa. :type boolean:

Events

param update_focused:

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

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when appended icon is clicked.

param update_modelValue:

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

param end:

Slider value emitted at the end of slider movement.

param start:

Slider value emitted at start of slider movement.

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

Bases: AbstractElement

Vuetify’s VRating component. See more info and examples here.

Parameters:

• length – The amount of items to show.

• name – Sets the component’s name attribute.

• item_aria_label – See description here.

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

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

• empty_icon – The icon displayed when empty.

• full_icon – The icon displayed when full.

• half_increments – Allows the selection of half increments.

• hover – Provides visual feedback when hovering over icons.

• readonly – Removes all hover effects and pointer events.

• 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’.

• ripple – See description here.

• density – Adjusts the vertical height used by the component.

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

Parameters:

• 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 – Apply a custom class to the internal content element.

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

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

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

Bases: AbstractElement

Vuetify’s VRow component. See more info and examples here.

param dense:

Reduces the gutter between `v-col`s.

type boolean:

param no_gutters:

Removes the gutter between `v-col`s.

type boolean:

param align:

See description here.

type ‘start’ | ‘end’ | ‘center’ | ‘baseline’ | ‘stretch’:

param align_sm:

Changes the align-items property on small and greater breakpoints.

type ‘start’ | ‘end’ | ‘center’ | ‘baseline’ | ‘stretch’:

param align_md:

Changes the align-items property on medium and greater breakpoints.

type ‘start’ | ‘end’ | ‘center’ | ‘baseline’ | ‘stretch’:

param align_lg:

Changes the align-items property on large and greater breakpoints.

type ‘start’ | ‘end’ | ‘center’ | ‘baseline’ | ‘stretch’:

param align_xl:

Changes the align-items property on extra large and greater breakpoints.

type ‘start’ | ‘end’ | ‘center’ | ‘baseline’ | ‘stretch’:

param align_xxl:

Changes the align-items property on extra extra large and greater breakpoints.

type ‘start’ | ‘end’ | ‘center’ | ‘baseline’ | ‘stretch’:

param justify_sm:

Changes the justify-content property on small and greater breakpoints.

:type | ‘start’

‘end’

‘center’

‘space-between’

‘space-around’

‘space-evenly’: :param justify_md: Changes the justify-content property on medium and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘space-between’

‘space-around’

‘space-evenly’: :param justify_lg: Changes the justify-content property on large and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘space-between’

‘space-around’

‘space-evenly’: :param justify_xl: Changes the justify-content property on extra large and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘space-between’

‘space-around’

‘space-evenly’: :param justify_xxl: Changes the justify-content property on extra extra large and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘space-between’

‘space-around’

‘space-evenly’: :param align_content_sm: Changes the align-content property on small and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘stretch’

‘space-between’

‘space-around’

‘space-evenly’: :param align_content_md: Changes the align-content property on medium and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘stretch’

‘space-between’

‘space-around’

‘space-evenly’: :param align_content_lg: Changes the align-content property on large and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘stretch’

‘space-between’

‘space-around’

‘space-evenly’: :param align_content_xl: Changes the align-content property on extra large and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘stretch’

‘space-between’

‘space-around’

‘space-evenly’: :param align_content_xxl: Changes the align-content property on extra extra large and greater breakpoints. :type | ‘start’

‘end’

‘center’

‘stretch’

‘space-between’

‘space-around’

‘space-evenly’: :param justify: See description here. :type | ‘start’

‘end’

‘center’

‘stretch’

‘space-between’

‘space-around’

‘space-evenly’: :param align_content: See description here. :type | ‘start’

‘end’

‘center’

‘stretch’

‘space-between’

‘space-around’

‘space-evenly’: :param tag: Specify a custom tag used on the root element. :type string:

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

Bases: AbstractElement

Vuetify’s VScaleTransition component. See more info and examples here.

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

param label:

See description here.

type string:

param chips:

Changes display of selections to chips.

type boolean:

param closable_chips:

See description here.

type boolean:

param close_text:

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

type string:

param type:

Sets input type.

type string:

param open_text:

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

type string:

param eager:

Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

type boolean:

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

type boolean:

param hide_selected:

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

type boolean:

param menu:

Renders with the menu open by default.

type boolean:

param menu_icon:

Sets the the spin icon.

type any:

param menu_props:

See description here.

type unknown:

param flat:

Removes box shadow when using a variant with elevation.

type boolean:

param id:

Sets the DOM id on the component.

type string:

param disabled:

Removes the ability to click or target the input.

type boolean:

param model_value:

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

type any:

param reverse:

Reverses the orientation.

type boolean:

param theme:

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

type string:

param transition:

See description here.

:type | string

boolean

(TransitionProps & { component: Component })

{ component: Component }: :param name: Sets the component’s name attribute. :type string: :param multiple: Changes select to multiple. Accepts array for value. :type boolean: :param no_data_text: Text shown when no items are provided to the component. :type string: :param open_on_clear: When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state. :type boolean: :param item_color: Sets color of selected items. :type string: :param items: See description here. :type any[]: :param item_title: Property on supplied items that contains its title. :type SelectItemKey<any>: :param item_value: See description here. :type SelectItemKey<any>: :param item_children: Property on supplied items that contains its children. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L73-L77” target=”_blank”>SelectItemKey</a>: :param item_props: Props object that will be applied to each item component. true will treat the original object as raw props and pass it directly to the component. :type SelectItemKey<any>: :param return_object: Changes the selection behavior to return the object directly rather than the value specified with item-value. :type boolean: :param value_comparator: Apply a custom comparison algorithm to compare model-value and values contains in the items prop. :type (a: any, b: any) => boolean: :param autofocus: Enables autofocus. :type boolean: :param counter: Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. :type string | number | boolean: :param prefix: Displays prefix text. :type string: :param placeholder: Sets the input’s placeholder text. :type string: :param persistent_placeholder: Forces placeholder to always be visible. :type boolean: :param persistent_counter: Forces counter to always be visible. :type boolean: :param suffix: Displays suffix text. :type string: :param role: The role attribute applied to the input. :type string: :param append_icon: See description here. :type any: :param center_affix: Vertically align appendInner, prependInner, clearIcon and label in the center. :type boolean: :param prepend_icon: Prepends an icon to the outnside the component’s input, uses the same syntax as v-icon. :type any: :param hide_spin_buttons: Hides spin buttons on the input when type is set to number. :type boolean: :param hint: See description here. :type string: :param persistent_hint: See description here. :type boolean: :param messages: Displays a list of messages or a single message if using a string. :type string | string[]: :param direction: Changes the direction of the input. :type ‘horizontal’ | ‘vertical’: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param error: Puts the input in a manual error state. :type boolean: :param 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. :type string | string[]: :param max_errors: Control the maximum number of shown errors from validation. :type string | number: :param readonly: Puts input in readonly state. :type boolean: :param 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. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]: :param validate_on: Change what type of event triggers validation to run. :type | ‘lazy’

‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param bg_color: See description here. :type string: :param clearable: Allows for the component to be cleared. :type boolean: :param clear_icon: The icon used when the clearable prop is set to true. :type any: :param active: Controls the active state of the item. This is typically used to highlight the component. :type boolean: :param color: See description here. :type string: :param base_color: Sets the color of the input when it is not focused. :type string: :param persistent_clear: Always show the clearable icon when the input is dirty (By default it only shows on hover). :type boolean: :param prepend_inner_icon: See description here. :type any: :param single_line: Label does not move on focus/dirty. :type boolean: :param variant: Applies a distinct style to the component. :type | ‘underlined’

‘outlined’

‘filled’

‘solo’

‘solo-inverted’

‘solo-filled’

‘plain’: :param 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. :type string | boolean: :param rounded: Adds a border radius to the input. :type string | number | boolean: :param counter_value: Function returns the counter display text. :type number | ((value: any) => number): :param model_modifiers: FOR INTERNAL USE ONLY :type unknown:

Events

param update_modelValue:

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

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when append icon is clicked.

param update_focused:

Emitted when the input is focused or blurred

param click_clear:

Emitted when clearable icon clicked.

param click_appendInner:

Emitted when appended inner icon is clicked.

param click_prependInner:

Emitted when prepended inner icon is clicked.

param update_menu:

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

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

Bases: AbstractElement

Vuetify’s VSelectionControl component. See more info and examples here.

Parameters:

• label – See description here.

• base_color – See description here.

• true_value – Sets value for truthy state.

• false_value – Sets value for falsy state.

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

• color – See description here.

• disabled – Removes the ability to click or target the component.

• defaults_target – The target component to provide defaults values for.

• error – Puts the input in a manual error state.

• id – Sets the DOM id on the component.

• inline – Puts children inputs into a row.

• false_icon – The icon used when inactive.

• true_icon – The icon used when active.

• ripple – See description here.

• type – Provides the default type for children selection controls.

• multiple – Changes select to multiple. Accepts array for value.

• name – Sets the component’s name attribute.

• readonly – Puts input in readonly state.

• 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 to compare model-value and values contains in the items prop.

• density – Adjusts the vertical height used by the component.

• 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.VSelectionControlGroup(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSelectionControlGroup component. See more info and examples here.

Parameters:

• color – See description here.

• disabled – Removes the ability to click or target the component.

• defaults_target – The target component to provide defaults values for.

• error – Puts the input in a manual error state.

• id – Sets the DOM id on the component.

• inline – Puts children inputs into a row.

• false_icon – The icon used when inactive.

• true_icon – The icon used when active.

• ripple – See description here.

• type – Provides the default type for children selection controls.

• multiple – Changes select to multiple. Accepts array for value.

• name – Sets the component’s name attribute.

• readonly – Puts input in readonly state.

• 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 to compare model-value and values contains in the items prop.

• density – Adjusts the vertical height used by the component.

• 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.VSheet(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSheet component. See more info and examples here.

Parameters:

• color – See description here.

• 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 – Specifies the component’s location. Can combine by using a space separated string.

• position – Sets the position for the component.

• 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.VSkeletonLoader(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VSkeletonLoader component. See more info and examples here.

param boilerplate:

Remove the loading animation from the skeleton.

type boolean:

param color:

See description here.

type string:

param loading:

Applies a loading animation with a on-hover loading cursor. A value of false will only work when there is content in the default slot.

type boolean:

param loading_text:

See description here.

type string:

param type:

A string delimited list of skeleton components to create such as type=”text@3” or type=”card, list-item”. Will recursively generate a corresponding skeleton from the provided string. Also supports short-hand for multiple elements such as article@3 and paragraph@2 which will generate 3 _article_ skeletons and 2 _paragraph_ skeletons. Please see below for a list of available pre-defined options.

:type | ‘avatar’

‘button’

‘chip’

‘divider’

‘heading’

‘image’

‘text’

‘sentences’

‘paragraph’

‘ossein’

‘actions’

‘article’

‘card’

‘card-avatar’

‘date-picker’

‘date-picker-options’

‘date-picker-days’

‘list-item’

‘list-item-avatar’

‘list-item-two-line’

‘list-item-avatar-two-line’

‘list-item-three-line’

‘list-item-avatar-three-line’

‘subtitle’

‘table’

‘table-heading’

‘table-thead’

‘table-tbody’

‘table-row-divider’

‘table-row’

‘table-tfoot’

(string & {})

( | ‘avatar’ | ‘button’ | ‘chip’ | ‘divider’ | ‘heading’ | ‘image’ | ‘text’ | ‘sentences’ | ‘paragraph’ | ‘ossein’ | ‘actions’ | ‘article’ | ‘card’ | ‘card-avatar’ | ‘date-picker’ | ‘date-picker-options’ | ‘date-picker-days’ | ‘list-item’ | ‘list-item-avatar’ | ‘list-item-two-line’ | ‘list-item-avatar-two-line’ | ‘list-item-three-line’ | ‘list-item-avatar-three-line’ | ‘subtitle’ | ‘table’ | ‘table-heading’ | ‘table-thead’ | ‘table-tbody’ | ‘table-row-divider’ | ‘table-row’ | ‘table-tfoot’ | (string & {}) )[]: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param elevation: See description here. :type string | number: :param theme: Specify a theme for this component and all of its children. :type string:

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

Bases: AbstractElement

Vuetify’s VSlideGroup 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.

• mobile_breakpoint – Sets the designated mobile breakpoint for the component.

• 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 multiple items.

• max – Sets a maximum number of selections that can be made.

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

• 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 VSlideGroupItem 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 an item is selected.

Events

Parameters:

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

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

Bases: AbstractElement

Vuetify’s VSlideXReverseTransition component. See more info and examples here.

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

Parameters:

• disabled – Removes the ability to click or target the component.

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

param label:

See description here.

type string:

param focused:

Forces a focused state styling on the component.

type boolean:

param reverse:

Reverses the slider direction.

type boolean:

param disabled:

Removes the ability to click or target the component.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

param readonly:

Puts input in readonly state.

type boolean:

param max:

Sets the maximum allowed value.

type string | number:

param min:

Sets the minimum allowed value.

type string | number:

param step:

If greater than 0, sets step interval for ticks.

type string | number:

param thumb_color:

Sets the thumb and thumb label color.

type string:

param thumb_label:

Show thumb label. If true it shows label when using slider. If set to ‘always’ it always shows label.

type boolean | ‘always’:

param thumb_size:

Controls the size of the thumb label.

type string | number:

param show_ticks:

Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks.

type boolean | ‘always’:

param ticks:

Show track ticks. If true it shows ticks when using slider. If set to ‘always’ it always shows ticks.

type number[] | Record<number, string>:

param tick_size:

Controls the size of ticks

type string | number:

param color:

See description here.

type string:

param track_color:

Sets the track’s color

type string:

param track_fill_color:

Sets the track’s fill color

type string:

param track_size:

Sets the track’s size (height).

type string | number:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param rounded:

See description here.

type string | number | boolean:

param elevation:

See description here.

type string | number:

param ripple:

See description here.

type boolean:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type string | number:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param 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. :type boolean | ‘auto’:

Events

param update_focused:

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

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when appended icon is clicked.

param update_modelValue:

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

param start:

Slider value emitted at start of slider movement.

param end:

Slider value emitted at the end of slider movement.

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

Bases: AbstractElement

Vuetify’s VSnackbar component. See more info and examples here.

param activator:

Explicitly sets the overlay’s activator.

type Element | ‘parent’ | (string & {}) | ComponentPublicInstance:

param text:

Specify content text for the component.

type string:

param multi_line:

Gives the snackbar a larger minimum height.

type boolean:

param timer:

Display a progress bar that counts down until the snackbar closes. Pass a string to set a custom color, otherwise uses info.

type string | boolean:

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

type string | number:

param vertical:

Stacks snackbar content on top of the actions (button).

type boolean:

param location:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a>:

param position:

Sets the position for the component.

type ‘static’ | ‘relative’ | ‘fixed’ | ‘absolute’ | ‘sticky’:

param absolute:

Applies position: absolute to the content element.

type boolean:

param rounded:

See description here.

type string | number | boolean:

param color:

See description here.

type string:

param variant:

Applies a distinct style to the component.

type ‘text’ | ‘flat’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’:

param theme:

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

type string:

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

type boolean:

param contained:

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

type boolean:

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

type any:

param content_props:

Apply custom properties to the content.

type any:

param disabled:

Removes the ability to click or target the component.

type boolean:

param model_value:

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

type boolean:

param z_index:

The z-index used for the component.

type string | number:

param target:

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

:type | Element

‘parent’

‘cursor’

(string & {})

ComponentPublicInstance

[number, number]: :param activator_props: Apply custom properties to the activator. :type unknown: :param open_on_click: Activate the component when the activator is clicked. :type boolean: :param open_on_hover: Activate the component when the activator is hovered. :type boolean: :param open_on_focus: Activate the component when the activator is focused. :type boolean: :param close_on_content_click: Closes component when you click on its content. :type boolean: :param close_delay: Milliseconds to wait before closing component. Only applies to hover and focus events. :type string | number: :param open_delay: Milliseconds to wait before opening component. Only applies to hover and focus events. :type string | number: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param eager: Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. :type boolean: :param location_strategy: A function used to specifies how the component should position relative to its activator. :type ‘static’ | ‘connected’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L36-L40” target=”_blank”>LocationStrategyFn</a>: :param origin: See description here. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a> | ‘auto’ | ‘overlap’: :param offset: A single value that offsets content away from the target based upon what side it is on. :type string | number | number[]: :param transition: See description here. :type string | boolean | (TransitionProps & { component: Component }): :param attach: Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. :type string | boolean | Element:

Events

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VSpacer component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VStepper component. See more info and examples here.

Parameters:

• flat – Removes the stepper’s elevation.

• alt_labels – Places the labels beneath the step.

• bg_color – See description here.

• editable – Marks step as editable.

• hide_actions – Hide actions bar (prev and next buttons).

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

• item_title – Property on supplied items that contains its title.

• item_value – Property on supplied items that contains its value.

• mobile – Forces the stepper into a mobile state, removing labels from stepper items.

• non_linear – Allow user to jump to any step.

• 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 multiple items.

• max – Sets a maximum number of selections that can be made.

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

• disabled – Puts all children components into a disabled state.

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

• color – See description here.

• 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 – Specifies the component’s location. Can combine by using a space separated string.

• position – Sets the position for the component.

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

• prev_text – The text used for the Prev button.

• next_text – The text used for the Next button.

Events

Parameters:

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

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

Bases: AbstractElement

Vuetify’s VStepperActions component. See more info and examples here.

Parameters:

• color – See description here.

• disabled – Removes the ability to click or target the component.

• prev_text – The text used for the Prev button.

• next_text – The text used for the Next button.

Events

Parameters:

• click_prev – Event emitted when clicking the prev button.

• click_next – Event emitted when clicking the next button.

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

Bases: AbstractElement

Vuetify’s VStepperHeader component. See more info and examples here.

Parameters:

tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VStepperItem component. See more info and examples here.

Parameters:

• icon – See description here.

• title – Specify a title text for the component.

• subtitle – Specify a subtitle text for the component.

• color – See description here.

• complete – Marks step as complete.

• complete_icon – Icon to display when step is marked as completed.

• editable – Marks step as editable.

• edit_icon – Icon to display when step is editable.

• error – Puts the stepper item in a manual error state.

• error_icon – Icon to display when step has an error.

• ripple – See description here.

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

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

• disabled – Removes the ability to click or target the component.

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

Events

Parameters:

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

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

Bases: AbstractElement

Vuetify’s VStepperWindow component. See more info and examples here.

Parameters:

• reverse – Reverse the normal transition direction.

• direction – The transition direction when changing windows.

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

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

• 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.VStepperWindowItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VStepperWindowItem component. See more info and examples here.

Parameters:

• reverse_transition – Sets the reverse transition.

• transition – 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 – 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 an item is selected.

• eager – Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

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

Bases: AbstractElement

Vuetify’s VSvgIcon component. See more info and examples here.

Parameters:

• icon – See description here.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VSwitch component. See more info and examples here.

param label:

See description here.

type string:

param indeterminate:

See description here.

type boolean:

param inset:

Enlarge the v-switch track to encompass the thumb.

type boolean:

param flat:

Display component without elevation. Default elevation for thumb is 4dp, flat resets it.

type boolean:

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

type string | boolean:

param type:

Provides the default type for children selection controls.

type string:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param disabled:

Removes the ability to click or target the component.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type unknown:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘input’

‘blur’

‘submit’

‘input lazy’

‘blur lazy’

‘submit lazy’

‘lazy input’

‘lazy blur’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param base_color: See description here. :type string: :param true_value: Sets value for truthy state. :type any: :param false_value: Sets value for falsy state. :type any: :param value: The value used when the component is selected in a group. If not provided, a unique ID will be used. :type any: :param color: See description here. :type string: :param defaults_target: The target component to provide defaults values for. :type string: :param inline: Puts children inputs into a row. :type boolean: :param false_icon: The icon used when inactive. :type any: :param true_icon: The icon used when active. :type any: :param ripple: See description here. :type boolean: :param multiple: Changes expected model to an array. :type boolean: :param value_comparator: Apply a custom comparison algorithm to compare model-value and values contains in the items prop. :type (a: any, b: any) => boolean: :param theme: Specify a theme for this component and all of its children. :type string:

Events

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when appended icon is clicked.

param update_focused:

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

param update_modelValue:

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

param update_indeterminate:

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

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

Bases: AbstractElement

Vuetify’s VSystemBar component. See more info and examples here.

Parameters:

• color – See description here.

• height – Sets the height for the component.

• window – Increases the system bar height to 32px (24px default).

• elevation – See description here.

• name – Assign a specific name for layout registration.

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

• absolute – Applies position: absolute to the component.

• 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.VTab(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTab component. See more info and examples here.

Parameters:

• fixed – Forces component to take up all available space up to their maximum width (300px), and centers it.

• slider_color – See description here.

• hide_slider – Hides the active tab slider component (no exit or enter animation).

• direction – Changes the direction of the tabs. Can be either horizontal or vertical.

• prepend_icon – See description here.

• append_icon – See description here.

• slim – Reduces padding to 0 8px.

• stacked – Displays the tab as a flex-column.

• ripple – See description here.

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

• text – Specify content text for the component.

• border – Applies border styles to component.

• density – Adjusts the vertical height used by the 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.

• disabled – Removes the ability to click or target the component.

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

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

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

• icon – See description here.

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

Bases: AbstractElement

Vuetify’s VTable component. See more info and examples here.

Parameters:

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

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

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

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

• density – Adjusts the vertical height used by the component.

• 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.VTabs(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VTabs component. See more info and examples here.

Parameters:

• symbol – See description here.

• align_tabs – Aligns the tabs to the start, center, or end of container. Also accepts title to align with the v-toolbar-title component.

• color – See description here.

• fixed_tabs – v-tabs-item min-width 160px, max-width 360px.

• items – The items to display in the component. This can be an array of strings or objects with a property title.

• stacked – Apply the stacked prop to all children v-tab components.

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

• center_active – Forces the selected tab to be centered.

• direction – Changes the direction of the tabs. Can be either horizontal or vertical.

• next_icon – Right pagination icon.

• prev_icon – Left pagination icon.

• show_arrows – Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop.

• mobile_breakpoint – Sets the designated mobile breakpoint for the component.

• 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 multiple items.

• max – Sets a maximum number of selections that can be made.

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

• disabled – Puts all children components into a disabled state.

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

• density – Adjusts the vertical height used by the component.

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

param label:

See description here.

type string:

param counter:

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

type string | number | boolean:

param flat:

Removes elevation (shadow) added to element when using the solo or solo-inverted props.

type boolean:

param autofocus:

Enables autofocus.

type boolean:

param prefix:

Displays prefix text.

type string:

param placeholder:

Sets the input’s placeholder text.

type string:

param persistent_placeholder:

Forces placeholder to always be visible.

type boolean:

param persistent_counter:

Forces counter to always be visible.

type boolean:

param suffix:

Displays suffix text.

type string:

param role:

The role attribute applied to the input.

type string:

param type:

Sets input type.

type string:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param reverse:

Reverses the input orientation.

type boolean:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param disabled:

Removes the ability to click or target the input.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type any:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param append_inner_icon: See description here. :type any: :param bg_color: See description here. :type string: :param clearable: Allows for the component to be cleared. :type boolean: :param clear_icon: Applied when using clearable and the input is dirty. :type any: :param active: Controls the active state of the item. This is typically used to highlight the component. :type boolean: :param color: See description here. :type string: :param base_color: Sets the color of the input when it is not focused. :type string: :param dirty: Manually apply the dirty state styling. :type boolean: :param persistent_clear: Always show the clearable icon when the input is dirty (By default it only shows on hover). :type boolean: :param prepend_inner_icon: Prepends an icon inside the component’s input, uses the same syntax as v-icon. :type any: :param single_line: Label does not move on focus/dirty. :type boolean: :param variant: Applies a distinct style to the component. :type | ‘underlined’

‘outlined’

‘filled’

‘solo’

‘solo-inverted’

‘solo-filled’

‘plain’: :param 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. :type string | boolean: :param rounded: Adds a border radius to the input. :type string | number | boolean: :param theme: Specify a theme for this component and all of its children. :type string: :param counter_value: Function returns the counter display text. :type number | ((value: any) => number): :param model_modifiers: FOR INTERNAL USE ONLY :type unknown:

Events

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when append icon is clicked.

param update_focused:

Emitted when the input is focused or blurred

param click_clear:

Emitted when clearable icon clicked.

param click_appendInner:

Emitted when appended inner icon is clicked.

param click_prependInner:

Emitted when prepended inner icon is clicked.

param click_control:

Emitted when the main input is clicked.

param mousedown_control:

Event that is emitted when using mousedown on the main control area.

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VTextarea component. See more info and examples here.

param label:

See description here.

type string:

param counter:

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

type string | number | true:

param flat:

Removes box shadow when using a variant with elevation.

type boolean:

param auto_grow:

Automatically grow the textarea depending on amount of text.

type boolean:

param autofocus:

See description here.

type boolean:

param prefix:

Displays prefix text.

type string:

param placeholder:

Sets the input’s placeholder text.

type string:

param persistent_placeholder:

Forces placeholder to always be visible.

type boolean:

param persistent_counter:

Forces counter to always be visible.

type boolean:

param no_resize:

Remove resize handle.

type boolean:

param rows:

Default row count.

type string | number:

param max_rows:

Specifies the maximum number of row count

type string | number:

param suffix:

Displays suffix text.

type string:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

type any:

param center_affix:

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

type boolean:

param prepend_icon:

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

type any:

param hide_spin_buttons:

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

type boolean:

param hint:

See description here.

type string:

param persistent_hint:

See description here.

type boolean:

param messages:

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

type string | string[]:

param direction:

Changes the direction of the input.

type ‘horizontal’ | ‘vertical’:

param reverse:

Reverses the orientation.

type boolean:

param density:

Adjusts the vertical height used by the component.

type ‘default’ | ‘comfortable’ | ‘compact’:

param disabled:

Removes the ability to click or target the input.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type any:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param focused: Forces a focused state styling on the component. :type boolean: :param 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. :type boolean | ‘auto’: :param append_inner_icon: See description here. :type any: :param bg_color: See description here. :type string: :param clearable: Allows for the component to be cleared. :type boolean: :param clear_icon: The icon used when the clearable prop is set to true. :type any: :param active: Controls the active state of the item. This is typically used to highlight the component. :type boolean: :param color: See description here. :type string: :param base_color: Sets the color of the input when it is not focused. :type string: :param dirty: Manually apply the dirty state styling. :type boolean: :param persistent_clear: Always show the clearable icon when the input is dirty (By default it only shows on hover). :type boolean: :param prepend_inner_icon: See description here. :type any: :param single_line: Label does not move on focus/dirty. :type boolean: :param variant: Applies a distinct style to the component. :type | ‘underlined’

‘outlined’

‘filled’

‘solo’

‘solo-inverted’

‘solo-filled’

‘plain’: :param 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. :type string | boolean: :param rounded: See description here. :type string | number | boolean: :param theme: Specify a theme for this component and all of its children. :type string: :param counter_value: Display the input length but do not provide any validation. :type (value: any) => number: :param model_modifiers: FOR INTERNAL USE ONLY :type unknown:

Events

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when append icon is clicked.

param update_focused:

Emitted when the input is focused or blurred

param click_clear:

Emitted when clearable icon clicked.

param click_appendInner:

Emitted when appended inner icon is clicked.

param click_prependInner:

Emitted when prepended inner icon is clicked.

param click_control:

Emitted when the main input is clicked.

param mousedown_control:

Event that is emitted when using mousedown on the main control area.

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VThemeProvider component. See more info and examples here.

Parameters:

• with_background – See description here.

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

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VTimeline component. See more info and examples here.

Parameters:

• justify – Places timeline line at the center or automatically on the left or right side.

• line_inset – Specifies the distance between the line and the dot of timeline items.

• line_thickness – Thickness of the timeline line.

• line_color – Color of the timeline line.

• density – Adjusts the vertical height used by the component.

• tag – Specify a custom tag used on the root element.

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

• align – Places the timeline dot at the top or center of the timeline item.

• direction – Display timeline in a vertical or horizontal direction.

• side – Display all timeline items on one side of the timeline, either before or after.

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

Parameters:

• icon – See description here.

• dot_color – Color of the item dot.

• 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_color – Color of the icon.

• line_inset – Specifies the distance between the line and the dot of the item.

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

• size – Size of the item dot

• tag – Specify a custom tag used on the root element.

• density – Adjusts the vertical height used by the component.

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

Bases: AbstractElement

Vuetify’s VToolbar component. See more info and examples here.

Parameters:

• image – See description here.

• title – Specify a title text for the component.

• 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 – Adjusts the vertical height used by the component.

• 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 VToolbarItems 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 VToolbarTitle component. See more info and examples here.

Parameters:

• text – Specify content text for the component.

• tag – Specify a custom tag used on the root element.

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

Bases: AbstractElement

Vuetify’s VTooltip component. See more info and examples here.

param activator:

Explicitly sets the overlay’s activator.

type Element | ‘parent’ | (string & {}) | ComponentPublicInstance:

param id:

HTML id attribute of the tooltip overlay. If not set, a globally unique id will be used.

type string:

param text:

Specify content text for the component.

type string:

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

type boolean:

param contained:

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

type boolean:

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

type any:

param content_props:

Apply custom properties to the content.

type any:

param disabled:

Removes the ability to click or target the component.

type boolean:

param no_click_animation:

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

type boolean:

param model_value:

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

type boolean:

param scrim:

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

type string | boolean:

param z_index:

The z-index used for the component.

type string | number:

param target:

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

:type | Element

‘parent’

‘cursor’

(string & {})

ComponentPublicInstance

[number, number]: :param activator_props: Apply custom properties to the activator. :type unknown: :param open_on_click: Designates whether the tooltip should open on activator click. :type boolean: :param open_on_hover: Designates whether the tooltip should open on activator hover. :type boolean: :param open_on_focus: Activate the component when the activator is focused. :type boolean: :param close_on_content_click: Closes component when you click on its content. :type boolean: :param close_delay: Delay (in ms) after which menu closes (when open-on-hover prop is set to true). :type string | number: :param open_delay: Delay (in ms) after which tooltip opens (when open-on-hover prop is set to true). :type string | number: :param height: Sets the height for the component. :type string | number: :param max_height: Sets the maximum height for the component. :type string | number: :param max_width: Sets the maximum width for the component. :type string | number: :param min_height: Sets the minimum height for the component. :type string | number: :param min_width: Sets the minimum width for the component. :type string | number: :param width: Sets the width for the component. :type string | number: :param eager: Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO. :type boolean: :param location_strategy: A function used to specifies how the component should position relative to its activator. :type ‘static’ | ‘connected’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L36-L40” target=”_blank”>LocationStrategyFn</a>: :param location: Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both.. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a>: :param origin: See description here. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a> | ‘auto’ | ‘overlap’: :param offset: A single value that offsets content away from the target based upon what side it is on. :type string | number | number[]: :param scroll_strategy: Strategy used when the component is activate and user scrolls. :type ‘none’ | ‘close’ | ‘block’ | ‘reposition’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/scrollStrategies.ts#L17-L17” target=”_blank”>ScrollStrategyFn</a>: :param theme: Specify a theme for this component and all of its children. :type string: :param transition: See description here. :type string | boolean | (TransitionProps & { component: Component }): :param attach: Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. :type string | boolean | Element:

Events

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VValidation component. See more info and examples here.

param disabled:

Removes the ability to click or target the component.

type boolean:

param error:

Puts the input in a manual error state.

type boolean:

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

type string | string[]:

param max_errors:

Control the maximum number of shown errors from validation.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param label:

See description here.

type string:

param readonly:

Puts input in readonly state.

type boolean:

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

type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/validation.ts#L16-L20” target=”_blank”>ValidationRule</a>[]:

param model_value:

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

type unknown:

param validate_on:

Change what type of event triggers validation to run.

:type | ‘blur’

‘input’

‘submit’

‘blur lazy’

‘input lazy’

‘submit lazy’

‘lazy blur’

‘lazy input’

‘lazy submit’

‘lazy’: :param validation_value: The value used when applying validation rules. :type any: :param focused: Forces a focused state styling on the component. :type boolean:

Events

param update_focused:

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

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VVirtualScroll component. See more info and examples here.

Parameters:

• items – The array of items to display.

• renderless – Disables default component rendering functionality.

• item_height – Height in pixels of each item to display.

• 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 VWindow 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.

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

• reverse – Reverse the normal transition direction.

• show_arrows – Display the “next” and “prev” buttons.

• touch – Provide a custom left and right function when swiped left or right.

• direction – The transition direction when changing windows.

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

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

• 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.VWindowItem(children=None, **kwargs)

Bases: AbstractElement

Vuetify’s VWindowItem component. See more info and examples here.

Parameters:

• reverse_transition – Sets the reverse transition.

• transition – 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 – 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 an item is selected.

• eager – Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

Events

Parameters:

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

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

Transform a dataframe for use with a VDataTable

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