trame.widgets.vuetify3 module

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.

param title:

Specify a title text for the component.

type string:

param text:

Specify content text for the component.

type string:

param border:

Adds a colored border to the component.

type boolean | ‘top’ | ‘end’ | ‘bottom’ | ‘start’:

param border_color:

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

type string:

param closable:

Adds a close icon that can hide the alert.

type boolean:

param close_icon:

Change the default icon used for closable alerts.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param type: Create a specialized alert that uses a contextual color and has a pre-defined icon. :type ‘success’ | ‘info’ | ‘warning’ | ‘error’: :param close_label: See description here. :type string: :param icon: See description here. :type | false
string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param model_value: Controls whether the component is visible or hidden. :type boolean: :param prominent: Displays a larger vertically centered icon to draw more attention. :type 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 location: Specifies the component’s location. Can combine by using a space separated string. :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 rounded: See description here. :type string | number | boolean: :param tile: Removes the component’s border-radius. :type 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 ‘text’ | ‘flat’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’:

Events

param click_close:

Emitted when close icon is clicked.

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

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

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

type string | number | boolean:

param elevation:

See description here.

type string | number:

param rounded:

See description here.

type string | number | boolean:

param tile:

Removes any applied border-radius from the component.

type 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’
‘fully-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.

param symbol:

See description here.

type any:

param flat:

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

type boolean:

param active:

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

type boolean:

param active_color:

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

type string:

param base_color:

Sets the color of component when not focused.

type string:

param prepend_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param append_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param block: Expands the button to 100% of available space. :type boolean: :param readonly: Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard. :type boolean: :param slim: Reduces padding to 0 8px. :type boolean: :param stacked: Displays the button as a flex-column. :type boolean: :param ripple: See description here. :type boolean | { class: string }: :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 text: Specify content text for the component. :type string: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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 disabled: Removes the ability to click or target the component. :type boolean: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :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 location: Specifies the component’s location. Can combine by using a space separated string. :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 rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param href: Designates the component as anchor and applies the href attribute. :type string: :param replace: See description here. :type boolean: :param exact: See description here. :type boolean: :param to: See description here. :type RouteLocationRaw: :param 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. :type string | number: :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’ | ‘text’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’: :param icon: See description here. :type | boolean
string
(string | [string, number])[]
(new () => any)
FunctionalComponent:
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 clear_on_select:

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

type boolean:

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

    See description here.

    type unknown:

    param base_color:

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

    type string:

    param bg_color:

    See description here.

    type string:

    param disabled:

    Removes the ability to click or target the input.

    type boolean:

    param multiple:

    Changes select to multiple. Accepts array for value.

    type boolean:

    param density:

    Adjusts the vertical height used by the component.

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

    param max_width:

    Sets the maximum width 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 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:

    This property currently has no effect.

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

    Adds a border radius to the input.

    type string | number | boolean:

    param tile:

    Removes any applied border-radius from the component.

    type boolean:

    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 | ‘outlined’

    ‘plain’
    ‘underlined’
    ‘filled’
    ‘solo’
    ‘solo-inverted’
    ‘solo-filled’: :param name: Sets the component’s name attribute. :type string: :param menu: Renders with the menu open by default. :type boolean: :param menu_icon: Sets the the spin icon. :type | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param menu_props: See description here. :type unknown: :param id: Sets the DOM id on the component. :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 any: :param transition: See description here. :type string | boolean | (TransitionProps & { component: Component }): :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 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 | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :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 | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :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 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 | ‘eager’
    ‘lazy’
    ‘blur’
    ‘input’
    ‘submit’
    ‘invalid-input’
    ‘blur lazy’
    ‘input lazy’
    ‘submit lazy’
    ‘invalid-input lazy’
    ‘blur eager’
    ‘input eager’
    ‘submit eager’
    ‘invalid-input eager’
    ‘lazy blur’
    ‘lazy input’
    ‘lazy submit’
    ‘lazy invalid-input’
    ‘eager blur’
    ‘eager input’
    ‘eager submit’
    ‘eager invalid-input’: :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 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 | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param active: Controls the active state of the item. This is typically used to highlight the component. :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 | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param single_line: Label does not move on focus/dirty. :type boolean: :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 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.

param start:

Applies margin at the end of the component.

type boolean:

param end:

Applies margin at the start of the component.

type boolean:

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param image: See description here. :type string: :param text: Specify content text for the component. :type string: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :type string | number | 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 tile: Removes any applied border-radius from the component. :type boolean: :param 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. :type string | number: :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’ | ‘text’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’:
class trame.widgets.vuetify3.VBadge(children=None, **kwargs)

Bases: AbstractElement

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

param bordered:

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

type boolean:

param color:

See description here.

type string:

param content:

Text content to show in the badge.

type string | number:

param dot:

Reduce the size of the badge and hide its contents.

type boolean:

param floating:

Elevates the badge above the slotted content.

type boolean:

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param inline: Moves the badge to be inline with the wrapping element. Supports the usage of the left prop. :type boolean: :param label: The aria-label used for the badge. :type string: :param 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. :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 boolean: :param offset_x: Offset the badge on the x-axis. :type string | number: :param offset_y: Offset the badge on the y-axis. :type string | number: :param text_color: See description here. :type string: :param location: Specifies the component’s location. Can combine by using a space separated string. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a>: :param rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type 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 transition: See description here. :type string | boolean | (TransitionProps & { component: Component }):
class trame.widgets.vuetify3.VBanner(children=None, **kwargs)

Bases: AbstractElement

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

param text:

Specify content text for the component.

type string:

param avatar:

Designates a specific src image to pass to the thumbnail.

type string:

param bg_color:

See description here.

type string:

param color:

See description here.

type string:

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param stacked: Forces the banner actions onto a new line. This is not applicable when the banner has lines=”one”. :type boolean: :param sticky: See description here. :type boolean: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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 mobile: Applies the mobile banner styles. :type boolean: :param mobile_breakpoint: Overrides the display configuration default screen size that the component should be considered in mobile. :type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’: :param elevation: See description here. :type string | number: :param location: Specifies the component’s location. Can combine by using a space separated string. :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 ‘sticky’ | ‘static’ | ‘relative’ | ‘fixed’ | ‘absolute’: :param rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type 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 lines: The amount of visible lines of text before it truncates. :type ‘one’ | ‘two’ | ‘three’:
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:
  • base_color – Sets the color of component when not focused.

  • 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 – Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

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

  • elevation – See description here.

  • rounded – See description here.

  • tile – Removes any applied border-radius from the component.

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

Sets the overlay opacity.

