StippleUI API

floating::Bool - Tell badge if it should float to the top right side of the relative positioned parent element or not

transparent::Bool - Applies a 0.8 opacity; Useful especially for floating badge

multiline::Bool - Content can wrap to multiple lines

label::Union{String, Int} - Badge’s content as string; overrides default slot if specified ex. "John Doe" 22

align::String - Sets vertical-align CSS attribute

outline::Bool - Use 'outline' design (colored text and borders only)

color::String - Color name for component from the Color Palette ex. "primary" "teal-10"

textcolor::String - Overrides text color (if needed); Color name from the Color Palette ex. "primary" "teal-10"

rounded::Bool - Makes a rounded shaped badge

inlineactions::Bool - Display actions on same row as content

dense::Bool - Dense mode; occupies less space

rounded::Bool - Applies a small standard border-radius for a squared shape of the component

dark::Bool - Notify the component that the background is a dark color

loading::Bool - Put button into loading state (displays a spinner — can be overridden by using a 'loading' slot)

percentage::Union{Int, Float64} - Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background ex. 23

darkpercentage::Bool - Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props

label::Union{String, Int} - The text that will be shown on the button ex. Button Label

icon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png

iconright::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png

nocaps::Bool - Avoid turning label text into caps (which happens by default)

nowrap::Bool - Avoid label text wrapping

align::String - Label or content alignment default. center accepted values. left right center around between evenly

stack::Bool - Stack icon and label vertically instead of on same line (like it is by default)

stretch::Bool - When used on flexbox parent, button will stretch to parent’s height

type::String - 1) Define the button native type attribute (submit, reset, button) or 2) render component with tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag default. button ex. a submit reset button image/png href="https://some-site.net" target="_blank"

tabindex::Union{Int, String} - Tabindex HTML attribute value

href::String - Native link href attribute; Has priority over the 'to' and 'replace' props ex. https://quasar.dev href="https://quasar.dev" target="_blank"

target::String - Native link target attribute; Use it only with 'to' or 'href' props ex. _blank _self _parent _top

loading::Bool - Put button into loading state (displays a spinner — can be overridden by using a 'loading' slot)

disable::Bool - Put component in disabled mode

size::String - Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. 16px 2rem xs md

ripple::Union{Bool, Dict} - Configure material ripple (disable it by setting it to 'false' or supply a config object) default. true ex. false { "early" => true, "center" => true, "color" => "teal", "keyCodes" => [] }

outline::Bool - Use outline design

flat::Bool - Use flat design

unelevated::Bool - Remove shadow

rounded::Bool - Applies a more prominent border-radius for a squared shape button

push::Bool - Use 'push' design

glossy::Bool - Applies a glossy effect

fab::Bool - Makes button size and shape to fit a Floating Action Button

fabmini::Bool - Makes button size and shape to fit a small Floating Action Button

padding::String - Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set

color::String - Color name for component from the Color Palette eg. primary teal-10

textcolor::String - Overrides text color (if needed); Color name from the Color Palette eg. primary teal-10

dense::Bool - Dense mode; occupies less space

round::Bool - Makes a circle shaped button

loading::Bool - Put button into loading state (displays a spinner — can be overridden by using a 'loading' slot)

split::Bool - Split dropdown icon into its own button

disablemainbtn::Bool - Disable main button (useful along with 'split' prop)

disabledropdown::Bool - Disables dropdown (dropdown button if using along 'split' prop)

persistent::Bool - Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key

autoclose::Bool - 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

label::Union{String, Int} - The text that will be shown on the button ex. "Button Label"

icon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"

iconright::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"

nocaps::Bool - Avoid turning label text into caps (which happens by default)

nowrap::Bool - Avoid label text wrapping

align::String - Label or content alignment default. center ex. "left" "right" "center" "around" "between" "evenly"

stack::Bool - Stack icon and label vertically instead of on same line (like it is by default)

stretch::Bool - When used on flexbox parent, button will stretch to parent’s height

split::Bool - Split dropdown icon into its own button

dropdownicon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"

type::String - 1) Define the button native type attribute (submit, reset, button) or 2) render component with tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag default. "button" ex. "a" "submit" "reset" "button" "image/png" href="https://some-site.net" target="_blank"

tabindex::Union{Int, String} - Tabindex HTML attribute value ex. 0 100

href::String - Native link href attribute; Has priority over the 'to' and 'replace' props ex. "https://quasar.dev" href="https://quasar.dev" target="_blank"

target::String - Native link target attribute; Use it only with 'to' or 'href' props ex. "_blank" "_self" "_parent" "_top"

cover::Bool - Allows the menu to cover the button. When used, the 'menu-self' and 'menu-fit' props are no longer effective

menuanchor::String - Two values setting the starting position or anchor point of the menu relative to its target default. "bottom end" ex. "top start" "bottom start" "top end" "bottom end" "right start" "right end" "left start" "left end"

menuself::String - Two values setting the menu’s own position relative to its target default. "top end" ex. "top start" "bottom start" "top end" "bottom end" "right start" "right end" "left start" "left end"

menuoffset::Vector - An array of two numbers to offset the menu horizontally and vertically in pixels ex. [8,8] [5,10]

loading::Bool - Put button into loading state (displays a spinner — can be overridden by using a 'loading' slot)

disable::Bool - Put compontent in disabled state

size::String - Size in CSS units or percentage, ex. "25px" "2.5em" "md" "xs"

