Gallery of the main components of Stipple.jl

floating::Bool — display the icon in the upper-right corner relative to the parent element.

transparent::Bool — enable semi-transparent mode (approximately 0.8 opacity); useful for "floating" icons.

multiline::Bool — allow text to be moved to multiple lines.

label::Union{String,Int} — the main text of the icon; overlaps the default slot.

align::String — vertical alignment of content (for example: top, middle, bottom).

outline::Bool — contour style (colored outline and text without fill).

color::String — the background color of the icon from the Quasar palette (for example: primary, teal-10).

textcolor::String — text color (also from the Quasar palette).

rounded::Bool — rounded shape of the icon (pill-style).

name::String — the name of the control; useful if the form is sent directly to the URL and you need to distinguish the fields by name.

indeterminatevalue::Union{String,Float64,Int,Bool} — the value of the model that should be considered "undefined" (indeterminate).

toggleorder::String — the order of switching the two states (t — condition true, f — condition false). If toggle-indeterminate = true, the order is as follows: indet → first state → second state → indet (and so on in a circle). Otherwise: indet → first state → second state → first state → second state → …​. Examples: "tf", "ft".

toggleindeterminate::Bool — if true when clicking/tapping on a component, the state will go through "undefined" (indeterminate).

keepcolor::Bool — if specified, the color of the component (if specified) remains, even when the switch is turned off/off.

tabindex::Union{Int,String} — the value of the HTML attribute tabindex.

label::Union{String,Symbol} — the text of the label displayed next to the component.

leftlabel::Bool — if true, the label (if specified) is displayed to the left of the component.

fieldname::Symbol — the name of the component model field.

val::Union{String,Float64,Int,Bool} — used when the model (value) has a type Array. Defines the value that will be added/removed when the checkbox is checked/unchecked.

truevalue::Union{Int,Float64,String} — the value of the model, which is considered the "enabled/marked" state.

falsevalue::Union{Int,Float64,String} — the value of the model, which is considered the "off/unchecked" state.

disable::Bool — put the component in an inactive (disabled) state.

size::String — size in CSS units (indicating the unit of measurement) or one of the standard size names (xs|sm|md|lg|xl). Examples: "16px", "2rem", "xs", "md".

color::String — the color name of the component from Quasar palettes, for example: primary, teal-10.

dark::Bool — informs the component that the background is dark under it.

dense::Bool — Compact mode; the component takes up less space.

icon::String — the name of the icon according to the Quasar conventions. An installed icon library is required if the prefix is not used. img:. If you specify the line "none", the icon will not be rendered (but a place will still be reserved for it). Examples: map, ion-add, img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg, img:path/to/some_image.png.

iconright::String — the name of the icon displayed on the right, according to the same rules as icon.

iconremove::String — the name of the icon for the "delete" action (delete button), according to the same rules as icon.

iconselected::String — the name of the icon displayed for the selected state, according to the same rules as icon.

label::Union{String,Int} — the text content of the component; overlaps the default slot. Examples: "Joe Doe", "Book", 42.

tabindex::Union{Int,String} — the value of the HTML attribute tabindex (for example: 0, 100).

value::Bool — the model that determines whether the chip should be displayed. Meaning true by default, it means that the component is visible.

selected::Bool — the model that determines whether the chip is selected or not. Requires a modifier .sync.

clickable::Bool — makes the chip clickable; in this mode, it responds to pointing and generates an event click.

removable::Bool — adds a delete button; when clicked, the corresponding delete events are generated.

disable::Bool — puts the component in an inactive state (disabled).

ripple::Union{Bool,Dict} — setting up the "ripple" material decor (click effect). You can disable (false) or pass a configuration object (e.g. true, center: true, color: "teal").

dense::Bool — Compact mode; the component takes up less space.

size::String — the size of the chip by name or in CSS units. Examples: xs, sm, md, lg, xl, 1rem.

dark::Bool — informs the component that the background under it is dark (for correct color selection).

color::String — the color of the component from Quasar palettes, for example: primary, teal-10.

square::Bool — reduces the rounding of corners compared to the default value, making the shape closer to a square.

outline::Bool — includes a "contour" style: colored border and text without fill.

duration::Int — animation duration (in milliseconds). Example: duration="1000".

