quasar

class trame.widgets.quasar.QAjaxBar(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

position – Position within window of where QAjaxBar should be displayed
size – Size in CSS units, including unit name
color – Color name for component from the Quasar Color Palette
reverse – Reverse direction of progress
skip_hijack – Skip Ajax hijacking (not a reactive prop)
hijack_filter – Filter which URL should trigger start() + stop()

Events

Parameters:

position – Position within window of where QAjaxBar should be displayed
size – Size in CSS units, including unit name
color – Color name for component from the Quasar Color Palette
reverse – Reverse direction of progress
skip_hijack – Skip Ajax hijacking (not a reactive prop)
hijack_filter – Filter which URL should trigger start() + stop()

class trame.widgets.quasar.QAvatar(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
font_size – The size in CSS units, including unit name, of the content (icon, text)
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
square – Removes border-radius so borders are squared
rounded – Applies a small standard border-radius for a squared shape of the component

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
font_size – The size in CSS units, including unit name, of the content (icon, text)
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
square – Removes border-radius so borders are squared
rounded – Applies a small standard border-radius for a squared shape of the component

class trame.widgets.quasar.QBadge(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
floating – Tell QBadge if it should float to the top right side of the relative positioned parent element or not
transparent – Applies a 0.8 opacity; Useful especially for floating QBadge
multi_line – Content can wrap to multiple lines
label – Badge’s content as string; overrides default slot if specified
align – Sets vertical-align CSS prop
outline – Use ‘outline’ design (colored text and borders only)
rounded – Makes a rounded shaped badge

Events

Parameters:

color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
floating – Tell QBadge if it should float to the top right side of the relative positioned parent element or not
transparent – Applies a 0.8 opacity; Useful especially for floating QBadge
multi_line – Content can wrap to multiple lines
label – Badge’s content as string; overrides default slot if specified
align – Sets vertical-align CSS prop
outline – Use ‘outline’ design (colored text and borders only)
rounded – Makes a rounded shaped badge

class trame.widgets.quasar.QBanner(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

inline_actions – Display actions on same row as content
dense – Dense mode; occupies less space
rounded – Applies a small standard border-radius for a squared shape of the component
dark – Notify the component that the background is a dark color

Events

Parameters:

inline_actions – Display actions on same row as content
dense – Dense mode; occupies less space
rounded – Applies a small standard border-radius for a squared shape of the component
dark – Notify the component that the background is a dark color

class trame.widgets.quasar.QBar(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

dense – Dense mode; occupies less space
dark – The component background color lights up the parent’s background (as opposed to default behavior which is to darken it); Works unless you specify a CSS background color for it

Events

Parameters:

dense – Dense mode; occupies less space
dark – The component background color lights up the parent’s background (as opposed to default behavior which is to darken it); Works unless you specify a CSS background color for it

class trame.widgets.quasar.QBreadcrumbs(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

separator – The string used to separate the breadcrumbs
active_color – The color of the active breadcrumb, which can be any color from the Quasar Color Palette
gutter – The gutter value allows you control over the space between the breadcrumb elements.
separator_color – The color used to color the separator, which can be any color from the Quasar Color Palette
align – Specify how to align the breadcrumbs horizontally

Events

Parameters:

separator – The string used to separate the breadcrumbs
active_color – The color of the active breadcrumb, which can be any color from the Quasar Color Palette
gutter – The gutter value allows you control over the space between the breadcrumb elements.
separator_color – The color used to color the separator, which can be any color from the Quasar Color Palette
align – Specify how to align the breadcrumbs horizontally

class trame.widgets.quasar.QBreadcrumbsEl(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
exact – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
exact_active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
target – Native <a> link target attribute; Use it only along with ‘href’ prop; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
disable – Put component in disabled mode
label – The label text for the breadcrumb
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
tag – HTML tag to use

Events

Parameters:

to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
exact – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
exact_active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
target – Native <a> link target attribute; Use it only along with ‘href’ prop; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
disable – Put component in disabled mode
label – The label text for the breadcrumb
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
tag – HTML tag to use

class trame.widgets.quasar.QBtn(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
type –
1. Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use ‘href’ prop and specify ‘type’ as a media tag
to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’ and ‘replace’ props
target – Native <a> link target attribute; Use it only with ‘to’ or ‘href’ props
label – The text that will be shown on the button
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_right – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
outline – Use ‘outline’ design
flat – Use ‘flat’ design
unelevated – Remove shadow
rounded – Applies a more prominent border-radius for a squared shape button
push – Use ‘push’ design
square – Removes border-radius so borders are squared
glossy – Applies a glossy effect
fab – Makes button size and shape to fit a Floating Action Button
fab_mini – Makes button size and shape to fit a small Floating Action Button
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
no_caps – Avoid turning label text into caps (which happens by default)
no_wrap – Avoid label text wrapping
dense – Dense mode; occupies less space
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
tabindex – Tabindex HTML attribute value
align – Label or content alignment
stack – Stack icon and label vertically instead of on same line (like it is by default)
stretch – When used on flexbox parent, button will stretch to parent’s height
loading – Put button into loading state (displays a QSpinner – can be overridden by using a ‘loading’ slot)
disable – Put component in disabled mode
round – Makes a circle shaped button
percentage – Percentage (0.0 < x < 100.0); To be used along ‘loading’ prop; Display a progress bar on the background
dark_percentage – Progress bar on the background should have dark color; To be used along with ‘percentage’ and ‘loading’ props

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
type –
1. Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use ‘href’ prop and specify ‘type’ as a media tag
to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’ and ‘replace’ props
target – Native <a> link target attribute; Use it only with ‘to’ or ‘href’ props
label – The text that will be shown on the button
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_right – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
outline – Use ‘outline’ design
flat – Use ‘flat’ design
unelevated – Remove shadow
rounded – Applies a more prominent border-radius for a squared shape button
push – Use ‘push’ design
square – Removes border-radius so borders are squared
glossy – Applies a glossy effect
fab – Makes button size and shape to fit a Floating Action Button
fab_mini – Makes button size and shape to fit a small Floating Action Button
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
no_caps – Avoid turning label text into caps (which happens by default)
no_wrap – Avoid label text wrapping
dense – Dense mode; occupies less space
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
tabindex – Tabindex HTML attribute value
align – Label or content alignment
stack – Stack icon and label vertically instead of on same line (like it is by default)
stretch – When used on flexbox parent, button will stretch to parent’s height
loading – Put button into loading state (displays a QSpinner – can be overridden by using a ‘loading’ slot)
disable – Put component in disabled mode
round – Makes a circle shaped button
percentage – Percentage (0.0 < x < 100.0); To be used along ‘loading’ prop; Display a progress bar on the background
dark_percentage – Progress bar on the background should have dark color; To be used along with ‘percentage’ and ‘loading’ props

class trame.widgets.quasar.QBtnDropdown(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
model_value – Controls Menu show/hidden state; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
type –
1. Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use ‘href’ prop and specify ‘type’ as a media tag
to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’ and ‘replace’ props
target – Native <a> link target attribute; Use it only with ‘to’ or ‘href’ props
label – The text that will be shown on the button
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_right – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
outline – Use ‘outline’ design
flat – Use ‘flat’ design
unelevated – Remove shadow
rounded – Applies a more prominent border-radius for a squared shape button
push – Use ‘push’ design
square – Removes border-radius so borders are squared
glossy – Applies a glossy effect
fab – Makes button size and shape to fit a Floating Action Button
fab_mini – Makes button size and shape to fit a small Floating Action Button
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
no_caps – Avoid turning label text into caps (which happens by default)
no_wrap – Avoid label text wrapping
dense – Dense mode; occupies less space
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
tabindex – Tabindex HTML attribute value
align – Label or content alignment
stack – Stack icon and label vertically instead of on same line (like it is by default)
stretch – When used on flexbox parent, button will stretch to parent’s height
loading – Put button into loading state (displays a QSpinner – can be overridden by using a ‘loading’ slot)
disable – Put component in disabled mode
split – Split dropdown icon into its own button
dropdown_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
disable_main_btn – Disable main button (useful along with ‘split’ prop)
disable_dropdown – Disables dropdown (dropdown button if using along ‘split’ prop)
no_icon_animation – Disables the rotation of the dropdown icon when state is toggled
content_style – Style definitions to be attributed to the menu
content_class – Class definitions to be attributed to the menu
cover – Allows the menu to cover the button. When used, the ‘menu-self’ and ‘menu-fit’ props are no longer effective
persistent – Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key
no_route_dismiss – Changing route app won’t dismiss the popup; No need to set it if ‘persistent’ prop is also set
auto_close – Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap
menu_anchor – Two values setting the starting position or anchor point of the menu relative to its target
menu_self – Two values setting the menu’s own position relative to its target
menu_offset – An array of two numbers to offset the menu horizontally and vertically in pixels
toggle_aria_label – aria-label to be used on the dropdown toggle element

Events

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
model_value – Controls Menu show/hidden state; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
type –
1. Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use ‘href’ prop and specify ‘type’ as a media tag
to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’ and ‘replace’ props
target – Native <a> link target attribute; Use it only with ‘to’ or ‘href’ props
label – The text that will be shown on the button
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_right – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
outline – Use ‘outline’ design
flat – Use ‘flat’ design
unelevated – Remove shadow
rounded – Applies a more prominent border-radius for a squared shape button
push – Use ‘push’ design
square – Removes border-radius so borders are squared
glossy – Applies a glossy effect
fab – Makes button size and shape to fit a Floating Action Button
fab_mini – Makes button size and shape to fit a small Floating Action Button
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
no_caps – Avoid turning label text into caps (which happens by default)
no_wrap – Avoid label text wrapping
dense – Dense mode; occupies less space
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
tabindex – Tabindex HTML attribute value
align – Label or content alignment
stack – Stack icon and label vertically instead of on same line (like it is by default)
stretch – When used on flexbox parent, button will stretch to parent’s height
loading – Put button into loading state (displays a QSpinner – can be overridden by using a ‘loading’ slot)
disable – Put component in disabled mode
split – Split dropdown icon into its own button
dropdown_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
disable_main_btn – Disable main button (useful along with ‘split’ prop)
disable_dropdown – Disables dropdown (dropdown button if using along ‘split’ prop)
no_icon_animation – Disables the rotation of the dropdown icon when state is toggled
content_style – Style definitions to be attributed to the menu
content_class – Class definitions to be attributed to the menu
cover – Allows the menu to cover the button. When used, the ‘menu-self’ and ‘menu-fit’ props are no longer effective
persistent – Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key
no_route_dismiss – Changing route app won’t dismiss the popup; No need to set it if ‘persistent’ prop is also set
auto_close – Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap
menu_anchor – Two values setting the starting position or anchor point of the menu relative to its target
menu_self – Two values setting the menu’s own position relative to its target
menu_offset – An array of two numbers to offset the menu horizontally and vertically in pixels
toggle_aria_label – aria-label to be used on the dropdown toggle element

class trame.widgets.quasar.QBtnGroup(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

spread – Spread horizontally to all available space
outline – Use ‘outline’ design for buttons
flat – Use ‘flat’ design for buttons
unelevated – Remove shadow on buttons
rounded – Applies a more prominent border-radius for squared shape buttons
square – Removes border-radius so borders are squared
push – Use ‘push’ design for buttons
stretch – When used on flexbox parent, buttons will stretch to parent’s height
glossy – Applies a glossy effect

Events

Parameters:

spread – Spread horizontally to all available space
outline – Use ‘outline’ design for buttons
flat – Use ‘flat’ design for buttons
unelevated – Remove shadow on buttons
rounded – Applies a more prominent border-radius for squared shape buttons
square – Removes border-radius so borders are squared
push – Use ‘push’ design for buttons
stretch – When used on flexbox parent, buttons will stretch to parent’s height
glossy – Applies a glossy effect

class trame.widgets.quasar.QBtnToggle(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
model_value – Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
options – Array of Objects defining each option
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
toggle_color – Color name for component from the Quasar Color Palette
toggle_text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
spread – Spread horizontally to all available space
outline – Use ‘outline’ design
flat – Use ‘flat’ design
unelevated – Remove shadow
rounded – Applies a more prominent border-radius for a squared shape button
push – Use ‘push’ design
glossy – Applies a glossy effect
size – Button size name or a CSS unit including unit name
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
no_caps – Avoid turning label text into caps (which happens by default)
no_wrap – Avoid label text wrapping
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
dense – Dense mode; occupies less space
readonly – Put component in readonly mode
disable – Put component in disabled mode
stack – Stack icon and label vertically instead of on same line (like it is by default)
stretch – When used on flexbox parent, button will stretch to parent’s height
clearable – Clears model on click of the already selected button

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
model_value – Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
options – Array of Objects defining each option
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
toggle_color – Color name for component from the Quasar Color Palette
toggle_text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
spread – Spread horizontally to all available space
outline – Use ‘outline’ design
flat – Use ‘flat’ design
unelevated – Remove shadow
rounded – Applies a more prominent border-radius for a squared shape button
push – Use ‘push’ design
glossy – Applies a glossy effect
size – Button size name or a CSS unit including unit name
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
no_caps – Avoid turning label text into caps (which happens by default)
no_wrap – Avoid label text wrapping
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
dense – Dense mode; occupies less space
readonly – Put component in readonly mode
disable – Put component in disabled mode
stack – Stack icon and label vertically instead of on same line (like it is by default)
stretch – When used on flexbox parent, button will stretch to parent’s height
clearable – Clears model on click of the already selected button

class trame.widgets.quasar.QCard(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

dark – Notify the component that the background is a dark color
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
tag – HTML tag to use

Events

Parameters:

dark – Notify the component that the background is a dark color
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
tag – HTML tag to use

class trame.widgets.quasar.QCardActions(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

align – Specify how to align the actions
vertical – Display actions one below the other

Events

Parameters:

align – Specify how to align the actions
vertical – Display actions one below the other

class trame.widgets.quasar.QCardSection(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

horizontal – Display a horizontal section (will have no padding and can contain other QCardSection)
tag – HTML tag to use

Events

Parameters:

horizontal – Display a horizontal section (will have no padding and can contain other QCardSection)
tag – HTML tag to use

class trame.widgets.quasar.QCarousel(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

fullscreen – Fullscreen mode
no_route_fullscreen_exit – Changing route app won’t exit fullscreen
model_value – Model of the component defining the current panel’s name; If a Number is used, it does not define the panel’s index, but rather the panel’s name which can also be an Integer; Either use this property (along with a listener for ‘update:model-value’ event) OR use the v-model directive.
keep_alive – Equivalent to using Vue’s native <keep-alive> component on the content
keep_alive_include – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
keep_alive_exclude – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
keep_alive_max – Equivalent to using Vue’s native max prop for <keep-alive>
animated – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
infinite – Makes component appear as infinite (when reaching last panel, next one will become the first one)
swipeable – Enable swipe events (may interfere with content’s touch/mouse events)
vertical – Default transitions and swipe actions will be on the vertical axis
transition_prev – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_next – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_duration – Transition duration (in milliseconds, without unit)
dark – Notify the component that the background is a dark color
height – Height of Carousel in CSS units, including unit name
padding – Applies a default padding to each slide, according to the usage of ‘arrows’ and ‘navigation’ props
control_color – Color name for QCarousel button controls (arrows, navigation) from the Quasar Color Palette
control_text_color – Color name for text color of QCarousel button controls (arrows, navigation) from the Quasar Color Palette
control_type – Type of button to use for controls (arrows, navigation)
autoplay – Jump to next slide (if ‘true’ or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); ‘false’ disables autoplay, ‘true’ enables it for 5000ms intervals
arrows – Show navigation arrow buttons
prev_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
next_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
navigation – Show navigation dots
navigation_position – Side to stick navigation to
navigation_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
navigation_active_icon – Icon name following Quasar convention for the active (current slide) navigation icon; Make sure you have the icon library installed unless you are using ‘img:’ prefix
thumbnails – Show thumbnails

Events

Parameters:

fullscreen – Fullscreen mode
no_route_fullscreen_exit – Changing route app won’t exit fullscreen
model_value – Model of the component defining the current panel’s name; If a Number is used, it does not define the panel’s index, but rather the panel’s name which can also be an Integer; Either use this property (along with a listener for ‘update:model-value’ event) OR use the v-model directive.
keep_alive – Equivalent to using Vue’s native <keep-alive> component on the content
keep_alive_include – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
keep_alive_exclude – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
keep_alive_max – Equivalent to using Vue’s native max prop for <keep-alive>
animated – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
infinite – Makes component appear as infinite (when reaching last panel, next one will become the first one)
swipeable – Enable swipe events (may interfere with content’s touch/mouse events)
vertical – Default transitions and swipe actions will be on the vertical axis
transition_prev – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_next – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_duration – Transition duration (in milliseconds, without unit)
dark – Notify the component that the background is a dark color
height – Height of Carousel in CSS units, including unit name
padding – Applies a default padding to each slide, according to the usage of ‘arrows’ and ‘navigation’ props
control_color – Color name for QCarousel button controls (arrows, navigation) from the Quasar Color Palette
control_text_color – Color name for text color of QCarousel button controls (arrows, navigation) from the Quasar Color Palette
control_type – Type of button to use for controls (arrows, navigation)
autoplay – Jump to next slide (if ‘true’ or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); ‘false’ disables autoplay, ‘true’ enables it for 5000ms intervals
arrows – Show navigation arrow buttons
prev_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
next_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
navigation – Show navigation dots
navigation_position – Side to stick navigation to
navigation_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
navigation_active_icon – Icon name following Quasar convention for the active (current slide) navigation icon; Make sure you have the icon library installed unless you are using ‘img:’ prefix
thumbnails – Show thumbnails

class trame.widgets.quasar.QCarouselControl(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

position – Side/corner to stick to
offset – An array of two numbers to offset the component horizontally and vertically (in pixels)

Events

Parameters:

position – Side/corner to stick to
offset – An array of two numbers to offset the component horizontally and vertically (in pixels)

class trame.widgets.quasar.QCarouselSlide(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Slide name
disable – Put component in disabled mode
img_src – URL pointing to a slide background image (use public folder)

Events

Parameters:

name – Slide name
disable – Put component in disabled mode
img_src – URL pointing to a slide background image (use public folder)

class trame.widgets.quasar.QChatMessage(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

sent – Render as a sent message (so from current user)
label – Renders a label header/section only
bg_color – Color name (from the Quasar Color Palette) for chat bubble background
text_color – Color name (from the Quasar Color Palette) for chat bubble text
name – Author’s name
avatar – URL to the avatar image of the author
text – Array of strings that are the message body. Strings are not sanitized (see details in docs)
stamp – Creation timestamp
size – 1-12 out of 12 (same as col-*)
label_html – Render the label as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
name_html – Render the name as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
text_html – Render the text as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
stamp_html – Render the stamp as HTML; This can lead to XSS attacks so make sure that you sanitize the message first

Events

Parameters:

sent – Render as a sent message (so from current user)
label – Renders a label header/section only
bg_color – Color name (from the Quasar Color Palette) for chat bubble background
text_color – Color name (from the Quasar Color Palette) for chat bubble text
name – Author’s name
avatar – URL to the avatar image of the author
text – Array of strings that are the message body. Strings are not sanitized (see details in docs)
stamp – Creation timestamp
size – 1-12 out of 12 (same as col-*)
label_html – Render the label as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
name_html – Render the name as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
text_html – Render the text as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
stamp_html – Render the stamp as HTML; This can lead to XSS attacks so make sure that you sanitize the message first

class trame.widgets.quasar.QCheckbox(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
val – Works when model (‘value’) is Array. It tells the component which value should add/remove when ticked/unticked
true_value – What model value should be considered as checked/ticked/on?
false_value – What model value should be considered as unchecked/unticked/off?
indeterminate_value – What model value should be considered as ‘indeterminate’?
toggle_order – Determines toggle order of the two states (‘t’ stands for state of true, ‘f’ for state of false); If ‘toggle-indeterminate’ is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> …
toggle_indeterminate – When user clicks/taps on the component, should we toggle through the indeterminate state too?
label – Label to display along the component (or use the default slot instead of this prop)
left_label – Label (if any specified) should be displayed on the left side of the component
checked_icon – The icon to be used when the model is truthy (instead of the default design)
unchecked_icon – The icon to be used when the toggle is falsy (instead of the default design)
indeterminate_icon – The icon to be used when the model is indeterminate (instead of the default design)
color – Color name for component from the Quasar Color Palette
keep_color – Should the color (if specified any) be kept when the component is unticked/ off?
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
val – Works when model (‘value’) is Array. It tells the component which value should add/remove when ticked/unticked
true_value – What model value should be considered as checked/ticked/on?
false_value – What model value should be considered as unchecked/unticked/off?
indeterminate_value – What model value should be considered as ‘indeterminate’?
toggle_order – Determines toggle order of the two states (‘t’ stands for state of true, ‘f’ for state of false); If ‘toggle-indeterminate’ is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> …
toggle_indeterminate – When user clicks/taps on the component, should we toggle through the indeterminate state too?
label – Label to display along the component (or use the default slot instead of this prop)
left_label – Label (if any specified) should be displayed on the left side of the component
checked_icon – The icon to be used when the model is truthy (instead of the default design)
unchecked_icon – The icon to be used when the toggle is falsy (instead of the default design)
indeterminate_icon – The icon to be used when the model is indeterminate (instead of the default design)
color – Color name for component from the Quasar Color Palette
keep_color – Should the color (if specified any) be kept when the component is unticked/ off?
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value

class trame.widgets.quasar.QChip(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

dense – Dense mode; occupies less space
size – QChip size name or a CSS unit including unit name
dark – Notify the component that the background is a dark color
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_right – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_remove – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_selected – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
label – Chip’s content as string; overrides default slot if specified
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
model_value – Model of the component determining if QChip should be rendered or not
selected – Model for QChip if it’s selected or not
square – Sets a low value for border-radius instead of the default one, making it close to a square
outline – Display using the ‘outline’ design
clickable – Is QChip clickable? If it’s the case, then it will add hover effects and emit ‘click’ events
removable – If set, then it displays a ‘remove’ icon that when clicked the QChip emits ‘remove’ event
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
remove_aria_label – aria-label to be used on the remove icon
tabindex – Tabindex HTML attribute value
disable – Put component in disabled mode

Events

Parameters:

dense – Dense mode; occupies less space
size – QChip size name or a CSS unit including unit name
dark – Notify the component that the background is a dark color
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_right – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_remove – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_selected – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
label – Chip’s content as string; overrides default slot if specified
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
model_value – Model of the component determining if QChip should be rendered or not
selected – Model for QChip if it’s selected or not
square – Sets a low value for border-radius instead of the default one, making it close to a square
outline – Display using the ‘outline’ design
clickable – Is QChip clickable? If it’s the case, then it will add hover effects and emit ‘click’ events
removable – If set, then it displays a ‘remove’ icon that when clicked the QChip emits ‘remove’ event
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
remove_aria_label – aria-label to be used on the remove icon
tabindex – Tabindex HTML attribute value
disable – Put component in disabled mode

class trame.widgets.quasar.QCircularProgress(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
value – Current progress (must be between min/max)
min – Minimum value defining ‘no progress’ (must be lower than ‘max’)
max – Maximum value defining 100% progress made (must be higher than ‘min’)
color – Color name for the arc progress from the Quasar Color Palette
center_color – Color name for the center part of the component from the Quasar Color Palette
track_color – Color name for the track of the component from the Quasar Color Palette
font_size – Size of text in CSS units, including unit name. Suggestion: use ‘em’ units to sync with component size
rounded – Rounding the arc of progress
thickness – Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size
angle – Angle to rotate progress arc by
indeterminate – Put component into ‘indeterminate’ state; Ignores ‘value’ prop
show_value – Enables the default slot and uses it (if available), otherwise it displays the ‘value’ prop as text; Make sure the text has enough space to be displayed inside the component
reverse – Reverses the direction of progress; Only for determined state
instant_feedback – No animation when model changes
animation_speed – Animation speed (in milliseconds, without unit)

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
value – Current progress (must be between min/max)
min – Minimum value defining ‘no progress’ (must be lower than ‘max’)
max – Maximum value defining 100% progress made (must be higher than ‘min’)
color – Color name for the arc progress from the Quasar Color Palette
center_color – Color name for the center part of the component from the Quasar Color Palette
track_color – Color name for the track of the component from the Quasar Color Palette
font_size – Size of text in CSS units, including unit name. Suggestion: use ‘em’ units to sync with component size
rounded – Rounding the arc of progress
thickness – Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size
angle – Angle to rotate progress arc by
indeterminate – Put component into ‘indeterminate’ state; Ignores ‘value’ prop
show_value – Enables the default slot and uses it (if available), otherwise it displays the ‘value’ prop as text; Make sure the text has enough space to be displayed inside the component
reverse – Reverses the direction of progress; Only for determined state
instant_feedback – No animation when model changes
animation_speed – Animation speed (in milliseconds, without unit)

class trame.widgets.quasar.QColor(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
default_value – The default value to show when the model doesn’t have one
default_view – The default view of the picker
format_model – Forces a certain model format upon the model
palette – Use a custom palette of colors for the palette tab
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
no_header – Do not render header
no_header_tabs – Do not render header tabs (only the input)
no_footer – Do not render footer; Useful when you want a specific view (‘default-view’ prop) and don’t want the user to be able to switch it
disable – Put component in disabled mode
readonly – Put component in readonly mode
dark – Notify the component that the background is a dark color

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
default_value – The default value to show when the model doesn’t have one
default_view – The default view of the picker
format_model – Forces a certain model format upon the model
palette – Use a custom palette of colors for the palette tab
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
no_header – Do not render header
no_header_tabs – Do not render header tabs (only the input)
no_footer – Do not render footer; Useful when you want a specific view (‘default-view’ prop) and don’t want the user to be able to switch it
disable – Put component in disabled mode
readonly – Put component in readonly mode
dark – Notify the component that the background is a dark color

class trame.widgets.quasar.QDate(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
landscape – Display the component in landscape mode
mask – Mask (formatting string) used for parsing and formatting value
locale – Locale formatting options
calendar – Specify calendar type
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
dark – Notify the component that the background is a dark color
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
readonly – Put component in readonly mode
disable – Put component in disabled mode
model_value – Date(s) of the component; Must be Array if using ‘multiple’ prop; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
title – When specified, it overrides the default header title; Makes sense when not in ‘minimal’ mode
subtitle – When specified, it overrides the default header subtitle; Makes sense when not in ‘minimal’ mode
default_year_month – The default year and month to display (in YYYY/MM format) when model is unfilled (undefined or null); Please ensure it is within the navigation min/max year-month (if using them)
default_view – The view which will be displayed by default
years_in_month_view – Show the years selector in months view
events – A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not); If using a function then for best performance, reference it from your scope and do not define it inline
event_color – Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline
options – Optionally configure the days that are selectable; If using a function, it receives the date as a String and must return a Boolean (is date acceptable or not); If using a function then for best performance, reference it from your scope and do not define it inline; Incompatible with ‘range’ prop
navigation_min_year_month – Lock user from navigating below a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use ‘default-year-month’ prop
navigation_max_year_month – Lock user from navigating above a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use ‘default-year-month’ prop
no_unset – Remove ability to unselect a date; It does not apply to selecting a range over already selected dates
first_day_of_week – Sets the day of the week that is considered the first day (0 - Sunday, 1 - Monday, …); This day will show in the left-most column of the calendar
today_btn – Display a button that selects the current day
minimal – Don’t display the header
multiple – Allow multiple selection; Model must be Array
range – Allow range selection; Partial compatibility with ‘options’ prop: selected ranges might also include ‘unselectable’ days
emit_immediately – Emit model when user browses month and year too; ONLY for single selection (non-multiple, non-range)

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
landscape – Display the component in landscape mode
mask – Mask (formatting string) used for parsing and formatting value
locale – Locale formatting options
calendar – Specify calendar type
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
dark – Notify the component that the background is a dark color
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
readonly – Put component in readonly mode
disable – Put component in disabled mode
model_value – Date(s) of the component; Must be Array if using ‘multiple’ prop; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
title – When specified, it overrides the default header title; Makes sense when not in ‘minimal’ mode
subtitle – When specified, it overrides the default header subtitle; Makes sense when not in ‘minimal’ mode
default_year_month – The default year and month to display (in YYYY/MM format) when model is unfilled (undefined or null); Please ensure it is within the navigation min/max year-month (if using them)
default_view – The view which will be displayed by default
years_in_month_view – Show the years selector in months view
events – A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not); If using a function then for best performance, reference it from your scope and do not define it inline
event_color – Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline
options – Optionally configure the days that are selectable; If using a function, it receives the date as a String and must return a Boolean (is date acceptable or not); If using a function then for best performance, reference it from your scope and do not define it inline; Incompatible with ‘range’ prop
navigation_min_year_month – Lock user from navigating below a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use ‘default-year-month’ prop
navigation_max_year_month – Lock user from navigating above a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use ‘default-year-month’ prop
no_unset – Remove ability to unselect a date; It does not apply to selecting a range over already selected dates
first_day_of_week – Sets the day of the week that is considered the first day (0 - Sunday, 1 - Monday, …); This day will show in the left-most column of the calendar
today_btn – Display a button that selects the current day
minimal – Don’t display the header
multiple – Allow multiple selection; Model must be Array
range – Allow range selection; Partial compatibility with ‘options’ prop: selected ranges might also include ‘unselectable’ days
emit_immediately – Emit model when user browses month and year too; ONLY for single selection (non-multiple, non-range)

class trame.widgets.quasar.QDialog(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
model_value – Model of the component defining shown/hidden state; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
persistent – User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won’t dismiss it
no_esc_dismiss – User cannot dismiss Dialog by hitting ESC key; No need to set it if ‘persistent’ prop is also set
no_backdrop_dismiss – User cannot dismiss Dialog by clicking outside of it; No need to set it if ‘persistent’ prop is also set
no_route_dismiss – Changing route app won’t dismiss Dialog; No need to set it if ‘persistent’ prop is also set
auto_close – Any click/tap inside of the dialog will close it
seamless – Put Dialog into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too
maximized – Put Dialog into maximized mode
full_width – Dialog will try to render with same width as the window
full_height – Dialog will try to render with same height as the window
position – Stick dialog to one of the sides (top, right, bottom or left)
square – Forces content to have squared borders
no_refocus – (Accessibility) When Dialog gets hidden, do not refocus on the DOM element that previously had focus
no_focus – (Accessibility) When Dialog gets shown, do not switch focus on it
no_shake – Do not shake up the Dialog to catch user’s attention
allow_focus_outside – Allow elements outside of the Dialog to be focusable; By default, for accessibility reasons, QDialog does not allow outer focus

Events

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
model_value – Model of the component defining shown/hidden state; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
persistent – User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won’t dismiss it
no_esc_dismiss – User cannot dismiss Dialog by hitting ESC key; No need to set it if ‘persistent’ prop is also set
no_backdrop_dismiss – User cannot dismiss Dialog by clicking outside of it; No need to set it if ‘persistent’ prop is also set
no_route_dismiss – Changing route app won’t dismiss Dialog; No need to set it if ‘persistent’ prop is also set
auto_close – Any click/tap inside of the dialog will close it
seamless – Put Dialog into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too
maximized – Put Dialog into maximized mode
full_width – Dialog will try to render with same width as the window
full_height – Dialog will try to render with same height as the window
position – Stick dialog to one of the sides (top, right, bottom or left)
square – Forces content to have squared borders
no_refocus – (Accessibility) When Dialog gets hidden, do not refocus on the DOM element that previously had focus
no_focus – (Accessibility) When Dialog gets shown, do not switch focus on it
no_shake – Do not shake up the Dialog to catch user’s attention
allow_focus_outside – Allow elements outside of the Dialog to be focusable; By default, for accessibility reasons, QDialog does not allow outer focus

class trame.widgets.quasar.QDrawer(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component defining shown/hidden state; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
side – Side to attach to
overlay – Puts drawer into overlay mode (does not occupy space on screen, narrowing the page)
width – Width of drawer (in pixels)
mini – Puts drawer into mini mode
mini_width – Width of drawer (in pixels) when in mini mode
mini_to_overlay – Mini mode will expand as an overlay
no_mini_animation – Disables animation of the drawer when toggling mini mode
dark – Notify the component that the background is a dark color
breakpoint – Breakpoint (in pixels) of layout width up to which mobile mode is used
behavior – Overrides the default dynamic mode into which the drawer is put on
bordered – Applies a default border to the component
elevated – Adds a default shadow to the header
persistent – Prevents drawer from auto-closing when app’s route changes
show_if_above – Forces drawer to be shown on screen on initial render if the layout width is above breakpoint, regardless of v-model; This is the default behavior when SSR is taken over by client on initial render
no_swipe_open – Disables the default behavior where drawer can be swiped into view; Useful for iOS platforms where it might interfere with Safari’s ‘swipe to go to previous/next page’ feature
no_swipe_close – Disables the default behavior where drawer can be swiped out of view (applies to drawer content only); Useful for iOS platforms where it might interfere with Safari’s ‘swipe to go to previous/next page’ feature
no_swipe_backdrop – Disables the default behavior where drawer backdrop can be swiped

Events

Parameters:

model_value – Model of the component defining shown/hidden state; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
side – Side to attach to
overlay – Puts drawer into overlay mode (does not occupy space on screen, narrowing the page)
width – Width of drawer (in pixels)
mini – Puts drawer into mini mode
mini_width – Width of drawer (in pixels) when in mini mode
mini_to_overlay – Mini mode will expand as an overlay
no_mini_animation – Disables animation of the drawer when toggling mini mode
dark – Notify the component that the background is a dark color
breakpoint – Breakpoint (in pixels) of layout width up to which mobile mode is used
behavior – Overrides the default dynamic mode into which the drawer is put on
bordered – Applies a default border to the component
elevated – Adds a default shadow to the header
persistent – Prevents drawer from auto-closing when app’s route changes
show_if_above – Forces drawer to be shown on screen on initial render if the layout width is above breakpoint, regardless of v-model; This is the default behavior when SSR is taken over by client on initial render
no_swipe_open – Disables the default behavior where drawer can be swiped into view; Useful for iOS platforms where it might interfere with Safari’s ‘swipe to go to previous/next page’ feature
no_swipe_close – Disables the default behavior where drawer can be swiped out of view (applies to drawer content only); Useful for iOS platforms where it might interfere with Safari’s ‘swipe to go to previous/next page’ feature
no_swipe_backdrop – Disables the default behavior where drawer backdrop can be swiped

class trame.widgets.quasar.QEditor(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

fullscreen – Fullscreen mode
no_route_fullscreen_exit – Changing route app won’t exit fullscreen
model_value – Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
readonly – Put component in readonly mode
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no borders)
dense – Dense mode; toolbar buttons are shown on one-line only
dark – Notify the component that the background is a dark color
disable – Put component in disabled mode
min_height – CSS unit for the minimum height of the editable area
max_height – CSS unit for maximum height of the input area
height – CSS value to set the height of the editable area
definitions – Definition of commands and their buttons to be included in the ‘toolbar’ prop
fonts – Object with definitions of fonts
toolbar – An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar
toolbar_color – Font color (from the Quasar Palette) of buttons and text in the toolbar
toolbar_text_color – Text color (from the Quasar Palette) of toolbar commands
toolbar_toggle_color – Choose the active color (from the Quasar Palette) of toolbar commands button
toolbar_bg – Toolbar background color (from Quasar Palette)
toolbar_outline – Toolbar buttons are rendered “outlined”
toolbar_push – Toolbar buttons are rendered as a “push-button” type
toolbar_rounded – Toolbar buttons are rendered “rounded”
paragraph_tag – Paragraph tag to be used
content_style – Object with CSS properties and values for styling the container of QEditor
content_class – CSS classes for the input area
placeholder – Text to display as placeholder

Events

Parameters:

fullscreen – Fullscreen mode
no_route_fullscreen_exit – Changing route app won’t exit fullscreen
model_value – Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
readonly – Put component in readonly mode
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no borders)
dense – Dense mode; toolbar buttons are shown on one-line only
dark – Notify the component that the background is a dark color
disable – Put component in disabled mode
min_height – CSS unit for the minimum height of the editable area
max_height – CSS unit for maximum height of the input area
height – CSS value to set the height of the editable area
definitions – Definition of commands and their buttons to be included in the ‘toolbar’ prop
fonts – Object with definitions of fonts
toolbar – An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar
toolbar_color – Font color (from the Quasar Palette) of buttons and text in the toolbar
toolbar_text_color – Text color (from the Quasar Palette) of toolbar commands
toolbar_toggle_color – Choose the active color (from the Quasar Palette) of toolbar commands button
toolbar_bg – Toolbar background color (from Quasar Palette)
toolbar_outline – Toolbar buttons are rendered “outlined”
toolbar_push – Toolbar buttons are rendered as a “push-button” type
toolbar_rounded – Toolbar buttons are rendered “rounded”
paragraph_tag – Paragraph tag to be used
content_style – Object with CSS properties and values for styling the container of QEditor
content_class – CSS classes for the input area
placeholder – Text to display as placeholder

class trame.widgets.quasar.QExpansionItem(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
exact – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
exact_active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
target – Native <a> link target attribute; Use it only along with ‘href’ prop; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
disable – Put component in disabled mode
model_value – Model of the component defining ‘open’ state; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
expand_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
expanded_icon – Expand icon name (following Quasar convention) for when QExpansionItem is expanded; When used, it also disables the rotation animation of the expand icon; Make sure you have the icon library installed unless you are using ‘img:’ prefix
expand_icon_class – Apply custom class(es) to the expand icon item section
toggle_aria_label – aria-label to be used on the expansion toggle element
label – Header label (unless using ‘header’ slot)
label_lines – Apply ellipsis when there’s not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the ‘-webkit-line-clamp’ CSS property!
caption – Header sub-label (unless using ‘header’ slot)
caption_lines – Apply ellipsis when there’s not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the ‘-webkit-line-clamp’ CSS property!
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
duration – Animation duration (in milliseconds)
header_inset_level – Apply an inset to header (unless using ‘header’ slot); Useful when header avatar/left side is missing but you want to align content with other items that do have a left side, or when you’re building a menu
content_inset_level – Apply an inset to content (changes content padding)
expand_separator – Apply a top and bottom separator when expansion item is opened
default_opened – Puts expansion item into open state on initial render; Overridden by v-model if used
hide_expand_icon – Do not show the expand icon
expand_icon_toggle – Applies the expansion events to the expand icon only and not to the whole header
switch_toggle_side – Switch expand icon side (from default ‘right’ to ‘left’)
dense_toggle – Use dense mode for expand icon
group – Register expansion item into a group (unique name that must be applied to all expansion items in that group) for coordinated open/close state within the group a.k.a. ‘accordion mode’
popup – Put expansion list into ‘popup’ mode
header_style – Apply custom style to the header
header_class – Apply custom class(es) to the header

Events

Parameters:

to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
exact – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
exact_active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
target – Native <a> link target attribute; Use it only along with ‘href’ prop; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
disable – Put component in disabled mode
model_value – Model of the component defining ‘open’ state; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
expand_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
expanded_icon – Expand icon name (following Quasar convention) for when QExpansionItem is expanded; When used, it also disables the rotation animation of the expand icon; Make sure you have the icon library installed unless you are using ‘img:’ prefix
expand_icon_class – Apply custom class(es) to the expand icon item section
toggle_aria_label – aria-label to be used on the expansion toggle element
label – Header label (unless using ‘header’ slot)
label_lines – Apply ellipsis when there’s not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the ‘-webkit-line-clamp’ CSS property!
caption – Header sub-label (unless using ‘header’ slot)
caption_lines – Apply ellipsis when there’s not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the ‘-webkit-line-clamp’ CSS property!
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
duration – Animation duration (in milliseconds)
header_inset_level – Apply an inset to header (unless using ‘header’ slot); Useful when header avatar/left side is missing but you want to align content with other items that do have a left side, or when you’re building a menu
content_inset_level – Apply an inset to content (changes content padding)
expand_separator – Apply a top and bottom separator when expansion item is opened
default_opened – Puts expansion item into open state on initial render; Overridden by v-model if used
hide_expand_icon – Do not show the expand icon
expand_icon_toggle – Applies the expansion events to the expand icon only and not to the whole header
switch_toggle_side – Switch expand icon side (from default ‘right’ to ‘left’)
dense_toggle – Use dense mode for expand icon
group – Register expansion item into a group (unique name that must be applied to all expansion items in that group) for coordinated open/close state within the group a.k.a. ‘accordion mode’
popup – Put expansion list into ‘popup’ mode
header_style – Apply custom style to the header
header_class – Apply custom class(es) to the header

class trame.widgets.quasar.QFab(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

type – Define the button HTML DOM type
outline – Use ‘outline’ design for Fab button
push – Use ‘push’ design for Fab button
flat – Use ‘flat’ design for Fab button
unelevated – Remove shadow
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
glossy – Apply the glossy effect over the button
external_label – Display label besides the FABs, as external content
label – The label that will be shown when Fab is extended
label_position – Position of the label around the icon
hide_label – Hide the label; Useful for animation purposes where you toggle the visibility of the label
label_class – Class definitions to be attributed to the label container
label_style – Style definitions to be attributed to the label container
square – Apply a rectangle aspect to the FAB
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value
model_value – Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to ‘update:modelValue’ event
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
active_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
hide_icon – Hide the icon (don’t use any)
direction – Direction to expand Fab Actions to
vertical_actions_align – The side of the Fab where Fab Actions will expand (only when direction is ‘up’ or ‘down’)
persistent – By default, Fab Actions are hidden when user navigates to another route and this prop disables this behavior

Events

Parameters:

type – Define the button HTML DOM type
outline – Use ‘outline’ design for Fab button
push – Use ‘push’ design for Fab button
flat – Use ‘flat’ design for Fab button
unelevated – Remove shadow
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
glossy – Apply the glossy effect over the button
external_label – Display label besides the FABs, as external content
label – The label that will be shown when Fab is extended
label_position – Position of the label around the icon
hide_label – Hide the label; Useful for animation purposes where you toggle the visibility of the label
label_class – Class definitions to be attributed to the label container
label_style – Style definitions to be attributed to the label container
square – Apply a rectangle aspect to the FAB
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value
model_value – Controls state of fab actions (showing/hidden); Works best with v-model directive, otherwise use along listening to ‘update:modelValue’ event
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
active_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
hide_icon – Hide the icon (don’t use any)
direction – Direction to expand Fab Actions to
vertical_actions_align – The side of the Fab where Fab Actions will expand (only when direction is ‘up’ or ‘down’)
persistent – By default, Fab Actions are hidden when user navigates to another route and this prop disables this behavior

class trame.widgets.quasar.QFabAction(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

type – Define the button HTML DOM type
outline – Use ‘outline’ design for Fab button
push – Use ‘push’ design for Fab button
flat – Use ‘flat’ design for Fab button
unelevated – Remove shadow
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
glossy – Apply the glossy effect over the button
external_label – Display label besides the FABs, as external content
label – The label that will be shown when Fab is extended
label_position – Position of the label around the icon
hide_label – Hide the label; Useful for animation purposes where you toggle the visibility of the label
label_class – Class definitions to be attributed to the label container
label_style – Style definitions to be attributed to the label container
square – Apply a rectangle aspect to the FAB
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
anchor – How to align the Fab Action relative to Fab expand side; By default it uses the align specified in QFab
to – Equivalent to Vue Router <router-link> ‘to’ property
replace – Equivalent to Vue Router <router-link> ‘replace’ property

Events

Parameters:

type – Define the button HTML DOM type
outline – Use ‘outline’ design for Fab button
push – Use ‘push’ design for Fab button
flat – Use ‘flat’ design for Fab button
unelevated – Remove shadow
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
glossy – Apply the glossy effect over the button
external_label – Display label besides the FABs, as external content
label – The label that will be shown when Fab is extended
label_position – Position of the label around the icon
hide_label – Hide the label; Useful for animation purposes where you toggle the visibility of the label
label_class – Class definitions to be attributed to the label container
label_style – Style definitions to be attributed to the label container
square – Apply a rectangle aspect to the FAB
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
anchor – How to align the Fab Action relative to Fab expand side; By default it uses the align specified in QFab
to – Equivalent to Vue Router <router-link> ‘to’ property
replace – Equivalent to Vue Router <router-link> ‘replace’ property

class trame.widgets.quasar.QField(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
error – Does field have validation errors?
error_message – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
no_error_icon – Hide error icon when there is an error
rules – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
reactive_rules – By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
lazy_rules – If set to boolean true then it checks validation status against the ‘rules’ only after field loses focus for first time; If set to ‘ondemand’ then it will trigger only when component’s validate() method is manually called or when the wrapper QForm submits itself
label – A text label that will “float” up above the input field, once the field gets focus
stack_label – Label will be always shown above the field regardless of field content (if any)
hint – Helper (hint) text which gets placed below your wrapped form component
hide_hint – Hide the helper (hint) text when field doesn’t have focus
prefix – Prefix
suffix – Suffix
label_color – Color name for the label from the Quasar Color Palette; Overrides the ‘color’ prop; The difference from ‘color’ prop is that the label will always have this color, even when field is not focused
color – Color name for component from the Quasar Color Palette
bg_color – Color name for component from the Quasar Color Palette
dark – Notify the component that the background is a dark color
loading – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
clearable – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
clear_icon – Custom icon to use for the clear button when using along with ‘clearable’ prop
filled – Use ‘filled’ design for the field
outlined – Use ‘outlined’ design for the field
borderless – Use ‘borderless’ design for the field
standout – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
label_slot – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
bottom_slots – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
hide_bottom_space – Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
counter – Show an automatic counter on bottom right
rounded – Applies a small standard border-radius for a squared shape of the component
square – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
dense – Dense mode; occupies less space
item_aligned – Match inner content alignment to that of QItem
disable – Put component in disabled mode
readonly – Put component in readonly mode
autofocus – Focus field on initial component render
for – Used to specify the ‘id’ of the control and also the ‘for’ attribute of the label that wraps it; If no ‘name’ prop is specified, then it is used for this attribute as well
name – Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of ‘for’ prop, if it exists
maxlength – Specify a max length of model

Events

Parameters:

model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
error – Does field have validation errors?
error_message – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
no_error_icon – Hide error icon when there is an error
rules – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
reactive_rules – By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
lazy_rules – If set to boolean true then it checks validation status against the ‘rules’ only after field loses focus for first time; If set to ‘ondemand’ then it will trigger only when component’s validate() method is manually called or when the wrapper QForm submits itself
label – A text label that will “float” up above the input field, once the field gets focus
stack_label – Label will be always shown above the field regardless of field content (if any)
hint – Helper (hint) text which gets placed below your wrapped form component
hide_hint – Hide the helper (hint) text when field doesn’t have focus
prefix – Prefix
suffix – Suffix
label_color – Color name for the label from the Quasar Color Palette; Overrides the ‘color’ prop; The difference from ‘color’ prop is that the label will always have this color, even when field is not focused
color – Color name for component from the Quasar Color Palette
bg_color – Color name for component from the Quasar Color Palette
dark – Notify the component that the background is a dark color
loading – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
clearable – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
clear_icon – Custom icon to use for the clear button when using along with ‘clearable’ prop
filled – Use ‘filled’ design for the field
outlined – Use ‘outlined’ design for the field
borderless – Use ‘borderless’ design for the field
standout – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
label_slot – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
bottom_slots – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
hide_bottom_space – Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
counter – Show an automatic counter on bottom right
rounded – Applies a small standard border-radius for a squared shape of the component
square – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
dense – Dense mode; occupies less space
item_aligned – Match inner content alignment to that of QItem
disable – Put component in disabled mode
readonly – Put component in readonly mode
autofocus – Focus field on initial component render
for – Used to specify the ‘id’ of the control and also the ‘for’ attribute of the label that wraps it; If no ‘name’ prop is specified, then it is used for this attribute as well
name – Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of ‘for’ prop, if it exists
maxlength – Specify a max length of model

class trame.widgets.quasar.QFile(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of ‘for’ prop, if it exists
multiple – Allow multiple file uploads
accept – Comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element
capture – Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the ‘accept’ prop. Maps to ‘capture’ attribute of native input type=file element
max_file_size – Maximum size of individual file in bytes
max_total_size – Maximum size of all files combined in bytes
max_files – Maximum number of files to contain
filter – Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline
model_value – Model of the component; Must be FileList or Array if using ‘multiple’ prop; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
error – Does field have validation errors?
error_message – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
no_error_icon – Hide error icon when there is an error
rules – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
reactive_rules – By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
lazy_rules – If set to boolean true then it checks validation status against the ‘rules’ only after field loses focus for first time; If set to ‘ondemand’ then it will trigger only when component’s validate() method is manually called or when the wrapper QForm submits itself
label – A text label that will “float” up above the input field, once the field gets focus
stack_label – Label will be always shown above the field regardless of field content (if any)
hint – Helper (hint) text which gets placed below your wrapped form component
hide_hint – Hide the helper (hint) text when field doesn’t have focus
prefix – Prefix
suffix – Suffix
label_color – Color name for the label from the Quasar Color Palette; Overrides the ‘color’ prop; The difference from ‘color’ prop is that the label will always have this color, even when field is not focused
color – Color name for component from the Quasar Color Palette
bg_color – Color name for component from the Quasar Color Palette
dark – Notify the component that the background is a dark color
loading – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
clearable – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
clear_icon – Custom icon to use for the clear button when using along with ‘clearable’ prop
filled – Use ‘filled’ design for the field
outlined – Use ‘outlined’ design for the field
borderless – Use ‘borderless’ design for the field
standout – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
label_slot – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
bottom_slots – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
hide_bottom_space – Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
counter – Show an automatic counter on bottom right
rounded – Applies a small standard border-radius for a squared shape of the component
square – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
dense – Dense mode; occupies less space
item_aligned – Match inner content alignment to that of QItem
disable – Put component in disabled mode
readonly – Put component in readonly mode
autofocus – Focus field on initial component render
for – Used to specify the ‘id’ of the control and also the ‘for’ attribute of the label that wraps it; If no ‘name’ prop is specified, then it is used for this attribute as well
append – Append file(s) to current model rather than replacing them; Has effect only when using ‘multiple’ mode
display_value – Override default selection string, if not using ‘file’ or ‘selected’ scoped slots and if not using ‘use-chips’ prop
use_chips – Use QChip to show picked files
counter_label – Label for the counter; The ‘counter’ prop is necessary to enable this one
tabindex – Tabindex HTML attribute value
input_class – Class definitions to be attributed to the underlying selection container
input_style – Style definitions to be attributed to the underlying selection container

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of ‘for’ prop, if it exists
multiple – Allow multiple file uploads
accept – Comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element
capture – Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the ‘accept’ prop. Maps to ‘capture’ attribute of native input type=file element
max_file_size – Maximum size of individual file in bytes
max_total_size – Maximum size of all files combined in bytes
max_files – Maximum number of files to contain
filter – Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline
model_value – Model of the component; Must be FileList or Array if using ‘multiple’ prop; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
error – Does field have validation errors?
error_message – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
no_error_icon – Hide error icon when there is an error
rules – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
reactive_rules – By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
lazy_rules – If set to boolean true then it checks validation status against the ‘rules’ only after field loses focus for first time; If set to ‘ondemand’ then it will trigger only when component’s validate() method is manually called or when the wrapper QForm submits itself
label – A text label that will “float” up above the input field, once the field gets focus
stack_label – Label will be always shown above the field regardless of field content (if any)
hint – Helper (hint) text which gets placed below your wrapped form component
hide_hint – Hide the helper (hint) text when field doesn’t have focus
prefix – Prefix
suffix – Suffix
label_color – Color name for the label from the Quasar Color Palette; Overrides the ‘color’ prop; The difference from ‘color’ prop is that the label will always have this color, even when field is not focused
color – Color name for component from the Quasar Color Palette
bg_color – Color name for component from the Quasar Color Palette
dark – Notify the component that the background is a dark color
loading – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
clearable – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
clear_icon – Custom icon to use for the clear button when using along with ‘clearable’ prop
filled – Use ‘filled’ design for the field
outlined – Use ‘outlined’ design for the field
borderless – Use ‘borderless’ design for the field
standout – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
label_slot – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
bottom_slots – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
hide_bottom_space – Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
counter – Show an automatic counter on bottom right
rounded – Applies a small standard border-radius for a squared shape of the component
square – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
dense – Dense mode; occupies less space
item_aligned – Match inner content alignment to that of QItem
disable – Put component in disabled mode
readonly – Put component in readonly mode
autofocus – Focus field on initial component render
for – Used to specify the ‘id’ of the control and also the ‘for’ attribute of the label that wraps it; If no ‘name’ prop is specified, then it is used for this attribute as well
append – Append file(s) to current model rather than replacing them; Has effect only when using ‘multiple’ mode
display_value – Override default selection string, if not using ‘file’ or ‘selected’ scoped slots and if not using ‘use-chips’ prop
use_chips – Use QChip to show picked files
counter_label – Label for the counter; The ‘counter’ prop is necessary to enable this one
tabindex – Tabindex HTML attribute value
input_class – Class definitions to be attributed to the underlying selection container
input_style – Style definitions to be attributed to the underlying selection container

class trame.widgets.quasar.QFooter(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
reveal – Enable ‘reveal’ mode; Takes into account user scroll to temporarily show/hide footer
bordered – Applies a default border to the component
elevated – Adds a default shadow to the footer
height_hint – When using SSR, you can optionally hint of the height (in pixels) of the QFooter

Events

Parameters:

model_value – Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
reveal – Enable ‘reveal’ mode; Takes into account user scroll to temporarily show/hide footer
bordered – Applies a default border to the component
elevated – Adds a default shadow to the footer
height_hint – When using SSR, you can optionally hint of the height (in pixels) of the QFooter

class trame.widgets.quasar.QForm(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

autofocus – Focus first focusable element on initial component render
no_error_focus – Do not try to focus on first component that has a validation error when submitting form
no_reset_focus – Do not try to focus on first component when resetting form
greedy – Validate all fields in form (by default it stops after finding the first invalid field with synchronous validation)

Events

Parameters:

autofocus – Focus first focusable element on initial component render
no_error_focus – Do not try to focus on first component that has a validation error when submitting form
no_reset_focus – Do not try to focus on first component when resetting form
greedy – Validate all fields in form (by default it stops after finding the first invalid field with synchronous validation)

class trame.widgets.quasar.QFormChildMixin(children=None, **kwargs): Bases: AbstractElement

class trame.widgets.quasar.QHeader(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
reveal – Enable ‘reveal’ mode; Takes into account user scroll to temporarily show/hide header
reveal_offset – Amount of scroll (in pixels) that should trigger a ‘reveal’ state change
bordered – Applies a default border to the component
elevated – Adds a default shadow to the header
height_hint – When using SSR, you can optionally hint of the height (in pixels) of the QHeader

Events

Parameters:

model_value – Model of the component defining if it is shown or hidden to the user; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
reveal – Enable ‘reveal’ mode; Takes into account user scroll to temporarily show/hide header
reveal_offset – Amount of scroll (in pixels) that should trigger a ‘reveal’ state change
bordered – Applies a default border to the component
elevated – Adds a default shadow to the header
height_hint – When using SSR, you can optionally hint of the height (in pixels) of the QHeader

class trame.widgets.quasar.QIcon(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
tag – HTML tag to render, unless no icon is supplied or it’s an svg icon
name – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
color – Color name for component from the Quasar Color Palette
left – Useful if icon is on the left side of something: applies a standard margin on the right side of Icon
right – Useful if icon is on the right side of something: applies a standard margin on the left side of Icon

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
tag – HTML tag to render, unless no icon is supplied or it’s an svg icon
name – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
color – Color name for component from the Quasar Color Palette
left – Useful if icon is on the left side of something: applies a standard margin on the right side of Icon
right – Useful if icon is on the right side of something: applies a standard margin on the left side of Icon

class trame.widgets.quasar.QImg(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

ratio – Force the component to maintain an aspect ratio
src – Path to image
srcset – Same syntax as <img> srcset attribute
sizes – Same syntax as <img> sizes attribute
placeholder_src – While waiting for your image to load, you can use a placeholder image
initial_ratio – Use it when not specifying ‘ratio’ but still wanting an initial aspect ratio
width – Forces image width; Must also include the unit (px or %)
height – Forces image height; Must also include the unit (px or %)
loading – Lazy or immediate load; Same syntax as <img> loading attribute
crossorigin – Same syntax as <img> crossorigin attribute
decoding – Same syntax as <img> decoding attribute
referrerpolicy – Same syntax as <img> referrerpolicy attribute
fetchpriority – Provides a hint of the relative priority to use when fetching the image
fit – How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with ‘position’ prop
position – The alignment of the image into the container; Equivalent of the object-position CSS prop
alt – Specifies an alternate text for the image, if the image cannot be displayed
draggable – Adds the native ‘draggable’ attribute
img_class – CSS classes to be attributed to the native img element
img_style – Apply CSS to the native img element
spinner_color – Color name for default Spinner (unless using a ‘loading’ slot)
spinner_size – Size in CSS units, including unit name, for default Spinner (unless using a ‘loading’ slot)
no_spinner – Do not display the default spinner while waiting for the image to be loaded; It is overriden by the ‘loading’ slot when one is present
no_native_menu – Disables the native context menu for the image
no_transition – Disable default transition when switching between old and new image

Events

Parameters:

ratio – Force the component to maintain an aspect ratio
src – Path to image
srcset – Same syntax as <img> srcset attribute
sizes – Same syntax as <img> sizes attribute
placeholder_src – While waiting for your image to load, you can use a placeholder image
initial_ratio – Use it when not specifying ‘ratio’ but still wanting an initial aspect ratio
width – Forces image width; Must also include the unit (px or %)
height – Forces image height; Must also include the unit (px or %)
loading – Lazy or immediate load; Same syntax as <img> loading attribute
crossorigin – Same syntax as <img> crossorigin attribute
decoding – Same syntax as <img> decoding attribute
referrerpolicy – Same syntax as <img> referrerpolicy attribute
fetchpriority – Provides a hint of the relative priority to use when fetching the image
fit – How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with ‘position’ prop
position – The alignment of the image into the container; Equivalent of the object-position CSS prop
alt – Specifies an alternate text for the image, if the image cannot be displayed
draggable – Adds the native ‘draggable’ attribute
img_class – CSS classes to be attributed to the native img element
img_style – Apply CSS to the native img element
spinner_color – Color name for default Spinner (unless using a ‘loading’ slot)
spinner_size – Size in CSS units, including unit name, for default Spinner (unless using a ‘loading’ slot)
no_spinner – Do not display the default spinner while waiting for the image to be loaded; It is overriden by the ‘loading’ slot when one is present
no_native_menu – Disables the native context menu for the image
no_transition – Disable default transition when switching between old and new image

class trame.widgets.quasar.QInfiniteScroll(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

offset – Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance
debounce – Debounce amount (in milliseconds)
initial_index – Initialize the pagination index (used for the @load event)
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
disable – Put component in disabled mode
reverse – Scroll area should behave like a messenger - starting scrolled to bottom and loading when reaching the top

Events

Parameters:

offset – Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance
debounce – Debounce amount (in milliseconds)
initial_index – Initialize the pagination index (used for the @load event)
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
disable – Put component in disabled mode
reverse – Scroll area should behave like a messenger - starting scrolled to bottom and loading when reaching the top

class trame.widgets.quasar.QInnerLoading(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
size – Size in CSS units, including unit name, or standard size name (xs|sm|md|lg|xl), for the inner Spinner (unless using the default slot)
showing – State - loading or not
color – Color name for component from the Quasar Color Palette for the inner Spinner (unless using the default slot)
label – Add a label; Gets overriden when using the default slot
label_class – Add CSS class(es) to the label; Works along the ‘label’ prop only
label_style – Apply custom style to the label; Works along the ‘label’ prop only
dark – Notify the component that the background is a dark color

Events

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
size – Size in CSS units, including unit name, or standard size name (xs|sm|md|lg|xl), for the inner Spinner (unless using the default slot)
showing – State - loading or not
color – Color name for component from the Quasar Color Palette for the inner Spinner (unless using the default slot)
label – Add a label; Gets overriden when using the default slot
label_class – Add CSS class(es) to the label; Works along the ‘label’ prop only
label_style – Apply custom style to the label; Works along the ‘label’ prop only
dark – Notify the component that the background is a dark color

class trame.widgets.quasar.QInput(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of ‘for’ prop, if it exists
mask – Custom mask or one of the predefined mask names
fill_mask – Fills string with specified characters (or underscore if value is not string) to fill mask’s length
reverse_fill_mask – Fills string from the right side of the mask
unmasked_value – Model will be unmasked (won’t contain tokens/separation characters)
model_value – Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
error – Does field have validation errors?
error_message – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
no_error_icon – Hide error icon when there is an error
rules – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
reactive_rules – By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
lazy_rules – If set to boolean true then it checks validation status against the ‘rules’ only after field loses focus for first time; If set to ‘ondemand’ then it will trigger only when component’s validate() method is manually called or when the wrapper QForm submits itself
label – A text label that will “float” up above the input field, once the field gets focus
stack_label – Label will be always shown above the field regardless of field content (if any)
hint – Helper (hint) text which gets placed below your wrapped form component
hide_hint – Hide the helper (hint) text when field doesn’t have focus
prefix – Prefix
suffix – Suffix
label_color – Color name for the label from the Quasar Color Palette; Overrides the ‘color’ prop; The difference from ‘color’ prop is that the label will always have this color, even when field is not focused
color – Color name for component from the Quasar Color Palette
bg_color – Color name for component from the Quasar Color Palette
dark – Notify the component that the background is a dark color
loading – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
clearable – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
clear_icon – Custom icon to use for the clear button when using along with ‘clearable’ prop
filled – Use ‘filled’ design for the field
outlined – Use ‘outlined’ design for the field
borderless – Use ‘borderless’ design for the field
standout – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
label_slot – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
bottom_slots – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
hide_bottom_space – Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
counter – Show an automatic counter on bottom right
rounded – Applies a small standard border-radius for a squared shape of the component
square – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
dense – Dense mode; occupies less space
item_aligned – Match inner content alignment to that of QItem
disable – Put component in disabled mode
readonly – Put component in readonly mode
autofocus – Focus field on initial component render
for – Used to specify the ‘id’ of the control and also the ‘for’ attribute of the label that wraps it; If no ‘name’ prop is specified, then it is used for this attribute as well
shadow_text – Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file
type – Input type
debounce – Debounce amount (in milliseconds) when updating model
maxlength – Specify a max length of model
autogrow – Make field autogrow along with its content (uses a textarea)
input_class – Class definitions to be attributed to the underlying input tag
input_style – Style definitions to be attributed to the underlying input tag

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of ‘for’ prop, if it exists
mask – Custom mask or one of the predefined mask names
fill_mask – Fills string with specified characters (or underscore if value is not string) to fill mask’s length
reverse_fill_mask – Fills string from the right side of the mask
unmasked_value – Model will be unmasked (won’t contain tokens/separation characters)
model_value – Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
error – Does field have validation errors?
error_message – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
no_error_icon – Hide error icon when there is an error
rules – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
reactive_rules – By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
lazy_rules – If set to boolean true then it checks validation status against the ‘rules’ only after field loses focus for first time; If set to ‘ondemand’ then it will trigger only when component’s validate() method is manually called or when the wrapper QForm submits itself
label – A text label that will “float” up above the input field, once the field gets focus
stack_label – Label will be always shown above the field regardless of field content (if any)
hint – Helper (hint) text which gets placed below your wrapped form component
hide_hint – Hide the helper (hint) text when field doesn’t have focus
prefix – Prefix
suffix – Suffix
label_color – Color name for the label from the Quasar Color Palette; Overrides the ‘color’ prop; The difference from ‘color’ prop is that the label will always have this color, even when field is not focused
color – Color name for component from the Quasar Color Palette
bg_color – Color name for component from the Quasar Color Palette
dark – Notify the component that the background is a dark color
loading – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
clearable – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
clear_icon – Custom icon to use for the clear button when using along with ‘clearable’ prop
filled – Use ‘filled’ design for the field
outlined – Use ‘outlined’ design for the field
borderless – Use ‘borderless’ design for the field
standout – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
label_slot – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
bottom_slots – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
hide_bottom_space – Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
counter – Show an automatic counter on bottom right
rounded – Applies a small standard border-radius for a squared shape of the component
square – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
dense – Dense mode; occupies less space
item_aligned – Match inner content alignment to that of QItem
disable – Put component in disabled mode
readonly – Put component in readonly mode
autofocus – Focus field on initial component render
for – Used to specify the ‘id’ of the control and also the ‘for’ attribute of the label that wraps it; If no ‘name’ prop is specified, then it is used for this attribute as well
shadow_text – Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file
type – Input type
debounce – Debounce amount (in milliseconds) when updating model
maxlength – Specify a max length of model
autogrow – Make field autogrow along with its content (uses a textarea)
input_class – Class definitions to be attributed to the underlying input tag
input_style – Style definitions to be attributed to the underlying input tag

class trame.widgets.quasar.QIntersection(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

tag – HTML tag to use
once – Get triggered only once
ssr_prerender – Pre-render content on server side if using SSR (use it to pre-render above the fold content)
root – [Intersection API root prop] Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element
margin – [Intersection API rootMargin prop] Allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections
threshold – [Intersection API threshold prop] Threshold(s) at which to trigger, specified as a ratio, or list of ratios, of (visible area / total area) of the observed element
transition – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
disable – Disable visibility observable (content will remain as it was, visible or hidden)

Events

Parameters:

tag – HTML tag to use
once – Get triggered only once
ssr_prerender – Pre-render content on server side if using SSR (use it to pre-render above the fold content)
root – [Intersection API root prop] Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element
margin – [Intersection API rootMargin prop] Allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections
threshold – [Intersection API threshold prop] Threshold(s) at which to trigger, specified as a ratio, or list of ratios, of (visible area / total area) of the observed element
transition – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
disable – Disable visibility observable (content will remain as it was, visible or hidden)

class trame.widgets.quasar.QItem(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
exact – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
exact_active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
target – Native <a> link target attribute; Use it only along with ‘href’ prop; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
disable – Put component in disabled mode
active – Put item into ‘active’ state
dark – Notify the component that the background is a dark color
clickable – Is QItem clickable? If it’s the case, then it will add hover effects and emit ‘click’ events
dense – Dense mode; occupies less space
inset_level – Apply an inset; Useful when avatar/left side is missing but you want to align content with other items that do have a left side, or when you’re building a menu
tabindex – Tabindex HTML attribute value
tag – HTML tag to render; Suggestion: use ‘label’ when encapsulating a QCheckbox/QRadio/QToggle so that when user clicks/taps on the whole item it will trigger a model change for the mentioned components
manual_focus – Put item into a manual focus state; Enables ‘focused’ prop which will determine if item is focused or not, rather than relying on native hover/focus states
focused – Determines focus state, ONLY if ‘manual-focus’ is enabled / set to true

Events

Parameters:

to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
exact – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
exact_active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
target – Native <a> link target attribute; Use it only along with ‘href’ prop; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
disable – Put component in disabled mode
active – Put item into ‘active’ state
dark – Notify the component that the background is a dark color
clickable – Is QItem clickable? If it’s the case, then it will add hover effects and emit ‘click’ events
dense – Dense mode; occupies less space
inset_level – Apply an inset; Useful when avatar/left side is missing but you want to align content with other items that do have a left side, or when you’re building a menu
tabindex – Tabindex HTML attribute value
tag – HTML tag to render; Suggestion: use ‘label’ when encapsulating a QCheckbox/QRadio/QToggle so that when user clicks/taps on the whole item it will trigger a model change for the mentioned components
manual_focus – Put item into a manual focus state; Enables ‘focused’ prop which will determine if item is focused or not, rather than relying on native hover/focus states
focused – Determines focus state, ONLY if ‘manual-focus’ is enabled / set to true

class trame.widgets.quasar.QItemLabel(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

overline – Renders an overline label
caption – Renders a caption label
header – Renders a header label
lines – Apply ellipsis when there’s not enough space to render on the specified number of lines;

Events

Parameters:

overline – Renders an overline label
caption – Renders a caption label
header – Renders a header label
lines – Apply ellipsis when there’s not enough space to render on the specified number of lines;

class trame.widgets.quasar.QItemSection(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

avatar – Render an avatar item side (does not needs ‘side’ prop to be set)
thumbnail – Render a thumbnail item side (does not needs ‘side’ prop to be set)
side – Renders as a side of the item
top – Align content to top (useful for multi-line items)
no_wrap – Do not wrap text (useful for item’s main content)

Events

Parameters:

avatar – Render an avatar item side (does not needs ‘side’ prop to be set)
thumbnail – Render a thumbnail item side (does not needs ‘side’ prop to be set)
side – Renders as a side of the item
top – Align content to top (useful for multi-line items)
no_wrap – Do not wrap text (useful for item’s main content)

class trame.widgets.quasar.QKnob(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Any number to indicate the given value of the knob. Either use this property (along with a listener for ‘update:modelValue’ event) OR use the v-model directive
min – The minimum value that the model (the knob value) should start at
max – The maximum value that the model (the knob value) should go to
inner_min – Inner minimum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be higher or equal to ‘min’ prop; Defaults to ‘min’ prop
inner_max – Inner maximum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be lower or equal to ‘max’ prop; Defaults to ‘max’ prop
step – A number representing steps in the value of the model, while adjusting the knob
reverse – Reverses the direction of progress
instant_feedback – No animation when model changes
color – Color name for component from the Quasar Color Palette
center_color – Color name for the center part of the component from the Quasar Color Palette
track_color – Color name for the track of the component from the Quasar Color Palette
font_size – Size of text in CSS units, including unit name. Suggestion: use ‘em’ units to sync with component size
thickness – Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size
angle – Angle to rotate progress arc by
show_value – Enables the default slot and uses it (if available), otherwise it displays the ‘value’ prop as text; Make sure the text has enough space to be displayed inside the component
tabindex – Tabindex HTML attribute value
disable – Put component in disabled mode
readonly – Put component in readonly mode

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Any number to indicate the given value of the knob. Either use this property (along with a listener for ‘update:modelValue’ event) OR use the v-model directive
min – The minimum value that the model (the knob value) should start at
max – The maximum value that the model (the knob value) should go to
inner_min – Inner minimum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be higher or equal to ‘min’ prop; Defaults to ‘min’ prop
inner_max – Inner maximum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be lower or equal to ‘max’ prop; Defaults to ‘max’ prop
step – A number representing steps in the value of the model, while adjusting the knob
reverse – Reverses the direction of progress
instant_feedback – No animation when model changes
color – Color name for component from the Quasar Color Palette
center_color – Color name for the center part of the component from the Quasar Color Palette
track_color – Color name for the track of the component from the Quasar Color Palette
font_size – Size of text in CSS units, including unit name. Suggestion: use ‘em’ units to sync with component size
thickness – Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size
angle – Angle to rotate progress arc by
show_value – Enables the default slot and uses it (if available), otherwise it displays the ‘value’ prop as text; Make sure the text has enough space to be displayed inside the component
tabindex – Tabindex HTML attribute value
disable – Put component in disabled mode
readonly – Put component in readonly mode

class trame.widgets.quasar.QLayout(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

view – Defines how your layout components (header/footer/drawer) should be placed on screen; See docs examples
container – Containerize the layout which means it changes the default behavior of expanding to the whole window; Useful (but not limited to) for when using on a QDialog

Events

Parameters:

view – Defines how your layout components (header/footer/drawer) should be placed on screen; See docs examples
container – Containerize the layout which means it changes the default behavior of expanding to the whole window; Useful (but not limited to) for when using on a QDialog

class trame.widgets.quasar.QLinearProgress(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
value – Progress value (0.0 < x < 1.0)
buffer – Optional buffer value (0.0 < x < 1.0)
color – Color name for component from the Quasar Color Palette
track_color – Color name for component’s track from the Quasar Color Palette
dark – Notify the component that the background is a dark color
reverse – Reverse direction of progress
stripe – Draw stripes; For determinate state only (for performance reasons)
indeterminate – Put component into indeterminate mode
query – Put component into query mode
rounded – Applies a small standard border-radius for a squared shape of the component
instant_feedback – No transition when model changes
animation_speed – Animation speed (in milliseconds, without unit)

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
value – Progress value (0.0 < x < 1.0)
buffer – Optional buffer value (0.0 < x < 1.0)
color – Color name for component from the Quasar Color Palette
track_color – Color name for component’s track from the Quasar Color Palette
dark – Notify the component that the background is a dark color
reverse – Reverse direction of progress
stripe – Draw stripes; For determinate state only (for performance reasons)
indeterminate – Put component into indeterminate mode
query – Put component into query mode
rounded – Applies a small standard border-radius for a squared shape of the component
instant_feedback – No transition when model changes
animation_speed – Animation speed (in milliseconds, without unit)

class trame.widgets.quasar.QList(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

bordered – Applies a default border to the component
dense – Dense mode; occupies less space
separator – Applies a separator between contained items
dark – Notify the component that the background is a dark color
padding – Applies a material design-like padding on top and bottom
tag – HTML tag to use

Events

Parameters:

bordered – Applies a default border to the component
dense – Dense mode; occupies less space
separator – Applies a separator between contained items
dark – Notify the component that the background is a dark color
padding – Applies a material design-like padding on top and bottom
tag – HTML tag to use

class trame.widgets.quasar.QMarkupTable(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

dense – Dense mode; occupies less space
dark – Notify the component that the background is a dark color
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
square – Removes border-radius so borders are squared
separator – Use a separator/border between rows, columns or all cells
wrap_cells – Wrap text within table cells

Events

Parameters:

dense – Dense mode; occupies less space
dark – Notify the component that the background is a dark color
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
square – Removes border-radius so borders are squared
separator – Use a separator/border between rows, columns or all cells
wrap_cells – Wrap text within table cells

class trame.widgets.quasar.QMenu(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
target – Configure a target element to trigger component toggle; ‘true’ means it enables the parent DOM element, ‘false’ means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)
no_parent_event – Skips attaching events to the target DOM element (that trigger the element to get shown)
context_menu – Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)
model_value – Model of the component defining shown/hidden state; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
dark – Notify the component that the background is a dark color
fit – Allows the menu to match at least the full width of its target
cover – Allows the menu to cover its target. When used, the ‘self’ and ‘fit’ props are no longer effective
anchor – Two values setting the starting position or anchor point of the menu relative to its target
self – Two values setting the menu’s own position relative to its target
offset – An array of two numbers to offset the menu horizontally and vertically in pixels
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
touch_position – Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched
persistent – Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key
no_route_dismiss – Changing route app won’t dismiss the popup; No need to set it if ‘persistent’ prop is also set
auto_close – Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap
separate_close_popup – Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)
square – Forces content to have squared borders
no_refocus – (Accessibility) When Menu gets hidden, do not refocus on the DOM element that previously had focus
no_focus – (Accessibility) When Menu gets shown, do not switch focus on it
max_height – The maximum height of the menu; Size in CSS units, including unit name
max_width – The maximum width of the menu; Size in CSS units, including unit name

Events

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
target – Configure a target element to trigger component toggle; ‘true’ means it enables the parent DOM element, ‘false’ means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)
no_parent_event – Skips attaching events to the target DOM element (that trigger the element to get shown)
context_menu – Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)
model_value – Model of the component defining shown/hidden state; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
dark – Notify the component that the background is a dark color
fit – Allows the menu to match at least the full width of its target
cover – Allows the menu to cover its target. When used, the ‘self’ and ‘fit’ props are no longer effective
anchor – Two values setting the starting position or anchor point of the menu relative to its target
self – Two values setting the menu’s own position relative to its target
offset – An array of two numbers to offset the menu horizontally and vertically in pixels
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
touch_position – Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched
persistent – Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key
no_route_dismiss – Changing route app won’t dismiss the popup; No need to set it if ‘persistent’ prop is also set
auto_close – Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap
separate_close_popup – Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)
square – Forces content to have squared borders
no_refocus – (Accessibility) When Menu gets hidden, do not refocus on the DOM element that previously had focus
no_focus – (Accessibility) When Menu gets shown, do not switch focus on it
max_height – The maximum height of the menu; Size in CSS units, including unit name
max_width – The maximum width of the menu; Size in CSS units, including unit name

class trame.widgets.quasar.QNoSsr(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

tag – HTML tag to use
placeholder – Text to display on server-side render (unless using ‘placeholder’ slot)

Events

Parameters:

tag – HTML tag to use
placeholder – Text to display on server-side render (unless using ‘placeholder’ slot)

class trame.widgets.quasar.QOptionGroup(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
options – Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly
name – Used to specify the name of the controls; Useful if dealing with forms submitted directly to a URL
type – The type of input component to be used
color – Color name for component from the Quasar Color Palette
keep_color – Should the color (if specified any) be kept when input components are unticked?
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
left_label – Label (if any specified) should be displayed on the left side of the input components
inline – Show input components as inline-block rather than each having their own row
disable – Put component in disabled mode

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
options – Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly
name – Used to specify the name of the controls; Useful if dealing with forms submitted directly to a URL
type – The type of input component to be used
color – Color name for component from the Quasar Color Palette
keep_color – Should the color (if specified any) be kept when input components are unticked?
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
left_label – Label (if any specified) should be displayed on the left side of the input components
inline – Show input components as inline-block rather than each having their own row
disable – Put component in disabled mode

class trame.widgets.quasar.QPage(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

padding – Applies a default responsive page padding
style_fn – Override default CSS style applied to the component (sets minHeight); Function(offset: Number) => CSS props/value: Object; For best performance, reference it from your scope and do not define it inline

Events

Parameters:

padding – Applies a default responsive page padding
style_fn – Override default CSS style applied to the component (sets minHeight); Function(offset: Number) => CSS props/value: Object; For best performance, reference it from your scope and do not define it inline

class trame.widgets.quasar.QPageContainer(children=None, **kwargs): Bases: AbstractElement

class trame.widgets.quasar.QPageScroller(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

position – Page side/corner to stick to
offset – An array of two numbers to offset the component horizontally and vertically in pixels
expand – By default the component shrinks to content’s size; By using this prop you make the component fully expand horizontally or vertically, based on ‘position’ prop
scroll_offset – Scroll offset (in pixels) from which point the component is shown on page; Measured from the top of the page (or from the bottom if in ‘reverse’ mode)
reverse – Work in reverse (shows when scrolling to the top of the page and scrolls to bottom when triggered)
duration – Duration (in milliseconds) of the scrolling until it reaches its target

Events

Parameters:

position – Page side/corner to stick to
offset – An array of two numbers to offset the component horizontally and vertically in pixels
expand – By default the component shrinks to content’s size; By using this prop you make the component fully expand horizontally or vertically, based on ‘position’ prop
scroll_offset – Scroll offset (in pixels) from which point the component is shown on page; Measured from the top of the page (or from the bottom if in ‘reverse’ mode)
reverse – Work in reverse (shows when scrolling to the top of the page and scrolls to bottom when triggered)
duration – Duration (in milliseconds) of the scrolling until it reaches its target

class trame.widgets.quasar.QPageSticky(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

position – Page side/corner to stick to
offset – An array of two numbers to offset the component horizontally and vertically in pixels
expand – By default the component shrinks to content’s size; By using this prop you make the component fully expand horizontally or vertically, based on ‘position’ prop

Events

Parameters:

position – Page side/corner to stick to
offset – An array of two numbers to offset the component horizontally and vertically in pixels
expand – By default the component shrinks to content’s size; By using this prop you make the component fully expand horizontally or vertically, based on ‘position’ prop

class trame.widgets.quasar.QPagination(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Current page (must be between min/max)
min – Minimum page (must be lower than ‘max’)
max – Number of last page (must be higher than ‘min’)
dark – Notify the component that the background is a dark color (useful when you are using it along with the ‘input’ prop)
size – Button size in CSS units, including unit name
disable – Put component in disabled mode
input – Use an input instead of buttons
icon_prev – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_next – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_first – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_last – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
to_fn – Generate link for page buttons; For best performance, reference it from your scope and do not define it inline
boundary_links – Show boundary button links
boundary_numbers – Always show first and last page buttons (if not using ‘input’)
direction_links – Show direction buttons
ellipses – Show ellipses (…) when pages are available
max_pages – Maximum number of page links to display at a time; 0 means Infinite
flat – Use ‘flat’ design for non-active buttons (it’s the default option)
outline – Use ‘outline’ design for non-active buttons
unelevated – Remove shadow for non-active buttons
push – Use ‘push’ design for non-active buttons
color – Color name from the Quasar Color Palette for the non-active buttons
text_color – Text color name from the Quasar Color Palette for the ACTIVE buttons
active_design – The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)
active_color – Color name from the Quasar Color Palette for the ACTIVE button
active_text_color – Text color name from the Quasar Color Palette for the ACTIVE button
round – Makes a circle shaped button for all buttons
rounded – Applies a more prominent border-radius for a squared shape button for all buttons
glossy – Applies a glossy effect for all buttons
gutter – Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
input_style – Style definitions to be attributed to the input (if using one)
input_class – Class definitions to be attributed to the input (if using one)
ripple – Configure buttons material ripple (disable it by setting it to ‘false’ or supply a config object); Does not applies to boundary and ellipsis buttons

Events

Parameters:

model_value – Current page (must be between min/max)
min – Minimum page (must be lower than ‘max’)
max – Number of last page (must be higher than ‘min’)
dark – Notify the component that the background is a dark color (useful when you are using it along with the ‘input’ prop)
size – Button size in CSS units, including unit name
disable – Put component in disabled mode
input – Use an input instead of buttons
icon_prev – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_next – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_first – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_last – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
to_fn – Generate link for page buttons; For best performance, reference it from your scope and do not define it inline
boundary_links – Show boundary button links
boundary_numbers – Always show first and last page buttons (if not using ‘input’)
direction_links – Show direction buttons
ellipses – Show ellipses (…) when pages are available
max_pages – Maximum number of page links to display at a time; 0 means Infinite
flat – Use ‘flat’ design for non-active buttons (it’s the default option)
outline – Use ‘outline’ design for non-active buttons
unelevated – Remove shadow for non-active buttons
push – Use ‘push’ design for non-active buttons
color – Color name from the Quasar Color Palette for the non-active buttons
text_color – Text color name from the Quasar Color Palette for the ACTIVE buttons
active_design – The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)
active_color – Color name from the Quasar Color Palette for the ACTIVE button
active_text_color – Text color name from the Quasar Color Palette for the ACTIVE button
round – Makes a circle shaped button for all buttons
rounded – Applies a more prominent border-radius for a squared shape button for all buttons
glossy – Applies a glossy effect for all buttons
gutter – Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)
padding – Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
input_style – Style definitions to be attributed to the input (if using one)
input_class – Class definitions to be attributed to the input (if using one)
ripple – Configure buttons material ripple (disable it by setting it to ‘false’ or supply a config object); Does not applies to boundary and ellipsis buttons

class trame.widgets.quasar.QParallax(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

src – Path to image (unless a ‘media’ slot is used)
height – Height of component (in pixels)
speed – Speed of parallax effect (0.0 < x < 1.0)
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one

Events

Parameters:

src – Path to image (unless a ‘media’ slot is used)
height – Height of component (in pixels)
speed – Speed of parallax effect (0.0 < x < 1.0)
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one

class trame.widgets.quasar.QPopupEdit(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
title – Optional title (unless ‘title’ slot is used)
buttons – Show Set and Cancel buttons
label_set – Override Set button label
label_cancel – Override Cancel button label
auto_save – Automatically save the model (if changed) when user clicks/taps outside of the popup; It does not apply to ESC key
color – Color name for component from the Quasar Color Palette
validate – Validates model then triggers ‘save’ and closes Popup; Returns a Boolean (‘true’ means valid, ‘false’ means abort); Syntax: validate(value); For best performance, reference it from your scope and do not define it inline
disable – Put component in disabled mode
fit – Allows the menu to match at least the full width of its target
cover – Allows the menu to cover its target. When used, the ‘self’ and ‘fit’ props are no longer effective
anchor – Two values setting the starting position or anchor point of the menu relative to its target
self – Two values setting the menu’s own position relative to its target
offset – An array of two numbers to offset the menu horizontally and vertically in pixels
touch_position – Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched
persistent – Avoid menu closing by hitting ESC key or by clicking/tapping outside of the Popup
separate_close_popup – Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)
square – Forces menu to have squared borders
max_height – The maximum height of the menu; Size in CSS units, including unit name
max_width – The maximum width of the menu; Size in CSS units, including unit name

Events

Parameters:

model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
title – Optional title (unless ‘title’ slot is used)
buttons – Show Set and Cancel buttons
label_set – Override Set button label
label_cancel – Override Cancel button label
auto_save – Automatically save the model (if changed) when user clicks/taps outside of the popup; It does not apply to ESC key
color – Color name for component from the Quasar Color Palette
validate – Validates model then triggers ‘save’ and closes Popup; Returns a Boolean (‘true’ means valid, ‘false’ means abort); Syntax: validate(value); For best performance, reference it from your scope and do not define it inline
disable – Put component in disabled mode
fit – Allows the menu to match at least the full width of its target
cover – Allows the menu to cover its target. When used, the ‘self’ and ‘fit’ props are no longer effective
anchor – Two values setting the starting position or anchor point of the menu relative to its target
self – Two values setting the menu’s own position relative to its target
offset – An array of two numbers to offset the menu horizontally and vertically in pixels
touch_position – Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched
persistent – Avoid menu closing by hitting ESC key or by clicking/tapping outside of the Popup
separate_close_popup – Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)
square – Forces menu to have squared borders
max_height – The maximum height of the menu; Size in CSS units, including unit name
max_width – The maximum width of the menu; Size in CSS units, including unit name

class trame.widgets.quasar.QPopupProxy(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

target – Configure a target element to trigger component toggle; ‘true’ means it enables the parent DOM element, ‘false’ means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)
no_parent_event – Skips attaching events to the target DOM element (that trigger the element to get shown)
context_menu – Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)
model_value – Defines the state of the component (shown/hidden); Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
breakpoint – Breakpoint (in pixels) of window width/height (whichever is smaller) from where a Menu will get to be used instead of a Dialog

Events

Parameters:

target – Configure a target element to trigger component toggle; ‘true’ means it enables the parent DOM element, ‘false’ means it disables attaching events to any DOM elements; By using a String (CSS selector) or a DOM element it attaches the events to the specified DOM element (if it exists)
no_parent_event – Skips attaching events to the target DOM element (that trigger the element to get shown)
context_menu – Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)
model_value – Defines the state of the component (shown/hidden); Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
breakpoint – Breakpoint (in pixels) of window width/height (whichever is smaller) from where a Menu will get to be used instead of a Dialog

class trame.widgets.quasar.QPullToRefresh(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

color – Color name for the icon from the Quasar Color Palette
bg_color – Color name for background of the icon container from the Quasar Color Palette
icon – Icon to display when refreshing the content
no_mouse – Don’t listen for mouse events
disable – Put component in disabled mode
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one

Events

Parameters:

color – Color name for the icon from the Quasar Color Palette
bg_color – Color name for background of the icon container from the Quasar Color Palette
icon – Icon to display when refreshing the content
no_mouse – Don’t listen for mouse events
disable – Put component in disabled mode
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one

class trame.widgets.quasar.QRadio(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
val – The actual value of the option with which model value is changed
label – Label to display along the radio control (or use the default slot instead of this prop)
left_label – Label (if any specified) should be displayed on the left side of the checkbox
checked_icon – The icon to be used when selected (instead of the default design)
unchecked_icon – The icon to be used when un-selected (instead of the default design)
color – Color name for component from the Quasar Color Palette
keep_color – Should the color (if specified any) be kept when checkbox is unticked?
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
val – The actual value of the option with which model value is changed
label – Label to display along the radio control (or use the default slot instead of this prop)
left_label – Label (if any specified) should be displayed on the left side of the checkbox
checked_icon – The icon to be used when selected (instead of the default design)
unchecked_icon – The icon to be used when un-selected (instead of the default design)
color – Color name for component from the Quasar Color Palette
keep_color – Should the color (if specified any) be kept when checkbox is unticked?
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value

class trame.widgets.quasar.QRange(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
min – Minimum value of the model; Set track’s minimum value
max – Maximum value of the model; Set track’s maximum value
inner_min – Inner minimum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be higher or equal to ‘min’ prop; Defaults to ‘min’ prop
inner_max – Inner maximum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be lower or equal to ‘max’ prop; Defaults to ‘max’ prop
step – Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
snap – Snap on valid values, rather than sliding freely; Suggestion: use with ‘step’ prop
reverse – Work in reverse (changes direction)
vertical – Display in vertical direction
color – Color name for component from the Quasar Color Palette
track_color – Color name for the track (can be ‘transparent’ too) from the Quasar Color Palette
track_img – Apply a pattern image on the track
inner_track_color – Color name for the inner track (can be ‘transparent’ too) from the Quasar Color Palette
inner_track_img – Apply a pattern image on the inner track
selection_color – Color name for the selection bar (can be ‘transparent’ too) from the Quasar Color Palette
selection_img – Apply a pattern image on the selection bar
label – Popup a label when user clicks/taps on the slider thumb and moves it
label_color – Color name for component from the Quasar Color Palette
label_text_color – Color name for component from the Quasar Color Palette
switch_label_side – Switch the position of the label (top <-> bottom or left <-> right)
label_always – Always display the label
markers – Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
marker_labels – Configure the marker labels (or show the default ones if ‘true’); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition
marker_labels_class – CSS class(es) to apply to the marker labels container
switch_marker_labels_side – Switch the position of the marker labels (top <-> bottom or left <-> right)
track_size – Track size (including CSS unit)
thumb_size – Thumb size (including CSS unit)
thumb_color – Color name for component from the Quasar Color Palette
thumb_path – Set custom thumb svg path
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
readonly – Put component in readonly mode
tabindex – Tabindex HTML attribute value
model_value – Model of the component of type { min, max } (both values must be between global min/max); Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
drag_range – User can drag range instead of just the two thumbs
drag_only_range – User can drag only the range instead and NOT the two thumbs
left_label_color – Color name for left label background from the Quasar Color Palette
left_label_text_color – Color name for left label text from the Quasar Color Palette
right_label_color – Color name for right label background from the Quasar Color Palette
right_label_text_color – Color name for right label text from the Quasar Color Palette
left_label_value – Override default label for min value
right_label_value – Override default label for max value
left_thumb_color – Color name (from the Quasar Color Palette) for left thumb
right_thumb_color – Color name (from the Quasar Color Palette) for right thumb

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
min – Minimum value of the model; Set track’s minimum value
max – Maximum value of the model; Set track’s maximum value
inner_min – Inner minimum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be higher or equal to ‘min’ prop; Defaults to ‘min’ prop
inner_max – Inner maximum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be lower or equal to ‘max’ prop; Defaults to ‘max’ prop
step – Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
snap – Snap on valid values, rather than sliding freely; Suggestion: use with ‘step’ prop
reverse – Work in reverse (changes direction)
vertical – Display in vertical direction
color – Color name for component from the Quasar Color Palette
track_color – Color name for the track (can be ‘transparent’ too) from the Quasar Color Palette
track_img – Apply a pattern image on the track
inner_track_color – Color name for the inner track (can be ‘transparent’ too) from the Quasar Color Palette
inner_track_img – Apply a pattern image on the inner track
selection_color – Color name for the selection bar (can be ‘transparent’ too) from the Quasar Color Palette
selection_img – Apply a pattern image on the selection bar
label – Popup a label when user clicks/taps on the slider thumb and moves it
label_color – Color name for component from the Quasar Color Palette
label_text_color – Color name for component from the Quasar Color Palette
switch_label_side – Switch the position of the label (top <-> bottom or left <-> right)
label_always – Always display the label
markers – Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
marker_labels – Configure the marker labels (or show the default ones if ‘true’); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition
marker_labels_class – CSS class(es) to apply to the marker labels container
switch_marker_labels_side – Switch the position of the marker labels (top <-> bottom or left <-> right)
track_size – Track size (including CSS unit)
thumb_size – Thumb size (including CSS unit)
thumb_color – Color name for component from the Quasar Color Palette
thumb_path – Set custom thumb svg path
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
readonly – Put component in readonly mode
tabindex – Tabindex HTML attribute value
model_value – Model of the component of type { min, max } (both values must be between global min/max); Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
drag_range – User can drag range instead of just the two thumbs
drag_only_range – User can drag only the range instead and NOT the two thumbs
left_label_color – Color name for left label background from the Quasar Color Palette
left_label_text_color – Color name for left label text from the Quasar Color Palette
right_label_color – Color name for right label background from the Quasar Color Palette
right_label_text_color – Color name for right label text from the Quasar Color Palette
left_label_value – Override default label for min value
right_label_value – Override default label for max value
left_thumb_color – Color name (from the Quasar Color Palette) for left thumb
right_thumb_color – Color name (from the Quasar Color Palette) for right thumb

class trame.widgets.quasar.QRating(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
max – Number of icons to display
icon – Icon name following Quasar convention; make sure you have the icon library installed unless you are using ‘img:’ prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
icon_selected – Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using ‘img:’ prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
icon_half – Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using ‘img:’ prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
icon_aria_label – Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used
color – Color name for component from the Quasar Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based)
color_selected – Color name from the Quasar Palette for selected icons
color_half – Color name from the Quasar Palette for half selected icons
no_dimming – Does not lower opacity for unselected icons
no_reset – When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0
readonly – Put component in readonly mode
disable – Put component in disabled mode

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
max – Number of icons to display
icon – Icon name following Quasar convention; make sure you have the icon library installed unless you are using ‘img:’ prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
icon_selected – Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using ‘img:’ prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
icon_half – Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using ‘img:’ prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
icon_aria_label – Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used
color – Color name for component from the Quasar Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based)
color_selected – Color name from the Quasar Palette for selected icons
color_half – Color name from the Quasar Palette for half selected icons
no_dimming – Does not lower opacity for unselected icons
no_reset – When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0
readonly – Put component in readonly mode
disable – Put component in disabled mode

class trame.widgets.quasar.QResizeObserver(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:: debounce – Debounce amount (in milliseconds)

Events

Parameters:: debounce – Debounce amount (in milliseconds)

class trame.widgets.quasar.QResponsive(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:: ratio – Aspect ratio for the content; If value is a String, then avoid using a computational statement (like ‘16/9’) and instead specify the String value of the result directly (eg. ‘1.7777’)

Events

Parameters:: ratio – Aspect ratio for the content; If value is a String, then avoid using a computational statement (like ‘16/9’) and instead specify the String value of the result directly (eg. ‘1.7777’)

class trame.widgets.quasar.QRouteTab(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
exact – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
exact_active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
target – Native <a> link target attribute; Use it only along with ‘href’ prop; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
disable – Put component in disabled mode
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
label – A number or string to label the tab
alert – Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color
alert_icon – Adds a floating icon to the tab, notifying the user there are some updates; It’s displayed only if ‘alert’ is set; Can use the color specified by ‘alert’ prop
name – Panel name
no_caps – Turns off capitalizing all letters within the tab (which is the default)
content_class – Class definitions to be attributed to the content wrapper
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
tabindex – Tabindex HTML attribute value

Events

Parameters:

to – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
exact – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
replace – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
exact_active_class – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
href – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
target – Native <a> link target attribute; Use it only along with ‘href’ prop; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
disable – Put component in disabled mode
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
label – A number or string to label the tab
alert – Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color
alert_icon – Adds a floating icon to the tab, notifying the user there are some updates; It’s displayed only if ‘alert’ is set; Can use the color specified by ‘alert’ prop
name – Panel name
no_caps – Turns off capitalizing all letters within the tab (which is the default)
content_class – Class definitions to be attributed to the content wrapper
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
tabindex – Tabindex HTML attribute value

class trame.widgets.quasar.QScrollArea(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

dark – Notify the component that the background is a dark color
bar_style – Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)
vertical_bar_style – Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of ‘bar-style’ prop
horizontal_bar_style – Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of ‘bar-style’ prop
thumb_style – Object with CSS properties and values for custom styling the thumb of scrollbars (both vertical and horizontal)
vertical_thumb_style – Object with CSS properties and values for custom styling the thumb of the vertical scrollbar; Is applied on top of ‘thumb-style’ prop
horizontal_thumb_style – Object with CSS properties and values for custom styling the thumb of the horizontal scrollbar; Is applied on top of ‘thumb-style’ prop
content_style – Object with CSS properties and values for styling the container of QScrollArea
content_active_style – Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)
visible – Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior
delay – When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered)
tabindex – Tabindex HTML attribute value

Events

Parameters:

dark – Notify the component that the background is a dark color
bar_style – Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)
vertical_bar_style – Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of ‘bar-style’ prop
horizontal_bar_style – Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of ‘bar-style’ prop
thumb_style – Object with CSS properties and values for custom styling the thumb of scrollbars (both vertical and horizontal)
vertical_thumb_style – Object with CSS properties and values for custom styling the thumb of the vertical scrollbar; Is applied on top of ‘thumb-style’ prop
horizontal_thumb_style – Object with CSS properties and values for custom styling the thumb of the horizontal scrollbar; Is applied on top of ‘thumb-style’ prop
content_style – Object with CSS properties and values for styling the container of QScrollArea
content_active_style – Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)
visible – Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior
delay – When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered)
tabindex – Tabindex HTML attribute value

class trame.widgets.quasar.QScrollObserver(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

debounce – Debounce amount (in milliseconds)
axis – Axis on which to detect changes
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one

Events

Parameters:

debounce – Debounce amount (in milliseconds)
axis – Axis on which to detect changes
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one

class trame.widgets.quasar.QSelect(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of ‘for’ prop, if it exists
virtual_scroll_horizontal – Make virtual list work in horizontal mode
virtual_scroll_slice_size – Minimum number of items to render in the virtual list
virtual_scroll_slice_ratio_before – Ratio of number of items in visible zone to render before it
virtual_scroll_slice_ratio_after – Ratio of number of items in visible zone to render after it
virtual_scroll_item_size – Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item
virtual_scroll_sticky_size_start – Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision
virtual_scroll_sticky_size_end – Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision
table_colspan – The number of columns in the table (you need this if you use table-layout: fixed)
model_value – Model of the component; Must be Array if using ‘multiple’ prop; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
error – Does field have validation errors?
error_message – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
no_error_icon – Hide error icon when there is an error
rules – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
reactive_rules – By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
lazy_rules – If set to boolean true then it checks validation status against the ‘rules’ only after field loses focus for first time; If set to ‘ondemand’ then it will trigger only when component’s validate() method is manually called or when the wrapper QForm submits itself
label – A text label that will “float” up above the input field, once the field gets focus
stack_label – Label will be always shown above the field regardless of field content (if any)
hint – Helper (hint) text which gets placed below your wrapped form component
hide_hint – Hide the helper (hint) text when field doesn’t have focus
prefix – Prefix
suffix – Suffix
label_color – Color name for the label from the Quasar Color Palette; Overrides the ‘color’ prop; The difference from ‘color’ prop is that the label will always have this color, even when field is not focused
color – Color name for component from the Quasar Color Palette
bg_color – Color name for component from the Quasar Color Palette
dark – Notify the component that the background is a dark color
loading – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
clearable – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
clear_icon – Custom icon to use for the clear button when using along with ‘clearable’ prop
filled – Use ‘filled’ design for the field
outlined – Use ‘outlined’ design for the field
borderless – Use ‘borderless’ design for the field
standout – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
label_slot – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
bottom_slots – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
hide_bottom_space – Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
counter – Show an automatic counter on bottom right
rounded – Applies a small standard border-radius for a squared shape of the component
square – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
dense – Dense mode; occupies less space
item_aligned – Match inner content alignment to that of QItem
disable – Put component in disabled mode
readonly – Put component in readonly mode
autofocus – Focus field on initial component render
for – Used to specify the ‘id’ of the control and also the ‘for’ attribute of the label that wraps it; If no ‘name’ prop is specified, then it is used for this attribute as well
multiple – Allow multiple selection; Model must be Array
display_value – Override default selection string, if not using ‘selected’ slot/scoped slot and if not using ‘use-chips’ prop
display_value_html – Force render the selected option(s) as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using ‘selected’ or ‘selected-item’ slots!
options – Available options that the user can select from. For best performance freeze the list of options.
option_value – Property of option which holds the ‘value’; If using a function then for best performance, reference it from your scope and do not define it inline
option_label – Property of option which holds the ‘label’; If using a function then for best performance, reference it from your scope and do not define it inline
option_disable – Property of option which tells it’s disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline
hide_selected – Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non ‘multiple’ Selects
hide_dropdown_icon – Hides dropdown icon
dropdown_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
max_values – Allow a maximum number of selections that the user can do
options_dense – Dense mode for options list; occupies less space
options_dark – Options menu will be colored with a dark color
options_selected_class – CSS class name for options that are active/selected; Set it to an empty string to stop applying the default (which is text-* where * is the ‘color’ prop value)
options_html – Force render the options as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using ‘option’ slot!
options_cover – Expanded menu will cover the component (will not work along with ‘use-input’ prop for obvious reasons)
menu_shrink – Allow the options list to be narrower than the field (only in menu mode)
menu_anchor – Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)
menu_self – Two values setting the options list’s own position relative to its target (only in menu mode)
menu_offset – An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode)
popup_content_class – Class definitions to be attributed to the popup content
popup_content_style – Style definitions to be attributed to the popup content
use_input – Use an input tag where users can type
use_chips – Use QChip to show what is currently selected
fill_input – Fills the input with current value; Useful along with ‘hide-selected’; Does NOT works along with ‘multiple’ selection
new_value_mode – Enables creation of new values and defines behavior when a new value is added: ‘add’ means it adds the value (even if possible duplicate), ‘add-unique’ adds only unique values, and ‘toggle’ adds or removes the value (based on if it exists or not already); When using this prop then listening for @new-value becomes optional (only to override the behavior defined by ‘new-value-mode’)
map_options – Try to map labels of model from ‘options’ Array; has a small performance penalty; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value; Refer to the ‘Affecting model’ section above
emit_value – Update model with the value of the selected option instead of the whole option
input_debounce – Debounce the input model update with an amount of milliseconds
input_class – Class definitions to be attributed to the underlying input tag
input_style – Style definitions to be attributed to the underlying input tag
tabindex – Tabindex HTML attribute value
autocomplete – Autocomplete attribute for field
transition_show – Transition when showing the menu/dialog; One of Quasar’s embedded transitions
transition_hide – Transition when hiding the menu/dialog; One of Quasar’s embedded transitions
transition_duration – Transition duration when hiding the menu/dialog (in milliseconds, without unit)
behavior – Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of ‘for’ prop, if it exists
virtual_scroll_horizontal – Make virtual list work in horizontal mode
virtual_scroll_slice_size – Minimum number of items to render in the virtual list
virtual_scroll_slice_ratio_before – Ratio of number of items in visible zone to render before it
virtual_scroll_slice_ratio_after – Ratio of number of items in visible zone to render after it
virtual_scroll_item_size – Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item
virtual_scroll_sticky_size_start – Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision
virtual_scroll_sticky_size_end – Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision
table_colspan – The number of columns in the table (you need this if you use table-layout: fixed)
model_value – Model of the component; Must be Array if using ‘multiple’ prop; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
error – Does field have validation errors?
error_message – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
no_error_icon – Hide error icon when there is an error
rules – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
reactive_rules – By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it
lazy_rules – If set to boolean true then it checks validation status against the ‘rules’ only after field loses focus for first time; If set to ‘ondemand’ then it will trigger only when component’s validate() method is manually called or when the wrapper QForm submits itself
label – A text label that will “float” up above the input field, once the field gets focus
stack_label – Label will be always shown above the field regardless of field content (if any)
hint – Helper (hint) text which gets placed below your wrapped form component
hide_hint – Hide the helper (hint) text when field doesn’t have focus
prefix – Prefix
suffix – Suffix
label_color – Color name for the label from the Quasar Color Palette; Overrides the ‘color’ prop; The difference from ‘color’ prop is that the label will always have this color, even when field is not focused
color – Color name for component from the Quasar Color Palette
bg_color – Color name for component from the Quasar Color Palette
dark – Notify the component that the background is a dark color
loading – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
clearable – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
clear_icon – Custom icon to use for the clear button when using along with ‘clearable’ prop
filled – Use ‘filled’ design for the field
outlined – Use ‘outlined’ design for the field
borderless – Use ‘borderless’ design for the field
standout – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
label_slot – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
bottom_slots – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
hide_bottom_space – Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content
counter – Show an automatic counter on bottom right
rounded – Applies a small standard border-radius for a squared shape of the component
square – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
dense – Dense mode; occupies less space
item_aligned – Match inner content alignment to that of QItem
disable – Put component in disabled mode
readonly – Put component in readonly mode
autofocus – Focus field on initial component render
for – Used to specify the ‘id’ of the control and also the ‘for’ attribute of the label that wraps it; If no ‘name’ prop is specified, then it is used for this attribute as well
multiple – Allow multiple selection; Model must be Array
display_value – Override default selection string, if not using ‘selected’ slot/scoped slot and if not using ‘use-chips’ prop
display_value_html – Force render the selected option(s) as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using ‘selected’ or ‘selected-item’ slots!
options – Available options that the user can select from. For best performance freeze the list of options.
option_value – Property of option which holds the ‘value’; If using a function then for best performance, reference it from your scope and do not define it inline
option_label – Property of option which holds the ‘label’; If using a function then for best performance, reference it from your scope and do not define it inline
option_disable – Property of option which tells it’s disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline
hide_selected – Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non ‘multiple’ Selects
hide_dropdown_icon – Hides dropdown icon
dropdown_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
max_values – Allow a maximum number of selections that the user can do
options_dense – Dense mode for options list; occupies less space
options_dark – Options menu will be colored with a dark color
options_selected_class – CSS class name for options that are active/selected; Set it to an empty string to stop applying the default (which is text-* where * is the ‘color’ prop value)
options_html – Force render the options as HTML; This can lead to XSS attacks so make sure that you sanitize the content; Does NOT apply when using ‘option’ slot!
options_cover – Expanded menu will cover the component (will not work along with ‘use-input’ prop for obvious reasons)
menu_shrink – Allow the options list to be narrower than the field (only in menu mode)
menu_anchor – Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)
menu_self – Two values setting the options list’s own position relative to its target (only in menu mode)
menu_offset – An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode)
popup_content_class – Class definitions to be attributed to the popup content
popup_content_style – Style definitions to be attributed to the popup content
use_input – Use an input tag where users can type
use_chips – Use QChip to show what is currently selected
fill_input – Fills the input with current value; Useful along with ‘hide-selected’; Does NOT works along with ‘multiple’ selection
new_value_mode – Enables creation of new values and defines behavior when a new value is added: ‘add’ means it adds the value (even if possible duplicate), ‘add-unique’ adds only unique values, and ‘toggle’ adds or removes the value (based on if it exists or not already); When using this prop then listening for @new-value becomes optional (only to override the behavior defined by ‘new-value-mode’)
map_options – Try to map labels of model from ‘options’ Array; has a small performance penalty; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value; Refer to the ‘Affecting model’ section above
emit_value – Update model with the value of the selected option instead of the whole option
input_debounce – Debounce the input model update with an amount of milliseconds
input_class – Class definitions to be attributed to the underlying input tag
input_style – Style definitions to be attributed to the underlying input tag
tabindex – Tabindex HTML attribute value
autocomplete – Autocomplete attribute for field
transition_show – Transition when showing the menu/dialog; One of Quasar’s embedded transitions
transition_hide – Transition when hiding the menu/dialog; One of Quasar’s embedded transitions
transition_duration – Transition duration when hiding the menu/dialog (in milliseconds, without unit)
behavior – Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles

class trame.widgets.quasar.QSeparator(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

dark – Notify the component that the background is a dark color
spaced – If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes
inset – If set to Boolean true, the left and right margins will be set to 16px. If set to ‘item’ then it will match a QItem’s design. If set to ‘item-thumbnail’ then it will match the design of a QItem with a thumbnail on the left side
vertical – If set to true, the separator will be vertical.
size – Size in CSS units, including unit name
color – Color name for component from the Quasar Color Palette

Events

Parameters:

dark – Notify the component that the background is a dark color
spaced – If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes
inset – If set to Boolean true, the left and right margins will be set to 16px. If set to ‘item’ then it will match a QItem’s design. If set to ‘item-thumbnail’ then it will match the design of a QItem with a thumbnail on the left side
vertical – If set to true, the separator will be vertical.
size – Size in CSS units, including unit name
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSkeleton(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

dark – Notify the component that the background is a dark color
type – Type of skeleton placeholder
animation – The animation effect of the skeleton placeholder
animation_speed – Animation speed (in milliseconds, without unit)
square – Removes border-radius so borders are squared
bordered – Applies a default border to the component
size – Size in CSS units, including unit name; Overrides ‘height’ and ‘width’ props and applies the value to both height and width
width – Width in CSS units, including unit name; Apply custom width; Use this prop or through CSS; Overridden by ‘size’ prop if used
height – Height in CSS units, including unit name; Apply custom height; Use this prop or through CSS; Overridden by ‘size’ prop if used
tag – HTML tag to use

Events

Parameters:

dark – Notify the component that the background is a dark color
type – Type of skeleton placeholder
animation – The animation effect of the skeleton placeholder
animation_speed – Animation speed (in milliseconds, without unit)
square – Removes border-radius so borders are squared
bordered – Applies a default border to the component
size – Size in CSS units, including unit name; Overrides ‘height’ and ‘width’ props and applies the value to both height and width
width – Width in CSS units, including unit name; Apply custom width; Use this prop or through CSS; Overridden by ‘size’ prop if used
height – Height in CSS units, including unit name; Apply custom height; Use this prop or through CSS; Overridden by ‘size’ prop if used
tag – HTML tag to use

class trame.widgets.quasar.QSlideItem(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

left_color – Color name for left-side background from the Quasar Color Palette
right_color – Color name for right-side background from the Quasar Color Palette
top_color – Color name for top-side background from the Quasar Color Palette
bottom_color – Color name for bottom-side background from the Quasar Color Palette
dark – Notify the component that the background is a dark color

Events

Parameters:

left_color – Color name for left-side background from the Quasar Color Palette
right_color – Color name for right-side background from the Quasar Color Palette
top_color – Color name for top-side background from the Quasar Color Palette
bottom_color – Color name for bottom-side background from the Quasar Color Palette
dark – Notify the component that the background is a dark color

class trame.widgets.quasar.QSlideTransition(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

appear – If set to true, the transition will be applied on the initial render.
duration – Duration (in milliseconds) enabling animated scroll.

Events

Parameters:

appear – If set to true, the transition will be applied on the initial render.
duration – Duration (in milliseconds) enabling animated scroll.

class trame.widgets.quasar.QSlider(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
min – Minimum value of the model; Set track’s minimum value
max – Maximum value of the model; Set track’s maximum value
inner_min – Inner minimum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be higher or equal to ‘min’ prop; Defaults to ‘min’ prop
inner_max – Inner maximum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be lower or equal to ‘max’ prop; Defaults to ‘max’ prop
step – Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
snap – Snap on valid values, rather than sliding freely; Suggestion: use with ‘step’ prop
reverse – Work in reverse (changes direction)
vertical – Display in vertical direction
color – Color name for component from the Quasar Color Palette
track_color – Color name for the track (can be ‘transparent’ too) from the Quasar Color Palette
track_img – Apply a pattern image on the track
inner_track_color – Color name for the inner track (can be ‘transparent’ too) from the Quasar Color Palette
inner_track_img – Apply a pattern image on the inner track
selection_color – Color name for the selection bar (can be ‘transparent’ too) from the Quasar Color Palette
selection_img – Apply a pattern image on the selection bar
label – Popup a label when user clicks/taps on the slider thumb and moves it
label_color – Color name for component from the Quasar Color Palette
label_text_color – Color name for component from the Quasar Color Palette
switch_label_side – Switch the position of the label (top <-> bottom or left <-> right)
label_always – Always display the label
markers – Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
marker_labels – Configure the marker labels (or show the default ones if ‘true’); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition
marker_labels_class – CSS class(es) to apply to the marker labels container
switch_marker_labels_side – Switch the position of the marker labels (top <-> bottom or left <-> right)
track_size – Track size (including CSS unit)
thumb_size – Thumb size (including CSS unit)
thumb_color – Color name for component from the Quasar Color Palette
thumb_path – Set custom thumb svg path
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
readonly – Put component in readonly mode
tabindex – Tabindex HTML attribute value
model_value – Model of the component (must be between min/max); Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
label_value – Override default label value

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
min – Minimum value of the model; Set track’s minimum value
max – Maximum value of the model; Set track’s maximum value
inner_min – Inner minimum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be higher or equal to ‘min’ prop; Defaults to ‘min’ prop
inner_max – Inner maximum value of the model; Use in case you need the model value to be inside of the track’s min-max values; Needs to be lower or equal to ‘max’ prop; Defaults to ‘max’ prop
step – Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
snap – Snap on valid values, rather than sliding freely; Suggestion: use with ‘step’ prop
reverse – Work in reverse (changes direction)
vertical – Display in vertical direction
color – Color name for component from the Quasar Color Palette
track_color – Color name for the track (can be ‘transparent’ too) from the Quasar Color Palette
track_img – Apply a pattern image on the track
inner_track_color – Color name for the inner track (can be ‘transparent’ too) from the Quasar Color Palette
inner_track_img – Apply a pattern image on the inner track
selection_color – Color name for the selection bar (can be ‘transparent’ too) from the Quasar Color Palette
selection_img – Apply a pattern image on the selection bar
label – Popup a label when user clicks/taps on the slider thumb and moves it
label_color – Color name for component from the Quasar Color Palette
label_text_color – Color name for component from the Quasar Color Palette
switch_label_side – Switch the position of the label (top <-> bottom or left <-> right)
label_always – Always display the label
markers – Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
marker_labels – Configure the marker labels (or show the default ones if ‘true’); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition
marker_labels_class – CSS class(es) to apply to the marker labels container
switch_marker_labels_side – Switch the position of the marker labels (top <-> bottom or left <-> right)
track_size – Track size (including CSS unit)
thumb_size – Thumb size (including CSS unit)
thumb_color – Color name for component from the Quasar Color Palette
thumb_path – Set custom thumb svg path
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
readonly – Put component in readonly mode
tabindex – Tabindex HTML attribute value
model_value – Model of the component (must be between min/max); Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
label_value – Override default label value

class trame.widgets.quasar.QSpace(children=None, **kwargs): Bases: AbstractElement

class trame.widgets.quasar.QSpinner(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette
thickness – Override value to use for stroke-width

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette
thickness – Override value to use for stroke-width

class trame.widgets.quasar.QSpinnerAudio(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerBall(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerBars(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerBox(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerClock(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerComment(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerCube(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerDots(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerFacebook(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerGears(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerGrid(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerHearts(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerHourglass(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerInfinity(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerIos(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerOrbit(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerOval(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerPie(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerPuff(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerRadio(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerRings(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSpinnerTail(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

Events

Parameters:

size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
color – Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QSplitter(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component defining the size of first panel (or second if using reverse) in the unit specified (for ‘%’ it’s the split ratio percent - 0.0 < x < 100.0; for ‘px’ it’s the size in px); Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
reverse – Apply the model size to the second panel (by default it applies to the first)
unit – CSS unit for the model
emit_immediately – Emit model while user is panning on the separator
horizontal – Allows the splitter to split its two panels horizontally, instead of vertically
limits – An array of two values representing the minimum and maximum split size of the two panels; When ‘px’ unit is set then you can use Infinity as the second value to make it unbound on the other side
disable – Put component in disabled mode
before_class – Class definitions to be attributed to the ‘before’ panel
after_class – Class definitions to be attributed to the ‘after’ panel
separator_class – Class definitions to be attributed to the splitter separator
separator_style – Style definitions to be attributed to the splitter separator
dark – Applies a default lighter color on the separator; To be used when background is darker; Avoid using when you are overriding through separator-class or separator-style props

Events

Parameters:

model_value – Model of the component defining the size of first panel (or second if using reverse) in the unit specified (for ‘%’ it’s the split ratio percent - 0.0 < x < 100.0; for ‘px’ it’s the size in px); Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
reverse – Apply the model size to the second panel (by default it applies to the first)
unit – CSS unit for the model
emit_immediately – Emit model while user is panning on the separator
horizontal – Allows the splitter to split its two panels horizontally, instead of vertically
limits – An array of two values representing the minimum and maximum split size of the two panels; When ‘px’ unit is set then you can use Infinity as the second value to make it unbound on the other side
disable – Put component in disabled mode
before_class – Class definitions to be attributed to the ‘before’ panel
after_class – Class definitions to be attributed to the ‘after’ panel
separator_class – Class definitions to be attributed to the splitter separator
separator_style – Style definitions to be attributed to the splitter separator
dark – Applies a default lighter color on the separator; To be used when background is darker; Avoid using when you are overriding through separator-class or separator-style props

class trame.widgets.quasar.QStep(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Panel name
disable – Put component in disabled mode
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
color – Color name for component from the Quasar Color Palette
title – Step title
caption – Step’s additional information that appears beneath the title
prefix – Step’s prefix (max 2 characters) which replaces the icon if step does not has error, is being edited or is marked as done
done_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
done_color – Color name for component from the Quasar Color Palette
active_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
active_color – Color name for component from the Quasar Color Palette
error_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
error_color – Color name for component from the Quasar Color Palette
header_nav – Allow navigation through the header
done – Mark the step as ‘done’
error – Mark the step as having an error

Events

Parameters:

name – Panel name
disable – Put component in disabled mode
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
color – Color name for component from the Quasar Color Palette
title – Step title
caption – Step’s additional information that appears beneath the title
prefix – Step’s prefix (max 2 characters) which replaces the icon if step does not has error, is being edited or is marked as done
done_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
done_color – Color name for component from the Quasar Color Palette
active_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
active_color – Color name for component from the Quasar Color Palette
error_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
error_color – Color name for component from the Quasar Color Palette
header_nav – Allow navigation through the header
done – Mark the step as ‘done’
error – Mark the step as having an error

class trame.widgets.quasar.QStepper(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component defining the current panel’s name; If a Number is used, it does not define the panel’s index, but rather the panel’s name which can also be an Integer; Either use this property (along with a listener for ‘update:model-value’ event) OR use the v-model directive.
keep_alive – Equivalent to using Vue’s native <keep-alive> component on the content
keep_alive_include – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
keep_alive_exclude – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
keep_alive_max – Equivalent to using Vue’s native max prop for <keep-alive>
animated – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
infinite – Makes component appear as infinite (when reaching last panel, next one will become the first one)
swipeable – Enable swipe events (may interfere with content’s touch/mouse events)
vertical – Put Stepper in vertical mode (instead of horizontal by default)
transition_prev – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_next – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_duration – Transition duration (in milliseconds, without unit)
dark – Notify the component that the background is a dark color
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
alternative_labels – Use alternative labels - stacks the icon on top of the label (applies only to horizontal stepper)
header_nav – Allow navigation through the header
contracted – Hide header labels on narrow windows
inactive_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
inactive_color – Color name for component from the Quasar Color Palette
done_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
done_color – Color name for component from the Quasar Color Palette
active_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
active_color – Color name for component from the Quasar Color Palette
error_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
error_color – Color name for component from the Quasar Color Palette
header_class – Class definitions to be attributed to the header

Events

Parameters:

model_value – Model of the component defining the current panel’s name; If a Number is used, it does not define the panel’s index, but rather the panel’s name which can also be an Integer; Either use this property (along with a listener for ‘update:model-value’ event) OR use the v-model directive.
keep_alive – Equivalent to using Vue’s native <keep-alive> component on the content
keep_alive_include – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
keep_alive_exclude – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
keep_alive_max – Equivalent to using Vue’s native max prop for <keep-alive>
animated – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
infinite – Makes component appear as infinite (when reaching last panel, next one will become the first one)
swipeable – Enable swipe events (may interfere with content’s touch/mouse events)
vertical – Put Stepper in vertical mode (instead of horizontal by default)
transition_prev – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_next – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_duration – Transition duration (in milliseconds, without unit)
dark – Notify the component that the background is a dark color
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
alternative_labels – Use alternative labels - stacks the icon on top of the label (applies only to horizontal stepper)
header_nav – Allow navigation through the header
contracted – Hide header labels on narrow windows
inactive_icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
inactive_color – Color name for component from the Quasar Color Palette
done_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
done_color – Color name for component from the Quasar Color Palette
active_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
active_color – Color name for component from the Quasar Color Palette
error_icon – Icon name following Quasar convention; If ‘none’ (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using ‘img:’ prefix
error_color – Color name for component from the Quasar Color Palette
header_class – Class definitions to be attributed to the header

class trame.widgets.quasar.QStepperNavigation(children=None, **kwargs): Bases: AbstractElement

class trame.widgets.quasar.QTab(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
label – A number or string to label the tab
alert – Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color
alert_icon – Adds a floating icon to the tab, notifying the user there are some updates; It’s displayed only if ‘alert’ is set; Can use the color specified by ‘alert’ prop
name – Panel name
no_caps – Turns off capitalizing all letters within the tab (which is the default)
content_class – Class definitions to be attributed to the content wrapper
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
tabindex – Tabindex HTML attribute value
disable – Put component in disabled mode

Events

Parameters:

icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
label – A number or string to label the tab
alert – Adds an alert symbol to the tab, notifying the user there are some updates; If its value is not a Boolean, then you can specify a color
alert_icon – Adds a floating icon to the tab, notifying the user there are some updates; It’s displayed only if ‘alert’ is set; Can use the color specified by ‘alert’ prop
name – Panel name
no_caps – Turns off capitalizing all letters within the tab (which is the default)
content_class – Class definitions to be attributed to the content wrapper
ripple – Configure material ripple (disable it by setting it to ‘false’ or supply a config object)
tabindex – Tabindex HTML attribute value
disable – Put component in disabled mode

class trame.widgets.quasar.QTabPanel(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Panel name
disable – Put component in disabled mode
dark – Notify the component that the background is a dark color

Events

Parameters:

name – Panel name
disable – Put component in disabled mode
dark – Notify the component that the background is a dark color

class trame.widgets.quasar.QTabPanels(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component defining the current panel’s name; If a Number is used, it does not define the panel’s index, but rather the panel’s name which can also be an Integer; Either use this property (along with a listener for ‘update:model-value’ event) OR use the v-model directive.
keep_alive – Equivalent to using Vue’s native <keep-alive> component on the content
keep_alive_include – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
keep_alive_exclude – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
keep_alive_max – Equivalent to using Vue’s native max prop for <keep-alive>
animated – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
infinite – Makes component appear as infinite (when reaching last panel, next one will become the first one)
swipeable – Enable swipe events (may interfere with content’s touch/mouse events)
vertical – Default transitions and swipe actions will be on the vertical axis
transition_prev – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_next – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_duration – Transition duration (in milliseconds, without unit)

Events

Parameters:

model_value – Model of the component defining the current panel’s name; If a Number is used, it does not define the panel’s index, but rather the panel’s name which can also be an Integer; Either use this property (along with a listener for ‘update:model-value’ event) OR use the v-model directive.
keep_alive – Equivalent to using Vue’s native <keep-alive> component on the content
keep_alive_include – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
keep_alive_exclude – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
keep_alive_max – Equivalent to using Vue’s native max prop for <keep-alive>
animated – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
infinite – Makes component appear as infinite (when reaching last panel, next one will become the first one)
swipeable – Enable swipe events (may interfere with content’s touch/mouse events)
vertical – Default transitions and swipe actions will be on the vertical axis
transition_prev – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_next – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
transition_duration – Transition duration (in milliseconds, without unit)

class trame.widgets.quasar.QTable(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

fullscreen – Fullscreen mode
no_route_fullscreen_exit – Changing route app won’t exit fullscreen
rows – Rows of data to display
row_key – Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc); The value of property must be string or a function taking a row and returning the desired (nested) key in the row; If supplying a function then for best performance, reference it from your scope and do not define it inline
virtual_scroll – Display data using QVirtualScroll (for non-grid mode only)
virtual_scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
virtual_scroll_slice_size – Minimum number of rows to render in the virtual list
virtual_scroll_slice_ratio_before – Ratio of number of rows in visible zone to render before it
virtual_scroll_slice_ratio_after – Ratio of number of rows in visible zone to render after it
virtual_scroll_item_size – Default size in pixels of a row; This value is used for rendering the initial table; Try to use a value close to the minimum size of a row
virtual_scroll_sticky_size_start – Size in pixels of the sticky header (if using one); A correct value will improve scroll precision; Will be also used for non-virtual-scroll tables for fixing top alignment when using scrollTo method
virtual_scroll_sticky_size_end – Size in pixels of the sticky footer part (if using one); A correct value will improve scroll precision
table_colspan – The number of columns in the table (you need this if you use table-layout: fixed)
color – Color name for component from the Quasar Color Palette
icon_first_page – Icon name following Quasar convention for stepping to first page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
icon_prev_page – Icon name following Quasar convention for stepping to previous page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
icon_next_page – Icon name following Quasar convention for stepping to next page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
icon_last_page – Icon name following Quasar convention for stepping to last page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
grid – Display data as a grid instead of the default table
grid_header – Display header for grid-mode also
dense – Dense mode; Connect with $q.screen for responsive behavior
columns – The column definitions (Array of Objects)
visible_columns – Array of Strings defining column names (‘name’ property of each column from ‘columns’ prop definitions); Columns marked as ‘required’ are not affected by this property
loading – Put Table into ‘loading’ state; Notify the user something is happening behind the scenes
title – Table title
hide_header – Hide table header layer
hide_bottom – Hide table bottom layer regardless of what it has to display
hide_selected_banner – Hide the selected rows banner (if any)
hide_no_data – Hide the default no data bottom layer
hide_pagination – Hide the pagination controls at the bottom
dark – Notify the component that the background is a dark color
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
square – Removes border-radius so borders are squared
separator – Use a separator/border between rows, columns or all cells
wrap_cells – Wrap text within table cells
binary_state_sort – Skip the third state (unsorted) when user toggles column sort direction
column_sort_order – Set column sort order: ‘ad’ (ascending-descending) or ‘da’ (descending-ascending); It gets applied to all columns unless a column has its own sortOrder specified in the ‘columns’ definition prop
no_data_label – Override default text to display when no data is available
no_results_label – Override default text to display when user filters the table and no matched results are found
loading_label – Override default text to display when table is in loading state (see ‘loading’ prop)
selected_rows_label – Text to display when user selected at least one row; For best performance, reference it from your scope and do not define it inline
rows_per_page_label – Text to override default rows per page label at bottom of table
pagination_label – Text to override default pagination label at bottom of table (unless ‘pagination’ scoped slot is used); For best performance, reference it from your scope and do not define it inline
table_style – CSS style to apply to native HTML <table> element’s wrapper (which is a DIV)
table_class – CSS classes to apply to native HTML <table> element’s wrapper (which is a DIV)
table_header_style – CSS style to apply to header of native HTML <table> (which is a TR)
table_header_class – CSS classes to apply to header of native HTML <table> (which is a TR)
card_container_style – CSS style to apply to the cards container (when in grid mode)
card_container_class – CSS classes to apply to the cards container (when in grid mode)
card_style – CSS style to apply to the card (when in grid mode) or container card (when not in grid mode)
card_class – CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)
title_class – CSS classes to apply to the title (if using ‘title’ prop)
filter – String/Object to filter table with; When using an Object it requires ‘filter-method’ to also be specified since it will be a custom filtering
filter_method – The actual filtering mechanism; For best performance, reference it from your scope and do not define it inline
pagination – Pagination object; You can also use the ‘v-model:pagination’ for synching; When not synching it simply initializes the pagination on first render
rows_per_page_options – Options for user to pick (Numbers); Number 0 means ‘Show all rows in one page’
selection – Selection type
selected – Keeps the user selection array
expanded – Keeps the array with expanded rows keys
sort_method – The actual sort mechanism. Function (rows, sortBy, descending) => sorted rows; For best performance, reference it from your scope and do not define it inline

Events

Parameters:

fullscreen – Fullscreen mode
no_route_fullscreen_exit – Changing route app won’t exit fullscreen
rows – Rows of data to display
row_key – Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc); The value of property must be string or a function taking a row and returning the desired (nested) key in the row; If supplying a function then for best performance, reference it from your scope and do not define it inline
virtual_scroll – Display data using QVirtualScroll (for non-grid mode only)
virtual_scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
virtual_scroll_slice_size – Minimum number of rows to render in the virtual list
virtual_scroll_slice_ratio_before – Ratio of number of rows in visible zone to render before it
virtual_scroll_slice_ratio_after – Ratio of number of rows in visible zone to render after it
virtual_scroll_item_size – Default size in pixels of a row; This value is used for rendering the initial table; Try to use a value close to the minimum size of a row
virtual_scroll_sticky_size_start – Size in pixels of the sticky header (if using one); A correct value will improve scroll precision; Will be also used for non-virtual-scroll tables for fixing top alignment when using scrollTo method
virtual_scroll_sticky_size_end – Size in pixels of the sticky footer part (if using one); A correct value will improve scroll precision
table_colspan – The number of columns in the table (you need this if you use table-layout: fixed)
color – Color name for component from the Quasar Color Palette
icon_first_page – Icon name following Quasar convention for stepping to first page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
icon_prev_page – Icon name following Quasar convention for stepping to previous page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
icon_next_page – Icon name following Quasar convention for stepping to next page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
icon_last_page – Icon name following Quasar convention for stepping to last page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
grid – Display data as a grid instead of the default table
grid_header – Display header for grid-mode also
dense – Dense mode; Connect with $q.screen for responsive behavior
columns – The column definitions (Array of Objects)
visible_columns – Array of Strings defining column names (‘name’ property of each column from ‘columns’ prop definitions); Columns marked as ‘required’ are not affected by this property
loading – Put Table into ‘loading’ state; Notify the user something is happening behind the scenes
title – Table title
hide_header – Hide table header layer
hide_bottom – Hide table bottom layer regardless of what it has to display
hide_selected_banner – Hide the selected rows banner (if any)
hide_no_data – Hide the default no data bottom layer
hide_pagination – Hide the pagination controls at the bottom
dark – Notify the component that the background is a dark color
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
square – Removes border-radius so borders are squared
separator – Use a separator/border between rows, columns or all cells
wrap_cells – Wrap text within table cells
binary_state_sort – Skip the third state (unsorted) when user toggles column sort direction
column_sort_order – Set column sort order: ‘ad’ (ascending-descending) or ‘da’ (descending-ascending); It gets applied to all columns unless a column has its own sortOrder specified in the ‘columns’ definition prop
no_data_label – Override default text to display when no data is available
no_results_label – Override default text to display when user filters the table and no matched results are found
loading_label – Override default text to display when table is in loading state (see ‘loading’ prop)
selected_rows_label – Text to display when user selected at least one row; For best performance, reference it from your scope and do not define it inline
rows_per_page_label – Text to override default rows per page label at bottom of table
pagination_label – Text to override default pagination label at bottom of table (unless ‘pagination’ scoped slot is used); For best performance, reference it from your scope and do not define it inline
table_style – CSS style to apply to native HTML <table> element’s wrapper (which is a DIV)
table_class – CSS classes to apply to native HTML <table> element’s wrapper (which is a DIV)
table_header_style – CSS style to apply to header of native HTML <table> (which is a TR)
table_header_class – CSS classes to apply to header of native HTML <table> (which is a TR)
card_container_style – CSS style to apply to the cards container (when in grid mode)
card_container_class – CSS classes to apply to the cards container (when in grid mode)
card_style – CSS style to apply to the card (when in grid mode) or container card (when not in grid mode)
card_class – CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)
title_class – CSS classes to apply to the title (if using ‘title’ prop)
filter – String/Object to filter table with; When using an Object it requires ‘filter-method’ to also be specified since it will be a custom filtering
filter_method – The actual filtering mechanism; For best performance, reference it from your scope and do not define it inline
pagination – Pagination object; You can also use the ‘v-model:pagination’ for synching; When not synching it simply initializes the pagination on first render
rows_per_page_options – Options for user to pick (Numbers); Number 0 means ‘Show all rows in one page’
selection – Selection type
selected – Keeps the user selection array
expanded – Keeps the array with expanded rows keys
sort_method – The actual sort mechanism. Function (rows, sortBy, descending) => sorted rows; For best performance, reference it from your scope and do not define it inline

class trame.widgets.quasar.QTabs(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

model_value – Model of the component defining current panel name; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
vertical – Use vertical design (tabs one on top of each other rather than one next to the other horizontally)
outside_arrows – Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)
mobile_arrows – Force display of arrows (if needed) on mobile
align – Horizontal alignment the tabs within the tabs container
breakpoint – Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment
active_color – The color to be attributed to the text of the active tab
active_bg_color – The color to be attributed to the background of the active tab
indicator_color – The color to be attributed to the indicator (the underline) of the active tab
content_class – Class definitions to be attributed to the content wrapper
active_class – The class to be set on the active tab
left_icon – The name of an icon to replace the default arrow used to scroll through the tabs to the left, when the tabs extend past the width of the tabs container
right_icon – The name of an icon to replace the default arrow used to scroll through the tabs to the right, when the tabs extend past the width of the tabs container
stretch – When used on flexbox parent, tabs will stretch to parent’s height
shrink – By default, QTabs is set to grow to the available space; However, you can reverse that with this prop; Useful (and required) when placing the component in a QToolbar
switch_indicator – Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode)
narrow_indicator – Allows the indicator to be the same width as the tab’s content (text or icon), instead of the whole width of the tab
inline_label – Allows the text to be inline with the icon, should one be used
no_caps – Turns off capitalizing all letters within the tab (which is the default)
dense – Dense mode; occupies less space

Events

Parameters:

model_value – Model of the component defining current panel name; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
vertical – Use vertical design (tabs one on top of each other rather than one next to the other horizontally)
outside_arrows – Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)
mobile_arrows – Force display of arrows (if needed) on mobile
align – Horizontal alignment the tabs within the tabs container
breakpoint – Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment
active_color – The color to be attributed to the text of the active tab
active_bg_color – The color to be attributed to the background of the active tab
indicator_color – The color to be attributed to the indicator (the underline) of the active tab
content_class – Class definitions to be attributed to the content wrapper
active_class – The class to be set on the active tab
left_icon – The name of an icon to replace the default arrow used to scroll through the tabs to the left, when the tabs extend past the width of the tabs container
right_icon – The name of an icon to replace the default arrow used to scroll through the tabs to the right, when the tabs extend past the width of the tabs container
stretch – When used on flexbox parent, tabs will stretch to parent’s height
shrink – By default, QTabs is set to grow to the available space; However, you can reverse that with this prop; Useful (and required) when placing the component in a QToolbar
switch_indicator – Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode)
narrow_indicator – Allows the indicator to be the same width as the tab’s content (text or icon), instead of the whole width of the tab
inline_label – Allows the text to be inline with the icon, should one be used
no_caps – Turns off capitalizing all letters within the tab (which is the default)
dense – Dense mode; occupies less space

class trame.widgets.quasar.QTd(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

props – QTable’s column scoped slot property
auto_width – Tries to shrink column width size; Useful for columns with a checkbox/radio/toggle
no_hover – Disable hover effect

Events

Parameters:

props – QTable’s column scoped slot property
auto_width – Tries to shrink column width size; Useful for columns with a checkbox/radio/toggle
no_hover – Disable hover effect

class trame.widgets.quasar.QTh(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

props – QTable’s header column scoped slot property
auto_width – Tries to shrink header column width size; Useful for columns with a checkbox/radio/toggle

Events

Parameters:

props – QTable’s header column scoped slot property
auto_width – Tries to shrink header column width size; Useful for columns with a checkbox/radio/toggle

class trame.widgets.quasar.QTime(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
landscape – Display the component in landscape mode
mask – Mask (formatting string) used for parsing and formatting value
locale – Locale formatting options
calendar – Specify calendar type
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
dark – Notify the component that the background is a dark color
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
readonly – Put component in readonly mode
disable – Put component in disabled mode
model_value – Time of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
format24h – Forces 24 hour time display instead of AM/PM system
default_date – The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)
options – Optionally configure what time is the user allowed to set; Overridden by ‘hour-options’, ‘minute-options’ and ‘second-options’ if those are set; For best performance, reference it from your scope and do not define it inline
hour_options – Optionally configure what hours is the user allowed to set; Overrides ‘options’ prop if that is also set
minute_options – Optionally configure what minutes is the user allowed to set; Overrides ‘options’ prop if that is also set
second_options – Optionally configure what seconds is the user allowed to set; Overrides ‘options’ prop if that is also set
with_seconds – Allow the time to be set with seconds
now_btn – Display a button that selects the current time

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
landscape – Display the component in landscape mode
mask – Mask (formatting string) used for parsing and formatting value
locale – Locale formatting options
calendar – Specify calendar type
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
dark – Notify the component that the background is a dark color
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
readonly – Put component in readonly mode
disable – Put component in disabled mode
model_value – Time of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
format24h – Forces 24 hour time display instead of AM/PM system
default_date – The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)
options – Optionally configure what time is the user allowed to set; Overridden by ‘hour-options’, ‘minute-options’ and ‘second-options’ if those are set; For best performance, reference it from your scope and do not define it inline
hour_options – Optionally configure what hours is the user allowed to set; Overrides ‘options’ prop if that is also set
minute_options – Optionally configure what minutes is the user allowed to set; Overrides ‘options’ prop if that is also set
second_options – Optionally configure what seconds is the user allowed to set; Overrides ‘options’ prop if that is also set
with_seconds – Allow the time to be set with seconds
now_btn – Display a button that selects the current time

class trame.widgets.quasar.QTimeline(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

color – Color name for component from the Quasar Color Palette
side – Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by QTimelineEntry side prop
layout – Layout of the timeline. Dense keeps content and labels on one side. Comfortable keeps content on one side and labels on the opposite side. Loose puts content on both sides.
dark – Notify the component that the background is a dark color

Events

Parameters:

color – Color name for component from the Quasar Color Palette
side – Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by QTimelineEntry side prop
layout – Layout of the timeline. Dense keeps content and labels on one side. Comfortable keeps content on one side and labels on the opposite side. Loose puts content on both sides.
dark – Notify the component that the background is a dark color

class trame.widgets.quasar.QTimelineEntry(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

heading – Defines a heading timeline item
tag – Tag to use, if of type ‘heading’ only
side – Side to place the timeline entry; Works only if QTimeline layout is loose.
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
avatar – URL to the avatar image; Icon takes precedence if used, so it replaces avatar
color – Color name for component from the Quasar Color Palette
title – Title of timeline entry; Is overridden if using ‘title’ slot
subtitle – Subtitle of timeline entry; Is overridden if using ‘subtitle’ slot
body – Body content of timeline entry; Use this prop or the default slot

Events

Parameters:

heading – Defines a heading timeline item
tag – Tag to use, if of type ‘heading’ only
side – Side to place the timeline entry; Works only if QTimeline layout is loose.
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
avatar – URL to the avatar image; Icon takes precedence if used, so it replaces avatar
color – Color name for component from the Quasar Color Palette
title – Title of timeline entry; Is overridden if using ‘title’ slot
subtitle – Subtitle of timeline entry; Is overridden if using ‘subtitle’ slot
body – Body content of timeline entry; Use this prop or the default slot

class trame.widgets.quasar.QToggle(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
val – Works when model (‘value’) is Array. It tells the component which value should add/remove when ticked/unticked
true_value – What model value should be considered as checked/ticked/on?
false_value – What model value should be considered as unchecked/unticked/off?
indeterminate_value – What model value should be considered as ‘indeterminate’?
toggle_order – Determines toggle order of the two states (‘t’ stands for state of true, ‘f’ for state of false); If ‘toggle-indeterminate’ is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> …
toggle_indeterminate – When user clicks/taps on the component, should we toggle through the indeterminate state too?
label – Label to display along the component (or use the default slot instead of this prop)
left_label – Label (if any specified) should be displayed on the left side of the component
checked_icon – The icon to be used when the toggle is on
unchecked_icon – The icon to be used when the toggle is off
indeterminate_icon – The icon to be used when the model is indeterminate
color – Color name for component from the Quasar Color Palette
keep_color – Should the color (if specified any) be kept when the component is unticked/ off?
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_color – Override default icon color (for truthy state only); Color name for component from the Quasar Color Palette

Events

Parameters:

name – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
size – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
model_value – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
val – Works when model (‘value’) is Array. It tells the component which value should add/remove when ticked/unticked
true_value – What model value should be considered as checked/ticked/on?
false_value – What model value should be considered as unchecked/unticked/off?
indeterminate_value – What model value should be considered as ‘indeterminate’?
toggle_order – Determines toggle order of the two states (‘t’ stands for state of true, ‘f’ for state of false); If ‘toggle-indeterminate’ is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> …
toggle_indeterminate – When user clicks/taps on the component, should we toggle through the indeterminate state too?
label – Label to display along the component (or use the default slot instead of this prop)
left_label – Label (if any specified) should be displayed on the left side of the component
checked_icon – The icon to be used when the toggle is on
unchecked_icon – The icon to be used when the toggle is off
indeterminate_icon – The icon to be used when the model is indeterminate
color – Color name for component from the Quasar Color Palette
keep_color – Should the color (if specified any) be kept when the component is unticked/ off?
dark – Notify the component that the background is a dark color
dense – Dense mode; occupies less space
disable – Put component in disabled mode
tabindex – Tabindex HTML attribute value
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
icon_color – Override default icon color (for truthy state only); Color name for component from the Quasar Color Palette

class trame.widgets.quasar.QToolbar(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:: inset – Apply an inset to content (useful for subsequent toolbars)

Events

Parameters:: inset – Apply an inset to content (useful for subsequent toolbars)

class trame.widgets.quasar.QToolbarTitle(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:: shrink – By default, QToolbarTitle is set to grow to the available space. However, you can reverse that with this prop

Events

Parameters:: shrink – By default, QToolbarTitle is set to grow to the available space. However, you can reverse that with this prop

class trame.widgets.quasar.QTooltip(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
model_value – Model of the component defining shown/hidden state; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
max_height – The maximum height of the Tooltip; Size in CSS units, including unit name
max_width – The maximum width of the Tooltip; Size in CSS units, including unit name
anchor – Two values setting the starting position or anchor point of the Tooltip relative to its target
self – Two values setting the Tooltip’s own position relative to its target
offset – An array of two numbers to offset the Tooltip horizontally and vertically in pixels
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
target – Configure a target element to trigger Tooltip toggle; ‘true’ means it enables the parent DOM element, ‘false’ means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)
no_parent_event – Skips attaching events to the target DOM element (that trigger the element to get shown)
delay – Configure Tooltip to appear with delay
hide_delay – Configure Tooltip to disappear with delay

Events

Parameters:

transition_show – One of Quasar’s embedded transitions
transition_hide – One of Quasar’s embedded transitions
transition_duration – Transition duration (in milliseconds, without unit)
model_value – Model of the component defining shown/hidden state; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
max_height – The maximum height of the Tooltip; Size in CSS units, including unit name
max_width – The maximum width of the Tooltip; Size in CSS units, including unit name
anchor – Two values setting the starting position or anchor point of the Tooltip relative to its target
self – Two values setting the Tooltip’s own position relative to its target
offset – An array of two numbers to offset the Tooltip horizontally and vertically in pixels
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one
target – Configure a target element to trigger Tooltip toggle; ‘true’ means it enables the parent DOM element, ‘false’ means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists)
no_parent_event – Skips attaching events to the target DOM element (that trigger the element to get shown)
delay – Configure Tooltip to appear with delay
hide_delay – Configure Tooltip to disappear with delay

class trame.widgets.quasar.QTr(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

props – QTable’s row scoped slot property
no_hover – Disable hover effect

Events

Parameters:

props – QTable’s row scoped slot property
no_hover – Disable hover effect

class trame.widgets.quasar.QTree(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

nodes – The array of nodes that designates the tree structure
node_key – The property name of each node object that holds a unique node id
label_key – The property name of each node object that holds the label of the node
children_key – The property name of each node object that holds the list of children of the node
no_connectors – Do not display the connector lines between nodes
color – Color name for component from the Quasar Color Palette
control_color – Color name for controls (like checkboxes) from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
selected_color – Color name for selected nodes (from the Quasar Color Palette)
dense – Dense mode; occupies less space
dark – Notify the component that the background is a dark color
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
tick_strategy – The type of strategy to use for the selection of the nodes
ticked – Keys of nodes that are ticked
expanded – Keys of nodes that are expanded
selected – Key of node currently selected
no_selection_unset – Do not allow un-selection when clicking currently selected node
default_expand_all – Allow the tree to have all its branches expanded, when first rendered
accordion – Allows the tree to be set in accordion mode
no_transition – Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees
filter – The text value to be used for filtering nodes
filter_method – The function to use to filter the tree nodes; For best performance, reference it from your scope and do not define it inline
duration – Toggle animation duration (in milliseconds)
no_nodes_label – Override default such label for when no nodes are available
no_results_label – Override default such label for when no nodes are available due to filtering

Events

Parameters:

nodes – The array of nodes that designates the tree structure
node_key – The property name of each node object that holds a unique node id
label_key – The property name of each node object that holds the label of the node
children_key – The property name of each node object that holds the list of children of the node
no_connectors – Do not display the connector lines between nodes
color – Color name for component from the Quasar Color Palette
control_color – Color name for controls (like checkboxes) from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
selected_color – Color name for selected nodes (from the Quasar Color Palette)
dense – Dense mode; occupies less space
dark – Notify the component that the background is a dark color
icon – Icon name following Quasar convention; Make sure you have the icon library installed unless you are using ‘img:’ prefix; If ‘none’ (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
tick_strategy – The type of strategy to use for the selection of the nodes
ticked – Keys of nodes that are ticked
expanded – Keys of nodes that are expanded
selected – Key of node currently selected
no_selection_unset – Do not allow un-selection when clicking currently selected node
default_expand_all – Allow the tree to have all its branches expanded, when first rendered
accordion – Allows the tree to be set in accordion mode
no_transition – Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees
filter – The text value to be used for filtering nodes
filter_method – The function to use to filter the tree nodes; For best performance, reference it from your scope and do not define it inline
duration – Toggle animation duration (in milliseconds)
no_nodes_label – Override default such label for when no nodes are available
no_results_label – Override default such label for when no nodes are available due to filtering

class trame.widgets.quasar.QUploader(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

factory – Function which should return an Object or a Promise resolving with an Object; For best performance, reference it from your scope and do not define it inline
url – URL or path to the server which handles the upload. Takes String or factory function, which returns String. Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
method – HTTP method to use for upload; Takes String or factory function which returns a String; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
field_name – Field name for each file upload; This goes into the following header: ‘Content-Disposition: form-data; name=”__HERE__”; filename=”somefile.png”; If using a function then for best performance, reference it from your scope and do not define it inline
headers – Array or a factory function which returns an array; Array consists of objects with header definitions; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
form_fields – Array or a factory function which returns an array; Array consists of objects with additional fields definitions (used by Form to be uploaded); Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
with_credentials – Sets withCredentials to true on the XHR that manages the upload; Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
send_raw – Send raw files without wrapping into a Form(); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
batch – Upload files in batch (in one XHR request); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
multiple – Allow multiple file uploads
accept – Comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element
capture – Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the ‘accept’ prop. Maps to ‘capture’ attribute of native input type=file element
max_file_size – Maximum size of individual file in bytes
max_total_size – Maximum size of all files combined in bytes
max_files – Maximum number of files to contain
filter – Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline
label – Label for the uploader
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
dark – Notify the component that the background is a dark color
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
no_thumbnails – Don’t display thumbnails for image files
auto_upload – Upload files immediately when added
hide_upload_btn – Don’t show the upload button
disable – Put component in disabled mode
readonly – Put component in readonly mode

Events

Parameters:

factory – Function which should return an Object or a Promise resolving with an Object; For best performance, reference it from your scope and do not define it inline
url – URL or path to the server which handles the upload. Takes String or factory function, which returns String. Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
method – HTTP method to use for upload; Takes String or factory function which returns a String; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
field_name – Field name for each file upload; This goes into the following header: ‘Content-Disposition: form-data; name=”__HERE__”; filename=”somefile.png”; If using a function then for best performance, reference it from your scope and do not define it inline
headers – Array or a factory function which returns an array; Array consists of objects with header definitions; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
form_fields – Array or a factory function which returns an array; Array consists of objects with additional fields definitions (used by Form to be uploaded); Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
with_credentials – Sets withCredentials to true on the XHR that manages the upload; Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
send_raw – Send raw files without wrapping into a Form(); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
batch – Upload files in batch (in one XHR request); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline
multiple – Allow multiple file uploads
accept – Comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element
capture – Optionally, specify that a new file should be captured, and which device should be used to capture that new media of a type defined by the ‘accept’ prop. Maps to ‘capture’ attribute of native input type=file element
max_file_size – Maximum size of individual file in bytes
max_total_size – Maximum size of all files combined in bytes
max_files – Maximum number of files to contain
filter – Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline
label – Label for the uploader
color – Color name for component from the Quasar Color Palette
text_color – Overrides text color (if needed); Color name from the Quasar Color Palette
dark – Notify the component that the background is a dark color
square – Removes border-radius so borders are squared
flat – Applies a ‘flat’ design (no default shadow)
bordered – Applies a default border to the component
no_thumbnails – Don’t display thumbnails for image files
auto_upload – Upload files immediately when added
hide_upload_btn – Don’t show the upload button
disable – Put component in disabled mode
readonly – Put component in readonly mode

class trame.widgets.quasar.QUploaderAddTrigger(children=None, **kwargs): Bases: AbstractElement

class trame.widgets.quasar.QVideo(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

ratio – Aspect ratio for the content; If value is a String, then avoid using a computational statement (like ‘16/9’) and instead specify the String value of the result directly (eg. ‘1.7777’)
src – The source url to display in an iframe
title – (Accessibility) Set the native ‘title’ attribute value of the inner iframe being used
fetchpriority – Provides a hint of the relative priority to use when fetching the iframe document
loading – Indicates how the browser should load the iframe
referrerpolicy – Indicates which referrer to send when fetching the frame’s resource

Events

Parameters:

ratio – Aspect ratio for the content; If value is a String, then avoid using a computational statement (like ‘16/9’) and instead specify the String value of the result directly (eg. ‘1.7777’)
src – The source url to display in an iframe
title – (Accessibility) Set the native ‘title’ attribute value of the inner iframe being used
fetchpriority – Provides a hint of the relative priority to use when fetching the iframe document
loading – Indicates how the browser should load the iframe
referrerpolicy – Indicates which referrer to send when fetching the frame’s resource

class trame.widgets.quasar.QVirtualScroll(children=None, **kwargs)

Bases: AbstractElement

Properties

Parameters:

virtual_scroll_horizontal – Make virtual list work in horizontal mode
virtual_scroll_slice_size – Minimum number of items to render in the virtual list
virtual_scroll_slice_ratio_before – Ratio of number of items in visible zone to render before it
virtual_scroll_slice_ratio_after – Ratio of number of items in visible zone to render after it
virtual_scroll_item_size – Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item
virtual_scroll_sticky_size_start – Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision
virtual_scroll_sticky_size_end – Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision
table_colspan – The number of columns in the table (you need this if you use table-layout: fixed)
type – The type of content: list (default) or table
items – Available list items that will be passed to the scoped slot; For best performance freeze the list of items; Required if ‘itemsFn’ is not supplied
items_size – Number of available items in the list; Required and used only if ‘itemsFn’ is provided
items_fn – Function to return the scope for the items to be displayed; Should return an array for items starting from ‘from’ index for size length; For best performance, reference it from your scope and do not define it inline
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one

Events

Parameters:

virtual_scroll_horizontal – Make virtual list work in horizontal mode
virtual_scroll_slice_size – Minimum number of items to render in the virtual list
virtual_scroll_slice_ratio_before – Ratio of number of items in visible zone to render before it
virtual_scroll_slice_ratio_after – Ratio of number of items in visible zone to render after it
virtual_scroll_item_size – Default size in pixels (height if vertical, width if horizontal) of an item; This value is used for rendering the initial list; Try to use a value close to the minimum size of an item
virtual_scroll_sticky_size_start – Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the start of the list; A correct value will improve scroll precision
virtual_scroll_sticky_size_end – Size in pixels (height if vertical, width if horizontal) of the sticky part (if using one) at the end of the list; A correct value will improve scroll precision
table_colspan – The number of columns in the table (you need this if you use table-layout: fixed)
type – The type of content: list (default) or table
items – Available list items that will be passed to the scoped slot; For best performance freeze the list of items; Required if ‘itemsFn’ is not supplied
items_size – Number of available items in the list; Required and used only if ‘itemsFn’ is provided
items_fn – Function to return the scope for the items to be displayed; Should return an array for items starting from ‘from’ index for size length; For best performance, reference it from your scope and do not define it inline
scroll_target – CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one