ripple::Union{Bool, Dict} - Configure material ripple (disable it by setting it to 'false' or supply a config object) default. true ex. false { "early" => true, "center" => true, "color" => "teal", "keyCodes" => []}

outline::Bool - Use 'outline' design

flat::Bool - Use 'flat' design

unelevated::Bool - Remove shadow

rounded::Bool - Applies a more prominent border-radius for a squared shape button

push::Bool - Use 'push' design

glossy::Bool - Applies a glossy effect

fab::Bool - Makes button size and shape to fit a Floating Action Button

fabmini::Bool - Makes button size and shape to fit a Floating Action Button Mini

padding::String - 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 ex. "16px","2rem" ,"xs" ,"md lg" ,"2px 2px 5px 7px"

color::String - Color name for component from the Quasar Color Palette ex. "primary" "teal-10"

textcolor::String - Overrides text color (if needed); Color name from the Quasar Color Palette ex. "white" "primary" "teal-10"

dense::Bool - Dense mode; occupies less space

noiconanimation::Bool - Disables the rotation of the dropdown icon when state is toggled

contentstyle::Union{Vector, String, Dict} - Style definitions to be attributed to the menu ex. {"background-color" => "#ff0000"} contentclass!="{ 'my-special-class': <condition> }"

contentclass::Union{Vector, String, Dict} - Class definitions to be attributed to the menu ex. "my-special-class" contentclass!="{ 'my-special-class': <condition> }"

spread::Bool - Spread horizontally to all available space

stretch::Bool - When used on flexbox parent, buttons will stretch to parent’s height

outline::Bool - Use 'outline' design for buttons

flat::Bool - Use 'flat' design for buttons

unelevated::Bool - Remove shadow from buttons

rounded::Bool - Applies a more prominent border-radius for squared shape buttons

push::Bool - Use 'push' design for buttons

glossy::Bool - Applies a glossy effect

name::String - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL

indeterminatevalue::Union{String, Float64, Int, Bool} - What model value should be considered as 'indeterminate'?

toggleorder::String - 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 -> …​ ex. "tf" "ft"

toggleindeterminate::Bool - When user clicks/taps on the component, should we toggle through the indeterminate state too?

keepcolor::Bool - Should the color (if specified any) be kept when the component is unticked/ off?

tabindex::Union{Int, String} - Tabindex HTML attribute value

label::Union{String,Symbol} - Label to display along the component

leftlabel::Bool - Label (if any specified) should be displayed on the left side of the component

fieldname::Symbol - Model of the component

val::Union{String, Float64, Int, Bool} - Works when model ('value') is Array. It tells the component which value should add/remove when ticked/unticked

truevalue::Union{Int, Float64, String} - What model value should be considered as checked/ticked/on?

falsevalue::Union{Int, Float64, String} - What model value should be considered as unchecked/unticked/off?

disable::Bool - Put component in disabled mode

size::String- Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. "16px" "2rem" "xs" "md"

color::String - Color name for component from the Color Palette eg. "primary" "teal-10"

dark::Bool - Notify the component that the background is a dark color

dense::Bool - Dense mode; occupies less space

icon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"

iconright::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"

iconremove::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"

iconselected::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"

label::Union{String, Int} - Chip’s content as string; overrides default slot if specified ex. "Joe Doe" "Book"

tabindex::Union{Int, String} - Tabindex HTML attribute value ex. 0 100

value::Bool - Model of the component determining if chip should be rendered or not default. true

selected::Bool - Model for chip if it’s selected or not NOTE. ".sync" modifier required!

clickable::Bool - Is chip clickable? If it’s the case, then it will add hover effects and emit 'click' events

removable::Bool - Is chip removable? If it’s the case, then it will add a close button and emit 'remove' events

disable::Bool - Put component in disabled mode

ripple::Union{Bool, Dict} - Configure material ripple (disable it by setting it to 'false' or supply a config object) default. true ex. false { early: true, center: true, color: 'teal', keyCodes: [] }

dense::Bool - Dense mode; occupies less space

size::String - chip size name or a CSS unit including unit name ex. "xs" "sm" "md" "lg" "xl" "1rem"

dark::Bool - Notify the component that the background is a dark color

color::String - Color name for component from the Color Palette eg. "primary" "teal-10"

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

outline::Bool - Display using the 'outline' design

name::String - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. "car_id"

landscape::Bool - Display the component in landscape mode

yearsinmonthview::Bool - Show the years selector in months view

title::String - When specified, it overrides the default header title; Makes sense when not in 'minimal' mode ex. "Birthday"

subtitle::String - When specified, it overrides the default header subtitle; Makes sense when not in 'minimal' mode ex. "John Doe"

todaybtn::Bool - Display a button that selects the current day

minimal::Bool - Don’t display the header

navminyearmonth::String - 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 ex. "2020/07"

navmaxyearmonth::String - 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 ex. "2020/10"

nounset::Bool - Remove ability to unselect a date; It does not apply to selecting a range over already selected dates

multiple::Bool - Allow multiple selection; Model must be Array

range::Bool - Allow range selection; Partial compatibility with 'options' prop: selected ranges might also include 'unselectable' days

readonly::Bool - Put component in readonly mode

disable::Bool - Put component in disabled mode

color::String - Color name for component from the Quasar Color Palette ex. "primary" "teal-10"

textcolor::String - Overrides text color (if needed); Color name from the Quasar Color Palette ex. "primary" "teal-10"

