QComponents#

This module provides all quasar-components auto-wrapped to python. Properties are available in the constructor and via Python properties. Slots are available as python properties starting with slot_. You can register callbacks to events by calling comp.on_[eventname](callback).

Bases: Component

Quasar Component: QAjaxBar

Parameters:

ui_position (str | None) – Position within window of where QAjaxBar should be displayed
ui_size (Any | None)
ui_color (Any | None)
ui_reverse (bool | None) – Reverse direction of progress
ui_skip_hijack (bool | None) – Skip Ajax hijacking (not a reactive prop)
ui_hijack_filter (Callable | None) – Filter which URL should trigger start() + stop()

on_start(handler: Callable, arg: object = None)#

Emitted when bar is triggered to appear

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_stop(handler: Callable, arg: object = None)#

Emitted when bar has finished its job

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_hijack_filter#: Filter which URL should trigger start() + stop()

ui_increment(ui_amount=None)#: Manually trigger a bar progress increment

property ui_position#: Position within window of where QAjaxBar should be displayed

property ui_reverse#: Reverse direction of progress

property ui_skip_hijack#: Skip Ajax hijacking (not a reactive prop)

ui_start(ui_speed=None)#: Notify bar you are waiting for a new process to finish

ui_stop()#: Notify bar that one process you were waiting has finished

Bases: Component

Quasar Component: QAvatar

Parameters:

ui_font_size (str | None) – The size in CSS units, including unit name, of the content (icon, text)
ui_color (Any | None)
ui_text_color (Any | None)
ui_icon (Any | None)
ui_square (Any | None)
ui_rounded (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_font_size#: The size in CSS units, including unit name, of the content (icon, text)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

Bases: Component

Quasar Component: QBadge

Parameters:

ui_color (Any | None)
ui_text_color (Any | None)
ui_floating (bool | None) – Tell QBadge if it should float to the top right side of the relative positioned parent element or not
ui_transparent (bool | None) – Applies a 0.8 opacity; Useful especially for floating QBadge
ui_multi_line (bool | None) – Content can wrap to multiple lines
ui_label (str | float | None) – Badge’s content as string; overrides default slot if specified
ui_align (str | None) – Sets vertical-align CSS prop
ui_outline (bool | None) – Use ‘outline’ design (colored text and borders only)
ui_rounded (bool | None) – Makes a rounded shaped badge

property ui_align#: Sets vertical-align CSS prop

property ui_floating#: Tell QBadge if it should float to the top right side of the relative positioned parent element or not

property ui_label#: Badge’s content as string; overrides default slot if specified

property ui_multi_line#: Content can wrap to multiple lines

property ui_outline#: Use ‘outline’ design (colored text and borders only)

property ui_rounded#: Makes a rounded shaped badge

property ui_transparent#: Applies a 0.8 opacity; Useful especially for floating QBadge

class ngapp.components.qcomponents.QBanner(

*children,

ui_inline_actions: bool | None = None,

ui_dense: Any | None = None,

ui_rounded: Any | None = None,

ui_dark: Any | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QBanner

Parameters:

ui_inline_actions (bool | None) – Display actions on same row as content
ui_dense (Any | None)
ui_rounded (Any | None)
ui_dark (Any | None)

property ui_inline_actions#: Display actions on same row as content

property ui_slot_action#: Slot for Banner action (suggestions: QBtn)

property ui_slot_avatar#: Slot for displaying an avatar (suggestions: QIcon, QAvatar)

class ngapp.components.qcomponents.QBar(

*children,

ui_dense: Any | None = None,

ui_dark: Any | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QBar

Parameters:

ui_dense (Any | None)
ui_dark (Any | None) – 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

property ui_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

Bases: Component

Quasar Component: QBreadcrumbs

Parameters:

ui_separator (str | None) – The string used to separate the breadcrumbs
ui_active_color (Any | None) – The color of the active breadcrumb, which can be any color from the Quasar Color Palette
ui_gutter (str | None) – The gutter value allows you control over the space between the breadcrumb elements.
ui_separator_color (Any | None) – The color used to color the separator, which can be any color from the Quasar Color Palette
ui_align (str | None) – Specify how to align the breadcrumbs horizontally

property ui_active_color#: The color of the active breadcrumb, which can be any color from the Quasar Color Palette

property ui_align#: Specify how to align the breadcrumbs horizontally

property ui_gutter#: The gutter value allows you control over the space between the breadcrumb elements.

property ui_separator#: The string used to separate the breadcrumbs

property ui_separator_color#: The color used to color the separator, which can be any color from the Quasar Color Palette

property ui_slot_separator#: HTML or component you can slot in to separate the breadcrumbs

Bases: Component

Quasar Component: QBreadcrumbsEl

Parameters:

ui_label (str | None) – The label text for the breadcrumb
ui_icon (Any | None)
ui_tag (Any | None)
ui_to (str | dict | None) – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
ui_exact (bool | None) – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
ui_replace (bool | None) – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
ui_active_class (str | None) – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
ui_exact_active_class (str | None) – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
ui_href (str | None) – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
ui_target (str | None) – 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
ui_disable (Any | None)

on_click(handler: Callable, arg: object = None)#

Emitted when the component is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_active_class#: Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used

property ui_exact#: Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used

property ui_exact_active_class#: Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used

property ui_href#: Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props

property ui_label#: The label text for the breadcrumb

property ui_replace#: Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used

property ui_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

property ui_to#: Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used

Bases: Component

Quasar Component: QBtn

Parameters:

ui_round (bool | None) – Makes a circle shaped button
ui_percentage (float | None) – Percentage (0.0 < x < 100.0); To be used along ‘loading’ prop; Display a progress bar on the background
ui_dark_percentage (bool | None) – Progress bar on the background should have dark color; To be used along with ‘percentage’ and ‘loading’ props
ui_type (str | None) –
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
ui_to (str | dict | None) – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
ui_replace (bool | None) – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
ui_href (str | None) – Native <a> link href attribute; Has priority over the ‘to’ and ‘replace’ props
ui_target (str | None) – Native <a> link target attribute; Use it only with ‘to’ or ‘href’ props
ui_label (str | float | None) – The text that will be shown on the button
ui_icon (Any | None)
ui_icon_right (Any | None)
ui_outline (bool | None) – Use ‘outline’ design
ui_flat (bool | None) – Use ‘flat’ design
ui_unelevated (bool | None) – Remove shadow
ui_rounded (bool | None) – Applies a more prominent border-radius for a squared shape button
ui_push (bool | None) – Use ‘push’ design
ui_square (Any | None)
ui_glossy (bool | None) – Applies a glossy effect
ui_fab (bool | None) – Makes button size and shape to fit a Floating Action Button
ui_fab_mini (bool | None) – Makes button size and shape to fit a small Floating Action Button
ui_padding (str | None) – 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
ui_color (Any | None)
ui_text_color (Any | None)
ui_no_caps (bool | None) – Avoid turning label text into caps (which happens by default)
ui_no_wrap (bool | None) – Avoid label text wrapping
ui_dense (Any | None)
ui_ripple (Any | None)
ui_tabindex (Any | None)
ui_align (str | None) – Label or content alignment
ui_stack (bool | None) – Stack icon and label vertically instead of on same line (like it is by default)
ui_stretch (bool | None) – When used on flexbox parent, button will stretch to parent’s height
ui_loading (bool | None) – Put button into loading state (displays a QSpinner – can be overridden by using a ‘loading’ slot)
ui_disable (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

on_click(handler: Callable, arg: object = None)#

Emitted when the component is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keydown(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keyup(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_mousedown(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_touchstart(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_align#: Label or content alignment

ui_click(ui_evt=None)#: Emulate click on QBtn

property ui_dark_percentage#: Progress bar on the background should have dark color; To be used along with ‘percentage’ and ‘loading’ props

property ui_fab#: Makes button size and shape to fit a Floating Action Button

property ui_fab_mini#: Makes button size and shape to fit a small Floating Action Button

property ui_flat#: Use ‘flat’ design

property ui_glossy#: Applies a glossy effect

property ui_href#: Native <a> link href attribute; Has priority over the ‘to’ and ‘replace’ props

property ui_label#: The text that will be shown on the button

property ui_loading#: Put button into loading state (displays a QSpinner – can be overridden by using a ‘loading’ slot)

property ui_no_caps#: Avoid turning label text into caps (which happens by default)

property ui_no_wrap#: Avoid label text wrapping

property ui_outline#: Use ‘outline’ design

property ui_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

property ui_percentage#: Percentage (0.0 < x < 100.0); To be used along ‘loading’ prop; Display a progress bar on the background

property ui_push#: Use ‘push’ design

property ui_replace#: Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used

property ui_round#: Makes a circle shaped button

property ui_rounded#: Applies a more prominent border-radius for a squared shape button

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_slot_loading#: Override the default QSpinner when in ‘loading’ state

property ui_stack#: Stack icon and label vertically instead of on same line (like it is by default)

property ui_stretch#: When used on flexbox parent, button will stretch to parent’s height

property ui_target#: Native <a> link target attribute; Use it only with ‘to’ or ‘href’ props

property ui_to#: Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used

property ui_type#

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

property ui_unelevated#: Remove shadow

Bases: Component

Quasar Component: QBtnDropdown

Parameters:

ui_model_value (bool | None) – 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
ui_split (bool | None) – Split dropdown icon into its own button
ui_dropdown_icon (Any | None)
ui_disable_main_btn (bool | None) – Disable main button (useful along with ‘split’ prop)
ui_disable_dropdown (bool | None) – Disables dropdown (dropdown button if using along ‘split’ prop)
ui_no_icon_animation (bool | None) – Disables the rotation of the dropdown icon when state is toggled
ui_content_style (str | list | dict | None) – Style definitions to be attributed to the menu
ui_content_class (str | list | dict | None) – Class definitions to be attributed to the menu
ui_cover (bool | None) – Allows the menu to cover the button. When used, the ‘menu-self’ and ‘menu-fit’ props are no longer effective
ui_persistent (bool | None) – Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key; Also, an app route change won’t dismiss it
ui_no_route_dismiss (bool | None) – Changing route app won’t dismiss the popup; No need to set it if ‘persistent’ prop is also set
ui_auto_close (bool | None) – 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
ui_menu_anchor (str | None) – Two values setting the starting position or anchor point of the menu relative to its target
ui_menu_self (str | None) – Two values setting the menu’s own position relative to its target
ui_menu_offset (list | None) – An array of two numbers to offset the menu horizontally and vertically in pixels
ui_toggle_aria_label (str | None) – aria-label to be used on the dropdown toggle element
ui_type (str | None) –
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
ui_to (str | dict | None) – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
ui_replace (bool | None) – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
ui_href (str | None) – Native <a> link href attribute; Has priority over the ‘to’ and ‘replace’ props
ui_target (str | None) – Native <a> link target attribute; Use it only with ‘to’ or ‘href’ props
ui_label (str | float | None) – The text that will be shown on the button
ui_icon (Any | None)
ui_icon_right (Any | None)
ui_outline (bool | None) – Use ‘outline’ design
ui_flat (bool | None) – Use ‘flat’ design
ui_unelevated (bool | None) – Remove shadow
ui_rounded (bool | None) – Applies a more prominent border-radius for a squared shape button
ui_push (bool | None) – Use ‘push’ design
ui_square (Any | None)
ui_glossy (bool | None) – Applies a glossy effect
ui_fab (bool | None) – Makes button size and shape to fit a Floating Action Button
ui_fab_mini (bool | None) – Makes button size and shape to fit a small Floating Action Button
ui_padding (str | None) – 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
ui_color (Any | None)
ui_text_color (Any | None)
ui_no_caps (bool | None) – Avoid turning label text into caps (which happens by default)
ui_no_wrap (bool | None) – Avoid label text wrapping
ui_dense (Any | None)
ui_ripple (Any | None)
ui_tabindex (Any | None)
ui_align (str | None) – Label or content alignment
ui_stack (bool | None) – Stack icon and label vertically instead of on same line (like it is by default)
ui_stretch (bool | None) – When used on flexbox parent, button will stretch to parent’s height
ui_loading (bool | None) – Put button into loading state (displays a QSpinner – can be overridden by using a ‘loading’ slot)
ui_disable (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
ui_transition_show (Any | None)
ui_transition_hide (Any | None)
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)

on_before_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_click(handler: Callable, arg: object = None)#

Emitted when user clicks/taps on the main button (not the icon one, if using ‘split’)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value( handler: Callable, arg: object = None, )#

Emitted when showing/hidden state changes; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_align#: Label or content alignment

property ui_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

property ui_content_class#: Class definitions to be attributed to the menu

property ui_content_style#: Style definitions to be attributed to the menu

property ui_cover#: Allows the menu to cover the button. When used, the ‘menu-self’ and ‘menu-fit’ props are no longer effective

property ui_disable_dropdown#: Disables dropdown (dropdown button if using along ‘split’ prop)

property ui_disable_main_btn#: Disable main button (useful along with ‘split’ prop)

property ui_fab#: Makes button size and shape to fit a Floating Action Button

property ui_fab_mini#: Makes button size and shape to fit a small Floating Action Button

property ui_flat#: Use ‘flat’ design

property ui_glossy#: Applies a glossy effect

property ui_href#: Native <a> link href attribute; Has priority over the ‘to’ and ‘replace’ props

property ui_label#: The text that will be shown on the button

property ui_loading#: Put button into loading state (displays a QSpinner – can be overridden by using a ‘loading’ slot)

property ui_menu_anchor#: Two values setting the starting position or anchor point of the menu relative to its target

property ui_menu_offset#: An array of two numbers to offset the menu horizontally and vertically in pixels

property ui_menu_self#: Two values setting the menu’s own position relative to its target

property ui_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

property ui_no_caps#: Avoid turning label text into caps (which happens by default)

property ui_no_icon_animation#: Disables the rotation of the dropdown icon when state is toggled

property ui_no_route_dismiss#: Changing route app won’t dismiss the popup; No need to set it if ‘persistent’ prop is also set

property ui_no_wrap#: Avoid label text wrapping

property ui_outline#: Use ‘outline’ design

property ui_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

property ui_persistent#: Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key; Also, an app route change won’t dismiss it

property ui_push#: Use ‘push’ design

property ui_replace#: Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used

property ui_rounded#: Applies a more prominent border-radius for a squared shape button

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_slot_label#: Customize main button’s content through this slot, unless you’re using the ‘icon’ and ‘label’ props

property ui_slot_loading#: Override the default QSpinner when in ‘loading’ state

property ui_split#: Split dropdown icon into its own button

property ui_stack#: Stack icon and label vertically instead of on same line (like it is by default)

property ui_stretch#: When used on flexbox parent, button will stretch to parent’s height

property ui_target#: Native <a> link target attribute; Use it only with ‘to’ or ‘href’ props

property ui_to#: Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used

property ui_toggle_aria_label#: aria-label to be used on the dropdown toggle element

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

property ui_type#

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

property ui_unelevated#: Remove shadow

Bases: Component

Quasar Component: QBtnGroup

Parameters:

ui_spread (bool | None) – Spread horizontally to all available space
ui_outline (bool | None) – Use ‘outline’ design for buttons
ui_flat (bool | None) – Use ‘flat’ design for buttons
ui_unelevated (bool | None) – Remove shadow on buttons
ui_rounded (bool | None) – Applies a more prominent border-radius for squared shape buttons
ui_square (Any | None)
ui_push (bool | None) – Use ‘push’ design for buttons
ui_stretch (bool | None) – When used on flexbox parent, buttons will stretch to parent’s height
ui_glossy (bool | None) – Applies a glossy effect

property ui_flat#: Use ‘flat’ design for buttons

property ui_glossy#: Applies a glossy effect

property ui_outline#: Use ‘outline’ design for buttons

property ui_push#: Use ‘push’ design for buttons

property ui_rounded#: Applies a more prominent border-radius for squared shape buttons

property ui_spread#: Spread horizontally to all available space

property ui_stretch#: When used on flexbox parent, buttons will stretch to parent’s height

property ui_unelevated#: Remove shadow on buttons

Bases: Component

Quasar Component: QBtnToggle

Parameters:

ui_model_value (Any | None) – Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
ui_options (list | None) – Array of Objects defining each option
ui_color (Any | None)
ui_text_color (Any | None)
ui_toggle_color (Any | None)
ui_toggle_text_color (Any | None)
ui_spread (bool | None) – Spread horizontally to all available space
ui_outline (bool | None) – Use ‘outline’ design
ui_flat (bool | None) – Use ‘flat’ design
ui_unelevated (bool | None) – Remove shadow
ui_rounded (bool | None) – Applies a more prominent border-radius for a squared shape button
ui_push (bool | None) – Use ‘push’ design
ui_glossy (bool | None) – Applies a glossy effect
ui_size (str | None) – Button size name or a CSS unit including unit name
ui_padding (str | None) – 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
ui_no_caps (bool | None) – Avoid turning label text into caps (which happens by default)
ui_no_wrap (bool | None) – Avoid label text wrapping
ui_ripple (Any | None)
ui_dense (Any | None)
ui_readonly (Any | None)
ui_disable (Any | None)
ui_stack (bool | None) – Stack icon and label vertically instead of on same line (like it is by default)
ui_stretch (bool | None) – When used on flexbox parent, button will stretch to parent’s height
ui_clearable (bool | None) – Clears model on click of the already selected button
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_clear(handler: Callable, arg: object = None)#

When using the ‘clearable’ property, this event is emitted when the already selected button is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

set_dynamic_slot( name: str, items: list[Component], )#

Any other dynamic slots to be used with ‘slot’ property of the ‘options’ prop

Parameters:

name (str)
items (list[Component])

property ui_clearable#: Clears model on click of the already selected button

property ui_flat#: Use ‘flat’ design

property ui_glossy#: Applies a glossy effect

property ui_model_value#: Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_no_caps#: Avoid turning label text into caps (which happens by default)

property ui_no_wrap#: Avoid label text wrapping

property ui_options#: Array of Objects defining each option

property ui_outline#: Use ‘outline’ design

property ui_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

property ui_push#: Use ‘push’ design

property ui_rounded#: Applies a more prominent border-radius for a squared shape button

property ui_size#: Button size name or a CSS unit including unit name

property ui_spread#: Spread horizontally to all available space

property ui_stack#: Stack icon and label vertically instead of on same line (like it is by default)

property ui_stretch#: When used on flexbox parent, button will stretch to parent’s height

property ui_unelevated#: Remove shadow

Bases: Component

Quasar Component: QCard

Parameters:

ui_dark (Any | None)
ui_square (Any | None)
ui_flat (Any | None)
ui_bordered (Any | None)
ui_tag (Any | None)

class ngapp.components.qcomponents.QCardActions(

*children,

ui_align: str | None = None,

ui_vertical: bool | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QCardActions

Parameters:

ui_align (str | None) – Specify how to align the actions; For horizontal mode, the default is ‘left’, while for vertical mode, the default is ‘stretch’
ui_vertical (bool | None) – Display actions one below the other

property ui_align#: Specify how to align the actions; For horizontal mode, the default is ‘left’, while for vertical mode, the default is ‘stretch’

property ui_vertical#: Display actions one below the other

class ngapp.components.qcomponents.QCardSection(

*children,

ui_horizontal: bool | None = None,

ui_tag: Any | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QCardSection

Parameters:

ui_horizontal (bool | None) – Display a horizontal section (will have no padding and can contain other QCardSection)
ui_tag (Any | None)

property ui_horizontal#: Display a horizontal section (will have no padding and can contain other QCardSection)

Bases: Component

Quasar Component: QCarousel

Parameters:

ui_dark (Any | None)
ui_height (Any | None) – Height of Carousel in CSS units, including unit name
ui_padding (bool | None) – Applies a default padding to each slide, according to the usage of ‘arrows’ and ‘navigation’ props
ui_control_color (Any | None) – Color name for QCarousel button controls (arrows, navigation) from the Quasar Color Palette
ui_control_text_color (Any | None) – Color name for text color of QCarousel button controls (arrows, navigation) from the Quasar Color Palette
ui_control_type (str | None) – Type of button to use for controls (arrows, navigation)
ui_autoplay (float | bool | None) – 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
ui_arrows (bool | None) – Show navigation arrow buttons
ui_prev_icon (Any | None)
ui_next_icon (Any | None)
ui_navigation (bool | None) – Show navigation dots
ui_navigation_position (str | None) – Side to stick navigation to
ui_navigation_icon (Any | None)
ui_navigation_active_icon (Any | None) – 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
ui_thumbnails (bool | None) – Show thumbnails
ui_transition_prev (Any | None) – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
ui_transition_next (Any | None) – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
ui_model_value (Any | None) – 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.
ui_keep_alive (bool | None) – Equivalent to using Vue’s native <keep-alive> component on the content
ui_keep_alive_include (str | list | Pattern | None) – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
ui_keep_alive_exclude (str | list | Pattern | None) – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
ui_keep_alive_max (float | None) – Equivalent to using Vue’s native max prop for <keep-alive>
ui_animated (bool | None) – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
ui_infinite (bool | None) – Makes component appear as infinite (when reaching last panel, next one will become the first one)
ui_swipeable (bool | None) – Enable swipe events (may interfere with content’s touch/mouse events)
ui_vertical (bool | None) – Default transitions and swipe actions will be on the vertical axis
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)
ui_fullscreen (bool | None) – Fullscreen mode
ui_no_route_fullscreen_exit (bool | None) – Changing route app won’t exit fullscreen

on_before_transition(handler: Callable, arg: object = None)#

Emitted before transitioning to a new panel

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_fullscreen(handler: Callable, arg: object = None)#

Emitted when fullscreen state changes

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_transition(handler: Callable, arg: object = None)#

Emitted after component transitioned to a new panel

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_fullscreen(handler: Callable, arg: object = None)#

Used by Vue on ‘v-model:fullscreen’ prop for updating its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when the component changes the model; This event isn’t fired if the model is changed externally; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_animated#: Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)

property ui_arrows#: Show navigation arrow buttons

property ui_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

property ui_control_color#: Color name for QCarousel button controls (arrows, navigation) from the Quasar Color Palette

property ui_control_text_color#: Color name for text color of QCarousel button controls (arrows, navigation) from the Quasar Color Palette

property ui_control_type#: Type of button to use for controls (arrows, navigation)

ui_exitFullscreen()#: Leave the fullscreen view

property ui_fullscreen#: Fullscreen mode

ui_goTo(ui_panelName)#: Go to specific panel

property ui_height#: Height of Carousel in CSS units, including unit name

property ui_infinite#: Makes component appear as infinite (when reaching last panel, next one will become the first one)

property ui_keep_alive#: Equivalent to using Vue’s native <keep-alive> component on the content

property ui_keep_alive_exclude#: Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names

property ui_keep_alive_include#: Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names

property ui_keep_alive_max#: Equivalent to using Vue’s native max prop for <keep-alive>

property ui_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.

property ui_navigation#: Show navigation dots

property ui_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

property ui_navigation_position#: Side to stick navigation to

ui_next()#: Go to next panel

property ui_no_route_fullscreen_exit#: Changing route app won’t exit fullscreen

property ui_padding#: Applies a default padding to each slide, according to the usage of ‘arrows’ and ‘navigation’ props

ui_previous()#: Go to previous panel

ui_setFullscreen()#: Enter the fullscreen view

property ui_slot_control#: Slot specific for QCarouselControl

property ui_slot_navigation_icon#: Slot for navigation icon/btn; Suggestion: QBtn

property ui_swipeable#: Enable swipe events (may interfere with content’s touch/mouse events)

property ui_thumbnails#: Show thumbnails

ui_toggleFullscreen()#: Toggle the view to be fullscreen or not fullscreen

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

property ui_transition_next#: One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)

property ui_transition_prev#: One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)

property ui_vertical#: Default transitions and swipe actions will be on the vertical axis

class ngapp.components.qcomponents.QCarouselControl(

*children,

ui_position: str | None = None,

ui_offset: list | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QCarouselControl

Parameters:

ui_position (str | None) – Side/corner to stick to
ui_offset (list | None) – An array of two numbers to offset the component horizontally and vertically (in pixels)

property ui_offset#: An array of two numbers to offset the component horizontally and vertically (in pixels)

property ui_position#: Side/corner to stick to

class ngapp.components.qcomponents.QCarouselSlide(

*children,

ui_name: Any | None = None,

ui_img_src: str | None = None,

ui_disable: Any | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QCarouselSlide

Parameters:

ui_name (Any | None) – Panel name
ui_img_src (str | None) – URL pointing to a slide background image (use public folder)
ui_disable (Any | None)

property ui_img_src#: URL pointing to a slide background image (use public folder)

property ui_name#: Panel name

Bases: Component

Quasar Component: QChatMessage

Parameters:

ui_sent (bool | None) – Render as a sent message (so from current user)
ui_label (str | None) – Renders a label header/section only
ui_bg_color (Any | None) – Color name (from the Quasar Color Palette) for chat bubble background
ui_text_color (Any | None) – Color name (from the Quasar Color Palette) for chat bubble text
ui_name (str | None) – Author’s name
ui_avatar (str | None) – URL to the avatar image of the author
ui_text (list | None) – Array of strings that are the message body. Strings are not sanitized (see details in docs)
ui_stamp (str | None) – Creation timestamp
ui_size (str | None) – 1-12 out of 12 (same as col-*)
ui_label_html (Any | None) – Render the label as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
ui_name_html (Any | None) – Render the name as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
ui_text_html (Any | None) – Render the text as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
ui_stamp_html (Any | None) – Render the stamp as HTML; This can lead to XSS attacks so make sure that you sanitize the message first

property ui_avatar#: URL to the avatar image of the author

property ui_bg_color#: Color name (from the Quasar Color Palette) for chat bubble background

property ui_label#: Renders a label header/section only

property ui_label_html#: Render the label as HTML; This can lead to XSS attacks so make sure that you sanitize the message first

property ui_name#: Author’s name

property ui_name_html#: Render the name as HTML; This can lead to XSS attacks so make sure that you sanitize the message first

property ui_sent#: Render as a sent message (so from current user)

property ui_size#: 1-12 out of 12 (same as col-*)

property ui_slot_avatar#: Slot for avatar; Suggestion: QAvatar, img

property ui_slot_label#: Slot for label; Overrides the ‘label’ prop

property ui_slot_name#: Slot for name; Overrides the ‘name’ prop

property ui_slot_stamp#: Slot for stamp; Overrides the ‘stamp’ prop

property ui_stamp#: Creation timestamp

property ui_stamp_html#: Render the stamp as HTML; This can lead to XSS attacks so make sure that you sanitize the message first

property ui_text#: Array of strings that are the message body. Strings are not sanitized (see details in docs)

property ui_text_color#: Color name (from the Quasar Color Palette) for chat bubble text

property ui_text_html#: Render the text as HTML; This can lead to XSS attacks so make sure that you sanitize the message first

Bases: Component

Quasar Component: QCheckbox

Parameters:

ui_checked_icon (str | None) – The icon to be used when the model is truthy (instead of the default design)
ui_unchecked_icon (str | None) – The icon to be used when the toggle is falsy (instead of the default design)
ui_indeterminate_icon (str | None) – The icon to be used when the model is indeterminate (instead of the default design)
ui_model_value (Any | list | None)
ui_val (Any | None) – Works when model (‘value’) is Array. It tells the component which value should add/remove when ticked/unticked
ui_true_value (Any | None) – What model value should be considered as checked/ticked/on?
ui_false_value (Any | None) – What model value should be considered as unchecked/unticked/off?
ui_indeterminate_value (Any | None) – What model value should be considered as ‘indeterminate’?
ui_toggle_order (str | None) – 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 -> …
ui_toggle_indeterminate (bool | None) – When user clicks/taps on the component, should we toggle through the indeterminate state too?
ui_label (str | None) – Label to display along the component (or use the default slot instead of this prop)
ui_left_label (bool | None) – Label (if any specified) should be displayed on the left side of the component
ui_color (Any | None)
ui_keep_color (bool | None) – Should the color (if specified any) be kept when the component is unticked/ off?
ui_dark (Any | None)
ui_dense (Any | None)
ui_disable (Any | None)
ui_tabindex (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when the component needs to change the model; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_checked_icon#: The icon to be used when the model is truthy (instead of the default design)

property ui_false_value#: What model value should be considered as unchecked/unticked/off?

property ui_indeterminate_icon#: The icon to be used when the model is indeterminate (instead of the default design)

property ui_indeterminate_value#: What model value should be considered as ‘indeterminate’?

property ui_keep_color#: Should the color (if specified any) be kept when the component is unticked/ off?

property ui_label#: Label to display along the component (or use the default slot instead of this prop)

property ui_left_label#: Label (if any specified) should be displayed on the left side of the component

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

ui_toggle()#: Toggle the state (of the model)

property ui_toggle_indeterminate#: When user clicks/taps on the component, should we toggle through the indeterminate state too?

property ui_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 -> …

property ui_true_value#: What model value should be considered as checked/ticked/on?

property ui_unchecked_icon#: The icon to be used when the toggle is falsy (instead of the default design)

property ui_val#: Works when model (‘value’) is Array. It tells the component which value should add/remove when ticked/unticked

Bases: Component

Quasar Component: QChip

Parameters:

ui_dense (Any | None)
ui_size (str | None) – QChip size name or a CSS unit including unit name
ui_dark (Any | None)
ui_icon (Any | None)
ui_icon_right (Any | None)
ui_icon_remove (Any | None)
ui_icon_selected (Any | None)
ui_label (str | float | None) – Chip’s content as string; overrides default slot if specified
ui_color (Any | None)
ui_text_color (Any | None)
ui_model_value (bool | None) – Model of the component determining if QChip should be rendered or not
ui_selected (bool | None) – Model for QChip if it’s selected or not
ui_square (Any | None) – Sets a low value for border-radius instead of the default one, making it close to a square
ui_outline (bool | None) – Display using the ‘outline’ design
ui_clickable (bool | None) – Is QChip clickable? If it’s the case, then it will add hover effects and emit ‘click’ events
ui_removable (bool | None) – If set, then it displays a ‘remove’ icon that when clicked the QChip emits ‘remove’ event
ui_ripple (Any | None)
ui_remove_aria_label (str | None) – aria-label to be used on the remove icon
ui_tabindex (Any | None)
ui_disable (Any | None)

on_click(handler: Callable, arg: object = None)#

Emitted on QChip click if ‘clickable’ property is set

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_remove(handler: Callable, arg: object = None)#

Works along with ‘value’ and ‘removable’ prop. Emitted when toggling rendering state of the QChip

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_selected(handler: Callable, arg: object = None)#

Used by Vue on ‘v-model:selected’ for updating its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_clickable#: Is QChip clickable? If it’s the case, then it will add hover effects and emit ‘click’ events

property ui_label#: Chip’s content as string; overrides default slot if specified

property ui_model_value#: Model of the component determining if QChip should be rendered or not

property ui_outline#: Display using the ‘outline’ design

property ui_removable#: If set, then it displays a ‘remove’ icon that when clicked the QChip emits ‘remove’ event

property ui_remove_aria_label#: aria-label to be used on the remove icon

property ui_selected#: Model for QChip if it’s selected or not

property ui_size#: QChip size name or a CSS unit including unit name

property ui_square#: Sets a low value for border-radius instead of the default one, making it close to a square

Bases: Component

Quasar Component: QCircularProgress

Parameters:

ui_value (float | None) – Current progress (must be between min/max)
ui_min (float | None) – Minimum value defining ‘no progress’ (must be lower than ‘max’)
ui_max (float | None) – Maximum value defining 100% progress made (must be higher than ‘min’)
ui_color (Any | None) – Color name for the arc progress from the Quasar Color Palette
ui_center_color (Any | None) – Color name for the center part of the component from the Quasar Color Palette
ui_track_color (Any | None) – Color name for the track of the component from the Quasar Color Palette
ui_font_size (str | None) – Size of text in CSS units, including unit name. Suggestion: use ‘em’ units to sync with component size
ui_rounded (bool | None) – Rounding the arc of progress
ui_thickness (float | None) – Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size
ui_angle (float | None) – Angle to rotate progress arc by
ui_indeterminate (bool | None) – Put component into ‘indeterminate’ state; Ignores ‘value’ prop
ui_show_value (bool | None) – 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
ui_reverse (bool | None) – Reverses the direction of progress; Only for determined state
ui_instant_feedback (bool | None) – No animation when model changes
ui_animation_speed (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_angle#: Angle to rotate progress arc by

property ui_center_color#: Color name for the center part of the component from the Quasar Color Palette

property ui_color#: Color name for the arc progress from the Quasar Color Palette

property ui_font_size#: Size of text in CSS units, including unit name. Suggestion: use ‘em’ units to sync with component size

property ui_indeterminate#: Put component into ‘indeterminate’ state; Ignores ‘value’ prop

property ui_instant_feedback#: No animation when model changes

property ui_max#: Maximum value defining 100% progress made (must be higher than ‘min’)

property ui_min#: Minimum value defining ‘no progress’ (must be lower than ‘max’)

property ui_reverse#: Reverses the direction of progress; Only for determined state

property ui_rounded#: Rounding the arc of progress

property ui_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

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_slot_internal#: Used by QKnob internally

property ui_thickness#: Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size

property ui_track_color#: Color name for the track of the component from the Quasar Color Palette

property ui_value#: Current progress (must be between min/max)

Bases: Component

Quasar Component: QColor

Parameters:

ui_model_value (str | None | Any)
ui_default_value (str | None) – The default value to show when the model doesn’t have one
ui_default_view (str | None) – The default view of the picker
ui_format_model (str | None) – Forces a certain model format upon the model
ui_palette (list | None) – Use a custom palette of colors for the palette tab
ui_square (Any | None)
ui_flat (Any | None)
ui_bordered (Any | None)
ui_no_header (bool | None) – Do not render header
ui_no_header_tabs (bool | None) – Do not render header tabs (only the input)
ui_no_footer (bool | None) – 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
ui_disable (Any | None)
ui_readonly (Any | None)
ui_dark (Any | None)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_change(handler: Callable, arg: object = None)#

Emitted on lazy model value change (after user finishes selecting a color)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_default_value#: The default value to show when the model doesn’t have one

property ui_default_view#: The default view of the picker

property ui_format_model#: Forces a certain model format upon the model

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_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

property ui_no_header#: Do not render header

property ui_no_header_tabs#: Do not render header tabs (only the input)

property ui_palette#: Use a custom palette of colors for the palette tab

Bases: Component

Quasar Component: QDate

Parameters:

ui_model_value (str | list | dict | None | Any) – 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
ui_title (str | None) – When specified, it overrides the default header title; Makes sense when not in ‘minimal’ mode
ui_subtitle (str | None) – When specified, it overrides the default header subtitle; Makes sense when not in ‘minimal’ mode
ui_default_year_month (str | None) – 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)
ui_mask (str | None) – Mask (formatting string) used for parsing and formatting value
ui_default_view (str | None) – The view which will be displayed by default
ui_years_in_month_view (bool | None) – Show the years selector in months view
ui_events (list | Callable | None) – 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
ui_event_color (str | Callable | None) – 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
ui_options (list | Callable | None) – 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
ui_navigation_min_year_month (str | None) – 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
ui_navigation_max_year_month (str | None) – 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
ui_no_unset (bool | None) – Remove ability to unselect a date; It does not apply to selecting a range over already selected dates
ui_first_day_of_week (str | float | None) – 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
ui_today_btn (bool | None) – Display a button that selects the current day
ui_minimal (bool | None) – Don’t display the header
ui_multiple (bool | None) – Allow multiple selection; Model must be Array
ui_range (bool | None) – Allow range selection; Partial compatibility with ‘options’ prop: selected ranges might also include ‘unselectable’ days
ui_emit_immediately (bool | None) – Emit model when user browses month and year too; ONLY for single selection (non-multiple, non-range)
ui_landscape (bool | None) – Display the component in landscape mode
ui_locale (dict | None) – Locale formatting options
ui_calendar (str | None) – Specify calendar type
ui_color (Any | None)
ui_text_color (Any | None)
ui_dark (Any | None)
ui_square (Any | None)
ui_flat (Any | None)
ui_bordered (Any | None)
ui_readonly (Any | None)
ui_disable (Any | None)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_navigation(handler: Callable, arg: object = None)#

Emitted when user navigates to a different month or year (and even when the model changes from an outside source)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_range_end(handler: Callable, arg: object = None)#

User has ended a range selection

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_range_start(handler: Callable, arg: object = None)#

User has started a range selection

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_calendar#: Specify calendar type

property ui_default_view#: The view which will be displayed by default

property ui_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)

property ui_emit_immediately#: Emit model when user browses month and year too; ONLY for single selection (non-multiple, non-range)

property ui_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

property ui_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

property ui_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

property ui_landscape#: Display the component in landscape mode

property ui_locale#: Locale formatting options

property ui_mask#: Mask (formatting string) used for parsing and formatting value

property ui_minimal#: Don’t display the header

property ui_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

property ui_multiple#: Allow multiple selection; Model must be Array

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_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

property ui_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

property ui_no_unset#: Remove ability to unselect a date; It does not apply to selecting a range over already selected dates

ui_offsetCalendar(ui_type, ui_descending=None)#: Increment or decrement calendar view’s month or year

property ui_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

property ui_range#: Allow range selection; Partial compatibility with ‘options’ prop: selected ranges might also include ‘unselectable’ days

ui_setCalendarTo(ui_year=None, ui_month=None)#: Change current year and month of the Calendar view; It gets corrected if using navigation-min/max-year-month and sets the current view to Calendar

ui_setEditingRange(ui_from=None, ui_to=None)#: Configure the current editing range

ui_setToday()#: Change model to today

ui_setView(ui_view)#: Change current view

property ui_subtitle#: When specified, it overrides the default header subtitle; Makes sense when not in ‘minimal’ mode

property ui_title#: When specified, it overrides the default header title; Makes sense when not in ‘minimal’ mode

property ui_today_btn#: Display a button that selects the current day

property ui_years_in_month_view#: Show the years selector in months view

Bases: Component

Quasar Component: QDialog

Parameters:

ui_persistent (bool | None) – User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won’t dismiss it
ui_no_esc_dismiss (bool | None) – User cannot dismiss Dialog by hitting ESC key; No need to set it if ‘persistent’ prop is also set
ui_no_backdrop_dismiss (bool | None) – User cannot dismiss Dialog by clicking outside of it; No need to set it if ‘persistent’ prop is also set
ui_no_route_dismiss (bool | None) – Changing route app won’t dismiss Dialog; No need to set it if ‘persistent’ prop is also set
ui_auto_close (bool | None) – Any click/tap inside of the dialog will close it
ui_seamless (bool | None) – Put Dialog into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too
ui_backdrop_filter (str | None) – Apply a backdrop filter; The value needs to be the same as in the CSS specs for backdrop-filter; The examples are not an exhaustive list
ui_maximized (bool | None) – Put Dialog into maximized mode
ui_full_width (bool | None) – Dialog will try to render with same width as the window
ui_full_height (bool | None) – Dialog will try to render with same height as the window
ui_position (str | None) – Stick dialog to one of the sides (top, right, bottom or left)
ui_square (bool | None) – Forces content to have squared borders
ui_no_refocus (bool | None) – (Accessibility) When Dialog gets hidden, do not refocus on the DOM element that previously had focus
ui_no_focus (bool | None) – (Accessibility) When Dialog gets shown, do not switch focus on it
ui_no_shake (bool | None) – Do not shake up the Dialog to catch user’s attention
ui_allow_focus_outside (bool | None) – Allow elements outside of the Dialog to be focusable; By default, for accessibility reasons, QDialog does not allow outer focus
ui_transition_show (Any | None)
ui_transition_hide (Any | None)
ui_model_value (bool | None) – 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
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)

on_before_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_escape_key(handler: Callable, arg: object = None)#

Emitted when ESC key is pressed; Does not get emitted if Dialog is ‘persistent’ or it has ‘no-esc-key’ set

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_shake(handler: Callable, arg: object = None)#

Emitted when the Dialog shakes in order to catch user’s attention, unless the ‘no-shake’ property is set

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when showing/hidden state changes; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_allow_focus_outside#: Allow elements outside of the Dialog to be focusable; By default, for accessibility reasons, QDialog does not allow outer focus

property ui_auto_close#: Any click/tap inside of the dialog will close it

property ui_backdrop_filter#: Apply a backdrop filter; The value needs to be the same as in the CSS specs for backdrop-filter; The examples are not an exhaustive list

ui_focus(ui_selector=None)#: Focus dialog; if you have content with autofocus attribute, it will directly focus it

property ui_full_height#: Dialog will try to render with same height as the window

property ui_full_width#: Dialog will try to render with same width as the window

property ui_maximized#: Put Dialog into maximized mode

property ui_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

property ui_no_backdrop_dismiss#: User cannot dismiss Dialog by clicking outside of it; No need to set it if ‘persistent’ prop is also set

property ui_no_esc_dismiss#: User cannot dismiss Dialog by hitting ESC key; No need to set it if ‘persistent’ prop is also set

property ui_no_focus#: (Accessibility) When Dialog gets shown, do not switch focus on it

property ui_no_refocus#: (Accessibility) When Dialog gets hidden, do not refocus on the DOM element that previously had focus

property ui_no_route_dismiss#: Changing route app won’t dismiss Dialog; No need to set it if ‘persistent’ prop is also set

property ui_no_shake#: Do not shake up the Dialog to catch user’s attention

property ui_persistent#: User cannot dismiss Dialog if clicking outside of it or hitting ESC key; Also, an app route change won’t dismiss it

property ui_position#: Stick dialog to one of the sides (top, right, bottom or left)

property ui_seamless#: Put Dialog into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too

ui_shake(ui_focusTarget=None)#: Shakes dialog

property ui_square#: Forces content to have squared borders

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

Bases: Component

Quasar Component: QDrawer

Parameters:

ui_side (str | None) – Side to attach to
ui_overlay (bool | None) – Puts drawer into overlay mode (does not occupy space on screen, narrowing the page)
ui_width (float | None) – Width of drawer (in pixels)
ui_mini (bool | None) – Puts drawer into mini mode
ui_mini_width (float | None) – Width of drawer (in pixels) when in mini mode
ui_mini_to_overlay (bool | None) – Mini mode will expand as an overlay
ui_no_mini_animation (bool | None) – Disables animation of the drawer when toggling mini mode
ui_dark (Any | None)
ui_breakpoint (float | None) – Breakpoint (in pixels) of layout width up to which mobile mode is used
ui_behavior (str | None) – Overrides the default dynamic mode into which the drawer is put on
ui_bordered (Any | None)
ui_elevated (bool | None) – Adds a default shadow to the header
ui_persistent (bool | None) – Prevents drawer from auto-closing when app’s route changes; Also, an app route change won’t hide it
ui_show_if_above (bool | None) – 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
ui_no_swipe_open (bool | None) – 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
ui_no_swipe_close (bool | None) – 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
ui_no_swipe_backdrop (bool | None) – Disables the default behavior where drawer backdrop can be swiped
ui_model_value (bool | None) – 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

on_before_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_click(handler: Callable, arg: object = None)#

Emitted when user clicks/taps on the component; Useful for when taking a decision to toggle mini mode

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_mini_state(handler: Callable, arg: object = None)#

Emitted when drawer changes the mini-mode state (sometimes it is forced to do so)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_mouseout(handler: Callable, arg: object = None)#

Emitted when user moves mouse cursor out of the component; Useful for when taking a decision to toggle mini mode

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_mouseover(handler: Callable, arg: object = None)#

Emitted when user moves mouse cursor over the component; Useful for when taking a decision to toggle mini mode

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_on_layout(handler: Callable, arg: object = None)#

Emitted when drawer toggles between occupying space on page or not

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when showing/hidden state changes; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_behavior#: Overrides the default dynamic mode into which the drawer is put on

property ui_breakpoint#: Breakpoint (in pixels) of layout width up to which mobile mode is used

property ui_elevated#: Adds a default shadow to the header

property ui_mini#: Puts drawer into mini mode

property ui_mini_to_overlay#: Mini mode will expand as an overlay

property ui_mini_width#: Width of drawer (in pixels) when in mini mode

property ui_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

property ui_no_mini_animation#: Disables animation of the drawer when toggling mini mode

property ui_no_swipe_backdrop#: Disables the default behavior where drawer backdrop can be swiped

property ui_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

property ui_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

property ui_overlay#: Puts drawer into overlay mode (does not occupy space on screen, narrowing the page)

property ui_persistent#: Prevents drawer from auto-closing when app’s route changes; Also, an app route change won’t hide it

property ui_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

property ui_side#: Side to attach to

property ui_slot_mini#: Content to show when in mini mode (overrides ‘default’ slot)

property ui_width#: Width of drawer (in pixels)

Bases: Component

Quasar Component: QEditor

Parameters:

ui_model_value (str | None) – Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
ui_readonly (Any | None)
ui_square (Any | None)
ui_flat (Any | None) – Applies a ‘flat’ design (no borders)
ui_dense (Any | None) – Dense mode; toolbar buttons are shown on one-line only
ui_dark (Any | None)
ui_disable (Any | None)
ui_min_height (str | None) – CSS unit for the minimum height of the editable area
ui_max_height (str | None) – CSS unit for maximum height of the input area
ui_height (str | None) – CSS value to set the height of the editable area
ui_definitions (dict | None) – Definition of commands and their buttons to be included in the ‘toolbar’ prop
ui_fonts (dict | None) – Object with definitions of fonts
ui_toolbar (list | None) – An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar
ui_toolbar_color (Any | None) – Font color (from the Quasar Palette) of buttons and text in the toolbar
ui_toolbar_text_color (Any | None) – Text color (from the Quasar Palette) of toolbar commands
ui_toolbar_toggle_color (str | None) – Choose the active color (from the Quasar Palette) of toolbar commands button
ui_toolbar_bg (str | None) – Toolbar background color (from Quasar Palette)
ui_toolbar_outline (bool | None) – Toolbar buttons are rendered “outlined”
ui_toolbar_push (bool | None) – Toolbar buttons are rendered as a “push-button” type
ui_toolbar_rounded (bool | None) – Toolbar buttons are rendered “rounded”
ui_paragraph_tag (str | None) – Paragraph tag to be used
ui_content_style (dict | None) – Object with CSS properties and values for styling the container of QEditor
ui_content_class (str | list | dict | None) – CSS classes for the input area
ui_placeholder (str | None) – Text to display as placeholder
ui_fullscreen (bool | None) – Fullscreen mode
ui_no_route_fullscreen_exit (bool | None) – Changing route app won’t exit fullscreen

on_blur(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_dropdown_before_hide(handler: Callable, arg: object = None)#

Emitted when a dropdown in the toolbar triggers hide() but before it finishes doing it

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_dropdown_before_show(handler: Callable, arg: object = None)#

Emitted when a dropdown in the toolbar triggers show() but before it finishes doing it

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_dropdown_hide(handler: Callable, arg: object = None)#

Emitted after a dropdown in the toolbar has triggered hide()

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_dropdown_show(handler: Callable, arg: object = None)#

Emitted after a dropdown in the toolbar has triggered show()

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_focus(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_fullscreen(handler: Callable, arg: object = None)#

Emitted when fullscreen state changes

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keydown(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_link_hide(handler: Callable, arg: object = None)#

Emitted when the toolbar for editing a link is hidden

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_link_show(handler: Callable, arg: object = None)#

Emitted when the toolbar for editing a link is shown

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_fullscreen(handler: Callable, arg: object = None)#

Used by Vue on ‘v-model:fullscreen’ prop for updating its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_content_class#: CSS classes for the input area

property ui_content_style#: Object with CSS properties and values for styling the container of QEditor

property ui_definitions#: Definition of commands and their buttons to be included in the ‘toolbar’ prop

property ui_dense#: Dense mode; toolbar buttons are shown on one-line only

ui_exitFullscreen()#: Leave the fullscreen view

property ui_flat#: Applies a ‘flat’ design (no borders)

ui_focus()#: Focus on the contentEditable at saved cursor position

property ui_fonts#: Object with definitions of fonts

property ui_fullscreen#: Fullscreen mode

ui_getContentEl()#: Retrieve the content of the Editor

property ui_height#: CSS value to set the height of the editable area

property ui_max_height#: CSS unit for maximum height of the input area

property ui_min_height#: CSS unit for the minimum height of the editable area

property ui_model_value#: Model of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive

property ui_no_route_fullscreen_exit#: Changing route app won’t exit fullscreen

property ui_paragraph_tag#: Paragraph tag to be used

property ui_placeholder#: Text to display as placeholder

ui_refreshToolbar()#: Hide the link editor if visible and force the instance to re-render

ui_runCmd(ui_cmd, ui_param=None, ui_update=None)#: Run contentEditable command at caret position and range

ui_setFullscreen()#: Enter the fullscreen view

ui_slot_command(command, value)#: Content for the given command in the toolbar

ui_toggleFullscreen()#: Toggle the view to be fullscreen or not fullscreen

property ui_toolbar#: An array of arrays of Objects/Strings that you use to define the construction of the elements and commands available in the toolbar

property ui_toolbar_bg#: Toolbar background color (from Quasar Palette)

property ui_toolbar_color#: Font color (from the Quasar Palette) of buttons and text in the toolbar

property ui_toolbar_outline#: Toolbar buttons are rendered “outlined”

property ui_toolbar_push#: Toolbar buttons are rendered as a “push-button” type

property ui_toolbar_rounded#: Toolbar buttons are rendered “rounded”

property ui_toolbar_text_color#: Text color (from the Quasar Palette) of toolbar commands

property ui_toolbar_toggle_color#: Choose the active color (from the Quasar Palette) of toolbar commands button

Bases: Component

Quasar Component: QExpansionItem

Parameters:

ui_icon (Any | None)
ui_expand_icon (Any | None)
ui_expanded_icon (Any | None) – 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
ui_expand_icon_class (str | list | dict | None) – Apply custom class(es) to the expand icon item section
ui_toggle_aria_label (str | None) – aria-label to be used on the expansion toggle element
ui_label (str | None) – Header label (unless using ‘header’ slot)
ui_label_lines (float | str | None) – 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!
ui_caption (str | None) – Header sub-label (unless using ‘header’ slot)
ui_caption_lines (float | str | None) – 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!
ui_dark (Any | None)
ui_dense (Any | None)
ui_duration (float | None) – Animation duration (in milliseconds)
ui_header_inset_level (float | None) – 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
ui_content_inset_level (float | None) – Apply an inset to content (changes content padding)
ui_expand_separator (bool | None) – Apply a top and bottom separator when expansion item is opened
ui_default_opened (bool | None) – Puts expansion item into open state on initial render; Overridden by v-model if used
ui_hide_expand_icon (bool | None) – Do not show the expand icon
ui_expand_icon_toggle (bool | None) – Applies the expansion events to the expand icon only and not to the whole header
ui_switch_toggle_side (bool | None) – Switch expand icon side (from default ‘right’ to ‘left’)
ui_dense_toggle (bool | None) – Use dense mode for expand icon
ui_group (str | None) – 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’
ui_popup (bool | None) – Put expansion list into ‘popup’ mode
ui_header_style (str | list | dict | None) – Apply custom style to the header
ui_header_class (str | list | dict | None) – Apply custom class(es) to the header
ui_model_value (bool | None) – 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
ui_to (str | dict | None) – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
ui_exact (bool | None) – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
ui_replace (bool | None) – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
ui_active_class (str | None) – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
ui_exact_active_class (str | None) – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
ui_href (str | None) – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
ui_target (str | None) – 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
ui_disable (Any | None)

on_after_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_after_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value( handler: Callable, arg: object = None, )#

Emitted when showing/hidden state changes; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_active_class#: Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used

property ui_caption#: Header sub-label (unless using ‘header’ slot)

property ui_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!

property ui_content_inset_level#: Apply an inset to content (changes content padding)

property ui_default_opened#: Puts expansion item into open state on initial render; Overridden by v-model if used

property ui_dense_toggle#: Use dense mode for expand icon

property ui_duration#: Animation duration (in milliseconds)

property ui_exact#: Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used

property ui_exact_active_class#: Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used

property ui_expand_icon_class#: Apply custom class(es) to the expand icon item section

property ui_expand_icon_toggle#: Applies the expansion events to the expand icon only and not to the whole header

property ui_expand_separator#: Apply a top and bottom separator when expansion item is opened

property ui_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

property ui_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’

property ui_header_class#: Apply custom class(es) to the header

property ui_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

property ui_header_style#: Apply custom style to the header

property ui_hide_expand_icon#: Do not show the expand icon

property ui_href#: Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props

property ui_label#: Header label (unless using ‘header’ slot)

property ui_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!

property ui_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

property ui_popup#: Put expansion list into ‘popup’ mode

property ui_replace#: Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used

property ui_slot_header#: Slot used for overriding default header

property ui_switch_toggle_side#: Switch expand icon side (from default ‘right’ to ‘left’)

property ui_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

property ui_to#: Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used

property ui_toggle_aria_label#: aria-label to be used on the expansion toggle element

Bases: Component

Quasar Component: QFab

Parameters:

ui_model_value (bool | None) – 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
ui_icon (Any | None)
ui_active_icon (Any | None)
ui_hide_label (bool | None) – Hide the label; Useful for animation purposes where you toggle the visibility of the label
ui_hide_icon (bool | None) – Hide the icon (don’t use any)
ui_direction (str | None) – Direction to expand Fab Actions to
ui_vertical_actions_align (str | None) – The side of the Fab where Fab Actions will expand (only when direction is ‘up’ or ‘down’)
ui_persistent (bool | None) – By default, Fab Actions are hidden when user navigates to another route and this prop disables this behavior
ui_type (str | None) – Define the button HTML DOM type
ui_outline (bool | None) – Use ‘outline’ design for Fab button
ui_push (bool | None) – Use ‘push’ design for Fab button
ui_flat (bool | None) – Use ‘flat’ design for Fab button
ui_unelevated (bool | None) – Remove shadow
ui_padding (str | None) – 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
ui_color (Any | None)
ui_text_color (Any | None)
ui_glossy (bool | None) – Apply the glossy effect over the button
ui_external_label (bool | None) – Display label besides the FABs, as external content
ui_label (str | float | None) – The label that will be shown when Fab is extended
ui_label_position (str | None) – Position of the label around the icon
ui_label_class (str | list | dict | None) – Class definitions to be attributed to the label container
ui_label_style (str | list | dict | None) – Style definitions to be attributed to the label container
ui_square (bool | None) – Apply a rectangle aspect to the FAB
ui_disable (Any | None)
ui_tabindex (Any | None)

on_before_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when showing/hidden state changes; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_direction#: Direction to expand Fab Actions to

property ui_external_label#: Display label besides the FABs, as external content

property ui_flat#: Use ‘flat’ design for Fab button

property ui_glossy#: Apply the glossy effect over the button

ui_hide()#: Collapses fab actions list

property ui_hide_icon#: Hide the icon (don’t use any)

property ui_hide_label#: Hide the label; Useful for animation purposes where you toggle the visibility of the label

property ui_label#: The label that will be shown when Fab is extended

property ui_label_class#: Class definitions to be attributed to the label container

property ui_label_position#: Position of the label around the icon

property ui_label_style#: Style definitions to be attributed to the label container

property ui_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

property ui_outline#: Use ‘outline’ design for Fab button

property ui_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

property ui_persistent#: By default, Fab Actions are hidden when user navigates to another route and this prop disables this behavior

property ui_push#: Use ‘push’ design for Fab button

ui_show()#: Expands fab actions list

property ui_slot_active_icon#: Slot for icon shown when FAB is opened; Suggestion: QIcon

property ui_slot_icon#: Slot for icon shown when FAB is closed; Suggestion: QIcon

property ui_slot_label#: Slot for label

property ui_slot_tooltip#: Slot specifically designed for a QTooltip

property ui_square#: Apply a rectangle aspect to the FAB

property ui_type#: Define the button HTML DOM type

property ui_unelevated#: Remove shadow

property ui_vertical_actions_align#: The side of the Fab where Fab Actions will expand (only when direction is ‘up’ or ‘down’)

Bases: Component

Quasar Component: QFabAction

Parameters:

ui_icon (Any | None)
ui_anchor (str | None) – How to align the Fab Action relative to Fab expand side; By default it uses the align specified in QFab
ui_to (str | dict | None) – Equivalent to Vue Router <router-link> ‘to’ property
ui_replace (bool | None) – Equivalent to Vue Router <router-link> ‘replace’ property
ui_type (str | None) – Define the button HTML DOM type
ui_outline (bool | None) – Use ‘outline’ design for Fab button
ui_push (bool | None) – Use ‘push’ design for Fab button
ui_flat (bool | None) – Use ‘flat’ design for Fab button
ui_unelevated (bool | None) – Remove shadow
ui_padding (str | None) – 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
ui_color (Any | None)
ui_text_color (Any | None)
ui_glossy (bool | None) – Apply the glossy effect over the button
ui_external_label (bool | None) – Display label besides the FABs, as external content
ui_label (str | float | None) – The label that will be shown when Fab is extended
ui_label_position (str | None) – Position of the label around the icon
ui_hide_label (bool | None) – Hide the label; Useful for animation purposes where you toggle the visibility of the label
ui_label_class (str | list | dict | None) – Class definitions to be attributed to the label container
ui_label_style (str | list | dict | None) – Style definitions to be attributed to the label container
ui_square (bool | None) – Apply a rectangle aspect to the FAB
ui_disable (Any | None)
ui_tabindex (Any | None)

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_anchor#: How to align the Fab Action relative to Fab expand side; By default it uses the align specified in QFab

ui_click(ui_evt=None)#: Emulate click on QFabAction

property ui_external_label#: Display label besides the FABs, as external content

property ui_flat#: Use ‘flat’ design for Fab button

property ui_glossy#: Apply the glossy effect over the button

property ui_hide_label#: Hide the label; Useful for animation purposes where you toggle the visibility of the label

property ui_label#: The label that will be shown when Fab is extended

property ui_label_class#: Class definitions to be attributed to the label container

property ui_label_position#: Position of the label around the icon

property ui_label_style#: Style definitions to be attributed to the label container

property ui_outline#: Use ‘outline’ design for Fab button

property ui_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

property ui_push#: Use ‘push’ design for Fab button

property ui_replace#: Equivalent to Vue Router <router-link> ‘replace’ property

property ui_slot_icon#: Slot for icon; Suggestion: QIcon

property ui_slot_label#: Slot for label

property ui_square#: Apply a rectangle aspect to the FAB

property ui_to#: Equivalent to Vue Router <router-link> ‘to’ property

property ui_type#: Define the button HTML DOM type

property ui_unelevated#: Remove shadow

Bases: Component

Quasar Component: QField

Parameters:

ui_maxlength (str | float | None) – Specify a max length of model
ui_tag (Any | None)
ui_label (str | None) – A text label that will “float” up above the input field, once the field gets focus
ui_stack_label (bool | None) – Label will be always shown above the field regardless of field content (if any)
ui_hint (str | None) – Helper (hint) text which gets placed below your wrapped form component
ui_hide_hint (bool | None) – Hide the helper (hint) text when field doesn’t have focus
ui_prefix (str | None) – Prefix
ui_suffix (str | None) – Suffix
ui_label_color (Any | None) – 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
ui_color (Any | None)
ui_bg_color (Any | None)
ui_dark (Any | None)
ui_loading (bool | None) – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
ui_clearable (bool | None) – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
ui_clear_icon (str | None) – Custom icon to use for the clear button when using along with ‘clearable’ prop
ui_filled (bool | None) – Use ‘filled’ design for the field
ui_outlined (bool | None) – Use ‘outlined’ design for the field
ui_borderless (bool | None) – Use ‘borderless’ design for the field
ui_standout (bool | str | None) – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
ui_label_slot (bool | None) – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
ui_bottom_slots (bool | None) – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
ui_hide_bottom_space (bool | None) – 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
ui_counter (bool | None) – Show an automatic counter on bottom right
ui_rounded (Any | None)
ui_square (bool | None) – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
ui_dense (Any | None)
ui_item_aligned (bool | None) – Match inner content alignment to that of QItem
ui_disable (Any | None)
ui_readonly (Any | None)
ui_autofocus (bool | None) – Focus field on initial component render
ui_for (str | None) – 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
ui_model_value (Any | None) – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
ui_error (bool | None) – Does field have validation errors?
ui_error_message (str | None) – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
ui_no_error_icon (bool | None) – Hide error icon when there is an error
ui_rules (list | None) – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
ui_reactive_rules (bool | None) – 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
ui_lazy_rules (bool | str | None) – 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

on_blur(handler: Callable, arg: object = None)#

Emitted when component loses focus

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_clear(handler: Callable, arg: object = None)#

When using the ‘clearable’ property, this event is emitted when the clear icon is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_focus(handler: Callable, arg: object = None)#

Emitted when component gets focused

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when the model changes, only when used with ‘clearable’ or the ‘control’ scoped slot.

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_autofocus#: Focus field on initial component render

ui_blur()#: Blur component (lose focus)

property ui_borderless#: Use ‘borderless’ design for the field

property ui_bottom_slots#: Enables bottom slots (‘error’, ‘hint’, ‘counter’)

property ui_clear_icon#: Custom icon to use for the clear button when using along with ‘clearable’ prop

property ui_clearable#: Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null

property ui_counter#: Show an automatic counter on bottom right

property ui_error#: Does field have validation errors?

property ui_error_message#: Validation error message (gets displayed only if ‘error’ is set to ‘true’)

property ui_filled#: Use ‘filled’ design for the field

ui_focus()#: Focus component

property ui_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

property ui_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

property ui_hide_hint#: Hide the helper (hint) text when field doesn’t have focus

property ui_hint#: Helper (hint) text which gets placed below your wrapped form component

property ui_item_aligned#: Match inner content alignment to that of QItem

property ui_label#: A text label that will “float” up above the input field, once the field gets focus

property ui_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

property ui_label_slot#: Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set

property ui_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

property ui_loading#: Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.

property ui_maxlength#: Specify a max length of model

property ui_model_value#: Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive

property ui_no_error_icon#: Hide error icon when there is an error

property ui_outlined#: Use ‘outlined’ design for the field

property ui_prefix#: Prefix

property ui_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

ui_resetValidation()#: Reset validation status

property ui_rules#: Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules

property ui_slot_after#: Append outer field; Suggestions: QIcon, QBtn

property ui_slot_append#: Append to inner field; Suggestions: QIcon, QBtn

property ui_slot_before#: Prepend outer field; Suggestions: QIcon, QBtn

property ui_slot_control#: Slot for controls; Suggestion QSlider, QRange, QKnob, …

property ui_slot_counter#: Slot for counter text; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_error#: Slot for errors; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_hint#: Slot for hint text; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_label#: Slot for label; Used only if ‘label-slot’ prop is set or the ‘label’ prop is set; When it is used the text in the ‘label’ prop is ignored

property ui_slot_loading#: Override default spinner when component is in loading mode; Use in conjunction with ‘loading’ prop

property ui_slot_prepend#: Prepend inner field; Suggestions: QIcon, QBtn

property ui_square#: Remove border-radius so borders are squared; Overrides ‘rounded’ prop

property ui_stack_label#: Label will be always shown above the field regardless of field content (if any)

property ui_standout#: Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)

property ui_suffix#: Suffix

ui_validate(ui_value=None)#: Trigger a validation

Bases: Component

Quasar Component: QFile

Parameters:

ui_model_value (Any | None) – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
ui_append (bool | None) – Append file(s) to current model rather than replacing them; Has effect only when using ‘multiple’ mode
ui_display_value (float | str | None) – Override default selection string, if not using ‘file’ or ‘selected’ scoped slots and if not using ‘use-chips’ prop
ui_use_chips (bool | None) – Use QChip to show picked files
ui_counter_label (Callable | None) – Label for the counter; The ‘counter’ prop is necessary to enable this one
ui_tabindex (Any | None)
ui_input_class (str | list | dict | None) – Class definitions to be attributed to the underlying selection container
ui_input_style (str | list | dict | None) – Style definitions to be attributed to the underlying selection container
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
ui_label (str | None) – A text label that will “float” up above the input field, once the field gets focus
ui_stack_label (bool | None) – Label will be always shown above the field regardless of field content (if any)
ui_hint (str | None) – Helper (hint) text which gets placed below your wrapped form component
ui_hide_hint (bool | None) – Hide the helper (hint) text when field doesn’t have focus
ui_prefix (str | None) – Prefix
ui_suffix (str | None) – Suffix
ui_label_color (Any | None) – 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
ui_color (Any | None)
ui_bg_color (Any | None)
ui_dark (Any | None)
ui_loading (bool | None) – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
ui_clearable (bool | None) – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
ui_clear_icon (str | None) – Custom icon to use for the clear button when using along with ‘clearable’ prop
ui_filled (bool | None) – Use ‘filled’ design for the field
ui_outlined (bool | None) – Use ‘outlined’ design for the field
ui_borderless (bool | None) – Use ‘borderless’ design for the field
ui_standout (bool | str | None) – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
ui_label_slot (bool | None) – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
ui_bottom_slots (bool | None) – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
ui_hide_bottom_space (bool | None) – 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
ui_counter (bool | None) – Show an automatic counter on bottom right
ui_rounded (Any | None)
ui_square (bool | None) – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
ui_dense (Any | None)
ui_item_aligned (bool | None) – Match inner content alignment to that of QItem
ui_disable (Any | None)
ui_readonly (Any | None)
ui_autofocus (bool | None) – Focus field on initial component render
ui_for (str | None) – 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
ui_error (bool | None) – Does field have validation errors?
ui_error_message (str | None) – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
ui_no_error_icon (bool | None) – Hide error icon when there is an error
ui_rules (list | None) – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
ui_reactive_rules (bool | None) – 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
ui_lazy_rules (bool | str | None) – 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
ui_multiple (bool | None) – Allow multiple file uploads
ui_accept (str | None) – Comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element
ui_capture (str | None) – 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
ui_max_file_size (float | str | None) – Maximum size of individual file in bytes
ui_max_total_size (float | str | None) – Maximum size of all files combined in bytes
ui_max_files (float | str | None) – Maximum number of files to contain
ui_filter (Callable | None) – 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

on_blur(handler: Callable, arg: object = None)#

Emitted when component loses focus

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_clear(handler: Callable, arg: object = None)#

When using the ‘clearable’ property, this event is emitted when the clear icon is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_focus(handler: Callable, arg: object = None)#

Emitted when component gets focused

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_rejected(handler: Callable, arg: object = None)#

Emitted after files are picked and some do not pass the validation props (accept, max-file-size, max-total-size, filter, etc)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_accept#: Comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element

ui_addFiles(ui_files)#: Add files programmatically

property ui_append#: Append file(s) to current model rather than replacing them; Has effect only when using ‘multiple’ mode

property ui_autofocus#: Focus field on initial component render

ui_blur()#: Blur component (lose focus)

property ui_borderless#: Use ‘borderless’ design for the field

property ui_bottom_slots#: Enables bottom slots (‘error’, ‘hint’, ‘counter’)

property ui_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

property ui_clear_icon#: Custom icon to use for the clear button when using along with ‘clearable’ prop

property ui_clearable#: Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null

property ui_counter#: Show an automatic counter on bottom right

property ui_counter_label#: Label for the counter; The ‘counter’ prop is necessary to enable this one

property ui_display_value#: Override default selection string, if not using ‘file’ or ‘selected’ scoped slots and if not using ‘use-chips’ prop

property ui_error#: Does field have validation errors?

property ui_error_message#: Validation error message (gets displayed only if ‘error’ is set to ‘true’)

property ui_filled#: Use ‘filled’ design for the field

property ui_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

ui_focus()#: Focus component

property ui_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

ui_getNativeElement()#: DEPRECATED; Access ‘nativeEl’ directly; Gets the native input DOM Element

property ui_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

property ui_hide_hint#: Hide the helper (hint) text when field doesn’t have focus

property ui_hint#: Helper (hint) text which gets placed below your wrapped form component

property ui_input_class#: Class definitions to be attributed to the underlying selection container

property ui_input_style#: Style definitions to be attributed to the underlying selection container

property ui_item_aligned#: Match inner content alignment to that of QItem

property ui_label#: A text label that will “float” up above the input field, once the field gets focus

property ui_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

property ui_label_slot#: Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set

property ui_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

property ui_loading#: Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.

property ui_max_file_size#: Maximum size of individual file in bytes

property ui_max_files#: Maximum number of files to contain

property ui_max_total_size#: Maximum size of all files combined in bytes

property ui_model_value#: Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive

property ui_multiple#: Allow multiple file uploads

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_no_error_icon#: Hide error icon when there is an error

property ui_outlined#: Use ‘outlined’ design for the field

ui_pickFiles(ui_evt=None)#: Trigger file pick; Must be called as a direct consequence of user interaction (eg. in a click handler), due to browsers security policy

property ui_prefix#: Prefix

property ui_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

ui_removeAtIndex(ui_index)#: Remove file located at specific index in the model

ui_removeFile(ui_file)#: Remove specified file from the model

ui_resetValidation()#: Reset validation status

property ui_rules#: Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules

property ui_slot_after#: Append outer field; Suggestions: QIcon, QBtn

property ui_slot_append#: Append to inner field; Suggestions: QIcon, QBtn

property ui_slot_before#: Prepend outer field; Suggestions: QIcon, QBtn

property ui_slot_counter#: Slot for counter text; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_error#: Slot for errors; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_file#: Override default node to render a file from the user picked list

property ui_slot_hint#: Slot for hint text; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_label#: Slot for label; Used only if ‘label-slot’ prop is set or the ‘label’ prop is set; When it is used the text in the ‘label’ prop is ignored

property ui_slot_loading#: Override default spinner when component is in loading mode; Use in conjunction with ‘loading’ prop

property ui_slot_prepend#: Prepend inner field; Suggestions: QIcon, QBtn

property ui_slot_selected#: Override default selection slot; Suggestion: QChip

property ui_square#: Remove border-radius so borders are squared; Overrides ‘rounded’ prop

property ui_stack_label#: Label will be always shown above the field regardless of field content (if any)

property ui_standout#: Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)

property ui_suffix#: Suffix

property ui_use_chips#: Use QChip to show picked files

ui_validate(ui_value=None)#: Trigger a validation

Bases: Component

Quasar Component: QFooter

Parameters:

ui_model_value (bool | None) – 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
ui_reveal (bool | None) – Enable ‘reveal’ mode; Takes into account user scroll to temporarily show/hide footer
ui_bordered (Any | None)
ui_elevated (bool | None) – Adds a default shadow to the footer
ui_height_hint (float | str | None) – When using SSR, you can optionally hint of the height (in pixels) of the QFooter

on_focusin(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_reveal(handler: Callable, arg: object = None)#

Emitted when ‘reveal’ state gets changed

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_elevated#: Adds a default shadow to the footer

property ui_height_hint#: When using SSR, you can optionally hint of the height (in pixels) of the QFooter

property ui_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

property ui_reveal#: Enable ‘reveal’ mode; Takes into account user scroll to temporarily show/hide footer

class ngapp.components.qcomponents.QForm(

*children,

ui_autofocus: bool | None = None,

ui_no_error_focus: bool | None = None,

ui_no_reset_focus: bool | None = None,

ui_greedy: bool | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QForm

Parameters:

ui_autofocus (bool | None) – Focus first focusable element on initial component render
ui_no_error_focus (bool | None) – Do not try to focus on first component that has a validation error when submitting form
ui_no_reset_focus (bool | None) – Do not try to focus on first component when resetting form
ui_greedy (bool | None) – Validate all fields in form (by default it stops after finding the first invalid field with synchronous validation)

on_reset(handler: Callable, arg: object = None)#

Emitted when all validations have been reset when tethered to a reset button; It is recommended to manually reset the wrapped components models in this handler

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_submit(handler: Callable, arg: object = None)#

Emitted when all validations have passed when tethered to a submit button

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_validation_error(handler: Callable, arg: object = None)#

Emitted after a validation was triggered and at least one of the inner Quasar components models are NOT valid

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_validation_success(handler: Callable, arg: object = None)#

Emitted after a validation was triggered and all inner Quasar components models are valid

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_autofocus#: Focus first focusable element on initial component render

ui_focus()#: Focus on first focusable element/component in the form

ui_getValidationComponents()#: Get an array of children Vue component instances that support Quasar validation API (derived from QField, or using useFormChild()/QFormChildMixin)

property ui_greedy#: Validate all fields in form (by default it stops after finding the first invalid field with synchronous validation)

property ui_no_error_focus#: Do not try to focus on first component that has a validation error when submitting form

property ui_no_reset_focus#: Do not try to focus on first component when resetting form

ui_reset(ui_evt=None)#: Manually trigger form reset

ui_resetValidation()#: Resets the validation on all applicable inner Quasar components

ui_submit(ui_evt=None)#: Manually trigger form validation and submit

ui_validate(ui_shouldFocus=None)#: Triggers a validation on all applicable inner Quasar components

class ngapp.components.qcomponents.QFormChildMixin(*children, **kwargs)#

Bases: Component

Quasar Component: QFormChildMixin

ui_resetValidation()#: Needs to be overwritten when getting extended/mixed in

ui_validate()#: Needs to be overwritten when getting extended/mixed in

Bases: Component

Quasar Component: QHeader

Parameters:

ui_model_value (bool | None) – 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
ui_reveal (bool | None) – Enable ‘reveal’ mode; Takes into account user scroll to temporarily show/hide header
ui_reveal_offset (float | None) – Amount of scroll (in pixels) that should trigger a ‘reveal’ state change
ui_bordered (Any | None)
ui_elevated (bool | None) – Adds a default shadow to the header
ui_height_hint (float | str | None) – When using SSR, you can optionally hint of the height (in pixels) of the QHeader

on_focusin(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_reveal(handler: Callable, arg: object = None)#

Emitted when ‘reveal’ state gets changed

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_elevated#: Adds a default shadow to the header

property ui_height_hint#: When using SSR, you can optionally hint of the height (in pixels) of the QHeader

property ui_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

property ui_reveal#: Enable ‘reveal’ mode; Takes into account user scroll to temporarily show/hide header

property ui_reveal_offset#: Amount of scroll (in pixels) that should trigger a ‘reveal’ state change

Bases: Component

Quasar Component: QIcon

Parameters:

ui_tag (Any | None) – HTML tag to render, unless no icon is supplied or it’s an svg icon
ui_name (Any | None)
ui_color (Any | None)
ui_left (bool | None) – Useful if icon is on the left side of something: applies a standard margin on the right side of Icon
ui_right (bool | None) – Useful if icon is on the right side of something: applies a standard margin on the left side of Icon
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_left#: Useful if icon is on the left side of something: applies a standard margin on the right side of Icon

property ui_right#: Useful if icon is on the right side of something: applies a standard margin on the left side of Icon

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_tag#: HTML tag to render, unless no icon is supplied or it’s an svg icon

Bases: Component

Quasar Component: QImg

Parameters:

ui_src (str | None) – Path to image
ui_srcset (str | None) – Same syntax as <img> srcset attribute
ui_sizes (str | None) – Same syntax as <img> sizes attribute
ui_placeholder_src (str | None) – While waiting for your image to load, you can use a placeholder image
ui_error_src (str | None) – In case your image fails to load, you can use an error image
ui_ratio (str | float | None) – 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’)
ui_initial_ratio (str | float | None) – Use it when not specifying ‘ratio’ but still wanting an initial aspect ratio
ui_width (str | None) – Forces image width; Must also include the unit (px or %)
ui_height (str | None) – Forces image height; Must also include the unit (px or %)
ui_loading (str | None) – Lazy or immediate load; Same syntax as <img> loading attribute
ui_loading_show_delay (float | str | None) – Delay showing the spinner when image changes; Gives time for the browser to load the image from cache to prevent flashing the spinner unnecessarily; Value should represent milliseconds
ui_crossorigin (str | None) – Same syntax as <img> crossorigin attribute
ui_decoding (str | None) – Same syntax as <img> decoding attribute
ui_referrerpolicy (str | None) – Same syntax as <img> referrerpolicy attribute
ui_fetchpriority (str | None) – Provides a hint of the relative priority to use when fetching the image
ui_fit (str | None) – How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with ‘position’ prop
ui_position (str | None) – The alignment of the image into the container; Equivalent of the object-position CSS prop
ui_alt (str | None) – Specifies an alternate text for the image, if the image cannot be displayed
ui_draggable (bool | None) – Adds the native ‘draggable’ attribute
ui_img_class (str | None) – CSS classes to be attributed to the native img element
ui_img_style (dict | None) – Apply CSS to the native img element
ui_spinner_color (Any | None) – Color name for default Spinner (unless using a ‘loading’ slot)
ui_spinner_size (Any | None) – Size in CSS units, including unit name, for default Spinner (unless using a ‘loading’ slot)
ui_no_spinner (bool | None) – 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
ui_no_native_menu (bool | None) – Disables the native context menu for the image
ui_no_transition (bool | None) – Disable default transition when switching between old and new image

on_error(handler: Callable, arg: object = None)#

Emitted when browser could not load the image

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_load(handler: Callable, arg: object = None)#

Emitted when image has been loaded by the browser

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_alt#: Specifies an alternate text for the image, if the image cannot be displayed

property ui_crossorigin#: Same syntax as <img> crossorigin attribute

property ui_decoding#: Same syntax as <img> decoding attribute

property ui_draggable#: Adds the native ‘draggable’ attribute

property ui_error_src#: In case your image fails to load, you can use an error image

property ui_fetchpriority#: Provides a hint of the relative priority to use when fetching the image

property ui_fit#: How the image will fit into the container; Equivalent of the object-fit prop; Can be coordinated with ‘position’ prop

property ui_height#: Forces image height; Must also include the unit (px or %)

property ui_img_class#: CSS classes to be attributed to the native img element

property ui_img_style#: Apply CSS to the native img element

property ui_initial_ratio#: Use it when not specifying ‘ratio’ but still wanting an initial aspect ratio

property ui_loading#: Lazy or immediate load; Same syntax as <img> loading attribute

property ui_loading_show_delay#: Delay showing the spinner when image changes; Gives time for the browser to load the image from cache to prevent flashing the spinner unnecessarily; Value should represent milliseconds

property ui_no_native_menu#: Disables the native context menu for the image

property ui_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

property ui_no_transition#: Disable default transition when switching between old and new image

property ui_placeholder_src#: While waiting for your image to load, you can use a placeholder image

property ui_position#: The alignment of the image into the container; Equivalent of the object-position CSS prop

property ui_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’)

property ui_referrerpolicy#: Same syntax as <img> referrerpolicy attribute

property ui_sizes#: Same syntax as <img> sizes attribute

property ui_slot_error#: Optional slot to be used when image could not be loaded; make sure you assign a min-height and min-width to the component through CSS

property ui_slot_loading#: While image is loading, this slot is being displayed on top of the component; Suggestions: a spinner or text

property ui_spinner_color#: Color name for default Spinner (unless using a ‘loading’ slot)

property ui_spinner_size#: Size in CSS units, including unit name, for default Spinner (unless using a ‘loading’ slot)

property ui_src#: Path to image

property ui_srcset#: Same syntax as <img> srcset attribute

property ui_width#: Forces image width; Must also include the unit (px or %)

Bases: Component

Quasar Component: QInfiniteScroll

Parameters:

ui_offset (float | None) – Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance
ui_debounce (str | float | None) – Debounce amount (in milliseconds)
ui_initial_index (float | None) – Initialize the pagination index (used for the @load event)
ui_scroll_target (Any | None)
ui_disable (Any | None)
ui_reverse (bool | None) – Scroll area should behave like a messenger - starting scrolled to bottom and loading when reaching the top

on_load(handler: Callable, arg: object = None)#

Emitted when Infinite Scroll needs to load more data

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_debounce#: Debounce amount (in milliseconds)

property ui_initial_index#: Initialize the pagination index (used for the @load event)

property ui_offset#: Offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance

ui_poll()#: Checks scroll position and loads more content if necessary

ui_reset()#: Resets calling index to 0

ui_resume()#: Starts working. Checks scroll position upon call and if trigger is hit, it loads more content

property ui_reverse#: Scroll area should behave like a messenger - starting scrolled to bottom and loading when reaching the top

ui_setIndex(ui_newIndex)#: Overwrite the current pagination index

property ui_slot_loading#: Slot displaying something while loading content; Example: QSpinner

ui_stop()#: Stops working, regardless of scroll position

ui_trigger()#: Tells Infinite Scroll to load more content, regardless of the scroll position

ui_updateScrollTarget()#: Updates the scroll target; Useful when the parent elements change so that the scrolling target also changes

Bases: Component

Quasar Component: QInnerLoading

Parameters:

ui_showing (bool | None) – State - loading or not
ui_color (Any | None) – Color name for component from the Quasar Color Palette for the inner Spinner (unless using the default slot)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
ui_label (str | None) – Add a label; Gets overriden when using the default slot
ui_label_class (str | None) – Add CSS class(es) to the label; Works along the ‘label’ prop only
ui_label_style (str | list | dict | None) – Apply custom style to the label; Works along the ‘label’ prop only
ui_dark (Any | None)
ui_transition_show (Any | None)
ui_transition_hide (Any | None)
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)

property ui_color#: Color name for component from the Quasar Color Palette for the inner Spinner (unless using the default slot)

property ui_label#: Add a label; Gets overriden when using the default slot

property ui_label_class#: Add CSS class(es) to the label; Works along the ‘label’ prop only

property ui_label_style#: Apply custom style to the label; Works along the ‘label’ prop only

property ui_showing#: State - loading or not

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

Bases: Component

Quasar Component: QInput

Parameters:

ui_model_value (Any | None) – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
ui_shadow_text (str | None) – Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file
ui_type (str | None) – Input type
ui_debounce (str | float | None) – Debounce amount (in milliseconds) when updating model
ui_maxlength (str | float | None) – Specify a max length of model
ui_autogrow (bool | None) – Make field autogrow along with its content (uses a textarea)
ui_input_class (str | list | dict | None) – Class definitions to be attributed to the underlying input tag
ui_input_style (str | list | dict | None) – Style definitions to be attributed to the underlying input tag
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
ui_label (str | None) – A text label that will “float” up above the input field, once the field gets focus
ui_stack_label (bool | None) – Label will be always shown above the field regardless of field content (if any)
ui_hint (str | None) – Helper (hint) text which gets placed below your wrapped form component
ui_hide_hint (bool | None) – Hide the helper (hint) text when field doesn’t have focus
ui_prefix (str | None) – Prefix
ui_suffix (str | None) – Suffix
ui_label_color (Any | None) – 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
ui_color (Any | None)
ui_bg_color (Any | None)
ui_dark (Any | None)
ui_loading (bool | None) – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
ui_clearable (bool | None) – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
ui_clear_icon (str | None) – Custom icon to use for the clear button when using along with ‘clearable’ prop
ui_filled (bool | None) – Use ‘filled’ design for the field
ui_outlined (bool | None) – Use ‘outlined’ design for the field
ui_borderless (bool | None) – Use ‘borderless’ design for the field
ui_standout (bool | str | None) – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
ui_label_slot (bool | None) – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
ui_bottom_slots (bool | None) – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
ui_hide_bottom_space (bool | None) – 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
ui_counter (bool | None) – Show an automatic counter on bottom right
ui_rounded (Any | None)
ui_square (bool | None) – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
ui_dense (Any | None)
ui_item_aligned (bool | None) – Match inner content alignment to that of QItem
ui_disable (Any | None)
ui_readonly (Any | None)
ui_autofocus (bool | None) – Focus field on initial component render
ui_for (str | None) – 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
ui_error (bool | None) – Does field have validation errors?
ui_error_message (str | None) – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
ui_no_error_icon (bool | None) – Hide error icon when there is an error
ui_rules (list | None) – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
ui_reactive_rules (bool | None) – 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
ui_lazy_rules (bool | str | None) – 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
ui_mask (str | None) – Custom mask or one of the predefined mask names
ui_fill_mask (bool | str | None) – Fills string with specified characters (or underscore if value is not string) to fill mask’s length
ui_reverse_fill_mask (bool | None) – Fills string from the right side of the mask
ui_unmasked_value (bool | None) – Model will be unmasked (won’t contain tokens/separation characters)

on_animationend(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_blur(handler: Callable, arg: object = None)#

Emitted when component loses focus

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_change(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_clear(handler: Callable, arg: object = None)#

When using the ‘clearable’ property, this event is emitted when the clear icon is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_focus(handler: Callable, arg: object = None)#

Emitted when component gets focused

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keydown(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_paste(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_autofocus#: Focus field on initial component render

property ui_autogrow#: Make field autogrow along with its content (uses a textarea)

ui_blur()#: Blur component (lose focus)

property ui_borderless#: Use ‘borderless’ design for the field

property ui_bottom_slots#: Enables bottom slots (‘error’, ‘hint’, ‘counter’)

property ui_clear_icon#: Custom icon to use for the clear button when using along with ‘clearable’ prop

property ui_clearable#: Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null

property ui_counter#: Show an automatic counter on bottom right

property ui_debounce#: Debounce amount (in milliseconds) when updating model

property ui_error#: Does field have validation errors?

property ui_error_message#: Validation error message (gets displayed only if ‘error’ is set to ‘true’)

property ui_fill_mask#: Fills string with specified characters (or underscore if value is not string) to fill mask’s length

property ui_filled#: Use ‘filled’ design for the field

ui_focus()#: Focus component

property ui_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

ui_getNativeElement()#: DEPRECATED; Access ‘nativeEl’ directly instead; Get the native input/textarea DOM Element

property ui_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

property ui_hide_hint#: Hide the helper (hint) text when field doesn’t have focus

property ui_hint#: Helper (hint) text which gets placed below your wrapped form component

property ui_input_class#: Class definitions to be attributed to the underlying input tag

property ui_input_style#: Style definitions to be attributed to the underlying input tag

property ui_item_aligned#: Match inner content alignment to that of QItem

property ui_label#: A text label that will “float” up above the input field, once the field gets focus

property ui_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

property ui_label_slot#: Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set

property ui_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

property ui_loading#: Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.

property ui_mask#: Custom mask or one of the predefined mask names

property ui_maxlength#: Specify a max length of model

property ui_model_value#: Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_no_error_icon#: Hide error icon when there is an error

property ui_outlined#: Use ‘outlined’ design for the field

property ui_prefix#: Prefix

property ui_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

ui_resetValidation()#: Reset validation status

property ui_reverse_fill_mask#: Fills string from the right side of the mask

property ui_rules#: Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules

ui_select()#: Select input text

property ui_shadow_text#: Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file

property ui_slot_after#: Append outer field; Suggestions: QIcon, QBtn

property ui_slot_append#: Append to inner field; Suggestions: QIcon, QBtn

property ui_slot_before#: Prepend outer field; Suggestions: QIcon, QBtn

property ui_slot_counter#: Slot for counter text; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_error#: Slot for errors; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_hint#: Slot for hint text; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_label#: Slot for label; Used only if ‘label-slot’ prop is set or the ‘label’ prop is set; When it is used the text in the ‘label’ prop is ignored

property ui_slot_loading#: Override default spinner when component is in loading mode; Use in conjunction with ‘loading’ prop

property ui_slot_prepend#: Prepend inner field; Suggestions: QIcon, QBtn

property ui_square#: Remove border-radius so borders are squared; Overrides ‘rounded’ prop

property ui_stack_label#: Label will be always shown above the field regardless of field content (if any)

property ui_standout#: Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)

property ui_suffix#: Suffix

property ui_type#: Input type

property ui_unmasked_value#: Model will be unmasked (won’t contain tokens/separation characters)

ui_validate(ui_value=None)#: Trigger a validation

Bases: Component

Quasar Component: QIntersection

Parameters:

ui_tag (Any | None)
ui_once (bool | None) – Get triggered only once
ui_ssr_prerender (bool | None) – Pre-render content on server side if using SSR (use it to pre-render above the fold content)
ui_root (Any | None) – [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
ui_margin (str | None) – [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
ui_threshold (list | float | None) – [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
ui_transition (Any | None)
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)
ui_disable (bool | None) – Disable visibility observable (content will remain as it was, visible or hidden)

on_visibility(handler: Callable, arg: object = None)#

Fires when visibility changes

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_disable#: Disable visibility observable (content will remain as it was, visible or hidden)

property ui_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

property ui_once#: Get triggered only once

property ui_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

property ui_slot_hidden#: Slot for content to render when component is not on screen; Example: a text that the user can search for with the browser’s search function

property ui_ssr_prerender#: Pre-render content on server side if using SSR (use it to pre-render above the fold content)

property ui_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

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

Bases: Component

Quasar Component: QItem

Parameters:

ui_active (bool | None) – Put item into ‘active’ state
ui_dark (Any | None)
ui_clickable (bool | None) – Is QItem clickable? If it’s the case, then it will add hover effects and emit ‘click’ events
ui_dense (Any | None)
ui_inset_level (float | None) – 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
ui_tabindex (Any | None)
ui_tag (Any | None) – 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
ui_manual_focus (bool | None) – 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
ui_focused (bool | None) – Determines focus state, ONLY if ‘manual-focus’ is enabled / set to true
ui_to (str | dict | None) – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
ui_exact (bool | None) – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
ui_replace (bool | None) – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
ui_active_class (str | None) – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
ui_exact_active_class (str | None) – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
ui_href (str | None) – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
ui_target (str | None) – 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
ui_disable (Any | None)

on_click(handler: Callable, arg: object = None)#

Emitted when the component is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keyup(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_active#: Put item into ‘active’ state

property ui_active_class#: Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used

property ui_clickable#: Is QItem clickable? If it’s the case, then it will add hover effects and emit ‘click’ events

property ui_exact#: Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used

property ui_exact_active_class#: Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used

property ui_focused#: Determines focus state, ONLY if ‘manual-focus’ is enabled / set to true

property ui_href#: Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props

property ui_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

property ui_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

property ui_replace#: Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used

property ui_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

property ui_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

property ui_to#: Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used

Bases: Component

Quasar Component: QItemLabel

Parameters:

ui_overline (bool | None) – Renders an overline label
ui_caption (bool | None) – Renders a caption label
ui_header (bool | None) – Renders a header label
ui_lines (float | str | None) – Apply ellipsis when there’s not enough space to render on the specified number of lines;

property ui_caption#: Renders a caption label

property ui_header#: Renders a header label

property ui_lines#: Apply ellipsis when there’s not enough space to render on the specified number of lines;

property ui_overline#: Renders an overline label

Bases: Component

Quasar Component: QItemSection

Parameters:

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

property ui_avatar#: Render an avatar item side (does not needs ‘side’ prop to be set)

property ui_no_wrap#: Do not wrap text (useful for item’s main content)

property ui_side#: Renders as a side of the item

property ui_thumbnail#: Render a thumbnail item side (does not needs ‘side’ prop to be set)

property ui_top#: Align content to top (useful for multi-line items)

Bases: Component

Quasar Component: QKnob

Parameters:

ui_model_value (float | None) – 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
ui_min (float | None) – The minimum value that the model (the knob value) should start at
ui_max (float | None) – The maximum value that the model (the knob value) should go to
ui_inner_min (float | None) – 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
ui_inner_max (float | None) – 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
ui_step (float | None) – A number representing steps in the value of the model, while adjusting the knob
ui_reverse (bool | None) – Reverses the direction of progress
ui_instant_feedback (bool | None) – No animation when model changes
ui_color (Any | None)
ui_center_color (Any | None) – Color name for the center part of the component from the Quasar Color Palette
ui_track_color (Any | None) – Color name for the track of the component from the Quasar Color Palette
ui_font_size (str | None) – Size of text in CSS units, including unit name. Suggestion: use ‘em’ units to sync with component size
ui_rounded (bool | None) – Rounding the arc of progress
ui_thickness (float | None) – Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size
ui_angle (float | None) – Angle to rotate progress arc by
ui_show_value (bool | None) – 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
ui_tabindex (Any | None)
ui_disable (Any | None)
ui_readonly (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_change(handler: Callable, arg: object = None)#

Fires at the end of a knob’s adjustment and offers the value of the model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_drag_value(handler: Callable, arg: object = None)#

The value of the model while dragging is still in progress

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_angle#: Angle to rotate progress arc by

property ui_center_color#: Color name for the center part of the component from the Quasar Color Palette

property ui_font_size#: Size of text in CSS units, including unit name. Suggestion: use ‘em’ units to sync with component size

property ui_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

property ui_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

property ui_instant_feedback#: No animation when model changes

property ui_max#: The maximum value that the model (the knob value) should go to

property ui_min#: The minimum value that the model (the knob value) should start at

property ui_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

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_reverse#: Reverses the direction of progress

property ui_rounded#: Rounding the arc of progress

property ui_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

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_step#: A number representing steps in the value of the model, while adjusting the knob

property ui_thickness#: Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size

property ui_track_color#: Color name for the track of the component from the Quasar Color Palette

class ngapp.components.qcomponents.QLayout(

*children,

ui_view: str | None = None,

ui_container: bool | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QLayout

Parameters:

ui_view (str | None) – Defines how your layout components (header/footer/drawer) should be placed on screen; See docs examples
ui_container (bool | None) – 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

on_resize(handler: Callable, arg: object = None)#

Emitted when layout size (height, width) changes

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_scroll(handler: Callable, arg: object = None)#

Emitted when user scrolls within layout

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_scroll_height(handler: Callable, arg: object = None)#

Emitted when the scroll size of layout changes

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_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

property ui_view#: Defines how your layout components (header/footer/drawer) should be placed on screen; See docs examples

Bases: Component

Quasar Component: QLinearProgress

Parameters:

ui_value (float | None) – Progress value (0.0 < x < 1.0)
ui_buffer (float | None) – Optional buffer value (0.0 < x < 1.0)
ui_color (Any | None)
ui_track_color (Any | None) – Color name for component’s track from the Quasar Color Palette
ui_dark (Any | None)
ui_reverse (bool | None) – Reverse direction of progress
ui_stripe (bool | None) – Draw stripes; For determinate state only (for performance reasons)
ui_indeterminate (bool | None) – Put component into indeterminate mode
ui_query (bool | None) – Put component into query mode
ui_rounded (Any | None)
ui_instant_feedback (bool | None) – No transition when model changes
ui_animation_speed (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_buffer#: Optional buffer value (0.0 < x < 1.0)

property ui_indeterminate#: Put component into indeterminate mode

property ui_instant_feedback#: No transition when model changes

property ui_query#: Put component into query mode

property ui_reverse#: Reverse direction of progress

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_stripe#: Draw stripes; For determinate state only (for performance reasons)

property ui_track_color#: Color name for component’s track from the Quasar Color Palette

property ui_value#: Progress value (0.0 < x < 1.0)

Bases: Component

Quasar Component: QList

Parameters:

ui_bordered (Any | None)
ui_dense (Any | None)
ui_separator (bool | None) – Applies a separator between contained items
ui_dark (Any | None)
ui_padding (bool | None) – Applies a material design-like padding on top and bottom
ui_tag (Any | None)

property ui_padding#: Applies a material design-like padding on top and bottom

property ui_separator#: Applies a separator between contained items

Bases: Component

Quasar Component: QMarkupTable

Parameters:

ui_dense (Any | None)
ui_dark (Any | None)
ui_flat (Any | None)
ui_bordered (Any | None)
ui_square (Any | None)
ui_separator (str | None) – Use a separator/border between rows, columns or all cells
ui_wrap_cells (bool | None) – Wrap text within table cells

property ui_separator#: Use a separator/border between rows, columns or all cells

property ui_wrap_cells#: Wrap text within table cells

Bases: Component

Quasar Component: QMenu

Parameters:

ui_dark (Any | None)
ui_fit (bool | None) – Allows the menu to match at least the full width of its target
ui_cover (bool | None) – Allows the menu to cover its target. When used, the ‘self’ and ‘fit’ props are no longer effective
ui_anchor (str | None) – Two values setting the starting position or anchor point of the menu relative to its target
ui_self (str | None) – Two values setting the menu’s own position relative to its target
ui_offset (list | None) – An array of two numbers to offset the menu horizontally and vertically in pixels
ui_scroll_target (Any | None)
ui_touch_position (bool | None) – Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched
ui_persistent (bool | None) – Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key; Also, an app route change won’t dismiss it
ui_no_route_dismiss (bool | None) – Changing route app won’t dismiss the popup; No need to set it if ‘persistent’ prop is also set
ui_auto_close (bool | None) – 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
ui_separate_close_popup (bool | None) – Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)
ui_square (bool | None) – Forces content to have squared borders
ui_no_refocus (bool | None) – (Accessibility) When Menu gets hidden, do not refocus on the DOM element that previously had focus
ui_no_focus (bool | None) – (Accessibility) When Menu gets shown, do not switch focus on it
ui_max_height (str | None) – The maximum height of the menu; Size in CSS units, including unit name
ui_max_width (str | None) – The maximum width of the menu; Size in CSS units, including unit name
ui_model_value (bool | None) – 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
ui_context_menu (bool | None) – Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)
ui_target (bool | str | Any | None) – 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)
ui_no_parent_event (bool | None) – Skips attaching events to the target DOM element (that trigger the element to get shown)
ui_transition_show (Any | None)
ui_transition_hide (Any | None)
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)

on_before_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_escape_key(handler: Callable, arg: object = None)#

Emitted when ESC key is pressed; Does not get emitted if Menu is ‘persistent’

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when showing/hidden state changes; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_anchor#: Two values setting the starting position or anchor point of the menu relative to its target

property ui_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

property ui_context_menu#: Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)

property ui_cover#: Allows the menu to cover its target. When used, the ‘self’ and ‘fit’ props are no longer effective

property ui_fit#: Allows the menu to match at least the full width of its target

ui_focus()#: Focus menu; if you have content with autofocus attribute, it will directly focus it

property ui_max_height#: The maximum height of the menu; Size in CSS units, including unit name

property ui_max_width#: The maximum width of the menu; Size in CSS units, including unit name

property ui_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

property ui_no_focus#: (Accessibility) When Menu gets shown, do not switch focus on it

property ui_no_parent_event#: Skips attaching events to the target DOM element (that trigger the element to get shown)

property ui_no_refocus#: (Accessibility) When Menu gets hidden, do not refocus on the DOM element that previously had focus

property ui_no_route_dismiss#: Changing route app won’t dismiss the popup; No need to set it if ‘persistent’ prop is also set

property ui_offset#: An array of two numbers to offset the menu horizontally and vertically in pixels

property ui_persistent#: Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key; Also, an app route change won’t dismiss it

property ui_self#: Two values setting the menu’s own position relative to its target

property ui_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)

property ui_square#: Forces content to have squared borders

property ui_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)

property ui_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

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

ui_updatePosition()#: There are some custom scenarios for which Quasar cannot automatically reposition the menu without significant performance drawbacks so the optimal solution is for you to call this method when you need it

class ngapp.components.qcomponents.QNoSsr(

*children,

ui_tag: Any | None = None,

ui_placeholder: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QNoSsr

Parameters:

ui_tag (Any | None)
ui_placeholder (str | None) – Text to display on server-side render (unless using ‘placeholder’ slot)

property ui_placeholder#: Text to display on server-side render (unless using ‘placeholder’ slot)

property ui_slot_placeholder#: Slot used as placeholder on server-side render, which gets replaced by the default slot on client-side; overrides ‘placeholder’ prop

Bases: Component

Quasar Component: QOptionGroup

Parameters:

ui_model_value (Any | None)
ui_options (list | None) – Array of objects that the binary components will be created from. For best performance reference a variable in your scope. Canonical form of each object is with ‘label’ (String), ‘value’ (Any) and optional ‘disable’ (Boolean) props (can be customized with options-value/option-label/option-disable props) along with any other props from QToggle, QCheckbox, or QRadio.
ui_option_value (str | Callable | None) – 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
ui_option_label (str | Callable | None) – 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
ui_option_disable (str | Callable | None) – 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
ui_name (str | None) – Used to specify the name of the controls; Useful if dealing with forms submitted directly to a URL
ui_type (str | None) – The type of input component to be used
ui_color (Any | None)
ui_keep_color (bool | None) – Should the color (if specified any) be kept when input components are unticked?
ui_dark (Any | None)
ui_dense (Any | None)
ui_left_label (bool | None) – Label (if any specified) should be displayed on the left side of the input components
ui_inline (bool | None) – Show input components as inline-block rather than each having their own row
ui_disable (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

on_update_model_value( handler: Callable, arg: object = None, )#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_inline#: Show input components as inline-block rather than each having their own row

property ui_keep_color#: Should the color (if specified any) be kept when input components are unticked?

property ui_left_label#: Label (if any specified) should be displayed on the left side of the input components

property ui_name#: Used to specify the name of the controls; Useful if dealing with forms submitted directly to a URL

property ui_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

property ui_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

property ui_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

property ui_options#: Array of objects that the binary components will be created from. For best performance reference a variable in your scope. Canonical form of each object is with ‘label’ (String), ‘value’ (Any) and optional ‘disable’ (Boolean) props (can be customized with options-value/option-label/option-disable props) along with any other props from QToggle, QCheckbox, or QRadio.

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_slot_label#: Generic slot for all labels

ui_slot_label_name(name, value)#: Slot to define the specific label for the option at ‘[name]’ where name is a 0-based index; Overrides the generic ‘label’ slot if used

property ui_type#: The type of input component to be used

class ngapp.components.qcomponents.QPage(

*children,

ui_padding: bool | None = None,

ui_style_fn: Callable | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QPage

Parameters:

ui_padding (bool | None) – Applies a default responsive page padding
ui_style_fn (Callable | None) – 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

property ui_padding#: Applies a default responsive page padding

property ui_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 ngapp.components.qcomponents.QPageContainer(*children, **kwargs)#

Bases: Component

Quasar Component: QPageContainer

Bases: Component

Quasar Component: QPageScroller

Parameters:

ui_scroll_offset (float | None) – 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)
ui_reverse (bool | None) – Work in reverse (shows when scrolling to the top of the page and scrolls to bottom when triggered)
ui_duration (float | None) – Duration (in milliseconds) of the scrolling until it reaches its target
ui_offset (list | None) – An array of two numbers to offset the component horizontally and vertically in pixels
ui_position (str | None) – Page side/corner to stick to
ui_expand (bool | None) – 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

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_duration#: Duration (in milliseconds) of the scrolling until it reaches its target

property ui_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

property ui_offset#: An array of two numbers to offset the component horizontally and vertically in pixels

property ui_position#: Page side/corner to stick to

property ui_reverse#: Work in reverse (shows when scrolling to the top of the page and scrolls to bottom when triggered)

property ui_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)

class ngapp.components.qcomponents.QPageSticky(

*children,

ui_position: str | None = None,

ui_offset: list | None = None,

ui_expand: bool | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QPageSticky

Parameters:

ui_position (str | None) – Page side/corner to stick to
ui_offset (list | None) – An array of two numbers to offset the component horizontally and vertically in pixels
ui_expand (bool | None) – 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

property ui_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

property ui_offset#: An array of two numbers to offset the component horizontally and vertically in pixels

property ui_position#: Page side/corner to stick to

Bases: Component

Quasar Component: QPagination

Parameters:

ui_model_value (float | None) – Current page (must be between min/max)
ui_min (float | str | None) – Minimum page (must be lower than ‘max’)
ui_max (float | str | None) – Number of last page (must be higher than ‘min’)
ui_dark (Any | None) – Notify the component that the background is a dark color (useful when you are using it along with the ‘input’ prop)
ui_size (str | None) – Button size in CSS units, including unit name
ui_disable (Any | None)
ui_input (bool | None) – Use an input instead of buttons
ui_icon_prev (Any | None)
ui_icon_next (Any | None)
ui_icon_first (Any | None)
ui_icon_last (Any | None)
ui_to_fn (Callable | None) – Generate link for page buttons; For best performance, reference it from your scope and do not define it inline
ui_boundary_links (bool | None) – Show boundary button links
ui_boundary_numbers (bool | None) – Always show first and last page buttons (if not using ‘input’)
ui_direction_links (bool | None) – Show direction buttons
ui_ellipses (bool | None) – Show ellipses (…) when pages are available
ui_max_pages (float | str | None) – Maximum number of page links to display at a time; 0 means Infinite
ui_flat (bool | None) – Use ‘flat’ design for non-active buttons (it’s the default option)
ui_outline (bool | None) – Use ‘outline’ design for non-active buttons
ui_unelevated (bool | None) – Remove shadow for non-active buttons
ui_push (bool | None) – Use ‘push’ design for non-active buttons
ui_color (Any | None) – Color name from the Quasar Color Palette for the non-active buttons
ui_text_color (Any | None) – Text color name from the Quasar Color Palette for the ACTIVE buttons
ui_active_design (str | None) – The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)
ui_active_color (Any | None) – Color name from the Quasar Color Palette for the ACTIVE button
ui_active_text_color (Any | None) – Text color name from the Quasar Color Palette for the ACTIVE button
ui_round (bool | None) – Makes a circle shaped button for all buttons
ui_rounded (bool | None) – Applies a more prominent border-radius for a squared shape button for all buttons
ui_glossy (bool | None) – Applies a glossy effect for all buttons
ui_gutter (str | None) – Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)
ui_padding (str | None) – 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
ui_input_style (str | list | dict | None) – Style definitions to be attributed to the input (if using one)
ui_input_class (str | list | dict | None) – Class definitions to be attributed to the input (if using one)
ui_ripple (bool | dict | None) – Configure buttons material ripple (disable it by setting it to ‘false’ or supply a config object); Does not applies to boundary and ellipsis buttons

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_active_color#: Color name from the Quasar Color Palette for the ACTIVE button

property ui_active_design#: The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)

property ui_active_text_color#: Text color name from the Quasar Color Palette for the ACTIVE button

property ui_boundary_links#: Show boundary button links

property ui_boundary_numbers#: Always show first and last page buttons (if not using ‘input’)

property ui_color#: Color name from the Quasar Color Palette for the non-active buttons

property ui_dark#: Notify the component that the background is a dark color (useful when you are using it along with the ‘input’ prop)

property ui_direction_links#: Show direction buttons

property ui_ellipses#: Show ellipses (…) when pages are available

property ui_flat#: Use ‘flat’ design for non-active buttons (it’s the default option)

property ui_glossy#: Applies a glossy effect for all buttons

property ui_gutter#: Apply custom gutter; Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl)

property ui_input#: Use an input instead of buttons

property ui_input_class#: Class definitions to be attributed to the input (if using one)

property ui_input_style#: Style definitions to be attributed to the input (if using one)

property ui_max#: Number of last page (must be higher than ‘min’)

property ui_max_pages#: Maximum number of page links to display at a time; 0 means Infinite

property ui_min#: Minimum page (must be lower than ‘max’)

property ui_model_value#: Current page (must be between min/max)

property ui_outline#: Use ‘outline’ design for non-active buttons

property ui_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

property ui_push#: Use ‘push’ design for non-active buttons

property ui_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

property ui_round#: Makes a circle shaped button for all buttons

property ui_rounded#: Applies a more prominent border-radius for a squared shape button for all buttons

ui_set(ui_pageNumber=None)#: Go directly to the specified page

ui_setByOffset(ui_offset=None)#: Increment/Decrement current page by offset

property ui_size#: Button size in CSS units, including unit name

property ui_text_color#: Text color name from the Quasar Color Palette for the ACTIVE buttons

property ui_to_fn#: Generate link for page buttons; For best performance, reference it from your scope and do not define it inline

property ui_unelevated#: Remove shadow for non-active buttons

class ngapp.components.qcomponents.QParallax(

*children,

ui_src: str | None = None,

ui_height: float | None = None,

ui_speed: float | None = None,

ui_scroll_target: Any | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QParallax

Parameters:

ui_src (str | None) – Path to image (unless a ‘media’ slot is used)
ui_height (float | None) – Height of component (in pixels)
ui_speed (float | None) – Speed of parallax effect (0.0 < x < 1.0)
ui_scroll_target (Any | None)

on_scroll(handler: Callable, arg: object = None)#

Emitted when scrolling occurs

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_height#: Height of component (in pixels)

property ui_slot_content#: Scoped slot for describing content that gets displayed on top of the component; If specified, it overrides the default slot

property ui_slot_media#: Slot for describing <img> or <video> tags

property ui_speed#: Speed of parallax effect (0.0 < x < 1.0)

property ui_src#: Path to image (unless a ‘media’ slot is used)

Bases: Component

Quasar Component: QPopupEdit

Parameters:

ui_model_value (Any | None)
ui_title (str | None) – Optional title (unless ‘title’ slot is used)
ui_buttons (bool | None) – Show Set and Cancel buttons
ui_label_set (str | None) – Override Set button label
ui_label_cancel (str | None) – Override Cancel button label
ui_auto_save (bool | None) – Automatically save the model (if changed) when user clicks/taps outside of the popup; It does not apply to ESC key
ui_color (Any | None)
ui_validate (Callable | None) – 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
ui_disable (Any | None)
ui_fit (bool | None) – Allows the menu to match at least the full width of its target
ui_cover (bool | None) – Allows the menu to cover its target. When used, the ‘self’ and ‘fit’ props are no longer effective
ui_anchor (str | None) – Two values setting the starting position or anchor point of the menu relative to its target
ui_self (str | None) – Two values setting the menu’s own position relative to its target
ui_offset (list | None) – An array of two numbers to offset the menu horizontally and vertically in pixels
ui_touch_position (bool | None) – Allows for the target position to be set by the mouse position, when the target of the menu is either clicked or touched
ui_persistent (bool | None) – Avoid menu closing by hitting ESC key or by clicking/tapping outside of the Popup
ui_separate_close_popup (bool | None) – Separate from parent menu, marking it as a separate closing point for v-close-popup (without this, chained menus close all together)
ui_square (bool | None) – Forces menu to have squared borders
ui_max_height (Any | None) – The maximum height of the menu; Size in CSS units, including unit name
ui_max_width (Any | None) – The maximum width of the menu; Size in CSS units, including unit name

on_before_hide(handler: Callable, arg: object = None)#

Emitted right before Popup gets dismissed

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Emitted right before Popup gets shown

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_cancel(handler: Callable, arg: object = None)#

Emitted when user cancelled the change (hit ESC key or clicking outside of Popup or hit ‘Cancel’ button)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Emitted right after Popup gets dismissed

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_save(handler: Callable, arg: object = None)#

Emitted when value has been successfully validated and it should be saved

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Emitted right after Popup gets shown

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when Popup gets cancelled in order to reset model to its initial value; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_anchor#: Two values setting the starting position or anchor point of the menu relative to its target

property ui_auto_save#: Automatically save the model (if changed) when user clicks/taps outside of the popup; It does not apply to ESC key

property ui_buttons#: Show Set and Cancel buttons

ui_cancel()#: Triggers a model reset to its initial value (‘cancel’ event is emitted) then closes Popup

property ui_cover#: Allows the menu to cover its target. When used, the ‘self’ and ‘fit’ props are no longer effective

property ui_fit#: Allows the menu to match at least the full width of its target

property ui_label_cancel#: Override Cancel button label

property ui_label_set#: Override Set button label

property ui_max_height#: The maximum height of the menu; Size in CSS units, including unit name

property ui_max_width#: The maximum width of the menu; Size in CSS units, including unit name

property ui_offset#: An array of two numbers to offset the menu horizontally and vertically in pixels

property ui_persistent#: Avoid menu closing by hitting ESC key or by clicking/tapping outside of the Popup

property ui_self#: Two values setting the menu’s own position relative to its target

property ui_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)

ui_set()#: Trigger a model update; Validates model (and emits ‘save’ event if it’s the case) then closes Popup

property ui_square#: Forces menu to have squared borders

property ui_title#: Optional title (unless ‘title’ slot is used)

property ui_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

ui_updatePosition()#: There are some custom scenarios for which Quasar cannot automatically reposition the component without significant performance drawbacks so the optimal solution is for you to call this method when you need it

property ui_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

Bases: Component

Quasar Component: QPopupProxy

Parameters:

ui_model_value (bool | None) – 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
ui_breakpoint (float | str | None) – Breakpoint (in pixels) of window width/height (whichever is smaller) from where a Menu will get to be used instead of a Dialog
ui_context_menu (bool | None) – Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)
ui_target (bool | str | Any | None) – 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)
ui_no_parent_event (bool | None) – Skips attaching events to the target DOM element (that trigger the element to get shown)

on_before_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_breakpoint#: Breakpoint (in pixels) of window width/height (whichever is smaller) from where a Menu will get to be used instead of a Dialog

property ui_context_menu#: Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)

property ui_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

property ui_no_parent_event#: Skips attaching events to the target DOM element (that trigger the element to get shown)

property ui_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)

Bases: Component

Quasar Component: QPullToRefresh

Parameters:

ui_color (Any | None) – Color name for the icon from the Quasar Color Palette
ui_bg_color (Any | None) – Color name for background of the icon container from the Quasar Color Palette
ui_icon (Any | None) – Icon to display when refreshing the content
ui_no_mouse (bool | None) – Don’t listen for mouse events
ui_disable (Any | None)
ui_scroll_target (Any | None)

on_refresh(handler: Callable, arg: object = None)#

Called whenever a refresh is triggered; at this time, your function should load more data

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_bg_color#: Color name for background of the icon container from the Quasar Color Palette

property ui_color#: Color name for the icon from the Quasar Color Palette

property ui_icon#: Icon to display when refreshing the content

property ui_no_mouse#: Don’t listen for mouse events

ui_trigger()#: Triggers a refresh

ui_updateScrollTarget()#: Updates the scroll target; Useful when the parent elements change so that the scrolling target also changes

Bases: Component

Quasar Component: QRadio

Parameters:

ui_model_value (Any | None)
ui_val (Any | None) – The actual value of the option with which model value is changed
ui_label (str | None) – Label to display along the radio control (or use the default slot instead of this prop)
ui_left_label (bool | None) – Label (if any specified) should be displayed on the left side of the checkbox
ui_checked_icon (str | None) – The icon to be used when selected (instead of the default design)
ui_unchecked_icon (str | None) – The icon to be used when un-selected (instead of the default design)
ui_color (Any | None)
ui_keep_color (bool | None) – Should the color (if specified any) be kept when checkbox is unticked?
ui_dark (Any | None)
ui_dense (Any | None)
ui_disable (Any | None)
ui_tabindex (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when the component needs to change the model; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_checked_icon#: The icon to be used when selected (instead of the default design)

property ui_keep_color#: Should the color (if specified any) be kept when checkbox is unticked?

property ui_label#: Label to display along the radio control (or use the default slot instead of this prop)

property ui_left_label#: Label (if any specified) should be displayed on the left side of the checkbox

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

ui_set()#: Sets the Radio’s v-model to equal the val

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_unchecked_icon#: The icon to be used when un-selected (instead of the default design)

property ui_val#: The actual value of the option with which model value is changed

Bases: Component

Quasar Component: QRange

Parameters:

ui_model_value (dict | None | Any) – 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
ui_drag_range (bool | None) – User can drag range instead of just the two thumbs
ui_drag_only_range (bool | None) – User can drag only the range instead and NOT the two thumbs
ui_left_label_color (Any | None) – Color name for left label background from the Quasar Color Palette
ui_left_label_text_color (Any | None) – Color name for left label text from the Quasar Color Palette
ui_right_label_color (Any | None) – Color name for right label background from the Quasar Color Palette
ui_right_label_text_color (Any | None) – Color name for right label text from the Quasar Color Palette
ui_left_label_value (str | float | None) – Override default label for min value
ui_right_label_value (str | float | None) – Override default label for max value
ui_left_thumb_color (Any | None) – Color name (from the Quasar Color Palette) for left thumb
ui_right_thumb_color (Any | None) – Color name (from the Quasar Color Palette) for right thumb
ui_min (float | None) – Minimum value of the model; Set track’s minimum value
ui_max (float | None) – Maximum value of the model; Set track’s maximum value
ui_inner_min (float | None) – 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
ui_inner_max (float | None) – 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
ui_step (float | None) – Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
ui_snap (bool | None) – Snap on valid values, rather than sliding freely; Suggestion: use with ‘step’ prop
ui_reverse (bool | None) – Work in reverse (changes direction)
ui_vertical (bool | None) – Display in vertical direction
ui_color (Any | None)
ui_track_color (Any | None) – Color name for the track (can be ‘transparent’ too) from the Quasar Color Palette
ui_track_img (str | None) – Apply a pattern image on the track
ui_inner_track_color (Any | None) – Color name for the inner track (can be ‘transparent’ too) from the Quasar Color Palette
ui_inner_track_img (str | None) – Apply a pattern image on the inner track
ui_selection_color (Any | None) – Color name for the selection bar (can be ‘transparent’ too) from the Quasar Color Palette
ui_selection_img (str | None) – Apply a pattern image on the selection bar
ui_label (bool | None) – Popup a label when user clicks/taps on the slider thumb and moves it
ui_label_color (Any | None)
ui_label_text_color (Any | None)
ui_switch_label_side (bool | None) – Switch the position of the label (top <-> bottom or left <-> right)
ui_label_always (bool | None) – Always display the label
ui_markers (bool | float | None) – Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
ui_marker_labels (bool | list | dict | Callable | None) – 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
ui_marker_labels_class (str | None) – CSS class(es) to apply to the marker labels container
ui_switch_marker_labels_side (bool | None) – Switch the position of the marker labels (top <-> bottom or left <-> right)
ui_track_size (str | None) – Track size (including CSS unit)
ui_thumb_size (str | None) – Thumb size (including CSS unit)
ui_thumb_color (Any | None)
ui_thumb_path (str | None) – Set custom thumb svg path
ui_dark (Any | None)
ui_dense (Any | None)
ui_disable (Any | None)
ui_readonly (Any | None)
ui_tabindex (Any | None)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_change(handler: Callable, arg: object = None)#

Emitted on lazy model value change (after user slides then releases the thumb)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_pan(handler: Callable, arg: object = None)#

Triggered when user starts panning on the component

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_drag_only_range#: User can drag only the range instead and NOT the two thumbs

property ui_drag_range#: User can drag range instead of just the two thumbs

property ui_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

property ui_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

property ui_inner_track_color#: Color name for the inner track (can be ‘transparent’ too) from the Quasar Color Palette

property ui_inner_track_img#: Apply a pattern image on the inner track

property ui_label#: Popup a label when user clicks/taps on the slider thumb and moves it

property ui_label_always#: Always display the label

property ui_left_label_color#: Color name for left label background from the Quasar Color Palette

property ui_left_label_text_color#: Color name for left label text from the Quasar Color Palette

property ui_left_label_value#: Override default label for min value

property ui_left_thumb_color#: Color name (from the Quasar Color Palette) for left thumb

property ui_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

property ui_marker_labels_class#: CSS class(es) to apply to the marker labels container

property ui_markers#: Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)

property ui_max#: Maximum value of the model; Set track’s maximum value

property ui_min#: Minimum value of the model; Set track’s minimum value

property ui_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

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_reverse#: Work in reverse (changes direction)

property ui_right_label_color#: Color name for right label background from the Quasar Color Palette

property ui_right_label_text_color#: Color name for right label text from the Quasar Color Palette

property ui_right_label_value#: Override default label for max value

property ui_right_thumb_color#: Color name (from the Quasar Color Palette) for right thumb

property ui_selection_color#: Color name for the selection bar (can be ‘transparent’ too) from the Quasar Color Palette

property ui_selection_img#: Apply a pattern image on the selection bar

property ui_slot_marker_label#: What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>

property ui_slot_marker_label_group#: What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>

property ui_snap#: Snap on valid values, rather than sliding freely; Suggestion: use with ‘step’ prop

property ui_step#: Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity

property ui_switch_label_side#: Switch the position of the label (top <-> bottom or left <-> right)

property ui_switch_marker_labels_side#: Switch the position of the marker labels (top <-> bottom or left <-> right)

property ui_thumb_path#: Set custom thumb svg path

property ui_thumb_size#: Thumb size (including CSS unit)

property ui_track_color#: Color name for the track (can be ‘transparent’ too) from the Quasar Color Palette

property ui_track_img#: Apply a pattern image on the track

property ui_track_size#: Track size (including CSS unit)

property ui_vertical#: Display in vertical direction

Bases: Component

Quasar Component: QRating

Parameters:

ui_model_value (float | None)
ui_max (float | str | None) – Number of icons to display
ui_icon (str | list | None) – 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)
ui_icon_selected (str | list | None) – 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)
ui_icon_half (str | list | None) – 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)
ui_icon_aria_label (str | list | None) – 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
ui_color (str | list | None) – 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)
ui_color_selected (str | list | None) – Color name from the Quasar Palette for selected icons
ui_color_half (str | list | None) – Color name from the Quasar Palette for half selected icons
ui_no_dimming (bool | None) – Does not lower opacity for unselected icons
ui_no_reset (bool | None) – When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0
ui_readonly (Any | None)
ui_disable (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_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)

property ui_color_half#: Color name from the Quasar Palette for half selected icons

property ui_color_selected#: Color name from the Quasar Palette for selected icons

property ui_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)

property ui_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

property ui_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)

property ui_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)

property ui_max#: Number of icons to display

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_no_dimming#: Does not lower opacity for unselected icons

property ui_no_reset#: When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

ui_slot_tip_name(name, value)#: Slot to define the tooltip of icon at ‘[name]’ where name is a 1-based index; Suggestion: QTooltip

class ngapp.components.qcomponents.QResizeObserver(*children, ui_debounce: str | float | None = None, **kwargs)#

Bases: Component

Quasar Component: QResizeObserver

Parameters:: ui_debounce (str | float | None) – Debounce amount (in milliseconds)

on_resize(handler: Callable, arg: object = None)#

Parent element has resized (width or height changed)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_debounce#: Debounce amount (in milliseconds)

ui_trigger(ui_immediately=None)#: Emit a ‘resize’ event

class ngapp.components.qcomponents.QResponsive(*children, ui_ratio: str | float | None = None, **kwargs)#

Bases: Component

Quasar Component: QResponsive

Parameters:: ui_ratio (str | float | None) – 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’)

property ui_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’)

Bases: Component

Quasar Component: QRouteTab

Parameters:

ui_icon (Any | None)
ui_label (float | str | None) – A number or string to label the tab
ui_alert (bool | str | None) – 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
ui_alert_icon (str | None) – 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
ui_name (float | str | None) – Panel name
ui_no_caps (bool | None) – Turns off capitalizing all letters within the tab (which is the default)
ui_content_class (str | None) – Class definitions to be attributed to the content wrapper
ui_ripple (Any | None)
ui_tabindex (Any | None)
ui_disable (Any | None)
ui_to (str | dict | None) – Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used
ui_exact (bool | None) – Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used
ui_replace (bool | None) – Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used
ui_active_class (str | None) – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
ui_exact_active_class (str | None) – Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used
ui_href (str | None) – Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props
ui_target (str | None) – 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

on_click(handler: Callable, arg: object = None)#

Emitted when the component is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keydown(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_active_class#: Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used

property ui_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

property ui_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

property ui_content_class#: Class definitions to be attributed to the content wrapper

property ui_exact#: Equivalent to Vue Router <router-link> ‘exact’ property; Superseded by ‘href’ prop if used

property ui_exact_active_class#: Equivalent to Vue Router <router-link> ‘active-class’ property; Superseded by ‘href’ prop if used

property ui_href#: Native <a> link href attribute; Has priority over the ‘to’/’exact’/’replace’/’active-class’/’exact-active-class’ props

property ui_label#: A number or string to label the tab

property ui_name#: Panel name

property ui_no_caps#: Turns off capitalizing all letters within the tab (which is the default)

property ui_replace#: Equivalent to Vue Router <router-link> ‘replace’ property; Superseded by ‘href’ prop if used

property ui_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

property ui_to#: Equivalent to Vue Router <router-link> ‘to’ property; Superseded by ‘href’ prop if used

Bases: Component

Quasar Component: QScrollArea

Parameters:

ui_dark (Any | None)
ui_vertical_offset (list | None) – Adds [top, bottom] offset to vertical thumb
ui_horizontal_offset (list | None) – Adds [left, right] offset to horizontal thumb
ui_bar_style (str | list | dict | None) – Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)
ui_vertical_bar_style (str | list | dict | None) – Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of ‘bar-style’ prop
ui_horizontal_bar_style (str | list | dict | None) – Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of ‘bar-style’ prop
ui_thumb_style (dict | None) – Object with CSS properties and values for custom styling the thumb of scrollbars (both vertical and horizontal)
ui_vertical_thumb_style (dict | None) – Object with CSS properties and values for custom styling the thumb of the vertical scrollbar; Is applied on top of ‘thumb-style’ prop
ui_horizontal_thumb_style (dict | None) – Object with CSS properties and values for custom styling the thumb of the horizontal scrollbar; Is applied on top of ‘thumb-style’ prop
ui_content_style (str | list | dict | None) – Object with CSS properties and values for styling the container of QScrollArea
ui_content_active_style (str | list | dict | None) – Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)
ui_visible (bool | None) – Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior
ui_delay (float | str | None) – When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered)
ui_tabindex (Any | None)

on_scroll(handler: Callable, arg: object = None)#

Emitted when scroll information changes (and listener is configured)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_bar_style#: Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal)

property ui_content_active_style#: Object with CSS properties and values for styling the container of QScrollArea when scroll area becomes active (is mouse hovered)

property ui_content_style#: Object with CSS properties and values for styling the container of QScrollArea

property ui_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)

ui_getScroll()#: Get the current scroll information

ui_getScrollPercentage()#: Get current scroll position in percentage (0.0 <= x <= 1.0)

ui_getScrollPosition()#: Get current scroll position

ui_getScrollTarget()#: Get the scrolling DOM element target

property ui_horizontal_bar_style#: Object with CSS properties and values for custom styling the horizontal scrollbar; Is applied on top of ‘bar-style’ prop

property ui_horizontal_offset#: Adds [left, right] offset to horizontal thumb

property ui_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

ui_setScrollPercentage(ui_axis, ui_offset, ui_duration=None)#: Set scroll position to a percentage (0.0 <= x <= 1.0) of the total scrolling size; If a duration (in milliseconds) is specified then the scroll is animated

ui_setScrollPosition(ui_axis, ui_offset, ui_duration=None)#: Set scroll position to an offset; If a duration (in milliseconds) is specified then the scroll is animated

property ui_thumb_style#: Object with CSS properties and values for custom styling the thumb of scrollbars (both vertical and horizontal)

property ui_vertical_bar_style#: Object with CSS properties and values for custom styling the vertical scrollbar; Is applied on top of ‘bar-style’ prop

property ui_vertical_offset#: Adds [top, bottom] offset to vertical thumb

property ui_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

property ui_visible#: Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior

class ngapp.components.qcomponents.QScrollObserver(

*children,

ui_debounce: str | float | None = None,

ui_axis: str | None = None,

ui_scroll_target: Any | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QScrollObserver

Parameters:

ui_debounce (str | float | None) – Debounce amount (in milliseconds)
ui_axis (str | None) – Axis on which to detect changes
ui_scroll_target (Any | None)

on_scroll(handler: Callable, arg: object = None)#

Emitted when scroll position changes

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_axis#: Axis on which to detect changes

property ui_debounce#: Debounce amount (in milliseconds)

ui_getPosition()#: Get current scroll details under the form of an Object: { position, direction, directionChanged, inflectionPoint }

ui_trigger(ui_immediately=None)#: Emit a ‘scroll’ event

Bases: Component

Quasar Component: QSelect

Parameters:

ui_model_value (Any | None) – Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive
ui_multiple (bool | None) – Allow multiple selection; Model must be Array
ui_display_value (float | str | None) – Override default selection string, if not using ‘selected’ slot/scoped slot and if not using ‘use-chips’ prop
ui_display_value_html (Any | None) – 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!
ui_options (list | None) – Array of objects with available options that the user can select from. For best performance freeze the list of options. Canonical form of each object is with ‘label’ (String), ‘value’ (Any) and optional ‘disable’ (Boolean) props (can be customized with options-value/option-label/option-disable props).
ui_option_value (str | Callable | None) – 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
ui_option_label (str | Callable | None) – 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
ui_option_disable (str | Callable | None) – 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
ui_hide_selected (bool | None) – 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
ui_hide_dropdown_icon (bool | None) – Hides dropdown icon
ui_dropdown_icon (Any | None)
ui_max_values (float | str | None) – Allow a maximum number of selections that the user can do
ui_options_dense (Any | None) – Dense mode for options list; occupies less space
ui_options_dark (bool | None) – Options menu will be colored with a dark color
ui_options_selected_class (str | None) – 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)
ui_options_html (Any | None) – 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!
ui_options_cover (bool | None) – Expanded menu will cover the component (will not work along with ‘use-input’ prop for obvious reasons)
ui_menu_shrink (bool | None) – Allow the options list to be narrower than the field (only in menu mode)
ui_menu_anchor (str | None) – Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)
ui_menu_self (str | None) – Two values setting the options list’s own position relative to its target (only in menu mode)
ui_menu_offset (list | None) – An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode)
ui_popup_content_class (str | None) – Class definitions to be attributed to the popup content
ui_popup_content_style (str | list | dict | None) – Style definitions to be attributed to the popup content
ui_popup_no_route_dismiss (bool | None) – Changing route app won’t dismiss the popup (menu or dialog)
ui_use_chips (bool | None) – Use QChip to show what is currently selected
ui_use_input (bool | None) – Use an input tag where users can type
ui_maxlength (str | float | None) – Specify a max length for the inner input tag (if ‘use-input’ is enabled)
ui_fill_input (bool | None) – Fills the input with current value; Useful along with ‘hide-selected’; Does NOT works along with ‘multiple’ selection
ui_new_value_mode (str | None) – 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’)
ui_map_options (bool | None) – 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
ui_disable_tab_selection (bool | None) – Prevents the tab key from confirming the currently hovered option
ui_emit_value (bool | None) – Update model with the value of the selected option instead of the whole option
ui_input_debounce (float | str | None) – Debounce the input model update with an amount of milliseconds (also affects the ‘filter’ event, if used)
ui_input_class (str | list | dict | None) – Class definitions to be attributed to the underlying input tag
ui_input_style (str | list | dict | None) – Style definitions to be attributed to the underlying input tag
ui_tabindex (Any | None)
ui_autocomplete (str | None) – Autocomplete attribute for field
ui_transition_show (Any | None) – Transition when showing the menu/dialog; One of Quasar’s embedded transitions
ui_transition_hide (Any | None) – Transition when hiding the menu/dialog; One of Quasar’s embedded transitions
ui_transition_duration (str | float | None) – Transition duration when hiding the menu/dialog (in milliseconds, without unit)
ui_behavior (str | None) – Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
ui_virtual_scroll_item_size (float | str | None) – 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
ui_label (str | None) – A text label that will “float” up above the input field, once the field gets focus
ui_stack_label (bool | None) – Label will be always shown above the field regardless of field content (if any)
ui_hint (str | None) – Helper (hint) text which gets placed below your wrapped form component
ui_hide_hint (bool | None) – Hide the helper (hint) text when field doesn’t have focus
ui_prefix (str | None) – Prefix
ui_suffix (str | None) – Suffix
ui_label_color (Any | None) – 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
ui_color (Any | None)
ui_bg_color (Any | None)
ui_dark (Any | None)
ui_loading (bool | None) – Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.
ui_clearable (bool | None) – Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null
ui_clear_icon (str | None) – Custom icon to use for the clear button when using along with ‘clearable’ prop
ui_filled (bool | None) – Use ‘filled’ design for the field
ui_outlined (bool | None) – Use ‘outlined’ design for the field
ui_borderless (bool | None) – Use ‘borderless’ design for the field
ui_standout (bool | str | None) – Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)
ui_label_slot (bool | None) – Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set
ui_bottom_slots (bool | None) – Enables bottom slots (‘error’, ‘hint’, ‘counter’)
ui_hide_bottom_space (bool | None) – 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
ui_counter (bool | None) – Show an automatic counter on bottom right
ui_rounded (Any | None)
ui_square (bool | None) – Remove border-radius so borders are squared; Overrides ‘rounded’ prop
ui_dense (Any | None)
ui_item_aligned (bool | None) – Match inner content alignment to that of QItem
ui_disable (Any | None)
ui_readonly (Any | None)
ui_autofocus (bool | None) – Focus field on initial component render
ui_for (str | None) – 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
ui_error (bool | None) – Does field have validation errors?
ui_error_message (str | None) – Validation error message (gets displayed only if ‘error’ is set to ‘true’)
ui_no_error_icon (bool | None) – Hide error icon when there is an error
ui_rules (list | None) – Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules
ui_reactive_rules (bool | None) – 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
ui_lazy_rules (bool | str | None) – 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
ui_virtual_scroll_horizontal (bool | None) – Make virtual list work in horizontal mode
ui_virtual_scroll_slice_size (float | str | None) – Minimum number of items to render in the virtual list
ui_virtual_scroll_slice_ratio_before (float | str | None) – Ratio of number of items in visible zone to render before it
ui_virtual_scroll_slice_ratio_after (float | str | None) – Ratio of number of items in visible zone to render after it
ui_virtual_scroll_sticky_size_start (float | str | None) – 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
ui_virtual_scroll_sticky_size_end (float | str | None) – 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
ui_table_colspan (float | str | None) – The number of columns in the table (you need this if you use table-layout: fixed)