default-opened::Bool — expand the default element during the first rendering. Redefined by the model (ReactiveModel), if it is in use.

expandiconrotategc::Bool — apply expansion events only to the disclosure icon, and not to the entire header of the element.

group::String — registers an item in the disclosure group. All the items in the group must have the same group name. It is used to create behavior in the accordion style. Example: my-emails.

popup::Bool — display a drop-down list in the "popup" mode.

icon::String — the name of the icon according to the Quasar conventions. If the icon library is not installed, use the prefix img:. If the value is none, the icon is not drawn (but the space under it takes up space). Examples: map, ion-add, img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg, img:path/to/some_image.png.

expandicon::String — the name of the icon for the "expand" status. The requirements are similar to the usual ones icon:. It only works when expandsonitem = false.

expandedicon::String — the name of the icon for the "collapse" state. The requirements are the same as for expandicon:. Using it disables the animation of the icon rotation.

label::Union{String,Symbol} — header label.

labellines::Union{Int,String} — crop by the number of lines if the text does not fit. If you specify more than 1 line, it only works in WebKit-based browsers (due to -webkit-line-clamp). Example: labellines="2".

caption::String — subtitle (header sub-label). Example: Unread message: 5.

captionlines::Union{Int,String} — trim the subtitle by the number of lines (similarly labellines).

headerinsetlevel::Int — apply indentation at the header level (except when using a slot header). Useful if the avatar is missing, but you need a leveling padding. Example: headerinsetlevel="1".

contentinsetlevel::Int — apply indentation to the content part. Example: contentinsetlevel="1".

expandseparator::Bool — add a separator between the title and the content (as a visual delimiter).

disable::Bool — disable the component (disabled mode).

expand-icon-class::Union{Vector,String,Dict} — apply custom CSS classes to the disclosure icon. Example: text-purple.

dark::Bool — indicate to the component that the background of the page is dark.

dense::Bool — Compact mode, takes up less vertical space.

densetoggle::Bool — Apply compact mode only to the disclosure icon.

headerstyle::Union{Vector,String,Dict} — apply custom styles to the component header. Example: '#ff0000' headerstyle=opts( backgroundColor: "#ff0000")

tag::String — An HTML tag that will be used to render the icon if the icon itself is not specified or an SVG icon is used. Examples: div, i.

left::Bool — used when the icon is positioned to the left of the text/content; adds a standard indentation to the right of the icon.

right::Bool — used when the icon is positioned to the right of the text/content; adds a standard indentation to the left of the icon.

name::String — icon name. It is necessary that the icon library is installed (if the prefix is not used img:). If you specify the value "none", the icon will not be rendered (but the space for it will remain reserved). Examples: 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 (indicating the unit of measurement) or one of the standard size names. Examples: 16px, 2rem, xs, md.

color::String — the color name of the component from the Quasar palette. Examples: primary, teal-10.

transition::String — animation name (one of the embedded). Examples: fade, slide-down.

nativecontextmenu::Bool — enables the native browser context menu for the image.

ratio::Union{String,Int} — forced compliance with the aspect ratio. Examples: "4/3", "16/9", 1.

alt::String — alternative text displayed if the image cannot be loaded.

basic::Bool — disables animations and transitions; works faster.

contain::Bool — ensures that the image fits completely into the display area (even if there are empty margins around the edges).

src::String — the path to the image. Examples: src="img/something.png" (from a public folder); src="assets/my-img.gif" (from assets); src="https://placeimg.com/500/300/nature" (URL)

srcset::String — a set of image options for different resolutions. Examples: elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w

sizes::String — CSS image selection criteria. Examples: (max-width: 320px) 280px, (max-width: 480px) 440px, 800px

width::String — fixed image width (in px or %). Example: 280px, 70%.

height::String — fixed image height. Example: 300px.

placeholdersrc::String — static displayed before the image is uploaded. Example: src="assets/my-img.gif" src="https://placeimg.com/500/300/nature" (URL)

color::String — the color theme of the component from Quasar palettes. Example: primary, teal-10.

imgclass::Union{Vector,String,Dict} — additional CSS classes for the image container. Example: imgclass! = { 'my-special-class': <condition> }