dark::Bool - Notify the component that the background is a dark color

square::Bool - Removes border-radius so borders are squared

flat::Bool - Applies a 'flat' design (no default shadow)

bordered::Bool - Applies a default border to the component

eventcolor::String - 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 ex. "teal-10" eventcolor!="(date) => date[9] % 2 === 0 ? 'teal' : 'orange'"

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

noesc::Bool - User cannot dismiss Dialog by hitting ESC key; No need to set it if 'persistent' property is also set

nobackdrop::Bool - User cannot dismiss Dialog by clicking outside of it; No need to set it if 'persistent' property is also set

autoclose::Bool - Any click/tap inside of the dialog will close it

transitionshow::String - One of the embedded transitions eg. "fade", "slide-down"

transitionhide::String - One of the embedded transitions eg. "fade", "slide-down"

norefocus::Bool - (Accessibility) When Dialog gets hidden, do not refocus on the DOM element that previously had focus

nofocus::Bool - (Accessibility) When Dialog gets shown, do not switch focus on it

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

maximized::Bool - Put Dialog into maximized mode

fullwidth::Bool - Dialog will try to render with same width as the window

fullheight::Bool - Dialog will try to render with same height as the window

position::String - Stick dialog to one of the sides ("top", "right", "bottom" or "left")

contentclass::Union{Array, String} - Class definitions to be attributed to the content eg. "my-special-class" :content-class="{ 'my-special-class': <condition> }"

contentstyle::Union{Array, String} - Style definitions to be attributed to the content eg. "background-color: #ff0000" :content-style="{ color: '#ff0000' }"

square::Bool - Forces content to have squared borders

fullscreen::Bool - Fullscreen mode (Note".sync" modifier required!) Example. :fullscreen.sync="isFullscreen"

noroutefullscreenexit::Bool - Changing route app won’t exit fullscreen

paragraphtag::String - Paragraph tag to be used Example. div, p

placeholder::String - Text to display as placeholder ex. Type your story here...

value::String [required!] - Reactive Model of the component

readonly::Bool - Put component to readonly mode

disable::Bool - Disable component

tag::String - HTML tag to render, unless no icon is supplied or it’s an svg icon ex. div i

left::Bool - Useful if icon is on the left side of something: applies a standard margin on the right side of Icon

right::Bool - Useful if icon is on the right side of something: applies a standard margin on the left side of Icon

name::String - Icon name; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png

size::String - Size in CSS units, including unit name or standard size name 16px 2rem xs md

color::String - Color name for component from the Color Palette eg. primary teal-10

color::String - Color name for component from the Color Palette eg. primary teal-10

imgclass::Union{Vector, String, Dict} - Class definitions to be attributed to the container of image; Does not apply to the caption ex. my-special-class imgclass!="{ 'my-special-class': <condition> }"

imgstyle::Dict - Apply CSS to the container of the image; Does not apply to the caption ex. imgstyle!="{ transform: 'rotate(45deg)' }"

spinnercolor::String - Color name for default Spinner (unless using a 'loading' slot) primary teal-10

spinnersize::String - Size in CSS units, including unit name, for default Spinner (unless using a 'loading' slot) ex. 16px 2rem

tag::String - HTML tag to render; Suggestion: use 'label' when encapsulating a checkbox/radio/toggle so that when user clicks/taps on the whole item it will trigger a model change for the mentioned components ex. a label div

insetlevel::Int - 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 ex. insetlevel!="1"

tabindex::Union{Int, String} - Tabindex HTML attribute value ex. 0 100

href::String - Native link href attribute; Has priority over the 'to'/'exact'/'replace' props ex. http://genieframework.com

target::String - Native link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace' props _blank _self _parent _top

disable::Bool - Put component in disabled mode

active::Bool - Put item into 'active' state

clickable::Bool - Is item clickable? If it’s the case, then it will add hover effects and emit 'click' events

manualfocus::Bool - Put item into a manual focus state; Enables 'focused' prop which will determine if item is focused or not, rather than relying on native hover/focus states

focused::Bool - Determines focus state, ONLY if 'manual-focus' is enabled / set to true

dark::Bool - Notify the component that the background is a dark color

dense::Bool - Dense mode; occupies less space

lines::Union{Int, String} - Apply ellipsis when there’s not enough space to render on the specified number of lines; ex. 1 3 lines!="2"

overline::Bool - Renders an overline label

caption::Bool - Renders a caption label

header::Bool - Renders a header label

lines::Union{Int, String} - Apply ellipsis when there’s not enough space to render on the specified number of lines; 1 3 lines!="2"

separator::Bool - Applies a separator between contained items

padding:Bool - Applies a material design-like padding on top and bottom

bordered::Bool - Applies a default border to the component

dense::Bool - Dense mode; occupies less space

dark::Bool - Notify the component that the background is a dark color

target::Union{Bool, String} - 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) default value. true ex. target!=false target!=".my-parent"

noparentevent::Bool - Skips attaching events to the target DOM element (that trigger the element to get shown)

contextmenu::Bool - Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)

scrolltarget::Union{String} - CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one ex. scrolltarget=".scroll-target-class" scrolltarget="#scroll-target-id" scrolltarget="body"

fit::Bool - Allows the menu to match at least the full width of its target

cover::Bool - Allows the menu to cover its target. When used, the 'self' and 'fit' props are no longer effective

anchor::String - Two values setting the starting position or anchor point of the menu relative to its target ex. anchor="top left" anchor="bottom right" anchor="center"