type string | number:

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 | string
boolean
(TransitionProps & { component: Component })
{ 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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 tile:

Removes any applied border-radius from the component.

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

param symbol:

See description here.

type any:

param flat:

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

type boolean:

param active:

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

type boolean:

param active_color:

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

type string:

param base_color:

Sets the color of component when not focused.

type string:

param prepend_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param append_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param block: Expands the button to 100% of available space. :type boolean: :param readonly: Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard. :type boolean: :param slim: Reduces padding to 0 8px. :type boolean: :param stacked: Displays the button as a flex-column. :type boolean: :param ripple: See description here. :type boolean | { class: string }: :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 text: Specify content text for the component. :type string: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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 disabled: Removes the ability to click or target the component. :type boolean: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :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 location: Specifies the component’s location. Can combine by using a space separated string. :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 rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param href: Designates the component as anchor and applies the href attribute. :type string: :param replace: See description here. :type boolean: :param exact: See description here. :type boolean: :param to: See description here. :type RouteLocationRaw: :param 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. :type string | number: :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’ | ‘text’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’: :param icon: See description here. :type | boolean
string
(string | [string, number])[]
(new () => any)
FunctionalComponent:

Events

param 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:
  • base_color – Sets the color of component when not focused.

  • divided – See description here.

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

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

  • elevation – See description here.

  • rounded – See description here.

  • tile – Removes any applied border-radius from the component.

  • 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:
  • base_color – Sets the color of component when not focused.

  • divided – See description here.

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

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

  • elevation – See description here.

  • rounded – Round edge buttons.

  • tile – Removes the component’s border-radius.

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

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

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

  • first_day_of_week – See description here.

  • allowed_dates – Determines which dates are selectable.

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

param title:

Specify a title text for the component.

type string | number:

param subtitle:

Specify a subtitle text for the component.

type string | number:

param text:

Specify content text for the component.

type string | number:

param image:

Apply a specific background image to the component.

type string:

param flat:

Removes the card’s elevation.

type boolean:

param append_avatar:

See description here.

type string:

param append_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param disabled: Removes the ability to click or target the component. :type boolean: :param hover: See description here. :type boolean: :param link: Designates that the component is a link. This is automatic when using the href or to prop. :type boolean: :param prepend_avatar: See description here. :type string: :param prepend_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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 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 location: Specifies the component’s location. Can combine by using a space separated string. :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 rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param href: Designates the component as anchor and applies the href attribute. :type string: :param replace: See description here. :type boolean: :param exact: See description here. :type boolean: :param to: See description here. :type RouteLocationRaw: :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 ‘text’ | ‘flat’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’:
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.

param title:

Specify a title text for the component.

type string | number:

param subtitle:

Specify a subtitle text for the component.

type string | number:

param append_avatar:

See description here.

type string:

param append_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prepend_avatar: See description here. :type string: :param prepend_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’:
class trame.widgets.vuetify3.VCardSubtitle(children=None, **kwargs)

Bases: AbstractElement

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

Parameters:
  • opacity – Sets the component’s opacity value

  • 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:
  • opacity – Sets the component’s opacity value

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

param color:

See description here.

type string:

param cycle:

Determines if the carousel should cycle through images.

type boolean:

param delimiter_icon:

Sets icon for carousel delimiter.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param height: Sets the height for the component. :type string | number: :param hide_delimiters: Hides the carousel’s bottom delimiters. :type boolean: :param hide_delimiter_background: Hides the bottom delimiter background. :type boolean: :param interval: The duration between image cycles. Requires the cycle prop. :type string | number: :param progress: Displays a carousel progress bar. Requires the cycle prop and interval. :type string | boolean: :param continuous: Determines whether carousel is continuous. :type boolean: :param next_icon: The displayed icon for forcing pagination to the next item. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: The displayed icon for forcing pagination to the previous item. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param reverse: Reverse the normal transition direction. :type boolean: :param show_arrows: Displays arrows for next/previous navigation. :type string | boolean: :param touch: Provide a custom left and right function when swiped left or right. :type boolean | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/touch/index.ts#L9-L17” target=”_blank”>TouchHandlers</a>: :param direction: The transition direction when changing windows. :type ‘horizontal’ | ‘vertical’: :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 disabled: Removes the ability to click or target the component. :type boolean: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :param mandatory: Forces at least one item to always be selected (if available). :type boolean | ‘force’: :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 vertical_delimiters: Displays carousel delimiters vertically. :type boolean | ‘left’ | ‘right’:

Events

param 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 absolute:

See description here.

type boolean:

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

See description here.

type string:

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:

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

NOTE: This prop has no effect unless either height or aspect-ratio are provided.
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 any: :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 rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :type string: :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’
‘invalid-input’
‘input lazy’
‘blur lazy’
‘submit lazy’
‘invalid-input lazy’
‘input eager’
‘blur eager’
‘submit eager’
‘invalid-input eager’
‘lazy input’
‘lazy blur’
‘lazy submit’
‘lazy invalid-input’
‘eager input’
‘eager blur’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param base_color: Sets the color of the input when it is not focused. :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param true_icon: The icon used when active. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :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:

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.

param label:

See description here.

type string:

param indeterminate:

See description here.

type boolean:

param indeterminate_icon:

Icon used when the component is in an indeterminate state.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param type: Provides the default type for children selection controls. :type string: :param base_color: Sets the color of the input when it is not focused. :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 disabled: Removes the ability to click or target the component. :type boolean: :param defaults_target: The target component to provide defaults values for. :type string: :param error: Puts the input in a manual error state. :type boolean: :param id: Sets the DOM id on the component. :type string: :param inline: Puts children inputs into a row. :type boolean: :param false_icon: The icon used when inactive. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param true_icon: The icon used when active. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :param multiple: Changes select to multiple. Accepts array for value. :type boolean: :param name: Sets the component’s name attribute. :type string: :param readonly: Puts input in readonly state. :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 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 density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param theme: Specify a theme for this component and all of its children. :type string:

Events

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

Bases: AbstractElement

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

param label:

Applies a medium size border radius.

type boolean:

param filter:

Displays a selection icon when selected.

type boolean:

param active_class:

See description here.

type string:

param append_avatar:

See description here.

type string:

param append_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param closable: Adds remove button and then a chip can be closed. :type boolean: :param close_icon: Change the default icon used for close chips. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param close_label: See description here. :type string: :param draggable: Makes the chip draggable. :type boolean: :param filter_icon: Change the default icon used for filter chips. :type string: :param link: Designates that the component is a link. This is automatic when using the href or to prop. :type boolean: :param pill: Remove v-avatar padding. :type boolean: :param prepend_avatar: See description here. :type string: :param prepend_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :param value: See description here. :type any: :param text: Specify content text for the component. :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 boolean: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :type string | number | boolean: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param elevation: See description here. :type string | number: :param disabled: Removes the ability to click or target the component. :type boolean: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :param rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param href: Designates the component as anchor and applies the href attribute. :type string: :param replace: See description here. :type boolean: :param exact: See description here. :type boolean: :param to: See description here. :type RouteLocationRaw: :param 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. :type string | number: :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’ | ‘text’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’:

Events

param clickOnce:

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

param click_close:

Emitted when close icon is clicked.

param update_modelValue:

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

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

param symbol:

See description here.

type any:

param column:

Remove horizontal pagination and wrap items as needed.

type boolean:

param filter:

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

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

Forces the selected chip to be centered.

type boolean:

param direction:

Switch between horizontal and vertical modes.

type ‘horizontal’ | ‘vertical’:

param next_icon:

Specify the icon to use for the next icon.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: Specify the icon to use for the prev icon. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param show_arrows: Force the display of the pagination arrows. :type string | boolean: :param mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type boolean: :param mobile_breakpoint: Sets the designated mobile breakpoint for the component. :type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’: :param tag: Specify a custom tag used on the root element. :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: :param multiple: Allows one to select multiple items. :type boolean: :param max: Sets a maximum number of selections that can be made. :type number: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :param disabled: Puts all children components into a disabled state. :type boolean: :param mandatory: Forces at least one item to always be selected (if available). :type boolean | ‘force’: :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_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.

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param tag: Specify a custom tag used on the root element. :type string:
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:

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

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

Removes any applied border-radius from the component.

type 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 clear_on_select:

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

type boolean:

param type:

Sets input type.

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:

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

    See description here.

    type unknown:

    param base_color:

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

    type string:

    param bg_color:

    See description here.

    type string:

    param disabled:

    Removes the ability to click or target the input.

    type boolean:

    param multiple:

    Changes select to multiple. Accepts array for value.

    type boolean:

    param density:

    Adjusts the vertical height used by the component.

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

    param max_width:

    Sets the maximum width 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 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:

    This property currently has no effect.

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

    Adds a border radius to the input.

    type string | number | boolean:

    param tile:

    Removes any applied border-radius from the component.

    type boolean:

    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 | ‘outlined’

    ‘plain’
    ‘underlined’
    ‘filled’
    ‘solo’
    ‘solo-inverted’
    ‘solo-filled’: :param name: Sets the component’s name attribute. :type string: :param menu: Renders with the menu open by default. :type boolean: :param menu_icon: Sets the the spin icon. :type | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param menu_props: See description here. :type unknown: :param id: Sets the DOM id on the component. :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 any: :param transition: See description here. :type string | boolean | (TransitionProps & { component: Component }): :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 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 | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :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 | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :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 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 | ‘eager’
    ‘lazy’
    ‘blur’
    ‘input’
    ‘submit’
    ‘invalid-input’
    ‘blur lazy’
    ‘input lazy’
    ‘submit lazy’
    ‘invalid-input lazy’
    ‘blur eager’
    ‘input eager’
    ‘submit eager’
    ‘invalid-input eager’
    ‘lazy blur’
    ‘lazy input’
    ‘lazy submit’
    ‘lazy invalid-input’
    ‘eager blur’
    ‘eager input’
    ‘eager submit’
    ‘eager invalid-input’: :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 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 | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param active: Controls the active state of the item. This is typically used to highlight the component. :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 | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param single_line: Label does not move on focus/dirty. :type boolean: :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 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.

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param tag: Specify a custom tag used on the root element. :type string:
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 – Text for the cancel button

  • ok_text – Text for the ok button

Events

Parameters:
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.

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

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

Removes the ability to click or target the component.

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 | string

boolean
(TransitionProps & { component: Component })
{ 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 unknown[]:

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#L30-L30” 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#L30-L30” 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:

    param transition:

    See description here.

    :type | string

    boolean
    (TransitionProps & { component: Component })
    { component: Component; hideOnLeave: boolean }:

    Events

    param update_modelValue:

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

    param update_expanded:

    The .sync event for expanded prop.

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

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

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

See description here.

type unknown:

param cell_props:

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

:type | Record<string, any>

(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type boolean: :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<any> readonly title?: string | undefined readonly fixed?: boolean | undefined readonly align?: ‘start’ | ‘end’ | ‘center’ | undefined readonly width?: string | number | undefined readonly minWidth?: string | undefined readonly maxWidth?: string | undefined readonly nowrap?: boolean | undefined readonly headerProps?: { readonly [x: string]: any } | undefined readonly cellProps?:

{ readonly [x: string]: any }
(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ >, ) => Record<string, any>)
undefined

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

}[]:
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 mobile_breakpoint:

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

type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’:

param row_props:

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

:type | Record<string, any>

(( data: Pick<ItemKeySlot<any>, ‘item’ | ‘index’ | ‘internalItem’>, ) => Record<string, any>): :param hide_default_body: Hides the default body. :type boolean: :param hide_default_footer: Hides the default footer. This has no effect on v-data-table-virtual. :type boolean: :param hide_default_header: Hides the default header. :type boolean: :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#L30-L30” 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#L30-L30” 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 disable_sort: Disables sorting completely. :type boolean: :param sort_asc_icon: Icon used for ascending sort button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param sort_desc_icon: Icon used for descending sort button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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

    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param next_icon: Next icon. :type | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param first_icon: First icon. :type | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param last_icon: Last icon. :type | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :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.

    param update_currentItems:

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

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

Bases: AbstractElement

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

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

Bases: AbstractElement

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

param color:

See description here.

type string:

param sticky:

Sticks the header to the top of the table.

type boolean:

param disable_sort:

Toggles rendering of sort button.

type boolean:

param multi_sort:

See description here.

type boolean:

param sort_asc_icon:

Icon used for ascending sort button.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param sort_desc_icon: Icon used for descending sort button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param header_props: See description here. :type unknown: :param mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type boolean: :param mobile_breakpoint: Overrides the display configuration default screen size that the component should be considered in mobile. :type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’: :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:
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 mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type boolean: :param index: Row index. :type number: :param mobile_breakpoint: Overrides the display configuration default screen size that the component should be considered in mobile. :type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’: :param item: Data (key, index and column values) of the displayed item. :type unknown:
class trame.widgets.vuetify3.VDataTableRows(children=None, **kwargs)

Bases: AbstractElement

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

param cell_props:

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

:type | Record<string, any>

(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type boolean: :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#L48-L54” 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 mobile_breakpoint: Overrides the display configuration default screen size that the component should be considered in mobile. :type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’: :param row_props: An object of additional props to be passed to each <tr> in the table body. Also accepts a function that will be called for each row. :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 header_props:

See description here.

type unknown:

param cell_props:

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

:type | Record<string, any>

(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type boolean: :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<Record<string, any>> readonly title?: string | undefined readonly fixed?: boolean | undefined readonly align?: ‘start’ | ‘end’ | ‘center’ | undefined readonly width?: string | number | undefined readonly minWidth?: string | undefined readonly maxWidth?: string | undefined readonly nowrap?: boolean | undefined readonly headerProps?: { readonly [x: string]: any } | undefined readonly cellProps?:

{ readonly [x: string]: any }
(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ >, ) => Record<string, any>)
undefined

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

readonly { readonly key?: | ‘data-table-group’ | ‘data-table-select’ | ‘data-table-expand’ | (string & {}) | undefined readonly value?: SelectItemKey<Record<string, any>> readonly title?: string | undefined readonly fixed?: boolean | undefined readonly align?: ‘start’ | ‘end’ | ‘center’ | undefined readonly width?: string | number | undefined readonly minWidth?: string | undefined readonly maxWidth?: string | undefined readonly nowrap?: boolean | undefined readonly headerProps?: { readonly [x: string]: any } | undefined readonly cellProps?: | { readonly [x: string]: any } | (( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ >, ) => Record<string, any>) | undefined readonly sortable?: boolean | undefined readonly sort?: DataTableCompareFunction<any> | undefined readonly sortRaw?: DataTableCompareFunction<any> | undefined readonly filter?: FilterFunction | undefined readonly mobile?: boolean | undefined readonly children?: readonly any[] | undefined }[]
undefined
}[]:
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 mobile_breakpoint:

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

type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’:

param row_props:

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

:type | Record<string, any>

(( data: Pick<ItemKeySlot<any>, ‘item’ | ‘index’ | ‘internalItem’>, ) => Record<string, any>): :param hide_default_body: See description here. :type boolean: :param hide_default_footer: See description here. :type boolean: :param hide_default_header: See description here. :type boolean: :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#L30-L30” 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#L30-L30” 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 disable_sort: Toggles rendering of sort button. :type boolean: :param sort_asc_icon: Icon used for ascending sort button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param sort_desc_icon: Icon used for descending sort button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param next_icon: Next icon. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param first_icon: First icon. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param last_icon: Last icon. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 header_props:

See description here.

type unknown:

param cell_props:

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

:type | Record<string, any>

(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ | ‘column’ >, ) => Record<string, any>): :param mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type 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<Record<string, any>> readonly title?: string | undefined readonly fixed?: boolean | undefined readonly align?: ‘start’ | ‘end’ | ‘center’ | undefined readonly width?: string | number | undefined readonly minWidth?: string | undefined readonly maxWidth?: string | undefined readonly nowrap?: boolean | undefined readonly headerProps?: { readonly [x: string]: any } | undefined readonly cellProps?:

{ readonly [x: string]: any }
(( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ >, ) => Record<string, any>)
undefined

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

readonly { readonly key?: | ‘data-table-group’ | ‘data-table-select’ | ‘data-table-expand’ | (string & {}) | undefined readonly value?: SelectItemKey<Record<string, any>> readonly title?: string | undefined readonly fixed?: boolean | undefined readonly align?: ‘start’ | ‘end’ | ‘center’ | undefined readonly width?: string | number | undefined readonly minWidth?: string | undefined readonly maxWidth?: string | undefined readonly nowrap?: boolean | undefined readonly headerProps?: { readonly [x: string]: any } | undefined readonly cellProps?: | { readonly [x: string]: any } | (( data: Pick< ItemKeySlot<any>, ‘value’ | ‘item’ | ‘index’ | ‘internalItem’ >, ) => Record<string, any>) | undefined readonly sortable?: boolean | undefined readonly sort?: DataTableCompareFunction<any> | undefined readonly sortRaw?: DataTableCompareFunction<any> | undefined readonly filter?: FilterFunction | undefined readonly mobile?: boolean | undefined readonly children?: readonly any[] | undefined }[]
undefined
}[]:
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 mobile_breakpoint:

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

type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’:

param row_props:

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

:type | Record<string, any>

(( data: Pick<ItemKeySlot<any>, ‘item’ | ‘index’ | ‘internalItem’>, ) => Record<string, any>): :param hide_default_body: See description here. :type boolean: :param hide_default_footer: See description here. :type boolean: :param hide_default_header: See description here. :type boolean: :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#L30-L30” 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#L30-L30” 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 disable_sort: Toggles rendering of sort button. :type boolean: :param sort_asc_icon: Icon used for ascending sort button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param sort_desc_icon: Icon used for descending sort button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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.VDateInput(children=None, **kwargs)

Bases: AbstractElement

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

param flat:

Removes box shadow when using a variant with elevation.

type boolean:

param hide_actions:

See description here.

type boolean:

param focused:

Forces a focused state styling on the component.

type boolean:

param reverse:

Reverses the orientation.

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

See description here.

type string:

param cancel_text:

Text for the cancel button

type string:

param type:

Determines the type of the picker - date for date picker, month for month picker.

type string:

param ok_text:

Text for the ok button

type string:

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

Specify content text for the component.

type string:

param id:

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 height: Sets the height of the input. :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: Width of the picker. :type string | number: :param theme: Specify a theme for this component and all of its children. :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 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: Makes the picker readonly (doesn’t allow to select new date). :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 | ‘blur’
‘input’
‘submit’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 append_inner_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param active: Controls the active state of the item. This is typically used to highlight the component. :type boolean: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 tile: Removes any applied border-radius from the component. :type 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 header: Text shown when no display-date is set. :type string: :param next_icon: Sets the icon for next month/year button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: Sets the icon for previous month/year button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param mode_icon: Icon displayed next to the current month and year, toggles year selection when clicked. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param view_mode: Determines which picker in the date or month picker is being displayed. Allowed values: ‘month’, ‘months’, ‘year’. :type ‘month’ | ‘months’ | ‘year’: :param month: The current month number to show :type string | number: :param year: The current year number to show :type number: :param hide_weekdays: Hide the days of the week letters. :type boolean: :param show_week: Toggles visibility of the week numbers in the body of the calendar. :type boolean: :param transition: The transition used when changing months into the future :type string: :param reverse_transition: The transition used when changing months into the past :type string: :param show_adjacent_months: Toggles visibility of days from previous and next months. :type boolean: :param weekdays: An array of weekdays to display. :type number[]: :param weeks_in_month: A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks. :type ‘dynamic’ | ‘static’: :param first_day_of_week: Sets the first day of the week, starting with 0 for Sunday. :type string | number: :param allowed_dates: Restricts which dates can be selected. :type unknown[] | ((date: unknown) => boolean): :param display_value: The value that determines the month to show. This is different from modelValue, which determines the selected value. :type unknown: :param max: Maximum allowed date/month (ISO 8601 format). :type unknown: :param min: Minimum allowed date/month (ISO 8601 format). :type unknown: :param multiple: Allow the selection of multiple dates. The range value selects all dates between two selections. :type number | boolean | (string & {}) | ‘range’: :param landscape: Puts the picker into landscape mode. :type boolean: :param title: Specify a title text for the component. :type string: :param hide_header: Hide the picker header. :type boolean: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :type string | number | boolean: :param elevation: See description here. :type string | number: :param location: Specifies the component’s location. Can combine by using a space separated string. :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 tag: Specify a custom tag used on the root element. :type string:

Events

param update_focused:

Emitted when the input is focused or blurred

param click_prepend:

Emitted when prepended icon is clicked.

param click_append:

Emitted when append icon is clicked.

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

Bases: AbstractElement

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

param header:

Text shown when no display-date is set.

type string:

param title:

Specify a title text for the component.

type string:

param active:

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

type string | string[]:

param disabled:

Removes the ability to click or target the component.

type boolean:

param next_icon:

Sets the icon for next month/year button.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: Sets the icon for previous month/year button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param mode_icon: Icon displayed next to the current month and year, toggles year selection when clicked. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param text: Specify content text for the component. :type string: :param view_mode: Determines which picker in the date or month picker is being displayed. Allowed values: ‘month’, ‘months’, ‘year’. :type ‘month’ | ‘months’ | ‘year’: :param month: The current month number to show :type string | number: :param year: The current year number to show :type number: :param color: See description here. :type string: :param hide_weekdays: Hide the days of the week letters. :type boolean: :param show_week: Toggles visibility of the week numbers in the body of the calendar. :type boolean: :param transition: The transition used when changing months into the future :type string: :param reverse_transition: The transition used when changing months into the past :type string: :param show_adjacent_months: Toggles visibility of days from previous and next months. :type boolean: :param weekdays: An array of weekdays to display. :type number[]: :param weeks_in_month: A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks. :type ‘dynamic’ | ‘static’: :param first_day_of_week: Sets the first day of the week, starting with 0 for Sunday. :type string | number: :param allowed_dates: Restricts which dates can be selected. :type unknown[] | ((date: unknown) => boolean): :param display_value: The value that determines the month to show. This is different from modelValue, which determines the selected value. :type unknown: :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 max: Maximum allowed date/month (ISO 8601 format). :type unknown: :param min: Minimum allowed date/month (ISO 8601 format). :type unknown: :param multiple: Allow the selection of multiple dates. The range value selects all dates between two selections. :type number | boolean | (string & {}) | ‘range’: :param height: Sets the height for the component. :type string | number: :param bg_color: See description here. :type string: :param landscape: Puts the picker into landscape mode. :type boolean: :param hide_header: Hide the picker header. :type boolean: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :type string | number | boolean: :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: Width of the picker. :type string | number: :param elevation: See description here. :type string | number: :param location: Specifies the component’s location. Can combine by using a space separated string. :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 rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type 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:

Events

param update_modelValue:

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

param update_month:

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

param update_year:

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

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

param active:

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

type string | string[]:

param disabled:

Removes the ability to click or target the component.

type string | boolean | string[]:

param next_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param mode_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param text: Specify content text for the component. :type string: :param view_mode: See description here. :type ‘month’ | ‘months’ | ‘year’:

Events

param click_year:

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

param click_month:

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

param click_prev:

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

param click_next:

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

param 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 – Hide the days of the week letters.

  • show_week – See description here.

  • transition – The transition used when changing months into the future

  • reverse_transition – The transition used when changing months into the past

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

  • month – The current month number to show

  • show_adjacent_months – See description here.

  • year – The current year number to show

  • weekdays – An array of weekdays to display.

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

  • first_day_of_week – See description here.

  • allowed_dates – See description here.

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

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

  • multiple – See description here.

Events

Parameters:
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.

  • year – See description here.

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

Sets the overlay opacity.