imgstyle::Dict — CSS styles for the image container. Example: imgstyle="{transform: 'rotate(45deg)'}"

spinnercolor::String — the color of the loading indicator (if used). Example: primary, teal-10.

spinnersize::String — the size of the loading indicator (it works in the absence of its own loader slot). Example: 16px, 2rem.

type::String — field type. Maybe one of the: text (by default), textarea, email, tel, number, password, url. It also affects which keyboard will be displayed on mobile devices.

name::String — the name of the component. Useful when working with forms. If not specified, the value is taken for if it exists. Example: car_id.

mask::String — an input mask or one of the predefined mask values (for example, date, datetime, fulltime, phone, card).

fillmask::Union{Bool,String} — whether to fill the mask with special characters (or use a value string instead of Bool). Example: true, "0_*".

reversefillmask::Bool — fill in the mask from right to left. Example: for a mask of monetary values.

unmaskedvalue::Bool — if enabled, the model will receive the value without the mask’s service characters.

error::Bool — whether the field has an error.

rules::Vector — a set of validation rules. If the element is a string, it must match the name of the built—in rule. Example: rules = ["fulltime", val → length(val) < 3 || "Maximum 3 characters"]

reactiverules::Bool — if true the rules are checked every time the model is updated. It is disabled by default (for the sake of performance).

lazyrules::Union{Bool,String} — if true validation is performed only after the first loss of focus. If "ondemand", then the rules are checked only manually.

loading::Bool — display the loading indicator; can be configured via the slot loading.

clearable::Bool — shows the cleaning icon if the value is not undefined or null.

autofocus::Bool — Automatically focus the field after the display.

for::String — sets id the component and binds to it <label>. If name if not specified, then this value is also used for name.

errormessage::String — validation error text (displayed if error=true). Example: Username must have at least 5 characters.

noerroricon::Bool — hide the error icon.

label::Union{String,Symbol} — the text of the field header.

stacklabel::Bool — the title is always fixed above the field, even if it is empty.

hint::String — explanatory text under the field.

hidehint::Bool — hide the hint if the field is out of focus and does not have error.

prefix::String — prefix before the input text (for example, $).

suffix::String — a suffix after the text (for example, @gmail.com).

loading::Bool — display of the loading indicator (if the slot is loading not used).

clearicon::String — cleaning icon; if not specified, the default value is used.

labelslot::Bool — if true, instead of label The slot is being used label.

bottomslots::Bool — includes the bottom slot (errors, hints, counter).

disable::Bool — disables the field.

readonly::Bool — makes the field read-only.

labelcolor::String — header color (different from color because it always works, even when the field is out of focus). Example: primary.

color::String — field color from Quasar palettes. Example: teal-10.

dark::Bool — the background is dark.

filled::Bool — the field’s "fill" style.

outline::Bool — the style of the "contour" field.

standout::Union{Bool,String} — the style of the highlighted field.

borderless::Bool — Unframed style.

hidebottomspace::Bool — remove the backup space for errors/hints/counter.

rounded::Bool — slight rounding of the corners.

square::Bool — remove the rounding, completely square style.

dense::Bool — Compact version, takes up less space.

itemalign::Union{Vector,String,Dict} — alignment of the content.

inputclass::Union{Vector,String,Dict} — CSS classes for <input>.

inputstyle::Union{Vector,String,Dict} — styles <input> For example: inputstyle = "{ backgroundColor: '#ff0000' }"

debounce::Union{String,Int} — model update delay in milliseconds.Example: 500.

maxlength::Union{String,Int} — maximum string length. Example: 12.

name::String — the name of the control; useful when working with forms that are sent directly to the URL. Example: car_id.

keep-color::Bool — whether to keep the color (if set) when the checkbox is removed.

tabindex::Union{Int, String} — the value of the HTML attribute tabindex.

fieldname::Symbol — the name of the variable to which the binding is performed.

label::AbstractString — the label text.

leftlabel::Bool — if specified, the label is displayed to the left of the checkbox.

disable::Bool — puts the component in the "unavailable" state.

size::String — size in CSS units or standard size names (xs|sm|md|lg|xl). Example: 16px, 2rem, xs, md.

color::String — the color of the component from the Quasar palette. Example: primary, teal-10.