self::String - Two values setting the menu’s own position relative to its target ex. self="top left" self="bottom right" self="center"

offset::Vector - An array of two numbers to offset the menu horizontally and vertically in pixels ex. [8, 8] [5, 10]

contentclass::Union{Vector, String, Dict} - Class definitions to be attributed to the content ex. my-special-class contentclass!="{ 'my-special-class': <condition> }"

contentstyle::Union{Vector, String, Dict} - Style definitions to be attributed to the content ex. backgroundcolor: #ff0000 contentstyle!="{ color: '#ff0000' }"

dark::Bool - Notify the component that the background is a dark color

square::Bool - Forces content to have squared borders

maxheight::String - The maximum height of the menu; Size in CSS units, including unit name ex. 16px 2rem

maxwidth::String - The maximum width of the menu; Size in CSS units, including unit name ex. 16px 2rem

target::Union{Bool, String} - 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) ex. true ex. target!=false target!=".my-parent"

noparentevent::Bool - Skips attaching events to the target DOM element (that trigger the element to get shown)

contextmenu::Bool - Allows the component to behave like a context menu, which opens with a right mouse click (or long tap on mobile)

breakpoint::Union{Int, String} - Breakpoint (in pixels) of window width/height (whichever is smaller) from where a Menu will get to be used instead of a Dialog ex. 992 breakpoint!="1234"

name::String - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. car_id

keep-color::Bool - Should the color (if specified any) be kept when checkbox is unticked?

tabindex::Union{Int, String} - Tabindex HTML attribute value

leftlabel::Bool - Label (if any specified) should be displayed on the left side of the checkbox

disable::Bool - Put component in disabled mode

size::String - Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. 16px 2rem xs md

color::String - Color name for component from the Color Palette ex. primary teal-10

dark::Bool - Notify the component that the background is a dark color

dense::Bool - Dense mode; occupies less space

name::String - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. car_id

snap::Bool - Snap on valid values, rather than sliding freely; Suggestion: use with 'step' property

reverse::Bool - Work in reverse (changes direction)

vertical::Bool - Display in vertical direction

labelalways::Bool - Always display the label

label::Bool - Popup a label when user clicks/taps on the slider thumb and moves it

markers::Union{Bool, Int} - Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number) ex. markers markers="5"

dragrange::Bool - User can drag range instead of just the two thumbs

dragonlyrange::Bool - User can drag only the range instead and NOT the two thumbs

tabindex::Union{Int, String} - Tabindex HTML attribute value ex. 0 100

labelcolorleft::String - Color name for left label background from the Color Palette ex. primary teal-10

labeltextcolorleft::String - Color name for left label text from the Color Palette ex. primary teal-10

labelcolorright::String - Color name for right label background from the Color Palette ex. primary teal-10

labeltextcolorright::String - Color name for right label text from the Color Palette ex. primary teal-10

labelvalueleft::Union{String, Int} - Override default label for min value ex. labelvalueleft="model.min + 'px'"

labelvalueright::Union{String, Int} - Override default label for max value ex. labelvalueright="model.max + 'px'"

range::AbstractRange{T} - The range of values to select from min:step:max, symbols or strings can be used to reference model fields, e.g. range("min":2:"max", :myvalue)

lazy::Bool - If true, update the value of the model field only upon release of the slider

disable::Bool - Put component in disabled mode

readonly::Bool - Put component in readonly mode

color::String - Color name for component from the Color Palette ex. primary teal-10

labelcolor::String - Color name for component from the Color Palette ex. primary teal-10

thumbpath::String - Set custom thumb svg path ex. M5 5 h10 v10 h-10 v-10

dark::Bool - Notify the component that the background is a dark color

dense::Bool - Dense mode; occupies less space

name::String - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. car_id

snap::Bool - Snap on valid values, rather than sliding freely; Suggestion: use with 'step' property

reverse::Bool - Work in reverse (changes direction)

vertical::Bool - Display in vertical direction

labelalways::Bool - Always display the label

label::Bool - Popup a label when user clicks/taps on the slider thumb and moves it

markers::Union{Bool, Int} - Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number) ex. markers markers="5"

dragrange::Bool - User can drag range instead of just the two thumbs

dragonlyrange::Bool - User can drag only the range instead and NOT the two thumbs

tabindex::Union{Int, String} - Tabindex HTML attribute value ex. 0 100

labelcolorleft::String - Color name for left label background from the Color Palette ex. primary teal-10

labeltextcolorleft::String - Color name for left label text from the Color Palette ex. primary teal-10

labelcolorright::String - Color name for right label background from the Color Palette ex. primary teal-10

labeltextcolorright::String - Color name for right label text from the Color Palette ex. primary teal-10

labelvalueleft::Union{String, Int} - Override default label for min value ex. labelvalueleft="model.min + 'px'"

labelvalueright::Union{String, Int} - Override default label for max value ex. labelvalueright="model.max + 'px'"

range::AbstractRange{T} - The range of values to select from min:step:max, symbols or strings can be used to reference model fields, e.g. range("min":2:"max", :myvalue)

lazy::Bool - If true, update the value of the model field only upon release of the slider

disable::Bool - Put component in disabled mode

readonly::Bool - Put component in readonly mode

color::String - Color name for component from the Color Palette ex. primary teal-10

labelcolor::String - Color name for component from the Color Palette ex. primary teal-10