type string | number:

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 | string
boolean
(TransitionProps & { component: Component })
{ 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.

param afterEnter:

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

param afterLeave:

Event that fires after the overlay has finished transitioning out.

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

Bases: AbstractElement

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

  • opacity – Sets the component’s opacity value

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

Bases: AbstractElement

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

param headline:

A large headline often used for 404 pages.

type string:

param title:

Specify a title text for the component.

type string:

param text:

Specify content text for the component.

type string:

param action_text:

The text used for the action button.

type string:

param bg_color:

See description here.

type string:

param color:

See description here.

type string:

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param image: See description here. :type string: :param justify: Control the justification of the text. :type ‘start’ | ‘center’ | ‘end’: :param text_width: Sets the width of the text container. :type string | number: :param href: The URL the action button links to. :type string: :param to: The URL the action button links to. :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 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. :type string | number: :param theme: Specify a theme for this component and all of its children. :type string:

Events

param click_action:

Event emitted when the action button is clicked.

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

Bases: AbstractElement

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

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

  • group – See description here.

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

  • group – See description here.

  • mode – See description here.

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

Bases: AbstractElement

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

param title:

Specify a title text for the component.

type string:

param text:

Specify content text for the component.

type string:

param bg_color:

See description here.

type string:

param elevation:

See description here.

type string | number:

param value:

Controls the opened/closed state of content.

type any:

param disabled:

Disables the expansion-panel content.

type boolean:

param selected_class:

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

type string:

param rounded:

See description here.

type string | number | boolean:

param tile:

Removes any applied border-radius from the component.

type boolean:

param tag:

Specify a custom tag used on the root element.

type string:

param color:

See description here.

type string:

param expand_icon:

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

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param collapse_icon: Icon used when the expansion panel is in a collapsable state. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param hide_actions: Hide the expand icon in the content title. :type boolean: :param focusable: See description here. :type boolean: :param static: Remove title size expansion when selected. :type boolean: :param ripple: See description here. :type boolean | { class: string }: :param readonly: Makes the expansion-panel content read only. :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 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:

Events

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

param color:

See description here.

type string:

param expand_icon:

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

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param collapse_icon: Icon used when the expansion panel is in a collapsable state. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param hide_actions: Hide the expand icon in the content title. :type boolean: :param focusable: See description here. :type boolean: :param static: Remove title size expansion when selected. :type boolean: :param ripple: See description here. :type boolean | { class: string }: :param readonly: See description here. :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:
class trame.widgets.vuetify3.VExpansionPanels(children=None, **kwargs)

Bases: AbstractElement

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

param flat:

Removes the expansion-panel’s elevation and borders.

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

Allows one to select multiple items.

type boolean:

param max:

Sets a maximum number of selections that can be made.

type number:

param selected_class:

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

type string:

param disabled:

Puts all children components into a disabled state.

type boolean:

param mandatory:

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

type boolean | ‘force’:

param bg_color:

See description here.

type string:

param elevation:

See description here.

type string | number:

param rounded:

See description here.

type string | number | boolean:

param tile:

Removes the border-radius.

type boolean:

param tag:

Specify a custom tag used on the root element.

type string:

param color:

See description here.

type string:

param expand_icon:

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

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param collapse_icon: Icon used when the expansion panel is in a collapsable state. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param hide_actions: Hide the expand icon in the content title. :type boolean: :param focusable: Makes the expansion-panel headers focusable. :type boolean: :param static: Remove title size expansion when selected. :type boolean: :param ripple: See description here. :type boolean | { class: string }: :param readonly: Makes the entire expansion-panel read only. :type boolean: :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 theme: Specify a theme for this component and all of its children. :type string: :param variant: Applies a distinct style to the component. :type ‘default’ | ‘accordion’ | ‘inset’ | ‘popout’:

Events

param update_modelValue:

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

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

Bases: AbstractElement

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

param symbol:

See description here.

type any:

param flat:

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

type boolean:

param app:

If true, attaches to the closest layout and positions according to the value of location.

type boolean:

param appear:

Used to control the animation of the FAB.

type boolean:

param extended:

An alternate style for the FAB that expects text.

type boolean:

param layout:

If true, will effect layout dimensions based on size and position.

type boolean:

param offset:

Translates the Fab up or down, depending on if location is set to top or bottom.

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

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

type boolean:

param active_color:

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

type string:

param base_color:

Sets the color of component when not focused.

type string:

param prepend_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param append_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param block: Expands the button to 100% of available space. :type boolean: :param readonly: Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard. :type boolean: :param slim: Reduces padding to 0 8px. :type boolean: :param stacked: Displays the button as a flex-column. :type boolean: :param ripple: See description here. :type boolean | { class: string }: :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 text: Specify content text for the component. :type string: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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 disabled: Removes the ability to click or target the component. :type boolean: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :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 location: The location of the fab relative to the layout. Only works when using app. :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 component. :type boolean: :param rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param href: Designates the component as anchor and applies the href attribute. :type string: :param replace: See description here. :type boolean: :param exact: See description here. :type boolean: :param to: See description here. :type RouteLocationRaw: :param 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. :type string | number: :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’ | ‘text’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’: :param icon: See description here. :type | boolean
string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 transition: See description here. :type string | boolean | (TransitionProps & { component: Component }):

Events

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

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 tile: Removes any applied border-radius from the component. :type 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 hide_input:

Display the icon only without the input (file names).

type boolean:

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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :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 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 | File[]: :param validate_on: Change what type of event triggers validation to run. :type | ‘blur’
‘input’
‘submit’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 tile: Removes any applied border-radius from the component. :type boolean:

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 – Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

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

  • tile – Removes any applied border-radius from 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.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’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’:

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.

param color:

See description here.

type string:

param disabled:

Removes the ability to click or target the component.

type boolean:

param start:

Applies margin at the end of the component.

type boolean:

param end:

Applies margin at the start of the component.

type boolean:

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param 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. :type string | number: :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:
class trame.widgets.vuetify3.VImg(children=None, **kwargs)

Bases: AbstractElement

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

param absolute:

See description here.

type boolean:

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

See description here.

type string:

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:

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

NOTE: This prop has no effect unless either height or aspect-ratio are provided.
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 any: :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 rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :type string: :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’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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.

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

  • full_height – Sets the component height to 100%.

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

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param tag: Specify a custom tag used on the root element. :type string:
class trame.widgets.vuetify3.VList(children=None, **kwargs)

Bases: AbstractElement

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

param base_color:

Sets the color of component when not focused.

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

Icon to display when the list item is collapsed.

type string:

param collapse_icon:

Icon to display when the list item is expanded.

type string:

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

See description here.

type boolean:

param selectable:

See description here.

type boolean:

param opened:

An array containing the values of currently opened groups. Can be two-way bound with v-model:opened.

type unknown:

param activated:

Array of ids of activated nodes.

type any:

param selected:

An array containing the values of currently selected items. Can be two-way bound with v-model:selected.

type unknown:

param mandatory:

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

type boolean:

param active_strategy:

Affects how items with children behave when activated.

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

Bases: AbstractElement

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

param active_color:

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

type string:

param base_color:

Sets the color of component when not focused.

type string:

param color:

See description here.

type string:

param collapse_icon:

Icon to display when the list item is expanded.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param expand_icon: Icon to display when the list item is collapsed. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prepend_icon: Prepends an icon to the component, uses the same syntax as v-icon. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param append_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param fluid: See description here. :type boolean: :param subgroup: Designate the component as nested list group. :type boolean: :param title: Specify a title text for the component. :type string: :param value: Expands / Collapse the list-group. :type any: :param tag: Specify a custom tag used on the root element. :type string:
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.

param title:

See description here.

type string | number:

param subtitle:

Specify a subtitle text for the component.

type string | number:

param active:

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

type boolean:

param active_class:

See description here.

type string:

param active_color:

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

type string:

param append_avatar:

See description here.

type string:

param append_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param base_color: Sets the color of component when not focused. :type string: :param disabled: Removes the ability to click or target the component. :type boolean: :param link: Designates that the component is a link. This is automatic when using the href or to prop. :type boolean: :param nav: Reduces the width v-list-item takes up as well as adding a border radius. :type boolean: :param prepend_avatar: See description here. :type string: :param prepend_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :param value: See description here. :type any: :param slim: Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation. :type boolean: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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 rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param href: Designates the component as anchor and applies the href attribute. :type string: :param replace: See description here. :type boolean: :param exact: See description here. :type boolean: :param to: See description here. :type RouteLocationRaw: :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’: :param lines: The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop. :type false | ‘one’ | ‘two’ | ‘three’:

Events

param 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:
  • opacity – Sets the component’s opacity value

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

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

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:

The unique identifier of the component.

type string:

param submenu:

Opens with right arrow and closes on left instead of up/down. Implies location=”end”. Directions are reversed for RTL.

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

Sets the overlay opacity.

type string | number:

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 | string
boolean
(TransitionProps & { component: Component })
{ 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 | string

boolean
(TransitionProps & { component: Component })
{ component: Component; leaveAbsolute: boolean; group: boolean }:
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.

  • persistent – Clicking outside or pressing esc key will not dismiss the dialog.

  • touchless – Disable mobile touch functionality.

  • width – Sets the width for the component.

  • location – Controls the edge of the screen the drawer is attached to.

  • sticky – See description here.

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

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

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

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

  • tile – Removes any applied border-radius from the component.

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

Bases: AbstractElement

Vuetify’s VNumberInput 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 box shadow when using a variant with elevation.

type boolean:

param control_variant:

See description here.

type ‘default’ | ‘stacked’ | ‘split’:

param inset:

See description here.

type boolean:

param hide_input:

See description here.

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

param min:

See description here.

type number:

param type:

Sets input type.

type string:

param max:

See description here.

type number:

param step:

See description here.

type number:

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

Sets the DOM id on the component.

type string:

param append_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :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 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 validate_on: Change what type of event triggers validation to run. :type | ‘blur’
‘input’
‘submit’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 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 tile: Removes any applied border-radius from the component. :type 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 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_modelValue:

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

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

Sets the overlay opacity.

type string | number:

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

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

param afterLeave:

Event that fires after the overlay has finished transitioning out.

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

Bases: AbstractElement

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

param length:

The number of pages.

type string | number:

param active_color:

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

type string:

param start:

Specify the starting page.

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

param disabled:

Removes the ability to click or target the component.

type boolean:

param total_visible:

Specify the total visible pagination numbers.

type string | number:

param first_icon:

The icon to use for the first button.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: The icon to use for the prev button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param next_icon: The icon to use for the next button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param last_icon: The icon to use for the last button. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param aria_label: Label for the root element. :type string: :param page_aria_label: Label for each page button. :type string: :param current_page_aria_label: Label for the currently selected page. :type string: :param first_aria_label: Label for the go to first button. :type string: :param previous_aria_label: Label for the previous button. :type string: :param next_aria_label: Label for the next button. :type string: :param last_aria_label: Label for the go to last button. :type string: :param ellipsis: Text to show between page buttons when truncating the list. :type string: :param show_first_last_page: Show buttons for going to first and last page. :type boolean: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :type string | number | boolean: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param elevation: See description here. :type string | number: :param rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param 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. :type string | number: :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 first:

Emitted when clicking on go to first button.

param prev:

Emitted when clicking on go to previous button.

param next:

Emitted when clicking on go to next button.

param last:

Emitted when clicking on go to last button.

param 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 – Puts the picker into landscape mode.

  • hide_header – Hide the picker header.

  • color – See description here.

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

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

  • tile – Removes any applied border-radius from 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.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.

  • buffer_color – Sets the color of the buffer bar.

  • buffer_opacity – Set the opacity of the buffer bar.

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

  • opacity – Set the opacity of the progress bar.

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

  • tile – Removes any applied border-radius from the component.

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

Bases: AbstractElement

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

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

  • pull_down_threshold – See description here.

Events

Parameters:

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

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

Bases: AbstractElement

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

param label:

See description here.

type string:

param base_color:

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

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

Removes the ability to click or target the component.

type boolean:

param defaults_target:

The target component to provide defaults values for.

type string:

param error:

Puts the input in a manual error state.

type boolean:

param id:

Sets the DOM id on the component.

type string:

param inline:

Puts children inputs into a row.

type boolean:

param false_icon:

The icon used when inactive.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param true_icon: The icon used when active. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :param multiple: Changes select to multiple. Accepts array for value. :type boolean: :param name: Sets the component’s name attribute. :type string: :param readonly: Puts input in readonly state. :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 type: Provides the default type for children selection controls. :type string: :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 density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param theme: Specify a theme for this component and all of its children. :type string:
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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :type string: :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’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param true_icon: The icon used when active. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :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:

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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :type string: :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’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 tile: Removes any applied border-radius from the component. :type 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.

param length:

The amount of items to show.

type string | number:

param name:

Sets the component’s name attribute.

type string:

param item_aria_label:

See description here.

type string:

param active_color:

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

type string:

param color:

See description here.

type string:

param clearable:

Allows for the component to be cleared by clicking on the current value.

type boolean:

param disabled:

Removes the ability to click or target the component.

type boolean:

param empty_icon:

The icon displayed when empty.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param full_icon: The icon displayed when full. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param half_increments: Allows the selection of half increments. :type boolean: :param hover: Provides visual feedback when hovering over icons. :type boolean: :param readonly: Removes all hover effects and pointer events. :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 string | number: :param item_label_position: Position of item labels. Accepts ‘top’ and ‘bottom’. :type string: :param ripple: See description here. :type boolean: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param 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. :type string | number: :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_labels: Array of labels to display next to each item.. :type string[]:

Events

param 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 list_props:

See description here.

type unknown:

param base_color:

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

type string:

param bg_color:

See description here.

type string:

param disabled:

Removes the ability to click or target the input.

type boolean:

param multiple:

Changes select to multiple. Accepts array for value.

type boolean:

param reverse:

Reverses the orientation.

type boolean:

param flat:

Removes box shadow when using a variant with elevation.

type boolean:

param density:

Adjusts the vertical height used by the component.

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

param max_width:

Sets the maximum width for the component.

type string | number:

param min_width:

Sets the minimum width of the select’s v-menu content.

type string | number:

param width:

Sets the width for the component.

type string | number:

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:

This property currently has no effect.

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

Adds a border radius to the input.

type string | number | boolean:

param tile:

Removes any applied border-radius from the component.

type boolean:

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 | ‘outlined’

‘plain’
‘underlined’
‘filled’
‘solo’
‘solo-inverted’
‘solo-filled’: :param name: Sets the component’s name attribute. :type string: :param menu: Renders with the menu open by default. :type boolean: :param menu_icon: Sets the the spin icon. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param menu_props: See description here. :type unknown: :param id: Sets the DOM id on the component. :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 any: :param transition: See description here. :type | string
boolean
(TransitionProps & { component: Component })
{ component: Component }: :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 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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 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 | ‘eager’
‘lazy’
‘blur’
‘input’
‘submit’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’: :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 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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param active: Controls the active state of the item. This is typically used to highlight the component. :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param single_line: Label does not move on focus/dirty. :type boolean: :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 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.

param label:

See description here.

type string:

param base_color:

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

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

Removes the ability to click or target the component.

type boolean:

param defaults_target:

The target component to provide defaults values for.

type string:

param error:

Puts the input in a manual error state.

type boolean:

param id:

Sets the DOM id on the component.

type string:

param inline:

Puts children inputs into a row.

type boolean:

param false_icon:

The icon used when inactive.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param true_icon: The icon used when active. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :param multiple: Changes select to multiple. Accepts array for value. :type boolean: :param name: Sets the component’s name attribute. :type string: :param readonly: Puts input in readonly state. :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 unknown: :param type: Provides the default type for children selection controls. :type string: :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 density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param theme: Specify a theme for this component and all of its children. :type string:

Events

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

param color:

See description here.

type string:

param disabled:

Removes the ability to click or target the component.

type boolean:

param defaults_target:

The target component to provide defaults values for.

type string:

param error:

Puts the input in a manual error state.

type boolean:

param id:

Sets the DOM id on the component.

type string:

param inline:

Puts children inputs into a row.

type boolean:

param false_icon:

The icon used when inactive.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param true_icon: The icon used when active. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :param multiple: Changes select to multiple. Accepts array for value. :type boolean: :param name: Sets the component’s name attribute. :type string: :param readonly: Puts input in readonly state. :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 unknown: :param type: Provides the default type for children selection controls. :type string: :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 density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’: :param theme: Specify a theme for this component and all of its children. :type string:

Events

param 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 – Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

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

  • tile – Removes any applied border-radius from 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.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:

aria-label for the element in a loading state.

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.

param symbol:

See description here.

type any:

param center_active:

Forces the selected component to be centered.

type boolean:

param direction:

Switch between horizontal and vertical modes.

type ‘horizontal’ | ‘vertical’:

param next_icon:

The appended slot when arrows are shown.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: The prepended slot when arrows are shown. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param show_arrows: See description here. :type string | boolean: :param mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type boolean: :param mobile_breakpoint: Sets the designated mobile breakpoint for the component. :type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’: :param tag: Specify a custom tag used on the root element. :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: :param multiple: Allows one to select multiple items. :type boolean: :param max: Sets a maximum number of selections that can be made. :type number: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :param disabled: Puts all children components into a disabled state. :type boolean: :param mandatory: Forces at least one item to always be selected (if available). :type boolean | ‘force’:

Events

param 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 tile:

Removes any applied border-radius from the component.

type 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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :type string: :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’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 tile:

Removes any applied border-radius from the component.

type 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 opacity:

Sets the overlay opacity.

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

Bases: AbstractElement

Vuetify’s VSnackbarQueue 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 tile:

Removes any applied border-radius from the component.

type 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 opacity:

Sets the overlay opacity.

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
{ text: string multiLine: boolean timer: string | boolean timeout: string | number vertical: boolean location: <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a> position: ‘static’ | ‘relative’ | ‘fixed’ | ‘absolute’ | ‘sticky’ absolute: boolean rounded: string | number | boolean tile: boolean color: string variant: ‘text’ | ‘flat’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’ theme: string closeOnBack: boolean contained: boolean contentClass: any contentProps: any disabled: boolean opacity: string | number zIndex: string | number target: | Element | ‘parent’ | ‘cursor’ | (string & {}) | ComponentPublicInstance | [number, number] closeOnContentClick: boolean style: StyleValue class: any height: string | number maxHeight: string | number maxWidth: string | number minHeight: string | number minWidth: string | number width: string | number eager: boolean locationStrategy: ‘static’ | ‘connected’ | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VOverlay/locationStrategies.ts#L36-L40” target=”_blank”>LocationStrategyFn</a> origin: <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14” target=”_blank”>Anchor</a> | ‘auto’ | ‘overlap’ offset: string | number | number[] transition: | string | boolean | (TransitionProps & { component: Component }) attach: string | boolean | Element ‘v-slots’: { activator: | false | ((arg: { isActive: boolean props: Record<string, any> }) => VNodeChild) default: false | (() => VNodeChild) actions: false | ((arg: { isActive: Ref<boolean> }) => VNodeChild) text: false | (() => VNodeChild) } ‘v-slot:default’: false | (() => VNodeChild) ‘v-slot:activator’: | false | ((arg: { isActive: boolean props: Record<string, any> }) => VNodeChild) key: string | number | symbol ref: VNodeRef ref_for: boolean ref_key: string onVnodeBeforeMount: VNodeMountHook | VNodeMountHook[] onVnodeMounted: VNodeMountHook | VNodeMountHook[] onVnodeBeforeUpdate: VNodeUpdateHook | VNodeUpdateHook[] onVnodeUpdated: VNodeUpdateHook | VNodeUpdateHook[] onVnodeBeforeUnmount: VNodeMountHook | VNodeMountHook[] onVnodeUnmounted: VNodeMountHook | VNodeMountHook[] ‘v-slot:actions’: | false | ((arg: { isActive: Ref<boolean> }) => VNodeChild) ‘v-slot:text’: false | (() => VNodeChild) }
)[]:
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: :param closable: Adds a dismiss button that closes the active snackbar. :type string | boolean: :param close_text: The text used in the close button when using the closable prop. :type string:

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

Bases: AbstractElement

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

Parameters:
  • type – Choose between a trendline or bars.

  • auto_line_width – Automatically expand bars to use space efficiently.

  • auto_draw – Trace the length of the line when first rendered.

  • auto_draw_duration – Amount of time (in ms) to run the trace animation.

  • auto_draw_easing – The easing function to use for the trace animation.

  • color – See description here.

  • gradient – An array of colors to use as a linear-gradient.

  • gradient_direction – The direction the gradient should run.

  • height – Height of the SVG trendline or bars.

  • labels – An array of string labels that correspond to the same index as its data counterpart.

  • label_size – The label font size.

  • line_width – The thickness of the line, in px.

  • id – See description here.

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

  • min – See description here.

  • max – See description here.

  • padding – Low smooth or high line-width values may result in cropping, increase padding to compensate.

  • show_labels – Show labels below each data point.

  • smooth – Number of px to use as a corner radius. true defaults to 8, false is 0.

  • width – Width of the SVG trendline or bars.

  • fill – Using the fill property allows you to better customize the look and feel of your sparkline.

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

Bases: AbstractElement

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

param activator:

Explicitly sets the overlay’s activator.

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

param id:

The unique identifier of the component.

type string:

param submenu:

Opens with right arrow and closes on left instead of up/down. Implies location=”end”. Directions are reversed for RTL.

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

Sets the overlay opacity.

type string | number:

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 | (string & {})

Element
‘parent’
‘cursor’
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: Opens speed-dial on 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: 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 | string
boolean
(TransitionProps & { component: Component })
{ 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.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.

  • complete_icon – See description here.

  • edit_icon – See description here.

  • editable – Marks step as editable.

  • error_icon – See description here.

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

  • non_linear – Allow user to jump to any step.

  • mobile – Forces the stepper into a mobile state, removing labels from stepper items.

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

  • 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 – Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

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

  • tile – Removes any applied border-radius from the component.

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

Bases: AbstractElement

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

param flat:

Removes the expansion-panel’s elevation and borders.

type boolean:

param prev_text:

The text used for the Prev button.

type string:

param next_text:

The text used for the Next button.

type string:

param alt_labels:

Places the labels beneath the step.

type boolean:

param bg_color:

See description here.

type string:

param complete_icon:

See description here.

type string:

param edit_icon:

See description here.

type string:

param editable:

Marks step as editable.

type boolean:

param error_icon:

See description here.

type string:

param hide_actions:

Hide actions bar (prev and next buttons).

type boolean:

param items:

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

type (string | Record<string, any>)[]:

param item_title:

Property on supplied items that contains its title.

type string:

param item_value:

Property on supplied items that contains its value.

type string:

param non_linear:

Allow user to jump to any step.

type boolean:

param mobile:

Forces the stepper into a mobile state, removing labels from stepper items.

type boolean:

param mobile_breakpoint:

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

type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’:

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

Allows one to select multiple items.

type boolean:

param max:

Sets a maximum number of selections that can be made.

type number:

param selected_class:

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

type string:

param disabled:

Disables the expansion-panel content.

type boolean:

param mandatory:

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

type boolean | ‘force’:

param elevation:

See description here.

type string | number:

param rounded:

See description here.

type string | number | boolean:

param tile:

Removes the border-radius.

type boolean:

param tag:

Specify a custom tag used on the root element.

type string:

param color:

See description here.

type string:

param expand_icon:

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

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param collapse_icon: Icon used when the expansion panel is in a collapsable state. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param focusable: Makes the expansion-panel headers focusable. :type boolean: :param ripple: See description here. :type boolean | { class: string }: :param readonly: Makes the entire expansion-panel read only. :type boolean: :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 theme: Specify a theme for this component and all of its children. :type string: :param variant: Applies a distinct style to the component. :type ‘default’ | ‘accordion’ | ‘inset’ | ‘popout’:

Events

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VStepperVerticalActions component. See more info and examples 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.VStepperVerticalItem(children=None, **kwargs)

Bases: AbstractElement

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

param icon:

See description here.

type string:

param subtitle:

Specify a subtitle text for the component.

type string:

param title:

Specify a title text for the component.

type string:

param text:

Specify content text for the component.

type string:

param hide_actions:

Hide the expand icon in the content title.

type boolean:

param color:

See description here.

type string:

param complete:

Marks step as complete.

type boolean:

param complete_icon:

Icon to display when step is marked as completed.

type string:

param editable:

Marks step as editable.

type boolean:

param edit_icon:

Icon to display when step is editable.

type string:

param error:

Puts the stepper item in a manual error state.

type boolean:

param error_icon:

Icon to display when step has an error.

type string:

param ripple:

See description here.

type boolean | { class:

string }:

param value:

Controls the opened/closed state of content.

type any:

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/components/VStepper/VStepperItem.tsx#L42-L42” target=”_blank”>ValidationRule</a>[]:

param bg_color:

See description here.

type string:

param elevation:

See description here.

type string | number:

param disabled:

Disables the expansion-panel content.

type boolean:

param selected_class:

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

type string:

param rounded:

See description here.

type string | number | boolean:

param tile:

Removes any applied border-radius from the component.

type boolean:

param tag:

Specify a custom tag used on the root element.

type string:

param expand_icon:

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

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param collapse_icon: Icon used when the expansion panel is in a collapsable state. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param focusable: See description here. :type boolean: :param static: Remove title size expansion when selected. :type boolean: :param readonly: Makes the expansion-panel content read only. :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 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:

Events

param click_next:

Event emitted when clicking the next button

param click_prev:

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

param click_finish:

Event emitted when clicking the finish button

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

Bases: AbstractElement

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

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param tag: Specify a custom tag used on the root element. :type string:
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:

Sets an indeterminate state for the switch.

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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :type string: :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’
‘invalid-input’
‘input lazy’
‘blur lazy’
‘submit lazy’
‘invalid-input lazy’
‘input eager’
‘blur eager’
‘submit eager’
‘invalid-input eager’
‘lazy input’
‘lazy blur’
‘lazy submit’
‘lazy invalid-input’
‘eager input’
‘eager blur’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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: Sets the color of the input when it is not focused. :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param true_icon: The icon used when active. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :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:

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.

  • tile – Removes any applied border-radius from 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.VTab(children=None, **kwargs)

Bases: AbstractElement

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

param fixed:

Forces component to take up all available space up to their maximum width (300px), and centers it.

type boolean:

param slider_color:

See description here.

type string:

param hide_slider:

Hides the active tab slider component (no exit or enter animation).

type boolean:

param direction:

Changes the direction of the tabs. Can be either horizontal or vertical.

type ‘horizontal’ | ‘vertical’:

param active_color:

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

type string:

param base_color:

Sets the color of component when not focused.

type string:

param prepend_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param append_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param readonly: Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard. :type boolean: :param slim: Reduces padding to 0 8px. :type boolean: :param stacked: Displays the tab as a flex-column. :type boolean: :param ripple: See description here. :type boolean | { class: string }: :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 text: Specify content text for the component. :type string: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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 disabled: Removes the ability to click or target the component. :type boolean: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :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 tile: Removes any applied border-radius from the component. :type boolean: :param href: Designates the component as anchor and applies the href attribute. :type string: :param replace: See description here. :type boolean: :param exact: See description here. :type boolean: :param to: See description here. :type RouteLocationRaw: :param 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. :type string | number: :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’ | ‘text’ | ‘elevated’ | ‘tonal’ | ‘outlined’ | ‘plain’: :param icon: See description here. :type | boolean
string
(string | [string, number])[]
(new () => any)
FunctionalComponent:
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.

param symbol:

See description here.

type any:

param align_tabs:

Aligns the tabs to the start, center, or end of container. Also accepts title to align with the v-toolbar-title component.

type ‘start’ | ‘title’ | ‘center’ | ‘end’:

param color:

See description here.

type string:

param fixed_tabs:

v-tabs-item min-width 160px, max-width 360px.

type boolean:

param items:

The items to display in the component. This can be an array of strings or objects with a property text.

type (string | number | Record<string, any>)[]:

param stacked:

Apply the stacked prop to all children v-tab components.

type boolean:

param bg_color:

See description here.

type string:

param grow:

Force v-tab’s to take up all available space.

type boolean:

param height:

Sets the height of the tabs bar.

type string | number:

param hide_slider:

Hide’s the generated v-tabs-slider.

type boolean:

param slider_color:

Changes the background color of an auto-generated v-tabs-slider.

type string:

param center_active:

Forces the selected tab to be centered.

type boolean:

param direction:

Changes the direction of the tabs. Can be either horizontal or vertical.

type ‘horizontal’ | ‘vertical’:

param next_icon:

Right pagination icon.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: Left pagination icon. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param show_arrows: Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop. :type string | boolean: :param mobile: Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint :type boolean: :param mobile_breakpoint: Sets the designated mobile breakpoint for the component. :type number | ‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘xxl’: :param tag: Specify a custom tag used on the root element. :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 any: :param multiple: Allows one to select multiple items. :type boolean: :param max: Sets a maximum number of selections that can be made. :type number: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :param disabled: Puts all children components into a disabled state. :type boolean: :param mandatory: Forces at least one item to always be selected (if available). :type boolean | ‘force’: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘comfortable’ | ‘compact’:

Events

param update_modelValue:

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

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

Bases: AbstractElement

Vuetify’s VTabsWindow component. See more info and examples 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.VTabsWindowItem(children=None, **kwargs)

Bases: AbstractElement

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

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :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 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’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 tile: Removes any applied border-radius from the component. :type 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 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 | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 max_width: Sets the maximum width 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 theme: Specify a theme for this component and all of its children. :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 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’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :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 tile: Removes any applied border-radius from the component. :type boolean: :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.VTimePicker(children=None, **kwargs)

Bases: AbstractElement

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

Parameters:
  • title – Specify a title text for the component.

  • ampm_in_title – Place AM/PM switch in title, not near the clock.

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

  • format – Defines the format of a time displayed in picker. Available options are ampm and 24hr.

  • max – Maximum allowed time.

  • min – Minimum allowed time.

  • readonly – Puts picker in readonly state.

  • scrollable – Allows changing hour/minute with mouse scroll.

  • use_seconds – See description here.

  • bg_color – See description here.

  • hide_header – Hide the picker header.

  • color – See description here.

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

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

  • tile – Removes any applied border-radius from the component.

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

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

  • allowed_hours – Restricts which hours can be selected.

  • allowed_minutes – Restricts which minutes can be selected.

  • allowed_seconds – Restricts which seconds can be selected.

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

Events

Parameters:
  • update_hour – Emitted when user selects the hour.

  • update_minute – Emitted when user selects the minute.

  • update_period – Emitted when user clicks the AM/PM button.

  • update_second – Emitted when user selects the second.

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

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

Bases: AbstractElement

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

Parameters:
  • ampm – See description here.

  • color – See description here.

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

  • displayed_value – See description here.

  • double – See description here.

  • format – See description here.

  • max – See description here.

  • min – See description here.

  • scrollable – See description here.

  • readonly – See description here.

  • rotate – See description here.

  • step – See description here.

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

  • allowed_values – See description here.

Events

Parameters:
class trame.widgets.vuetify3.VTimePickerControls(children=None, **kwargs)

Bases: AbstractElement

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

Parameters:
  • ampm – See description here.

  • ampm_in_title – See description here.

  • ampm_readonly – See description here.

  • color – See description here.

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

  • hour – See description here.

  • minute – See description here.

  • second – See description here.

  • period – See description here.

  • readonly – See description here.

  • use_seconds – See description here.

  • selecting – See description here.

  • value – See description here.

Events

Parameters:
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_thickness – Thickness of the timeline line.

  • line_color – Color of the timeline line.

  • dot_color – Color of the item dot.

  • fill_dot – Remove outer border of item dot, making the color fill the entire 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 timeline items.

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

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

param icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param dot_color: Color of the item dot. :type string: :param fill_dot: Remove outer border of item dot, making the color fill the entire dot. :type boolean: :param hide_dot: Hide the timeline item dot. :type boolean: :param hide_opposite: Hide opposite content if it exists. :type boolean: :param icon_color: Color of the icon. :type string: :param line_inset: Specifies the distance between the line and the dot of the item. :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 elevation: See description here. :type string | number: :param rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param size: Size of the item dot :type string | number: :param tag: Specify a custom tag used on the root element. :type string: :param density: Adjusts the vertical height used by the component. :type ‘default’ | ‘compact’:
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 – Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl.

  • elevation – See description here.

  • rounded – See description here.

  • tile – Removes any applied border-radius from 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.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 opacity:

Sets the overlay opacity.

type string | number:

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

Bases: AbstractElement

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

param open_all:

When true will cause all branch nodes to be opened when component is mounted.

type boolean:

param search:

The search model for filtering results.

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:

    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[]:

    param loading_icon:

    Icon used when node is in a loading state.

    type string:

    param open_on_click:

    When true will cause nodes to be opened by clicking anywhere on it, instead of only opening by clicking on expand icon. When using this prop with activatable you will be unable to mark nodes with children as active.

    type boolean:

    param indeterminate_icon:

    Icon used when node is in an indeterminate state. Only visible when selectable is true.

    :type | string

    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param false_icon: See description here. :type | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param true_icon: See description here. :type | string
    (string | [string, number])[]
    (new () => any)
    FunctionalComponent: :param return_object: When true will make v-model, active.sync and open.sync return the complete object instead of just the key. :type boolean: :param selectable: See description here. :type boolean: :param selected_color: The color of the selection checkbox. :type string: :param load_children: A function used when dynamically loading children. If this prop is set, then the supplied function will be run if expanding an item that has a item-children property that is an empty array. Supports returning a Promise. :type (item: unknown) => Promise<void>: :param items: An array of items used to build the treeview. :type unknown[]: :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’
    ((mandatory: boolean) => <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/selectStrategies.ts#L26-L30” target=”_blank”>SelectStrategy</a>): :param base_color: Sets the color of component when not focused. :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: Disables selection for all nodes. :type boolean: :param expand_icon: Icon used to indicate that a node can be expanded. :type string: :param collapse_icon: Icon to display when the list item is expanded. :type string: :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 activatable: Allows user to mark a node as active by clicking on it. :type boolean: :param opened: An array containing the values of currently opened groups. Can be two-way bound with v-model:opened. :type any: :param activated: Array of ids of activated nodes. :type any: :param selected: An array containing the values of currently selected items. Can be two-way bound with v-model:selected. :type any: :param mandatory: Forces at least one item to always be selected (if available). :type boolean: :param active_strategy: Affects how items with children behave when activated.
  • leaf: Only leaf nodes (items without children) can be activated.

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

  • classic: Activating a parent node will cause all children to be activated.

    :type | ‘single-leaf’

    ‘leaf’
    ‘independent’
    ‘single-independent’
    ((mandatory: boolean) => <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/nested/activeStrategies.ts#L27-L31” target=”_blank”>ActiveStrategy</a>): :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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_title: Property on supplied items that contains its title. :type <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L73-L77” target=”_blank”>SelectItemKey</a>: :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_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 <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/helpers.ts#L73-L77” target=”_blank”>SelectItemKey</a>: :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: Provides an alternative active style for v-treeview node. Only visible when activatable is true and should not be used in conjunction with the shaped prop. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type 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’: :param model_value: Allows one to control which nodes are selected. The array contains the values of currently selected items. It is equivalent to the v-model:selected :type unknown[]:

    Events

    param click_open:

    Emits the item when it is clicked to open.

    param click_select:

    Emits the item when it is clicked to select.

    param update_opened:

    Emits the array of open items when this value changes.

    param update_activated:

    Emits the array of active items when this value changes.

    param update_selected:

    Emits the array of selected items when this value changes.

    param update_modelValue:

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

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

Bases: AbstractElement

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

param active_color:

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

type string:

param base_color:

Sets the color of component when not focused.

type string:

param color:

See description here.

type string:

param collapse_icon:

Icon to display when the list item is expanded.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param expand_icon: Icon to display when the list item is collapsed. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prepend_icon: Prepends an icon to the component, uses the same syntax as v-icon. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param append_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param fluid: See description here. :type boolean: :param title: Specify a title text for the component. :type string: :param value: Expands / Collapse the list-group. :type any: :param tag: Specify a custom tag used on the root element. :type string:
class trame.widgets.vuetify3.VTreeviewItem(children=None, **kwargs)

Bases: AbstractElement

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

param title:

See description here.

type string | number:

param subtitle:

Specify a subtitle text for the component.

type string | number:

param loading:

See description here.

type boolean:

param toggle_icon:

See description here.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param active: Controls the active state of the item. This is typically used to highlight the component. :type boolean: :param active_class: See description here. :type string: :param active_color: The applied color when the component is in an active state. :type string: :param append_avatar: See description here. :type string: :param append_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param base_color: Sets the color of component when not focused. :type string: :param disabled: Removes the ability to click or target the component. :type boolean: :param link: Designates that the component is a link. This is automatic when using the href or to prop. :type boolean: :param nav: Reduces the width v-list-item takes up as well as adding a border radius. :type boolean: :param prepend_avatar: See description here. :type string: :param prepend_icon: See description here. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param ripple: See description here. :type boolean | { class: string }: :param value: See description here. :type any: :param slim: Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation. :type boolean: :param border: Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. :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 rounded: See description here. :type string | number | boolean: :param tile: Removes any applied border-radius from the component. :type boolean: :param href: Designates the component as anchor and applies the href attribute. :type string: :param replace: See description here. :type boolean: :param exact: See description here. :type boolean: :param to: See description here. :type RouteLocationRaw: :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’: :param lines: The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop. :type false | ‘one’ | ‘two’ | ‘three’:
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’
‘invalid-input’
‘blur lazy’
‘input lazy’
‘submit lazy’
‘invalid-input lazy’
‘blur eager’
‘input eager’
‘submit eager’
‘invalid-input eager’
‘lazy blur’
‘lazy input’
‘lazy submit’
‘lazy invalid-input’
‘eager blur’
‘eager input’
‘eager submit’
‘eager invalid-input’
‘lazy’
‘eager’: :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.

param continuous:

If true, window will “wrap around” from the last item to the first, and from the first item to the last.

type boolean:

param next_icon:

Icon used for the “next” button if show-arrows is true.

:type | string

(string | [string, number])[]
(new () => any)
FunctionalComponent: :param prev_icon: Icon used for the “prev” button if show-arrows is true. :type | string
(string | [string, number])[]
(new () => any)
FunctionalComponent: :param reverse: Reverse the normal transition direction. :type boolean: :param show_arrows: Display the “next” and “prev” buttons. :type string | boolean: :param touch: Provide a custom left and right function when swiped left or right. :type boolean | <a href=”https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/touch/index.ts#L9-L17” target=”_blank”>TouchHandlers</a>: :param direction: The transition direction when changing windows. :type ‘horizontal’ | ‘vertical’: :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 disabled: Removes the ability to click or target the component. :type boolean: :param selected_class: Configure the active CSS class applied when an item is selected. :type string: :param mandatory: Forces at least one item to always be selected (if available). :type boolean | ‘force’: :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:

Events

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