dark::Bool — informs the component that a dark background is being used.

dense::Bool — compact mode that reduces vertical margins.

name::String — the name of the control. It is useful when working with forms that are sent directly by URL. Example: car_id

snap::Bool — "sticking" the slider to acceptable values instead of moving freely. It is recommended to use it in conjunction with the parameter step.

reverse::Bool — enables the reverse direction of the slider (inversion).

vertical::Bool — displays the slider in the vertical direction.

labelalways::Bool — always display the item’s signature.

label::Bool — Pop-up caption displayed when the slider is clicked/touched and moved.

markers::Union{Bool, Int} — Display markers on the scale. You can show a marker for each possible model value or specify a step using a number. Example: markers="5"

dragrange::Bool — The user can move the entire range, not just individual sliders.

dragonlyrange::Bool — The user can move only the range, but not the individual sliders.

tabindex::Union{Int, String} — the value of the HTML attribute tabindex. Example: 100

labelcolorleft::String — the background color of the left caption from the Quasar color palette. Example: primary, teal-10

labeltextcolorleft::String — the color of the text of the left caption from the Quasar color palette.

labelcolorright::String — the background color of the right caption from the Quasar color palette.

labeltextcolorright::String — the color of the text of the right caption from the Quasar color palette.

labelvalueleft::Union{String, Int} — redefines the signature for the minimum value. Example: model.min + "px"

labelvalueright::Union{String, Int} — redefines the signature for the maximum value. Example: model.max + "px"

range::AbstractRange{T} — the range of values available for selection. The format is used min:step:max. You can also use characters or strings to refer to the model fields. Example: range="1:2:max" myvalue

lazy::Bool — if installed in true, the model value is updated only after releasing the slider.

disable::Bool — puts the component in a disabled state (unavailable for interaction).

readonly::Bool — switches the component to read-only mode.

color::String — the main color of the component from the Quasar color palette. Example: primary, teal-10

labelcolor::String — the color of the signature from the Quasar color palette.

thumbpath::String — the path to the image for the custom slider. Example: M5 5 h10 v10 h-10 v-10

dark::Bool — indicates that the component is used on a dark background.

dense::Bool — Compact display mode (takes up less space).

target::Union{Bool, String} — breakpoint in pixels, at which the tab container automatically switches to alignment mode justify. Default value: 600. Example: breakpoint != "500"

vertical::Bool — vertical tab display (tabs are placed under each other, not horizontally).

outsiderarrows::Bool — reserves space for the scroll arrows at the edges of the tabs (the arrows become translucent when inactive).

mobilearrows::Bool — force the scroll arrows to display on mobile devices.

align::String — horizontal alignment of tabs inside the container. Acceptable values: left, center, right, justify. Default value: center. Example: align = "right"

breakpoint::Union{Int, String} — the width of the tab container (in pixels), at which the tabs automatically switch to the mode justify. Default value: 600. Example: breakpoint != "500"

lefticon::String — the name of the icon to replace the standard left scroll arrow used when tabs overflow. Example: arrow_left

righticon::String — the name of the icon to replace the standard right scroll arrow used when tabs overflow. Example: arrow_right

stretch::Bool — when used in a flex container, tabs stretch to the height of the parent.

shrink::Bool — by default, tabs are stretched to the available width. When this option is enabled, the tabs stop stretching. Useful and sometimes necessary when placing tabs in toolbar.

switchindicator::Bool — switches the position of the active tab indicator (on the left — for vertical mode, on the top — for horizontal).

narrowindicator::Bool — makes the indicator the width of the tab content (text or icon), rather than the entire width of the tab.

inlinelabel::Bool — the text of the tab is displayed in one line with the icon (if it is used).

nocaps::Bool — disables automatic conversion of tab text to uppercase (by default, all tabs are displayed in capital letters).

activeclass::String — CSS class applied to the active tab.

activecolor::String — the text color of the active tab from the Color Palette. Examples: teal-10, primary

activebgcolor::String — the background color of the active tab. Examples: teal-10, primary

indicatorcolor::String — the color of the indicator (underline) of the active tab. Examples: teal-10, primary

contentclass::String — CSS class applied to the tab content container.

dense::Bool — Compact display mode (takes up less space).