thumbpath::String - Set custom thumb svg path ex. M5 5 h10 v10 h-10 v-10

dark::Bool - Notify the component that the background is a dark color

dense::Bool - Dense mode; occupies less space

name::String - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL car_id

icon::Union{String, Vector} - Icon name; 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) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png

iconselected::Union{String, Vector} - Icon name 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) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png

iconhalf::Union{String, Vector} - Icon name 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) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png

max::Union{Int, String} - Number of icons to display ex. 3 max="5"

noreset::Bool - When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0

readonly::Bool - Put component in readonly mode

disable::Bool - Put component in disabled mode

size::String - Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. 16px 2rem md xs

color::Union{String, Vector} - Color name for component from the Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based) ex. primary primary teal-10 ["accent", "grey-7"]

colorselected::Union{String, Vector} - Color name from the Quasar Palette for selected icons primary teal-10

colorhalf::Union{String, Vector} - Color name from the Color Palette ex. primary teal-10

nodimming::Bool - Does not lower opacity for unselected icons

visible::Bool - Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior

delay::Union{Int, String} - When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered) default 1000 ex. 500 delay!="500

horizontal::Bool - Changes the default axis to horizontal instead of vertical (which is default) for getScrollPosition, getScrollPercentage, setScrollPosition, and setScrollPercentage

tabindex::Union{Int, String} - Tabindex HTML attribute value 0 100

dark::Bool - Notify the component that the background is a dark color

barstyle::Union{Vector, String, Dict} - Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal) ex. barstyle!="{ borderRadius: '5px', background: 'red', opacity: 1 }"

contentstyle::Union{Vector, String, Dict} - Object with CSS properties and values for styling the container of scrollarea

name::String - Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists ex. car-id car-id

virtualscrollhorizontal::Bool - Make virtual list work in horizontal mode

error::Bool - Does field have validation errors?

rules::Vector - Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules rules="[ val => val.length <= 3 || 'Please use maximum 3 characters' ]"

reactiverules::Bool - 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

lazyrules::Union{Bool, String} - 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 form submits itself ex. (Boolean) true (Boolean) false ondemand

loading::Bool - Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.

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

autofocus::Bool - Focus field on initial component render

for::String - 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 myFieldsId

hidedropdownicon::Bool - Hide dropdown icon

fillinput::Bool - Fills the input with current value; Useful along with 'hideselected'; Does NOT works along with 'multiple' selection

newvaluemode::String - 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 newvalue becomes optional (only to override the behavior defined by newvaluemode) ex. add add-unique toggle

autocomplete::String - Autocomplete attribute for field ex. autocomplete="country"

transitionshow::String - Transition when showing the menu/dialog; One of embedded transitions ex. fade slide-down

transitionhide::String - Transition when hiding the menu/dialog; One of embedded transitions ex. fade slide-down

behavior::String - Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles default menu dialog

tablecolspan::Union{Int, String} - The number of columns in the table (you need this if you use table-layout: fixed) ex. tablecolspan="12"

errormessage::String - Validation error message (gets displayed only if 'error' is set to 'true') ex. Username must have at least 5 characters

noerroricon::Bool - Hide error icon when there is an error

label::Union{String,Symbol} - A text label that will “float” up above the input field, once the field gets focus ex. Username

stacklabel::Bool - Label will be always shown above the field regardless of field content (if any)

hint::String - Helper (hint) text which gets placed below your wrapped form component ex. Fill in between 3 and 12 characters

hidehint::Bool - Hide the helper (hint) text when field doesn’t have focus

prefix::String - Prefix ex. $

suffix::String - Suffix ex. @gmail.com

loading::Bool - Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot.

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

clearicon::String - Custom icon to use for the clear button when using along with 'clearable' attribute ex. close

labelslot::Bool - Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set

bottomslots::Bool - Enables bottom slots ('error', 'hint', 'counter')

counter::Bool - Show an automatic counter on bottom right

dropdownicon::String - Icon name; ; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. map ion-add img=https://cdn.quasar.dev/logo/svg/quasar-logo.svg img=path/to/some_image.png

useinput::Bool - Use an input tag where users can type

inputdebounce::Union{Int, String} - Debounce the input model update with an amount of milliseconds ex. 500 600

tabindex::Union{Int, String} - Tabindex HTML attribute value ex. 0 100

multiple::Bool - Allow multiple selection; Model must be Array

emitvalue::Bool - Update model with the value of the selected option instead of the whole option

options::Vector - Available options that the user can select from. For best performance freeze the list of options ex. options=[ 'BMW', 'Samsung Phone' ]

optionvalue::String - 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 ex. optionvalue=modelNumber optionvalue="(item) => item === null ? null : item.modelNumber"

optionlabel::Union{String,Symbol} - 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 ex. optionlabel=itemName optionlabel="(item) => item === null ? null : item.itemName"

optiondisable::String - 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 ex. optiondisable=cannotSelect optiondisable="(item) => item === null ? null : item.cannotSelect"

optionsdense::Bool - Dense mode for options list; occupies less space

optionsdark::Bool - Options menu will be colored with a dark color

optionsselectedclass::String - 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) ex. text-orange

optionssanitize::Bool - Force use of textContent instead of innerHTML to render options; Use it when the options might be unsafe (from user input); Does NOT apply when using 'option' slot!

optionscover::Bool - Expanded menu will cover the component (will not work along with useinput attribute for obvious reasons)

menushrink::Bool - Allow the options list to be narrower than the field (only in menu mode)