on_add(handler: Callable, arg: object = None)#

Emitted when an option is added to the selection

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_blur(handler: Callable, arg: object = None)#

Emitted when component loses focus

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_clear(handler: Callable, arg: object = None)#

When using the ‘clearable’ property, this event is emitted when the clear icon is clicked

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_filter(handler: Callable, arg: object = None)#

Emitted when user wants to filter a value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_filter_abort(handler: Callable, arg: object = None)#

Emitted when a filtering was aborted; Probably a new one was requested?

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_focus(handler: Callable, arg: object = None)#

Emitted when component gets focused

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_input_value(handler: Callable, arg: object = None)#

Emitted when the value in the text input changes

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keydown(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keypress(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keyup(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_new_value(handler: Callable, arg: object = None)#

Enables creation of new values; Emitted when a new value has been created; You can override ‘new-value-mode’ property with it

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_popup_hide(handler: Callable, arg: object = None)#

Emitted when the select options menu or dialog is hidden.

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_popup_show(handler: Callable, arg: object = None)#

Emitted when the select options menu or dialog is shown.

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_remove(handler: Callable, arg: object = None)#

Emitted when an option is removed from selection

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_virtual_scroll(handler: Callable, arg: object = None)#

Emitted when the virtual scroll occurs

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

ui_add(ui_opt, ui_unique=None)#: Adds option to model

property ui_autocomplete#: Autocomplete attribute for field

property ui_autofocus#: Focus field on initial component render

property ui_behavior#: Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles

ui_blur()#: Blur component (lose focus)

property ui_borderless#: Use ‘borderless’ design for the field

property ui_bottom_slots#: Enables bottom slots (‘error’, ‘hint’, ‘counter’)

property ui_clear_icon#: Custom icon to use for the clear button when using along with ‘clearable’ prop

property ui_clearable#: Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null

property ui_counter#: Show an automatic counter on bottom right

property ui_disable_tab_selection#: Prevents the tab key from confirming the currently hovered option

property ui_display_value#: Override default selection string, if not using ‘selected’ slot/scoped slot and if not using ‘use-chips’ prop

property ui_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!

property ui_emit_value#: Update model with the value of the selected option instead of the whole option

property ui_error#: Does field have validation errors?

property ui_error_message#: Validation error message (gets displayed only if ‘error’ is set to ‘true’)

property ui_fill_input#: Fills the input with current value; Useful along with ‘hide-selected’; Does NOT works along with ‘multiple’ selection

property ui_filled#: Use ‘filled’ design for the field

ui_filter(ui_value)#: Filter options

ui_focus()#: Focus component

property ui_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

ui_getEmittingOptionValue(ui_opt)#: Get the model value that would be emitted by QSelect when selecting a said option; Also takes into consideration if ‘emit-value’ is set

ui_getOptionIndex()#: Gets current focused option index from menu; It’s -1 if no option is focused

ui_getOptionLabel(ui_opt)#: Get the label of an option; Takes into consideration the ‘option-label’ prop (if used)

ui_getOptionValue(ui_opt)#: Get the model value of an option; Takes into consideration ‘option-value’ (if used), but does not looks for ‘emit-value’, like getEmittingOptionValue() does

ui_hidePopup()#: Hide popup

property ui_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

property ui_hide_dropdown_icon#: Hides dropdown icon

property ui_hide_hint#: Hide the helper (hint) text when field doesn’t have focus

property ui_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

property ui_hint#: Helper (hint) text which gets placed below your wrapped form component

property ui_input_class#: Class definitions to be attributed to the underlying input tag

property ui_input_debounce#: Debounce the input model update with an amount of milliseconds (also affects the ‘filter’ event, if used)

property ui_input_style#: Style definitions to be attributed to the underlying input tag

ui_isOptionDisabled(ui_opt)#: Tells if an option is disabled; Takes into consideration ‘option-disable’ prop (if used)

ui_isOptionSelected(ui_opt)#: Tells if an option is selected

property ui_item_aligned#: Match inner content alignment to that of QItem

property ui_label#: A text label that will “float” up above the input field, once the field gets focus

property ui_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

property ui_label_slot#: Enables label slot; You need to set it to force use of the ‘label’ slot if the ‘label’ prop is not set

property ui_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

property ui_loading#: Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the ‘loading’ slot.

property ui_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

property ui_max_values#: Allow a maximum number of selections that the user can do

property ui_maxlength#: Specify a max length for the inner input tag (if ‘use-input’ is enabled)

property ui_menu_anchor#: Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode)

property ui_menu_offset#: An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode)

property ui_menu_self#: Two values setting the options list’s own position relative to its target (only in menu mode)

property ui_menu_shrink#: Allow the options list to be narrower than the field (only in menu mode)

property ui_model_value#: Model of the component; Either use this property (along with a listener for ‘update:model-value’ event) OR use v-model directive

ui_moveOptionSelection(ui_offset=None, ui_skipInputValue=None)#: Move selected option from menu by index offset

property ui_multiple#: Allow multiple selection; Model must be Array

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_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’)

property ui_no_error_icon#: Hide error icon when there is an error

property ui_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

property ui_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

property ui_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

property ui_options#: Array of objects with available options that the user can select from. For best performance freeze the list of options. Canonical form of each object is with ‘label’ (String), ‘value’ (Any) and optional ‘disable’ (Boolean) props (can be customized with options-value/option-label/option-disable props).

property ui_options_cover#: Expanded menu will cover the component (will not work along with ‘use-input’ prop for obvious reasons)

property ui_options_dark#: Options menu will be colored with a dark color

property ui_options_dense#: Dense mode for options list; occupies less space

property ui_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!

property ui_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)

property ui_outlined#: Use ‘outlined’ design for the field

property ui_popup_content_class#: Class definitions to be attributed to the popup content

property ui_popup_content_style#: Style definitions to be attributed to the popup content

property ui_popup_no_route_dismiss#: Changing route app won’t dismiss the popup (menu or dialog)

property ui_prefix#: Prefix

property ui_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

ui_refresh(ui_index=None)#: Refreshes the virtual scroll list; Use it after appending items

ui_removeAtIndex(ui_index)#: Remove selected option located at specific index

ui_reset()#: Resets the virtual scroll computations; Needed for custom edge-cases

ui_resetValidation()#: Reset validation status

property ui_rules#: Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules

ui_scrollTo(ui_index, ui_edge=None)#: Scroll the virtual scroll list to the item with the specified index (0 based)

ui_setOptionIndex(ui_index)#: Sets option from menu as ‘focused’; -1 to focus none

ui_showPopup()#: Focus and open popup

property ui_slot_after#: Append outer field; Suggestions: QIcon, QBtn

property ui_slot_after_options#: Template slot for the elements that should be rendered after the list of options

property ui_slot_append#: Append to inner field; Suggestions: QIcon, QBtn

property ui_slot_before#: Prepend outer field; Suggestions: QIcon, QBtn

property ui_slot_before_options#: Template slot for the elements that should be rendered before the list of options

property ui_slot_counter#: Slot for counter text; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_error#: Slot for errors; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_hint#: Slot for hint text; Enabled only if ‘bottom-slots’ prop is used; Suggestion: <div>

property ui_slot_label#: Slot for label; Used only if ‘label-slot’ prop is set or the ‘label’ prop is set; When it is used the text in the ‘label’ prop is ignored

property ui_slot_loading#: Override default spinner when component is in loading mode; Use in conjunction with ‘loading’ prop

property ui_slot_no_option#: What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>

property ui_slot_option#: Customize how options are rendered; Suggestion: QItem

property ui_slot_prepend#: Prepend inner field; Suggestions: QIcon, QBtn

property ui_slot_selected#: Override default selection slot; Suggestion: QChip

property ui_slot_selected_item#: Override default selection slot; Suggestion: QChip

property ui_square#: Remove border-radius so borders are squared; Overrides ‘rounded’ prop

property ui_stack_label#: Label will be always shown above the field regardless of field content (if any)

property ui_standout#: Use ‘standout’ design for the field; Specifies classes to be applied when focused (overriding default ones)

property ui_suffix#: Suffix

property ui_table_colspan#: The number of columns in the table (you need this if you use table-layout: fixed)

ui_toggleOption(ui_opt, ui_keepOpen=None)#: Add/remove option from model

property ui_transition_duration#: Transition duration when hiding the menu/dialog (in milliseconds, without unit)

property ui_transition_hide#: Transition when hiding the menu/dialog; One of Quasar’s embedded transitions

property ui_transition_show#: Transition when showing the menu/dialog; One of Quasar’s embedded transitions

ui_updateInputValue(ui_value, ui_noFilter=None)#: If ‘use-input’ is specified, this updates the value that it holds

ui_updateMenuPosition()#: Recomputes menu position

property ui_use_chips#: Use QChip to show what is currently selected

property ui_use_input#: Use an input tag where users can type

ui_validate(ui_value=None)#: Trigger a validation

property ui_virtual_scroll_horizontal#: Make virtual list work in horizontal mode

property ui_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

property ui_virtual_scroll_slice_ratio_after#: Ratio of number of items in visible zone to render after it

property ui_virtual_scroll_slice_ratio_before#: Ratio of number of items in visible zone to render before it

property ui_virtual_scroll_slice_size#: Minimum number of items to render in the virtual list

property ui_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

property ui_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

Bases: Component

Quasar Component: QSeparator

Parameters:

ui_dark (Any | None)
ui_spaced (bool | str | None) – 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
ui_inset (bool | str | None) – 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
ui_vertical (bool | None) – If set to true, the separator will be vertical.
ui_size (Any | None)
ui_color (Any | None)

property ui_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

property ui_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

property ui_vertical#: If set to true, the separator will be vertical.

Bases: Component

Quasar Component: QSkeleton

Parameters:

ui_dark (Any | None)
ui_type (str | None) – Type of skeleton placeholder
ui_animation (str | None) – The animation effect of the skeleton placeholder
ui_animation_speed (Any | None)
ui_square (Any | None)
ui_bordered (Any | None)
ui_size (str | None) – Size in CSS units, including unit name; Overrides ‘height’ and ‘width’ props and applies the value to both height and width
ui_width (str | None) – Width in CSS units, including unit name; Apply custom width; Use this prop or through CSS; Overridden by ‘size’ prop if used
ui_height (str | None) – Height in CSS units, including unit name; Apply custom height; Use this prop or through CSS; Overridden by ‘size’ prop if used
ui_tag (Any | None)

property ui_animation#: The animation effect of the skeleton placeholder

property ui_height#: Height in CSS units, including unit name; Apply custom height; Use this prop or through CSS; Overridden by ‘size’ prop if used

property ui_size#: Size in CSS units, including unit name; Overrides ‘height’ and ‘width’ props and applies the value to both height and width

property ui_type#: Type of skeleton placeholder

property ui_width#: Width in CSS units, including unit name; Apply custom width; Use this prop or through CSS; Overridden by ‘size’ prop if used

Bases: Component

Quasar Component: QSlideItem

Parameters:

ui_left_color (Any | None) – Color name for left-side background from the Quasar Color Palette
ui_right_color (Any | None) – Color name for right-side background from the Quasar Color Palette
ui_top_color (Any | None) – Color name for top-side background from the Quasar Color Palette
ui_bottom_color (Any | None) – Color name for bottom-side background from the Quasar Color Palette
ui_dark (Any | None)

on_action(handler: Callable, arg: object = None)#

Emitted when user finished sliding the item to either sides

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_bottom(handler: Callable, arg: object = None)#

Emitted when user finished sliding the item down

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_left(handler: Callable, arg: object = None)#

Emitted when user finished sliding the item to the left

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_right(handler: Callable, arg: object = None)#

Emitted when user finished sliding the item to the right

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_slide(handler: Callable, arg: object = None)#

Emitted while user is sliding the item to one of the available sides

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_top(handler: Callable, arg: object = None)#

Emitted when user finished sliding the item up

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_bottom_color#: Color name for bottom-side background from the Quasar Color Palette

property ui_left_color#: Color name for left-side background from the Quasar Color Palette

ui_reset()#: Reset to initial state (not swiped to any side)

property ui_right_color#: Color name for right-side background from the Quasar Color Palette

property ui_slot_bottom#: Bottom side content when sliding

property ui_slot_left#: Left side content when sliding

property ui_slot_right#: Right side content when sliding

property ui_slot_top#: Top side content when sliding

property ui_top_color#: Color name for top-side background from the Quasar Color Palette

class ngapp.components.qcomponents.QSlideTransition(

*children,

ui_appear: bool | None = None,

ui_duration: float | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSlideTransition

Parameters:

ui_appear (bool | None) – If set to true, the transition will be applied on the initial render.
ui_duration (float | None) – Duration (in milliseconds) enabling animated scroll.

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_appear#: If set to true, the transition will be applied on the initial render.

property ui_duration#: Duration (in milliseconds) enabling animated scroll.

Bases: Component

Quasar Component: QSlider

Parameters:

ui_model_value (float | None | Any) – 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
ui_label_value (str | float | None) – Override default label value
ui_min (float | None) – Minimum value of the model; Set track’s minimum value
ui_max (float | None) – Maximum value of the model; Set track’s maximum value
ui_inner_min (float | None) – 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
ui_inner_max (float | None) – 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
ui_step (float | None) – Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity
ui_snap (bool | None) – Snap on valid values, rather than sliding freely; Suggestion: use with ‘step’ prop
ui_reverse (bool | None) – Work in reverse (changes direction)
ui_vertical (bool | None) – Display in vertical direction
ui_color (Any | None)
ui_track_color (Any | None) – Color name for the track (can be ‘transparent’ too) from the Quasar Color Palette
ui_track_img (str | None) – Apply a pattern image on the track
ui_inner_track_color (Any | None) – Color name for the inner track (can be ‘transparent’ too) from the Quasar Color Palette
ui_inner_track_img (str | None) – Apply a pattern image on the inner track
ui_selection_color (Any | None) – Color name for the selection bar (can be ‘transparent’ too) from the Quasar Color Palette
ui_selection_img (str | None) – Apply a pattern image on the selection bar
ui_label (bool | None) – Popup a label when user clicks/taps on the slider thumb and moves it
ui_label_color (Any | None)
ui_label_text_color (Any | None)
ui_switch_label_side (bool | None) – Switch the position of the label (top <-> bottom or left <-> right)
ui_label_always (bool | None) – Always display the label
ui_markers (bool | float | None) – Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)
ui_marker_labels (bool | list | dict | Callable | None) – 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
ui_marker_labels_class (str | None) – CSS class(es) to apply to the marker labels container
ui_switch_marker_labels_side (bool | None) – Switch the position of the marker labels (top <-> bottom or left <-> right)
ui_track_size (str | None) – Track size (including CSS unit)
ui_thumb_size (str | None) – Thumb size (including CSS unit)
ui_thumb_color (Any | None)
ui_thumb_path (str | None) – Set custom thumb svg path
ui_dark (Any | None)
ui_dense (Any | None)
ui_disable (Any | None)
ui_readonly (Any | None)
ui_tabindex (Any | None)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_change(handler: Callable, arg: object = None)#

Emitted on lazy model value change (after user slides then releases the thumb)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_pan(handler: Callable, arg: object = None)#

Triggered when user starts panning on the component

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_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

property ui_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

property ui_inner_track_color#: Color name for the inner track (can be ‘transparent’ too) from the Quasar Color Palette

property ui_inner_track_img#: Apply a pattern image on the inner track

property ui_label#: Popup a label when user clicks/taps on the slider thumb and moves it

property ui_label_always#: Always display the label

property ui_label_value#: Override default label value

property ui_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

property ui_marker_labels_class#: CSS class(es) to apply to the marker labels container

property ui_markers#: Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)

property ui_max#: Maximum value of the model; Set track’s maximum value

property ui_min#: Minimum value of the model; Set track’s minimum value

property ui_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

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_reverse#: Work in reverse (changes direction)

property ui_selection_color#: Color name for the selection bar (can be ‘transparent’ too) from the Quasar Color Palette

property ui_selection_img#: Apply a pattern image on the selection bar

property ui_slot_marker_label#: What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>

property ui_slot_marker_label_group#: What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>

property ui_snap#: Snap on valid values, rather than sliding freely; Suggestion: use with ‘step’ prop

property ui_step#: Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity

property ui_switch_label_side#: Switch the position of the label (top <-> bottom or left <-> right)

property ui_switch_marker_labels_side#: Switch the position of the marker labels (top <-> bottom or left <-> right)

property ui_thumb_path#: Set custom thumb svg path

property ui_thumb_size#: Thumb size (including CSS unit)

property ui_track_color#: Color name for the track (can be ‘transparent’ too) from the Quasar Color Palette

property ui_track_img#: Apply a pattern image on the track

property ui_track_size#: Track size (including CSS unit)

property ui_vertical#: Display in vertical direction

class ngapp.components.qcomponents.QSpace(*children, **kwargs)#

Bases: Component

Quasar Component: QSpace

class ngapp.components.qcomponents.QSpinner(

*children,

ui_thickness: float | None = None,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinner

Parameters:

ui_thickness (float | None) – Override value to use for stroke-width
ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_thickness#: Override value to use for stroke-width

class ngapp.components.qcomponents.QSpinnerAudio(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerAudio

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerBall(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerBall

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerBars(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerBars

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerBox(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerBox

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerClock(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerClock

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerComment(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerComment

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerCube(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerCube

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerDots(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerDots

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerFacebook(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerFacebook

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerGears(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerGears

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerGrid(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerGrid

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerHearts(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerHearts

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerHourglass(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerHourglass

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerInfinity(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerInfinity

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerIos(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerIos

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerOrbit(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerOrbit

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerOval(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerOval

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerPie(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerPie

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerPuff(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerPuff

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerRadio(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerRadio

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerRings(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerRings

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

class ngapp.components.qcomponents.QSpinnerTail(

*children,

ui_color: Any | None = None,

ui_size: str | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QSpinnerTail

Parameters:

ui_color (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

Bases: Component

Quasar Component: QSplitter

Parameters:

ui_model_value (float | None) – 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
ui_reverse (bool | None) – Apply the model size to the second panel (by default it applies to the first)
ui_unit (str | None) – CSS unit for the model
ui_emit_immediately (bool | None) – Emit model while user is panning on the separator
ui_horizontal (bool | None) – Allows the splitter to split its two panels horizontally, instead of vertically
ui_limits (list | None) – 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; Default value: for ‘%’ unit it is [10, 90], while for ‘px’ unit it is [50, Infinity]
ui_disable (Any | None)
ui_before_class (str | list | dict | None) – Class definitions to be attributed to the ‘before’ panel
ui_after_class (str | list | dict | None) – Class definitions to be attributed to the ‘after’ panel
ui_separator_class (str | list | dict | None) – Class definitions to be attributed to the splitter separator
ui_separator_style (str | list | dict | None) – Style definitions to be attributed to the splitter separator
ui_dark (Any | None) – 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

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when component’s model value changes; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_after_class#: Class definitions to be attributed to the ‘after’ panel

property ui_before_class#: Class definitions to be attributed to the ‘before’ panel

property ui_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

property ui_emit_immediately#: Emit model while user is panning on the separator

property ui_horizontal#: Allows the splitter to split its two panels horizontally, instead of vertically

property ui_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; Default value: for ‘%’ unit it is [10, 90], while for ‘px’ unit it is [50, Infinity]

property ui_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

property ui_reverse#: Apply the model size to the second panel (by default it applies to the first)

property ui_separator_class#: Class definitions to be attributed to the splitter separator

property ui_separator_style#: Style definitions to be attributed to the splitter separator

property ui_slot_after#: Content of the panel on right/bottom

property ui_slot_before#: Content of the panel on left/top

property ui_slot_separator#: Content to be placed inside the separator; By default it is centered

property ui_unit#: CSS unit for the model

Bases: Component

Quasar Component: QStep

Parameters:

ui_icon (Any | None)
ui_color (Any | None)
ui_title (str | None) – Step title
ui_caption (str | None) – Step’s additional information that appears beneath the title
ui_prefix (str | float | None) – Step’s prefix (max 2 characters) which replaces the icon if step does not has error, is being edited or is marked as done
ui_done_icon (Any | None) – 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
ui_done_color (Any | None)
ui_active_icon (Any | None) – 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
ui_active_color (Any | None)
ui_error_icon (Any | None) – 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
ui_error_color (Any | None)
ui_header_nav (bool | None) – Allow navigation through the header
ui_done (bool | None) – Mark the step as ‘done’
ui_error (bool | None) – Mark the step as having an error
ui_name (Any | None) – Panel name
ui_disable (Any | None)

on_scroll(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_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

property ui_caption#: Step’s additional information that appears beneath the title

property ui_done#: Mark the step as ‘done’

property ui_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

property ui_error#: Mark the step as having an error

property ui_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

property ui_header_nav#: Allow navigation through the header

property ui_name#: Panel name

property ui_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

property ui_title#: Step title

Bases: Component

Quasar Component: QStepper

Parameters:

ui_dark (Any | None)
ui_flat (Any | None)
ui_bordered (Any | None)
ui_vertical (bool | None) – Default transitions and swipe actions will be on the vertical axis
ui_alternative_labels (bool | None) – Use alternative labels - stacks the icon on top of the label (applies only to horizontal stepper)
ui_header_nav (bool | None) – Allow navigation through the header
ui_contracted (bool | None) – Hide header labels on narrow windows
ui_inactive_icon (Any | None)
ui_inactive_color (Any | None)
ui_done_icon (Any | None) – 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
ui_done_color (Any | None)
ui_active_icon (Any | None) – 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
ui_active_color (Any | None)
ui_error_icon (Any | None) – 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
ui_error_color (Any | None)
ui_header_class (str | None) – Class definitions to be attributed to the header
ui_model_value (Any | None) – 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.
ui_keep_alive (bool | None) – Equivalent to using Vue’s native <keep-alive> component on the content
ui_keep_alive_include (str | list | Pattern | None) – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
ui_keep_alive_exclude (str | list | Pattern | None) – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
ui_keep_alive_max (float | None) – Equivalent to using Vue’s native max prop for <keep-alive>
ui_animated (bool | None) – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
ui_infinite (bool | None) – Makes component appear as infinite (when reaching last panel, next one will become the first one)
ui_swipeable (bool | None) – Enable swipe events (may interfere with content’s touch/mouse events)
ui_transition_prev (Any | None) – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
ui_transition_next (Any | None) – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)

on_before_transition(handler: Callable, arg: object = None)#

Emitted before transitioning to a new panel

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_transition(handler: Callable, arg: object = None)#

Emitted after component transitioned to a new panel

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when the component changes the model; This event isn’t fired if the model is changed externally; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_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

property ui_alternative_labels#: Use alternative labels - stacks the icon on top of the label (applies only to horizontal stepper)

property ui_animated#: Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)

property ui_contracted#: Hide header labels on narrow windows

property ui_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

property ui_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

ui_goTo(ui_panelName)#: Go to specific panel

property ui_header_class#: Class definitions to be attributed to the header

property ui_header_nav#: Allow navigation through the header

property ui_infinite#: Makes component appear as infinite (when reaching last panel, next one will become the first one)

property ui_keep_alive#: Equivalent to using Vue’s native <keep-alive> component on the content

property ui_keep_alive_exclude#: Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names

property ui_keep_alive_include#: Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names

property ui_keep_alive_max#: Equivalent to using Vue’s native max prop for <keep-alive>

property ui_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.

ui_next()#: Go to next panel

ui_previous()#: Go to previous panel

property ui_slot_message#: Slot specific for putting a message on top of each step (if horizontal stepper) or above steps (if vertical); Suggestion: QBanner, div.q-pa-lg

property ui_slot_navigation#: Slot specific for the global navigation; Suggestion: QStepperNavigation

property ui_swipeable#: Enable swipe events (may interfere with content’s touch/mouse events)

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

property ui_transition_next#: One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)

property ui_transition_prev#: One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)

property ui_vertical#: Default transitions and swipe actions will be on the vertical axis

class ngapp.components.qcomponents.QStepperNavigation(*children, **kwargs)#

Bases: Component

Quasar Component: QStepperNavigation

Bases: Component

Quasar Component: QTab

Parameters:

ui_icon (Any | None)
ui_label (float | str | None) – A number or string to label the tab
ui_alert (bool | str | None) – 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
ui_alert_icon (str | None) – 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
ui_name (float | str | None) – Panel name
ui_no_caps (bool | None) – Turns off capitalizing all letters within the tab (which is the default)
ui_content_class (str | None) – Class definitions to be attributed to the content wrapper
ui_ripple (Any | None)
ui_tabindex (Any | None)
ui_disable (Any | None)

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_keydown(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_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

property ui_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

property ui_content_class#: Class definitions to be attributed to the content wrapper

property ui_label#: A number or string to label the tab

property ui_name#: Panel name

property ui_no_caps#: Turns off capitalizing all letters within the tab (which is the default)

class ngapp.components.qcomponents.QTabPanel(

*children,

ui_name: Any | None = None,

ui_disable: Any | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QTabPanel

Parameters:

ui_name (Any | None) – Panel name
ui_disable (Any | None)

property ui_name#: Panel name

Bases: Component

Quasar Component: QTabPanels

Parameters:

ui_dark (Any | None)
ui_model_value (Any | None) – 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.
ui_keep_alive (bool | None) – Equivalent to using Vue’s native <keep-alive> component on the content
ui_keep_alive_include (str | list | Pattern | None) – Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names
ui_keep_alive_exclude (str | list | Pattern | None) – Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names
ui_keep_alive_max (float | None) – Equivalent to using Vue’s native max prop for <keep-alive>
ui_animated (bool | None) – Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)
ui_infinite (bool | None) – Makes component appear as infinite (when reaching last panel, next one will become the first one)
ui_swipeable (bool | None) – Enable swipe events (may interfere with content’s touch/mouse events)
ui_vertical (bool | None) – Default transitions and swipe actions will be on the vertical axis
ui_transition_prev (Any | None) – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
ui_transition_next (Any | None) – One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)

on_before_transition(handler: Callable, arg: object = None)#

Emitted before transitioning to a new panel

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_transition(handler: Callable, arg: object = None)#

Emitted after component transitioned to a new panel

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when the component changes the model; This event isn’t fired if the model is changed externally; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_animated#: Enable transitions between panel (also see ‘transition-prev’ and ‘transition-next’ props)

ui_goTo(ui_panelName)#: Go to specific panel

property ui_infinite#: Makes component appear as infinite (when reaching last panel, next one will become the first one)

property ui_keep_alive#: Equivalent to using Vue’s native <keep-alive> component on the content

property ui_keep_alive_exclude#: Equivalent to using Vue’s native exclude prop for <keep-alive>; Values must be valid Vue component names

property ui_keep_alive_include#: Equivalent to using Vue’s native include prop for <keep-alive>; Values must be valid Vue component names

property ui_keep_alive_max#: Equivalent to using Vue’s native max prop for <keep-alive>

property ui_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.

ui_next()#: Go to next panel

ui_previous()#: Go to previous panel

property ui_swipeable#: Enable swipe events (may interfere with content’s touch/mouse events)

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

property ui_transition_next#: One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)

property ui_transition_prev#: One of Quasar’s embedded transitions (has effect only if ‘animated’ prop is set)

property ui_vertical#: Default transitions and swipe actions will be on the vertical axis

Bases: Component

Quasar Component: QTable

Parameters:

ui_rows (list | None) – Rows of data to display
ui_row_key (str | Callable | None) – 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
ui_virtual_scroll (bool | None) – Display data using QVirtualScroll (for non-grid mode only)
ui_virtual_scroll_target (Any | None)
ui_virtual_scroll_slice_size (float | str | None) – Minimum number of rows to render in the virtual list
ui_virtual_scroll_slice_ratio_before (float | str | None) – Ratio of number of rows in visible zone to render before it
ui_virtual_scroll_slice_ratio_after (float | str | None) – Ratio of number of rows in visible zone to render after it
ui_virtual_scroll_item_size (float | str | None) – 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; Default value: 48 (24 if dense)
ui_virtual_scroll_sticky_size_start (float | str | None) – 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
ui_virtual_scroll_sticky_size_end (float | str | None) – Size in pixels of the sticky footer part (if using one); A correct value will improve scroll precision
ui_table_colspan (float | str | None) – The number of columns in the table (you need this if you use table-layout: fixed)
ui_color (Any | None)
ui_icon_first_page (Any | None) – Icon name following Quasar convention for stepping to first page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
ui_icon_prev_page (Any | None) – Icon name following Quasar convention for stepping to previous page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
ui_icon_next_page (Any | None) – Icon name following Quasar convention for stepping to next page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
ui_icon_last_page (Any | None) – Icon name following Quasar convention for stepping to last page; Make sure you have the icon library installed unless you are using ‘img:’ prefix
ui_grid (bool | None) – Display data as a grid instead of the default table
ui_grid_header (bool | None) – Display header for grid-mode also
ui_dense (Any | None) – Dense mode; Connect with $q.screen for responsive behavior
ui_columns (list | None) – The column definitions (Array of Objects)
ui_visible_columns (list | None) – 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
ui_loading (bool | None) – Put Table into ‘loading’ state; Notify the user something is happening behind the scenes
ui_title (str | None) – Table title
ui_hide_header (bool | None) – Hide table header layer
ui_hide_bottom (bool | None) – Hide table bottom layer regardless of what it has to display
ui_hide_selected_banner (bool | None) – Hide the selected rows banner (if any)
ui_hide_no_data (bool | None) – Hide the default no data bottom layer
ui_hide_pagination (bool | None) – Hide the pagination controls at the bottom
ui_dark (Any | None)
ui_flat (Any | None)
ui_bordered (Any | None)
ui_square (Any | None)
ui_separator (str | None) – Use a separator/border between rows, columns or all cells
ui_wrap_cells (bool | None) – Wrap text within table cells
ui_binary_state_sort (bool | None) – Skip the third state (unsorted) when user toggles column sort direction
ui_column_sort_order (str | None) – 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
ui_no_data_label (str | None) – Override default text to display when no data is available
ui_no_results_label (str | None) – Override default text to display when user filters the table and no matched results are found
ui_loading_label (str | None) – Override default text to display when table is in loading state (see ‘loading’ prop)
ui_selected_rows_label (Callable | None) – Text to display when user selected at least one row; For best performance, reference it from your scope and do not define it inline
ui_rows_per_page_label (str | None) – Text to override default rows per page label at bottom of table
ui_pagination_label (Callable | None) – 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
ui_table_style (str | list | dict | None) – CSS style to apply to native HTML <table> element’s wrapper (which is a DIV)
ui_table_class (str | list | dict | None) – CSS classes to apply to native HTML <table> element’s wrapper (which is a DIV)
ui_table_header_style (str | list | dict | None) – CSS style to apply to header of native HTML <table> (which is a TR)
ui_table_header_class (str | list | dict | None) – CSS classes to apply to header of native HTML <table> (which is a TR)
ui_card_container_style (str | list | dict | None) – CSS style to apply to the cards container (when in grid mode)
ui_card_container_class (str | list | dict | None) – CSS classes to apply to the cards container (when in grid mode)
ui_card_style (str | list | dict | None) – CSS style to apply to the card (when in grid mode) or container card (when not in grid mode)
ui_card_class (str | list | dict | None) – CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)
ui_title_class (str | list | dict | None) – CSS classes to apply to the title (if using ‘title’ prop)
ui_filter (str | dict | None) – 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
ui_filter_method (Callable | None) – The actual filtering mechanism; For best performance, reference it from your scope and do not define it inline
ui_pagination (dict | None) – Pagination object; You can also use the ‘v-model:pagination’ for synching; When not synching it simply initializes the pagination on first render
ui_rows_per_page_options (list | None) – Options for user to pick (Numbers); Number 0 means ‘Show all rows in one page’
ui_selection (str | None) – Selection type
ui_selected (list | None) – Keeps the user selection array
ui_expanded (list | None) – Keeps the array with expanded rows keys
ui_sort_method (Callable | None) – The actual sort mechanism. Function (rows, sortBy, descending) => sorted rows; For best performance, reference it from your scope and do not define it inline
ui_fullscreen (bool | None) – Fullscreen mode
ui_no_route_fullscreen_exit (bool | None) – Changing route app won’t exit fullscreen

on_fullscreen(handler: Callable, arg: object = None)#

Emitted when fullscreen state changes

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_request(handler: Callable, arg: object = None)#

Emitted when a server request is triggered

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_row_click(handler: Callable, arg: object = None)#

Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_row_contextmenu(handler: Callable, arg: object = None)#

Emitted when user right clicks/long taps on a row; Is not emitted when using body/row/item scoped slots

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_row_dblclick(handler: Callable, arg: object = None)#

Emitted when user quickly double clicks/taps on a row; Is not emitted when using body/row/item scoped slots; Please check JS dblclick event support before using

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_selection(handler: Callable, arg: object = None)#

Emitted when user selects/unselects row(s)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_expanded(handler: Callable, arg: object = None)#

Used by Vue on ‘v-model:expanded’ prop for updating its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_fullscreen(handler: Callable, arg: object = None)#

Used by Vue on ‘v-model:fullscreen’ prop for updating its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_pagination(handler: Callable, arg: object = None)#

Used by Vue on ‘v-model:pagination’ for updating its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_selected(handler: Callable, arg: object = None)#

Used by Vue on ‘v-model:selected’ prop for updating its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_virtual_scroll(handler: Callable, arg: object = None)#

Emitted when the virtual scroll occurs, if using virtual scroll

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_binary_state_sort#: Skip the third state (unsorted) when user toggles column sort direction

property ui_card_class#: CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)

property ui_card_container_class#: CSS classes to apply to the cards container (when in grid mode)

property ui_card_container_style#: CSS style to apply to the cards container (when in grid mode)

property ui_card_style#: CSS style to apply to the card (when in grid mode) or container card (when not in grid mode)

ui_clearSelection()#: Clears user selection (emits ‘update:selected’ with empty array)

property ui_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

property ui_columns#: The column definitions (Array of Objects)

property ui_dense#: Dense mode; Connect with $q.screen for responsive behavior

ui_exitFullscreen()#: Leave the fullscreen view

property ui_expanded#: Keeps the array with expanded rows keys

property ui_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

property ui_filter_method#: The actual filtering mechanism; For best performance, reference it from your scope and do not define it inline

ui_firstPage()#: Navigates to first page

property ui_fullscreen#: Fullscreen mode

property ui_grid#: Display data as a grid instead of the default table

property ui_grid_header#: Display header for grid-mode also

property ui_hide_bottom#: Hide table bottom layer regardless of what it has to display

property ui_hide_header#: Hide table header layer

property ui_hide_no_data#: Hide the default no data bottom layer

property ui_hide_pagination#: Hide the pagination controls at the bottom

property ui_hide_selected_banner#: Hide the selected rows banner (if any)

property ui_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

property ui_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

property ui_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

property ui_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

ui_isRowExpanded(ui_key)#: Determine if a row is expanded or not

ui_isRowSelected(ui_key)#: Determine if a row has been selected by user

ui_lastPage()#: Navigates to last page

property ui_loading#: Put Table into ‘loading’ state; Notify the user something is happening behind the scenes

property ui_loading_label#: Override default text to display when table is in loading state (see ‘loading’ prop)

ui_nextPage()#: Navigates to next page, if available

property ui_no_data_label#: Override default text to display when no data is available

property ui_no_results_label#: Override default text to display when user filters the table and no matched results are found

property ui_no_route_fullscreen_exit#: Changing route app won’t exit fullscreen

property ui_pagination#: Pagination object; You can also use the ‘v-model:pagination’ for synching; When not synching it simply initializes the pagination on first render

property ui_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

ui_prevPage()#: Navigates to previous page, if available

ui_requestServerInteraction(ui_props=None)#: Trigger a server request (emits ‘request’ event)

ui_resetVirtualScroll()#: Resets the virtual scroll (if using it) computations; Needed for custom edge-cases

property ui_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

property ui_rows#: Rows of data to display

property ui_rows_per_page_label#: Text to override default rows per page label at bottom of table

property ui_rows_per_page_options#: Options for user to pick (Numbers); Number 0 means ‘Show all rows in one page’

ui_scrollTo(ui_index, ui_edge=None)#: Scroll the table to the row with the specified index in page (0 based)

property ui_selected#: Keeps the user selection array

property ui_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

property ui_selection#: Selection type

property ui_separator#: Use a separator/border between rows, columns or all cells

ui_setExpanded(ui_expanded)#: Sets the expanded rows keys array; Especially useful if not using an external ‘expanded’ state otherwise just emits ‘update:expanded’ with the value

ui_setFullscreen()#: Enter the fullscreen view

ui_setPagination(ui_pagination, ui_forceServerRequest=None)#: Unless using an external pagination Object (through ‘v-model:pagination’ prop), you can use this method and force the internal pagination to change

property ui_slot_body#: Slot to define how a body row looks like; Suggestion: QTr + Td

property ui_slot_body_cell#: Slot to define how all body cells look like; Suggestion: QTd

ui_slot_body_cell_name(name, value)#: Slot to define how a specific column cell looks like; replace ‘[name]’ with column name (from columns definition object)

property ui_slot_body_selection#: Slot to define how body selection column looks like; Suggestion: QCheckbox

property ui_slot_bottom#: Slot to define how table bottom looks like

property ui_slot_bottom_row#: Slot to define how bottom extra row looks like

property ui_slot_header#: Slot to define how header looks like; Suggestion: QTr + QTh

property ui_slot_header_cell#: Slot to define how each header cell looks like; Suggestion: QTh

ui_slot_header_cell_name(name, value)#: Slot to define how a specific header cell looks like; replace ‘[name]’ with column name (from columns definition object)

property ui_slot_header_selection#: Slot to define how header selection column looks like (available only for multiple selection mode); Suggestion: QCheckbox

property ui_slot_item#: Slot to use for defining an item when in ‘grid’ mode; Suggestion: QCard

property ui_slot_loading#: Override default effect when table is in loading state; Suggestion: QInnerLoading

property ui_slot_no_data#: Slot to define how the bottom will look like when is nothing to display

property ui_slot_pagination#: Slot to override default pagination label and buttons

property ui_slot_top#: Slot to define how table top looks like

property ui_slot_top_left#: Slot to define how left part of the table top looks like

property ui_slot_top_right#: Slot to define how right part of the table top looks like

property ui_slot_top_row#: Slot to define how top extra row looks like

property ui_slot_top_selection#: Slot to define how top table section looks like when user has selected at least one row

ui_sort(ui_col)#: Trigger a table sort

property ui_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

property ui_table_class#: CSS classes to apply to native HTML <table> element’s wrapper (which is a DIV)

property ui_table_colspan#: The number of columns in the table (you need this if you use table-layout: fixed)

property ui_table_header_class#: CSS classes to apply to header of native HTML <table> (which is a TR)

property ui_table_header_style#: CSS style to apply to header of native HTML <table> (which is a TR)

property ui_table_style#: CSS style to apply to native HTML <table> element’s wrapper (which is a DIV)

property ui_title#: Table title

property ui_title_class#: CSS classes to apply to the title (if using ‘title’ prop)

ui_toggleFullscreen()#: Toggle the view to be fullscreen or not fullscreen

property ui_virtual_scroll#: Display data using QVirtualScroll (for non-grid mode only)

property ui_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; Default value: 48 (24 if dense)

property ui_virtual_scroll_slice_ratio_after#: Ratio of number of rows in visible zone to render after it

property ui_virtual_scroll_slice_ratio_before#: Ratio of number of rows in visible zone to render before it

property ui_virtual_scroll_slice_size#: Minimum number of rows to render in the virtual list

property ui_virtual_scroll_sticky_size_end#: Size in pixels of the sticky footer part (if using one); A correct value will improve scroll precision

property ui_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

property ui_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

property ui_wrap_cells#: Wrap text within table cells

Bases: Component

Quasar Component: QTabs

Parameters:

ui_model_value (float | str | None | Any) – 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
ui_vertical (bool | None) – Use vertical design (tabs one on top of each other rather than one next to the other horizontally)
ui_outside_arrows (bool | None) – Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)
ui_mobile_arrows (bool | None) – Force display of arrows (if needed) on mobile
ui_align (str | None) – Horizontal alignment the tabs within the tabs container
ui_breakpoint (float | str | None) – Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment
ui_active_color (Any | None) – The color to be attributed to the text of the active tab
ui_active_bg_color (Any | None) – The color to be attributed to the background of the active tab
ui_indicator_color (Any | None) – The color to be attributed to the indicator (the underline) of the active tab
ui_content_class (str | None) – Class definitions to be attributed to the content wrapper
ui_active_class (str | None) – The class to be set on the active tab
ui_left_icon (str | None) – 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
ui_right_icon (str | None) – 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
ui_stretch (bool | None) – When used on flexbox parent, tabs will stretch to parent’s height
ui_shrink (bool | None) – 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
ui_switch_indicator (bool | None) – Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode)
ui_narrow_indicator (bool | None) – Allows the indicator to be the same width as the tab’s content (text or icon), instead of the whole width of the tab
ui_inline_label (bool | None) – Allows the text to be inline with the icon, should one be used
ui_no_caps (bool | None) – Turns off capitalizing all letters within the tab (which is the default)
ui_dense (Any | None)

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_active_bg_color#: The color to be attributed to the background of the active tab

property ui_active_class#: The class to be set on the active tab

property ui_active_color#: The color to be attributed to the text of the active tab

property ui_align#: Horizontal alignment the tabs within the tabs container

property ui_breakpoint#: Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment

property ui_content_class#: Class definitions to be attributed to the content wrapper

property ui_indicator_color#: The color to be attributed to the indicator (the underline) of the active tab

property ui_inline_label#: Allows the text to be inline with the icon, should one be used

property ui_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

property ui_mobile_arrows#: Force display of arrows (if needed) on mobile

property ui_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

property ui_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

property ui_no_caps#: Turns off capitalizing all letters within the tab (which is the default)

property ui_outside_arrows#: Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)

property ui_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

property ui_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

property ui_stretch#: When used on flexbox parent, tabs will stretch to parent’s height

property ui_switch_indicator#: Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode)

property ui_vertical#: Use vertical design (tabs one on top of each other rather than one next to the other horizontally)

class ngapp.components.qcomponents.QTd(

*children,

ui_props: dict | None = None,

ui_auto_width: bool | None = None,

ui_no_hover: bool | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QTd

Parameters:

ui_props (dict | None) – QTable’s column scoped slot property
ui_auto_width (bool | None) – Tries to shrink column width size; Useful for columns with a checkbox/radio/toggle
ui_no_hover (bool | None) – Disable hover effect

property ui_auto_width#: Tries to shrink column width size; Useful for columns with a checkbox/radio/toggle

property ui_no_hover#: Disable hover effect

property ui_props#: QTable’s column scoped slot property

class ngapp.components.qcomponents.QTh(

*children,

ui_props: dict | None = None,

ui_auto_width: bool | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QTh

Parameters:

ui_props (dict | None) – QTable’s header column scoped slot property
ui_auto_width (bool | None) – Tries to shrink header column width size; Useful for columns with a checkbox/radio/toggle

on_click(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_auto_width#: Tries to shrink header column width size; Useful for columns with a checkbox/radio/toggle

property ui_props#: QTable’s header column scoped slot property

Bases: Component

Quasar Component: QTime

Parameters:

ui_model_value (str | None | Any) – Time of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive
ui_format24h (bool | None) – Forces 24 hour time display instead of AM/PM system; If prop is not set, then the default is based on Quasar lang language being used
ui_default_date (str | None) – The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)
ui_mask (str | None) – Mask (formatting string) used for parsing and formatting value
ui_options (Callable | None) – 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
ui_hour_options (list | None) – Optionally configure what hours is the user allowed to set; Overrides ‘options’ prop if that is also set
ui_minute_options (list | None) – Optionally configure what minutes is the user allowed to set; Overrides ‘options’ prop if that is also set
ui_second_options (list | None) – Optionally configure what seconds is the user allowed to set; Overrides ‘options’ prop if that is also set
ui_with_seconds (bool | None) – Allow the time to be set with seconds
ui_now_btn (bool | None) – Display a button that selects the current time
ui_landscape (bool | None) – Display the component in landscape mode
ui_locale (dict | None) – Locale formatting options
ui_calendar (str | None) – Specify calendar type
ui_color (Any | None)
ui_text_color (Any | None)
ui_dark (Any | None)
ui_square (Any | None)
ui_flat (Any | None)
ui_bordered (Any | None)
ui_readonly (Any | None)
ui_disable (Any | None)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_update_model_value(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_calendar#: Specify calendar type

property ui_default_date#: The default date to use (in YYYY/MM/DD format) when model is unfilled (undefined or null)

property ui_format24h#: Forces 24 hour time display instead of AM/PM system; If prop is not set, then the default is based on Quasar lang language being used

property ui_hour_options#: Optionally configure what hours is the user allowed to set; Overrides ‘options’ prop if that is also set

property ui_landscape#: Display the component in landscape mode

property ui_locale#: Locale formatting options

property ui_mask#: Mask (formatting string) used for parsing and formatting value

property ui_minute_options#: Optionally configure what minutes is the user allowed to set; Overrides ‘options’ prop if that is also set

property ui_model_value#: Time of the component; Either use this property (along with a listener for ‘update:modelValue’ event) OR use v-model directive

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_now_btn#: Display a button that selects the current time

property ui_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

property ui_second_options#: Optionally configure what seconds is the user allowed to set; Overrides ‘options’ prop if that is also set

ui_setNow()#: Change model to current moment

property ui_with_seconds#: Allow the time to be set with seconds

class ngapp.components.qcomponents.QTimeline(

*children,

ui_color: Any | None = None,

ui_side: str | None = None,

ui_layout: str | None = None,

ui_dark: Any | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QTimeline

Parameters:

ui_color (Any | None)
ui_side (str | None) – Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by QTimelineEntry side prop
ui_layout (str | None) – 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.
ui_dark (Any | None)

property ui_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.

property ui_side#: Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by QTimelineEntry side prop

Bases: Component

Quasar Component: QTimelineEntry

Parameters:

ui_heading (bool | None) – Defines a heading timeline item
ui_tag (Any | None) – Tag to use, if of type ‘heading’ only
ui_side (str | None) – Side to place the timeline entry; Works only if QTimeline layout is loose.
ui_icon (Any | None)
ui_avatar (str | None) – URL to the avatar image; Icon takes precedence if used, so it replaces avatar
ui_color (Any | None)
ui_title (str | None) – Title of timeline entry; Is overridden if using ‘title’ slot
ui_subtitle (str | None) – Subtitle of timeline entry; Is overridden if using ‘subtitle’ slot
ui_body (str | None) – Body content of timeline entry; Use this prop or the default slot

property ui_avatar#: URL to the avatar image; Icon takes precedence if used, so it replaces avatar

property ui_body#: Body content of timeline entry; Use this prop or the default slot

property ui_heading#: Defines a heading timeline item

property ui_side#: Side to place the timeline entry; Works only if QTimeline layout is loose.

property ui_slot_subtitle#: Optional slot for subtitle; When used, it overrides ‘subtitle’ prop

property ui_slot_title#: Optional slot for title; When used, it overrides ‘title’ prop

property ui_subtitle#: Subtitle of timeline entry; Is overridden if using ‘subtitle’ slot

property ui_tag#: Tag to use, if of type ‘heading’ only

property ui_title#: Title of timeline entry; Is overridden if using ‘title’ slot

Bases: Component

Quasar Component: QToggle

Parameters:

ui_icon (Any | None)
ui_checked_icon (str | None) – The icon to be used when the toggle is on
ui_unchecked_icon (str | None) – The icon to be used when the toggle is off
ui_indeterminate_icon (str | None) – The icon to be used when the model is indeterminate
ui_icon_color (Any | None) – Override default icon color (for truthy state only); Color name for component from the Quasar Color Palette
ui_model_value (Any | list | None)
ui_val (Any | None) – Works when model (‘value’) is Array. It tells the component which value should add/remove when ticked/unticked
ui_true_value (Any | None) – What model value should be considered as checked/ticked/on?
ui_false_value (Any | None) – What model value should be considered as unchecked/unticked/off?
ui_indeterminate_value (Any | None) – What model value should be considered as ‘indeterminate’?
ui_toggle_order (str | None) – 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 -> …
ui_toggle_indeterminate (bool | None) – When user clicks/taps on the component, should we toggle through the indeterminate state too?
ui_label (str | None) – Label to display along the component (or use the default slot instead of this prop)
ui_left_label (bool | None) – Label (if any specified) should be displayed on the left side of the component
ui_color (Any | None)
ui_keep_color (bool | None) – Should the color (if specified any) be kept when the component is unticked/ off?
ui_dark (Any | None)
ui_dense (Any | None)
ui_disable (Any | None)
ui_tabindex (Any | None)
ui_size (str | None) – Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
ui_name (str | None) – Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when the component needs to change the model; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_checked_icon#: The icon to be used when the toggle is on

property ui_false_value#: What model value should be considered as unchecked/unticked/off?

property ui_icon_color#: Override default icon color (for truthy state only); Color name for component from the Quasar Color Palette

property ui_indeterminate_icon#: The icon to be used when the model is indeterminate

property ui_indeterminate_value#: What model value should be considered as ‘indeterminate’?

property ui_keep_color#: Should the color (if specified any) be kept when the component is unticked/ off?

property ui_label#: Label to display along the component (or use the default slot instead of this prop)

property ui_left_label#: Label (if any specified) should be displayed on the left side of the component

property ui_name#: Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

property ui_size#: Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)

ui_toggle()#: Toggle the state (of the model)

property ui_toggle_indeterminate#: When user clicks/taps on the component, should we toggle through the indeterminate state too?

property ui_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 -> …

property ui_true_value#: What model value should be considered as checked/ticked/on?

property ui_unchecked_icon#: The icon to be used when the toggle is off

property ui_val#: Works when model (‘value’) is Array. It tells the component which value should add/remove when ticked/unticked

class ngapp.components.qcomponents.QToolbar(*children, ui_inset: bool | None = None, **kwargs)#

Bases: Component

Quasar Component: QToolbar

Parameters:: ui_inset (bool | None) – Apply an inset to content (useful for subsequent toolbars)

property ui_inset#: Apply an inset to content (useful for subsequent toolbars)

class ngapp.components.qcomponents.QToolbarTitle(*children, ui_shrink: bool | None = None, **kwargs)#

Bases: Component

Quasar Component: QToolbarTitle

Parameters:: ui_shrink (bool | None) – By default, QToolbarTitle is set to grow to the available space. However, you can reverse that with this prop

property ui_shrink#: By default, QToolbarTitle is set to grow to the available space. However, you can reverse that with this prop

Bases: Component

Quasar Component: QTooltip

Parameters:

ui_max_height (str | None) – The maximum height of the Tooltip; Size in CSS units, including unit name
ui_max_width (str | None) – The maximum width of the Tooltip; Size in CSS units, including unit name
ui_transition_show (Any | None)
ui_transition_hide (Any | None)
ui_anchor (str | None) – Two values setting the starting position or anchor point of the Tooltip relative to its target
ui_self (str | None) – Two values setting the Tooltip’s own position relative to its target
ui_offset (list | None) – An array of two numbers to offset the Tooltip horizontally and vertically in pixels
ui_scroll_target (Any | None)
ui_delay (float | None) – Configure Tooltip to appear with delay
ui_hide_delay (float | None) – Configure Tooltip to disappear with delay
ui_persistent (bool | None) – Prevents Tooltip from auto-closing when app’s route changes
ui_model_value (bool | None) – 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
ui_target (bool | str | Any | None) – 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)
ui_no_parent_event (bool | None) – Skips attaching events to the target DOM element (that trigger the element to get shown)
ui_transition_duration (str | float | None) – Transition duration (in milliseconds, without unit)

on_before_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_before_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_model_value(handler: Callable, arg: object = None)#

Emitted when showing/hidden state changes; Is also used by v-model

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_anchor#: Two values setting the starting position or anchor point of the Tooltip relative to its target

property ui_delay#: Configure Tooltip to appear with delay

property ui_hide_delay#: Configure Tooltip to disappear with delay

property ui_max_height#: The maximum height of the Tooltip; Size in CSS units, including unit name

property ui_max_width#: The maximum width of the Tooltip; Size in CSS units, including unit name

property ui_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

property ui_no_parent_event#: Skips attaching events to the target DOM element (that trigger the element to get shown)

property ui_offset#: An array of two numbers to offset the Tooltip horizontally and vertically in pixels

property ui_persistent#: Prevents Tooltip from auto-closing when app’s route changes

property ui_self#: Two values setting the Tooltip’s own position relative to its target

property ui_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)

property ui_transition_duration#: Transition duration (in milliseconds, without unit)

ui_updatePosition()#: There are some custom scenarios for which Quasar cannot automatically reposition the tooltip without significant performance drawbacks so the optimal solution is for you to call this method when you need it

class ngapp.components.qcomponents.QTr(

*children,

ui_props: dict | None = None,

ui_no_hover: bool | None = None,

**kwargs,

)#

Bases: Component

Quasar Component: QTr

Parameters:

ui_props (dict | None) – QTable’s row scoped slot property
ui_no_hover (bool | None) – Disable hover effect

property ui_no_hover#: Disable hover effect

property ui_props#: QTable’s row scoped slot property

Bases: Component

Quasar Component: QTree

Parameters:

ui_nodes (list | None) – The array of nodes that designates the tree structure
ui_node_key (str | None) – The property name of each node object that holds a unique node id
ui_label_key (str | None) – The property name of each node object that holds the label of the node
ui_children_key (str | None) – The property name of each node object that holds the list of children of the node
ui_no_connectors (bool | None) – Do not display the connector lines between nodes
ui_color (Any | None)
ui_control_color (Any | None) – Color name for controls (like checkboxes) from the Quasar Color Palette
ui_text_color (Any | None)
ui_selected_color (Any | None) – Color name for selected nodes (from the Quasar Color Palette)
ui_dense (Any | None)
ui_dark (Any | None)
ui_icon (Any | None)
ui_tick_strategy (str | None) – The type of strategy to use for the selection of the nodes
ui_ticked (list | None) – Keys of nodes that are ticked
ui_expanded (list | None) – Keys of nodes that are expanded
ui_selected (Any | None) – Key of node currently selected
ui_no_selection_unset (bool | None) – Do not allow un-selection when clicking currently selected node
ui_default_expand_all (bool | None) – Allow the tree to have all its branches expanded, when first rendered
ui_accordion (bool | None) – Allows the tree to be set in accordion mode
ui_no_transition (bool | None) – Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees
ui_filter (str | None) – The text value to be used for filtering nodes
ui_filter_method (Callable | None) – The function to use to filter the tree nodes; For best performance, reference it from your scope and do not define it inline
ui_duration (float | None) – Toggle animation duration (in milliseconds)
ui_no_nodes_label (str | None) – Override default such label for when no nodes are available
ui_no_results_label (str | None) – Override default such label for when no nodes are available due to filtering

on_after_hide(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_after_show(handler: Callable, arg: object = None)#

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_lazy_load(handler: Callable, arg: object = None)#

Emitted when the lazy loading of nodes is finished

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_expanded(handler: Callable, arg: object = None)#

Triggered when nodes are expanded or collapsed; Used by Vue on ‘v-model:update’ to update its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_selected(handler: Callable, arg: object = None)#

Emitted when selected node changes; Used by Vue on ‘v-model:selected’ to update its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_update_ticked(handler: Callable, arg: object = None)#

Emitted when nodes are ticked/unticked via the checkbox; Used by Vue on ‘v-model:ticked’ to update its value

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_accordion#: Allows the tree to be set in accordion mode

property ui_children_key#: The property name of each node object that holds the list of children of the node

ui_collapseAll()#: Use to collapse all branches of the tree

property ui_control_color#: Color name for controls (like checkboxes) from the Quasar Color Palette

property ui_default_expand_all#: Allow the tree to have all its branches expanded, when first rendered

property ui_duration#: Toggle animation duration (in milliseconds)

ui_expandAll()#: Use to expand all branches of the tree

property ui_expanded#: Keys of nodes that are expanded

property ui_filter#: The text value to be used for filtering nodes

property ui_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

ui_getExpandedNodes()#: Get array of nodes that are expanded

ui_getNodeByKey(ui_key)#: Get the node with the given key

ui_getTickedNodes()#: Get array of nodes that are ticked

ui_isExpanded(ui_key)#: Determine if a node is expanded

ui_isTicked(ui_key)#: Method to check if a node’s checkbox is selected or not

property ui_label_key#: The property name of each node object that holds the label of the node

property ui_no_connectors#: Do not display the connector lines between nodes

property ui_no_nodes_label#: Override default such label for when no nodes are available

property ui_no_results_label#: Override default such label for when no nodes are available due to filtering

property ui_no_selection_unset#: Do not allow un-selection when clicking currently selected node

property ui_no_transition#: Turn off transition effects when expanding/collapsing nodes; Also enhances perf by a lot as a side-effect; Recommended for big trees

property ui_node_key#: The property name of each node object that holds a unique node id

property ui_nodes#: The array of nodes that designates the tree structure

property ui_selected#: Key of node currently selected

property ui_selected_color#: Color name for selected nodes (from the Quasar Color Palette)

ui_setExpanded(ui_key, ui_state)#: Expands the tree at the point of the node with the key given

ui_setTicked(ui_keys, ui_state)#: Method to set a node’s checkbox programmatically

ui_slot_body_name(name, value)#: Body template slot for describing node body; Used by nodes which have their ‘body’ prop set to ‘[name]’, where ‘[name]’ can be any string

property ui_slot_default_body#: Slot to use for defining the body of a node

property ui_slot_default_header#: Slot to use for defining the header of a node

ui_slot_header_name(name, value)#: Header template slot for describing node header; Used by nodes which have their ‘header’ prop set to ‘[name]’, where ‘[name]’ can be any string

property ui_tick_strategy#: The type of strategy to use for the selection of the nodes

property ui_ticked#: Keys of nodes that are ticked

Bases: Component

Quasar Component: QUploader

Parameters:

ui_label (str | None) – Label for the uploader
ui_color (Any | None)
ui_text_color (Any | None)
ui_dark (Any | None)
ui_square (Any | None)
ui_flat (Any | None)
ui_bordered (Any | None)
ui_no_thumbnails (bool | None) – Don’t display thumbnails for image files
ui_auto_upload (bool | None) – Upload files immediately when added
ui_hide_upload_btn (bool | None) – Don’t show the upload button
ui_thumbnail_fit (str | None) – How the thumbnail image will fit into the container; Equivalent of the background-size prop
ui_disable (Any | None)
ui_readonly (Any | None)
ui_multiple (bool | None) – Allow multiple file uploads
ui_accept (str | None) – Comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element
ui_capture (str | None) – 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
ui_max_file_size (float | str | None) – Maximum size of individual file in bytes
ui_max_total_size (float | str | None) – Maximum size of all files combined in bytes
ui_max_files (float | str | None) – Maximum number of files to contain
ui_filter (Callable | None) – 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
ui_factory (Callable | None) – 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
ui_url (str | Callable | None) – 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
ui_method (str | Callable | None) – 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
ui_field_name (str | Callable | None) – 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
ui_headers (list | Callable | None) – 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
ui_form_fields (list | Callable | None) – 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
ui_with_credentials (bool | Callable | None) – 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
ui_send_raw (bool | Callable | None) – 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
ui_batch (bool | Callable | None) – 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

on_added(handler: Callable, arg: object = None)#

Emitted when files are added into the list

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_factory_failed(handler: Callable, arg: object = None)#

Emitted when factory function is supplied with a Promise which is rejected

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_failed(handler: Callable, arg: object = None)#

Emitted when file or batch of files has encountered error while uploading

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_finish(handler: Callable, arg: object = None)#

Finished working (regardless of success or fail)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_rejected(handler: Callable, arg: object = None)#

Emitted after files are picked and some do not pass the validation props (accept, max-file-size, max-total-size, filter, etc)

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_removed(handler: Callable, arg: object = None)#

Emitted when files are removed from the list

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_start(handler: Callable, arg: object = None)#

Started working

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_uploaded(handler: Callable, arg: object = None)#

Emitted when file or batch of files is uploaded

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

on_uploading(handler: Callable, arg: object = None)#

Emitted when file or batch of files started uploading

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

ui_abort()#: Abort upload of all files (same as clicking the abort button)

property ui_accept#: Comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element

ui_addFiles(ui_files)#: Add files programmatically

property ui_auto_upload#: Upload files immediately when added

property ui_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

property ui_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

property ui_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

property ui_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

property ui_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

property ui_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

property ui_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

property ui_hide_upload_btn#: Don’t show the upload button

ui_isAlive()#: Is the component alive (activated but not unmounted); Useful to determine if you still need to compute anything going further

property ui_label#: Label for the uploader

property ui_max_file_size#: Maximum size of individual file in bytes

property ui_max_files#: Maximum number of files to contain

property ui_max_total_size#: Maximum size of all files combined in bytes

property ui_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

property ui_multiple#: Allow multiple file uploads

property ui_no_thumbnails#: Don’t display thumbnails for image files

ui_pickFiles(ui_evt)#: Trigger file pick; Must be called as a direct consequence of user interaction (eg. in a click handler), due to browsers security policy

ui_removeFile(ui_file)#: Remove specified file from the queue

ui_removeQueuedFiles()#: Remove files that are waiting for upload to start (same as clicking the left clear button)

ui_removeUploadedFiles()#: Removes already uploaded files from the list

ui_reset()#: Resets uploader to default; Empties queue, aborts current uploads

property ui_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

property ui_slot_header#: Slot for custom header; Scope is the QUploader instance itself

property ui_slot_list#: Slot for custom list; Scope is the QUploader instance itself

property ui_thumbnail_fit#: How the thumbnail image will fit into the container; Equivalent of the background-size prop

ui_updateFileStatus(ui_file, ui_status, ui_uploadedSize)#: Update the status of a file

ui_upload()#: Start uploading (same as clicking the upload button)

property ui_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

property ui_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

class ngapp.components.qcomponents.QUploaderAddTrigger(*children, **kwargs)#

Bases: Component

Quasar Component: QUploaderAddTrigger

Bases: Component

Quasar Component: QVideo

Parameters:

ui_src (str | None) – The source url to display in an iframe
ui_title (str | None) – (Accessibility) Set the native ‘title’ attribute value of the inner iframe being used
ui_fetchpriority (str | None) – Provides a hint of the relative priority to use when fetching the iframe document
ui_loading (str | None) – Indicates how the browser should load the iframe
ui_referrerpolicy (str | None) – Indicates which referrer to send when fetching the frame’s resource
ui_ratio (str | float | None) – 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’)

property ui_fetchpriority#: Provides a hint of the relative priority to use when fetching the iframe document

property ui_loading#: Indicates how the browser should load the iframe

property ui_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’)

property ui_referrerpolicy#: Indicates which referrer to send when fetching the frame’s resource

property ui_src#: The source url to display in an iframe

property ui_title#: (Accessibility) Set the native ‘title’ attribute value of the inner iframe being used

Bases: Component

Quasar Component: QVirtualScroll

Parameters:

ui_type (str | None) – The type of content: list (default) or table
ui_items (list | None) – 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
ui_items_size (float | None) – Number of available items in the list; Required and used only if ‘itemsFn’ is provided
ui_items_fn (Callable | None) – 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
ui_scroll_target (Any | None)
ui_virtual_scroll_horizontal (bool | None) – Make virtual list work in horizontal mode
ui_virtual_scroll_slice_size (float | str | None) – Minimum number of items to render in the virtual list
ui_virtual_scroll_slice_ratio_before (float | str | None) – Ratio of number of items in visible zone to render before it
ui_virtual_scroll_slice_ratio_after (float | str | None) – Ratio of number of items in visible zone to render after it
ui_virtual_scroll_item_size (float | str | None) – 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
ui_virtual_scroll_sticky_size_start (float | str | None) – 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
ui_virtual_scroll_sticky_size_end (float | str | None) – 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
ui_table_colspan (float | str | None) – The number of columns in the table (you need this if you use table-layout: fixed)

on_virtual_scroll(handler: Callable, arg: object = None)#

Emitted when the virtual scroll occurs

Parameters:

handler (Callable) – Function to be called on emit event
arg (object) – Additional argument to be passed to the handler

property ui_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

property ui_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

property ui_items_size#: Number of available items in the list; Required and used only if ‘itemsFn’ is provided

ui_refresh(ui_index=None)#: Refreshes the virtual scroll list; Use it after appending items

ui_reset()#: Resets the virtual scroll computations; Needed for custom edge-cases

ui_scrollTo(ui_index, ui_edge=None)#: Scroll the virtual scroll list to the item with the specified index (0 based)

property ui_slot_after#: Template slot for the elements that should be rendered after the list; Suggestion: tfoot after a table

property ui_slot_before#: Template slot for the elements that should be rendered before the list; Suggestion: thead before a table

property ui_table_colspan#: The number of columns in the table (you need this if you use table-layout: fixed)

property ui_type#: The type of content: list (default) or table

property ui_virtual_scroll_horizontal#: Make virtual list work in horizontal mode

property ui_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

property ui_virtual_scroll_slice_ratio_after#: Ratio of number of items in visible zone to render after it

property ui_virtual_scroll_slice_ratio_before#: Ratio of number of items in visible zone to render before it

property ui_virtual_scroll_slice_size#: Minimum number of items to render in the virtual list

property ui_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

property ui_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

QComponents#

This Page