mapoptions::Bool - Try to map labels of model from options Vector; 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

menuanchor::String - Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode) ex. top left top middle top right top start top end center left center middle center right center start center end bottom left bottom middle bottom right bottom start bottom end

menuself::String - Two values setting the options list’s own position relative to its target (only in menu mode) ex. top left etc

menuoffset::Vector - An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode) ex. [8, 8]

multiple::Bool - Allow multiple selection; Model must be Array

displayvalue::Union{Int, String} - Override default selection string, if not using selected slot/scoped slot and if not using usechips attribute

displayvaluesanitize::Bool - Force use of textContent instead of innerHTML to render selected option(s); Use it when the selected option(s) might be unsafe (from user input); Does NOT apply when using selected or selecteditem slots!

hideselected::Bool - 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

maxvalues::Union{Int, String} - Allow a maximum number of selections that the user can do ex. 5

usechips::Bool - Use chip component to show what is currently selected

disable::Bool - Put component in disabled mode

readonly::Bool - Put component in readonly mode

labelcolor::String - Color name for the label from the 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 ex. primary teal-10

color::String - Color name for component from the Color Palette

bgcolor::String - Background color name for component from the Color Palette

dark::Bool - Notify the component that the background is a dark color

filled::Bool - Use filled design for the field

outlined::Bool - Use outlined design for the field

borderless::Bool - Use borderless design for the field

standout::Union{Bool, String} - Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones) ex. standout standout="bg-primary text-white"

hidebottomspace::Bool - 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

rounded::Bool - Applies a small standard border-radius for a squared shape of the component

square::Bool - Remove border-radius so borders are squared; Overrides rounded prop/attribute

dense::Bool - Dense mode; occupies less space

itemaligned::Bool - Match inner content alignment to that of item component

popupcontentclass::String - Class definitions to be attributed to the popup content ex. my-special-class

popupcontentstyle::Union{Vector, String, Dict} - Style definitions to be attributed to the popup content ex. background-color: #ff0000 popupcontentstyle!="{ backgroundColor: '#ff0000' }"

inputclass::Union{Vector, String, Dict} - Class definitions to be attributed to the underlying input tag ex. my-special-class inputclass!="{ 'my-special-class': <condition> }"

inputstyle::Union{Vector, String, Dict} - Style definitions to be attributed to the underlying input tag ex. background-color: #ff0000 inputstyle!="{ backgroundColor: '#ff0000' }"

virtualscrollslicesize::Union{Int, String} - Minimum number of items to render in the virtual list ex. virtualscrollslicesize="60" 30

virtualscrollsliceratiobefore::Union{Int, String} - Ratio of number of items in visible zone to render before it ex. virtualscrollsliceratiobefore="30" 30

virtualscrollsliceratioafter::Union{Int, String} - Ratio of number of items in visible zone to render after it ex. virtualscrollsliceratioafter="0.3"

virtualscrollitemsize::Union{Int, String} - 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 ex. virtualscrollitemsize="48"

virtualscrollstickysizestart::Union{Int, String} - 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 ex. 0 virtualscrollstickysizestart="23

virtualscrollstickysizeend::Union{Int, String} - 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 ex. 0

tablecolspan::Union{Int, String} - The number of columns in the table (you need this if you use table-layout: fixed) ex. tablecolspan="3"

tag::String - HTML tag to render. Defaults to "div". Examples "div" "span"

type::String - Type of skeleton placeholder. Defaults to "rect". Accepted values are "rect" "circle" "QBadge" "QChip" "QRadio" etc

dark::Bool - Whether to use a dark skeleton.

animation::String - The animation effect of the skeleton placeholder. Defaults: "wave" | Examples. "pulse" "fade" "blink" "none" "pulse-x"

square::Bool - Removes border-radius so borders are squared

bordered::Bool - Applies a default border to the component

size::String - Size in CSS units, including unit name; Overrides 'height' and 'width' props and applies the value to both height and width

width::String - Width in CSS units, including unit name; Apply custom width; Use this prop or through CSS; Overridden by 'size' prop if used

height::String - Height in CSS units, including unit name; Apply custom height; Use this prop or through CSS; Overridden by 'size' prop if used. Examples "16px" "2em"

horizontal::Bool - Allows the splitter to split its two panels horizontally, instead of vertically

limits::Vector - 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

reverse::Bool - Apply the model size to the second panel (by default it applies to the first)

unit::String - CSS unit for the model

emitimmediately::Bool - Emit model while user is panning on the separator

limits::Vector - An array of two values representing the minimum and maximum split size of the two panels; When 'px' unit is set then you can use Infinity as the second value to make it unbound on the other side

disable::Bool - Put component in disabled mode

classbefore::Union{Vector,String,Dict} - Class definitions to be attributed to the 'before' panel ex. "bg-deep-orange"

classafter::Union{Vector,String,Dict} - Class definitions to be attributed to the 'after' panel ex. "bg-deep-orange"

separatorclass::Union{Vector,String,Dict} - Class definitions to be attributed to the splitter separator ex. "bg-deep-orange"

separatorstyle::Union{Vector,String,Dict} - Style definitions to be attributed to the splitter separator ex. "border-color: #ff0000;"

dark::Bool - 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

name::Union{Any} - Panel name

disable::Bool - Put component in disabled mode

dark::Bool - Notify the component that the background is a dark color

keepalive::Bool - Equivalent to using Vue’s native component on the content

keepaliveinclude::Union{String,Vector} - Equivalent to using Vue’s native include prop for ; Values must be valid Vue component names (e.g. "a,b" "/a|b/" ['a', 'b'])

keepaliveexclude::Union{String,Vector} - Equivalent to using Vue’s native exclude prop for ; Values must be valid Vue component names (e.g. "a,b" "/a|b/" ['a', 'b'])

keepalivemax::Int - Equivalent to using Vue’s native max prop for (e.g. 2)

animated::Bool - Enable transitions between panel (also see 'transition-prev' and 'transition-next' props)

infinite::Bool - Makes component appear as infinite (when reaching last panel, next one will become the first one)

swipeable::Bool - Enable swipe events (may interfere with content’s touch/mouse events)

vertical::Bool - Default transitions and swipe actions will be on the vertical axis

transitionprev::String - One of Quasar’s embedded transitions (has effect only if 'animated' prop is set) (e.g. "fade" "slide-down")

transitionnext::String - One of Quasar’s embedded transitions (has effect only if 'animated' prop is set) (e.g. "fade" "slide-down")

icon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it). Examples. "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"

label::Union{Int,String} - A number or string to label the tab. Example. "Home"

alert::Union{Bool,String} - 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. Example. "alert"

nocaps::Bool - Turns off capitalizing all letters within the tab (which is the default)

name::Union{Int,String} - Panel name. Examples. "home" name! ="1"

tabindex::Union{Int,String} - Tabindex HTML attribute value. Examples. 0 100

disable::Bool - Put component in disabled mode

ripple::Union{Bool,Dict} - Configure material ripple (disable it by setting it to 'false' or supply a config object). Examples. false """{"early" => true, "center" => true, "color" => "teal", "keyCodes" => []}"""

contentclass::String - Class definitions to be attributed to the content wrapper. "my-special-class"

target::Union{Bool, String} - Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment. Default. 600 | Example. breakpoint! ="500"

vertical::Bool - Use vertical design (tabs one on top of each other rather than one next to the other horizontally)

outsidearrows::Bool - Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive)

mobilearrows::Bool - Force display of arrows (if needed) on mobile

align::String - Horizontal alignment the tabs within the tabs container. Default: center | Accepted Values: left, center, right justify | Example. right

breakpoint::Union{Int, String} - Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment. Default: 600 | Example. breakpoint! = "500"

lefticon::String - 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. Example: arrow_left

righticon::String - 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. Example: arrow_right

stretch::Bool - When used on flexbox parent, tabs will stretch to parent’s height

shrink::Bool - By default, tabs 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 toolbar

switchindicator::Bool - Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode)

narrowindicator::Bool - Allows the indicator to be the same width as the tab’s content (text or icon), instead of the whole width of the tab

inlinelabel::Bool - Allows the text to be inline with the icon, should one be used

nocaps::Bool - Turns off capitalizing all letters within the tab (which is the default)

activeclass::String - The class to be set on the active tab

activecolor::String - The color to be attributed to the text of the active tab. Examples. teal-10 primary

activecolorbg::String - The color to be attributed to the background of the active tab. Examples. teal-10 primary

indicatorcolor::String - The color to be attributed to the indicator (the underline) of the active tab. Examples. teal-10 primary

contentclass::String - Class definitions to be attributed to the content wrapper

dense::Bool - Dense mode; occupies less space

side::String - Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by timelineentry side prop. (default: "right") | ex. "left" | "right"

layout::String - 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. (default: "dense") | ex. "comfortable" | "loose" | "dense"

color::String - Color name for component from the Quasar Color Palette. ex. "primary" | "teal-10"

dark::Bool - Notify the component that the background is a dark color

side::String - Side to place the timeline entry; Works only if timeline layout is loose. (default: "right") | ex. "left" | "right"

tag::String - Tag to use, if of type 'heading' only. (default: "h3") | ex. "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

heading::Bool - Defines a heading timeline item

icon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it). (ex. "map" | "ion-add")

avatar::String - URL to the avatar image; Icon takes precedence if used, so it replaces avatar.

title::String - Title of timeline entry; Is overridden if using 'title' slot

subtitle::String - Subtitle of timeline entry; Is overridden if using 'subtitle' slot

body::String - Body content of timeline entry; Use this prop or the default slot

color::String - Color name for component from the Quasar Color Palette

name::String - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. "car_id"

indeterminatevalue::Union{Int, Float64, String, Bool} - What model value should be considered as 'indeterminate'? default value: null ex. 0 "not_answered"

toggleorder::String - 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 -> …​ default "tf" ex. "tf" "ft"

toggleindeterminate::Bool - When user clicks/taps on the component, should we toggle through the indeterminate state too?

keepcolor::Bool - Should the color (if specified any) be kept when the component is unticked/ off?

icon::String - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png *

tabindex::Union{Int, String} - Tabindex HTML attribute value 0 100

checkedicon::String - The icon to be used when the toggle is on ex. visibility

uncheckedicon::String - The icon to be used when the toggle is off ex. visibility-off

indeterminateicon::String - The icon to be used when the model is indeterminate ex. help

label::Union{String,Symbol} - Label to display along the component ex. I agree to terms and conditions

leftlabel::Bool - Label (if any specified) should be displayed on the left side of the component

val::Union{Bool, Int, Float64, String, Vector} - Works when model ('value') is Array. It tells the component which value should add/remove when ticked/unticked ex. car

truevalue::Union{Bool, Int, Float64, String, Vector} - What model value should be considered as checked/ticked/on? default true ex. Agreed

falsevalue::Union{Bool, Int, Float64, String, Vector} - What model value should be considered as unchecked/unticked/off? default false ex. Not agreed

disabled::Bool - Put component in disabled mode

size::String - Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. 16px 1.5rem xs md

color::String - Color name for component from the Color Palette ex. primary teal-10

dark::Bool - Notify the component that the background is a dark color

dense::Bool - Dense mode; occupies less space

iconcolor - Override default icon color (for truthy state only); Color name for component from the Color Palette ex. primary teal-10

transitionshow::String - Support for inbuilt transitions ex. fade slide-down

transitionhide::String - Support for inbuilt transitions ex. fade slide-down

scrolltarget::String - CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one ex. scrolltarget=".scroll-target-class" scrolltarget="#scroll-target-id" scrolltarget="body"

target::Union{String, Bool} - Configure a target element to trigger Tooltip toggle; 'true' means it enables the parent DOM element, 'false' means it disables attaching events to any DOM elements; By using a String (CSS selector) it attaches the events to the specified DOM element (if it exists) ex. target=".my-parent" target!=false

noparentevent::Bool - Skips attaching events to the target DOM element (that trigger the element to get shown)

delay::Int - Configure Tooltip to appear with delay. default value. 0 ex. delay!="500"

hidedelay::Int - Configure Tooltip to disappear with delay. default value. 0 ex. hidedelay!="600"

maxheight::String - The maximum height of the Tooltip; Size in CSS units, including unit name ex. 16px 2rem

maxwidth::String - The maximum width of the Tooltip; Size in CSS units, including unit name ex. 16px 2rem

anchor::String - Two values setting the starting position or anchor point of the Tooltip relative to its target ex. top left top middle top right top start top end center left center middle center right center start center end bottom left bottom middle bottom right bottom start bottom end

self::String - Two values setting the Tooltip’s own position relative to its target ex. top left top middle top right top start top end center left center middle center right center start center end bottom left bottom middle bottom right bottom start bottom end

offset::Vector - An array of two numbers to offset the Tooltip horizontally and vertically in pixels. default value. [14,14] ex. [5, 10]

contentclass::Union{Vector, String, Dict} - Class definitions to be attributed to the content eg. my-special-class contentclass!="{ 'my-special-class': <condition> }"

contentstyle::Union{Vector, String, Dict} - Style definitions to be attributed to the content eg. background-color: #ff0000 contentstyle!="{ color: '#ff0000' }"

multiple::Bool - Allow multiple file uploads

accept::String - Comma separated list of unique file type specifiers. Maps to 'accept' attribute of native input type=file element ex. .jpg, .pdf, image/* image/jpeg, .pdf

capture::String - 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 ex. user environment

maxfilesize::Union{Int, String} - Maximum size of individual file in bytes ex. 1024 1048576

maxtotalsize::Union{Int, String} - Maximum size of all files combined in bytes ex. 1024 1048576

maxfiles::Union{Int, String} - Maximum number of files to contain ex. maxfiles!="5" 10

filter::Function - 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 ex. filter!="files => files.filter(file => file.size === 1024)"

autoupload::Bool - Upload files immediately when added

hideuploadbtn::Bool - Don’t show the upload button

label::Union{String,Symbol} - Label for the uploader ex. Upload photo here

nothumbnails::Bool - Don’t display thumbnails for image files

disable::Bool - Put component in disabled mode

readonly::Bool - Put component in readonly mode

color:String - Color of the component from the Color Palette eg. primary teal-10

textcolor::String - Overrides text color (if needed); Color name from the Color Palette eg. primary teal-10

dark::Bool - Dark mode

square::Bool - Removes border-radius so borders are squared

flat::Bool - Applies a flat design (no default shadow)

bordered::Bool - Applies a default border to the component

factory::String - 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 Function form. (files) => Object, Promise

url::String - 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 ex. +"files ⇒+https://example.com?count=:({files.length})" https://example.com/path

method::String - 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 default. POST ex. POST PUT

fieldname::String - 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 default value. (file) => file.name ex. backgroundFile fieldname!="(file) => 'background' + file.name"

headers::Union{Vector{Dict(String, String)}, String} - 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 ex. [{name: 'Content-Type', value: 'application/json'}, {name: 'Accept', value: 'application/json'}]

formfields::Union{Vector{Dict(String, String)}, String} - 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 ex. [{name: 'my-field', value: 'my-value'}]

with-credentials::Union{Bool, String} - 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 ex. with-credentials with!="files => ...."

sendraw::Union{Bool, String} - 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 ex. sendraw sendraw!="files => ...."

batch::Union{Bool, String} - 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 ex. "files => files.length > 10"

title::String - (Accessibility) Set the native 'title' attribute value of the inner iframe being used

fetchpriority::String - Provides a hint of the relative priority to use when fetching the iframe document. Default: "auto" | Accepted values: "auto", "high", "low"

loading::String - Indicates how the browser should load the iframe. Default: "eager" | Accepted Values: "eager", "lazy"

referrerpolicy::String - Indicates which referrer to send when fetching the frame’s resource. Default: "strict-origin-when-cross-origin" | Accepted Values: "no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "origin-when-cross-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"

src::String - The source url to display in an iframe.

ratio::Union{String,Int,Float64} - 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')