Gallery of auxiliary components of Stipple.jl

separator::Bool — adds a separator between nested elements.

padding::Bool — adds vertical margins in the Material Design style (top and bottom).

bordered::Bool — adds a standard border around the component.

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

dark::Bool — informs the component that the background is dark (changes the styling).

name::String — the name of the control; used, for example, when sending forms directly to the server by URL. Example: car_id.

icon::Union{String, Vector} — basic icon. Make sure that the icon library is enabled (if the prefix is not used img:). If an array is passed, then each rating position uses the corresponding icon (indexing from 0). Example: icon = "map ion-add" or img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg or img:path/to/some_image.png.

iconselected::Union{String, Vector} — icon for the selected state (optional). It works similarly icon, supports arrays (indexing from 0).

iconhalf::Union{String, Vector} — an icon for the "half" rating status. Similar to the previous parameters, it can be a string or an array.

max::Union{Int, String} — the number of icons displayed. Example: max = "5".

noreset::Bool — prohibits the standard behavior of resetting the rating to 0 when clicking on the selected icon again.

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

disable::Bool — the component is disabled (inactive).

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

color::Union{String, Vector} — icon color (Quasar palette). In versions v1.5.0+ when transmitting the array, each rating position uses its own color. Example: ["accent", "grey-7"], primary, teal-10.

colorselected::Union{String, Vector} — the color of the selected icons. It can also be an array. Example: primary teal-10.

colorhalf::Union{String, Vector} — the color of the half icons. Example: primary teal-10.

nodimming::Bool — Disables dimming (reducing transparency) for unselected icons.

visible::Bool — manual control of scrollbar visibility; redefines the standard appearance/disappearance behavior when hovering the cursor.

delay::Union{Int, String} — the delay (in milliseconds) during which the scrollbar remains visible after the content is changed; after the time expires, the scroll area disappears if the cursor is not above the component. Example: delay="500".

horizontal::Bool — switches the scrolling mode: horizontal instead of vertical (vertical by default). Affects the functions of getScrollPosition, getScrollPercentage, setScrollPosition, setScrollPercentage.

tabindex::Union{Int, String} — the value of the HTML attribute tabindex For example 0 or 100.

dark::Bool — informs the component that the background is dark (used to correct visual effects and contrast).

barstyle::Union{Vector, String, Dict} — CSS styles for the design of scrollbars (vertical and horizontal). Example: barstyle="{ borderRadius: '5px', background: 'red', opacity: 1 }".

contentstyle::Union{Vector, String, Dict} — CSS styles for the content container inside the scroll area.

name::String — the name of the control. Useful when working with forms; if not specified, the property value is used. for if it exists (for example, car_id).

virtualscrollhorizontal::Bool — enables virtual scrolling in horizontal mode.

error::Bool — indicates whether the field has validation errors.

rules::Vector — an array of functions or strings with validation rules. If a string is used, it must match the name of one of the built-in validation rules. Example: ["val ⇒ val.length ⇐ 3 || 'Use no more than 3 characters '"]

reactiverules::Bool — by default (false) changing the rules does not trigger re-validation before the model is changed. If true changing the rules immediately triggers validation. It has a performance overhead, use it only when necessary.

lazyrules::Bool | String — "lazy" validation mode:

loading::Bool — displays the loading indicator (spinner), signaling the completion of the process. The appearance can be redefined via the slot loading.

clearable::Bool — adds a cleaning icon if the value is set (not null). When clicked, the model value is reset to null.

autofocus::Bool — automatically sets the focus on the element at the first rendering.

for::String — sets id the control and the attribute for for the linked label. If name not specified, it is also used for it (for example, myFieldsId).

hidedropdownicon::Bool — hides the drop-down list icon.

fillinput::Bool — fills the field with the current value; useful in conjunction with hideselected. Does not work together with multiple.

newvaluemode::String — defines the behavior when adding new values:

autocomplete::String — The HTML attribute of auto-completion, for example autocomplete="country".

transitionshow::String — animation of the menu/dialog display. One of the built-in values, for example fade, slide-down.

transitionhide::String — animation of hiding the menu/dialog. One of the built-in values, for example fade, slide-down.

behavior::String — Redefines the standard dynamic behavior: displaying as a menu on a computer and as a dialog on mobile devices.

tablecolspan::Union{Int, String} — the number of columns in the table (required if used table-layout: fixed). Example: tablecolspan="12".

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

noerroricon::Bool — hide the error icon.

label::Union{String, Symbol} — the signature of the field that "floats" over the field when the focus is received. Example: Username.

stacklabel::Bool — The signature is always displayed above the field, regardless of the content.

hint::String — a hint (helper text) under the field. Example: Fill in between 3 and 12 characters.

hidehint::Bool — Hide the hint when the field is out of focus.

prefix::String — prefix before the entered value. Example: $.

suffix::String — suffix after the value. Example: @gmail.com.

loading::Bool — shows the loading indicator (spinner), signaling the completion of the process; can be customized through the slot loading.

clearable::Bool — adds a cleaning icon if the value is set (not undefined and not null). When clicked, the model value is reset to null.

clearicon::String — custom icon for the cleaning button (used together with clearable). Example: close.

labelslot::Bool — includes a slot label. You need to install in true to force the use of a slot label if the parameter label not specified.

bottomslots::Bool — includes the lower slots (error, hint, counter).

counter::Bool — displays an automatic character counter at the bottom right.

dropdownicon::String — the name of the drop-down list icon. An icon library is required (if not in use img:). If the value is "none", the icon is not drawn (but the place for it can be saved). Examples: map, ion-add, img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg, img:path/to/some_image.png.

useinput::Bool — use an input field where the user can enter text.

inputdebounce::Union{Int, String} — delay (debounce) of updating the input model in milliseconds. Example: 500, 600.

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

multiple::Bool — allows multiple choice. In this mode, the model must be an array (Array).

emitvalue::Bool — update the model with the value of the selected option, rather than the entire option object.

options::Vector — a list of available options from which the user can choose. For better performance, it is recommended to "freeze" the list. Example: ["BMW", "Samsung Phone"].

optionvalue::String — the name of the option property that contains its value. If a function is used, for better performance, you should refer to the function from the scope, rather than defining it as inline. Examples: optionvalue="modelNumber" optionvalue="(item) ⇒ item === null ? null : item.modelNumber"

optionlabel::Union{String, Symbol} — the name of the option property that contains the displayed signature (label). Similarly optionvalue when using the function, it is recommended not to set it as inline. Examples: optionlabel="itemName" optionlabel="(item) ⇒ item === null ? null : item.itemName"

optiondisable::String — the name of the option’s property, which determines whether the option is disabled. The value of the property must be logical (Bool). Example: optiondisable="cannotSelect" optiondisable="(item) ⇒ item === null ? null : item.cannotSelect"

optionsdense::Bool — compact mode for displaying the list of options (takes up less space).

optionsdark::Bool — The options menu is displayed in a dark color scheme.

optionsselectedclass::String — CSS class for active/selected options. You can set an empty line to disable the standard layout (text + wave of color).

optionssanitize::Bool — forced use textContent Instead of innerHTML when rendering options. Use it if the options may be unsafe (they come from the user). Does not apply when using a slot option.

optionscover::Bool — the opened menu overlaps the component (does not work in conjunction with useinput).

menuShrink::Bool — allows the list of options to be narrower than the field itself (only in menu mode).

mapoptions::Bool — an attempt to match model signatures with elements from options. It has a small performance overhead. When using emitvalue = true usually you need to enable mapoptions to display the signature text in the selection field instead of the value. For more information, see the Affecting model section.

menuanchor::String — sets the starting point (anchor) for positioning the list of options relative to the field (used only in menu mode). Format: two positions. Examples of values: top left, top middle, top right, center left, center middle, center right, bottom left, bottom middle, bottom right, top start, top end, bottom start, bottom end.

menuself::String — sets its own positioning point for the list of options relative to the target element (used only in menu mode). Format: two positions. Examples: top left, top right, center, bottom left

menuoffset::Vector — an array of two numbers that sets the offset of the list of options horizontally and vertically in pixels (used only in menu mode). Example: [8, 8].

multiple::Bool — allows multiple choice. In this mode, the model must be an array (Array).

displayvalue::Union{Int, String} — overrides the string representation of the selected default value. Used if not applicable selected slot/scoped slot and the attribute is not used. usechips.

displayvaluesanitize::Bool — forced use textContent Instead of innerHTML to render the selected values. It is recommended to enable it if the selected values may be unsafe (for example, entered by the user). Does not apply when using slots selecteditem.

hideselected::Bool — hides the selected item. In this case, the input subject is used to display the signature (instead of outputting the selected value to the right of the field). It only works for single selection (not multiple).

maxvalues::Union{Int, String} — the maximum number of values that the user can select. Example: 5.

usechips::Bool — display the selected values as chips (chip).

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

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

labelcolor::String — signature color (label) from Quasar color palettes. Overrides the property color. As opposed to color the caption always retains this color, even when the field is out of focus. Example: primary, teal-10.

color::String — the main color of the component from Quasar color palettes.

bgcolor::String — the background color of the component from Quasar color palettes.

dark::Bool — indicates that the background of the component is dark.

filled::Bool — use the "filled" style for the field.

outlined::Bool — use a contour (outlined) style for the field.

borderless::Bool — use a style without borders (borderless).

standout::Union{Bool, String} — use the style standout for the field. You can specify CSS classes that will be applied when focusing (overriding the default behavior). Example: standout="bg-primary text-white".

hidebottomspace::Bool — do not reserve space for areas hint / error / counter if they are not in use. It also disables the animation of these elements and allows the error/hint areas to stretch vertically depending on the content.

rounded::Bool — applies the standard small rounded corners for the square shape of the component.

square::Bool — removes the rounding of corners, making the component strictly square. Redefines properties rounded.

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

itemaligned::Bool — aligns the internal content according to the component elements.

popupcontentclass::String — CSS classes for popup window content. Example: my-special-class.

popupcontentstyle::Union{Vector, String, Dict} — CSS styles for the popup window content. Example: popupcontentstyle="background-color: #ff0000" popupcontentstyle="{ backgroundColor: '#ff0000' }"

inputclass::Union{Vector, String, Dict} — CSS classes applied to the underlying input element. Example: my-special-class.

inputstyle::Union{Vector, String, Dict} — CSS styles applied to the underlying input element. Example: inputstyle="background-color: #ff0000" inputstyle="{ backgroundColor: '#ff0000' }"

virtualscrollslicesize::Union{Int, String} — the minimum number of elements to be drawn in the virtual list. Example: virtualscrollslicesize="60"

virtualscrollsliceratiobefore::Union{Int, String} — the coefficient of the number of elements in the visible area that must be drawn to the current viewport. Example: virtualscrollsliceratiobefore="30"

virtualscrollsliceratioafter::Union{Int, String} — the coefficient of the number of elements in the visible area that should be drawn after the current viewport. Example: virtualscrollsliceratioafter="0.3"

virtualscrollitemsize::Union{Int, String} — the size of one list item in pixels (height for the vertical list, width for the horizontal one). The value is used during the initial rendering of the list. It is recommended to specify a value close to the minimum size of the element. Example: virtualscrollitemsize="48"

virtualscrollstickysizestart::Union{Int, String} — the size of the "sticky" area at the beginning of the list in pixels (if used). The correct value increases the accuracy of scrolling. Example: virtualscrollstickysizestart="23"

virtualscrollstickysizeend::Union{Int, String} — the size of the "sticky" area at the end of the list in pixels (if used). The correct value increases the accuracy of scrolling.

tablecolspan::Union{Int, String} — the number of columns in the table. Required when using a fixed-width tabular layout (table-layout: fixed). Example: tablecolspan="3"

name::String — the name of the component. It is useful when working with forms that are sent directly by URL (for example, car_id).

landscape::Bool — display the component in landscape orientation.

format24h::Bool — force the use of the 24-hour time format instead of AM/PM.

options::String — allows you to limit the allowed selection time. Redefined by parameters hour-options, minute-options and second-options if they are set. For better performance, it is recommended to set the value from the scope, rather than inline. Example: options!="(hr, min, sec) ⇒ hr ⇐ 6"

optionshour::Array — a list of acceptable hours. Overrides options, if set. Example: optionshour!="[3,6,9]"

optionsminute::Array — a list of acceptable minutes. Overrides options, if set. Example: optionsminute!="[3,6,9]"

optionssecond::Array — a list of allowed seconds. Overrides options, if set. Example: optionssecond!="[3,6,9]"

withseconds::Bool — allows setting the time based on seconds.

nowbtn::Bool — Displays a button to select the current time.

mask::String — formatting mask used for parsing and displaying the value. Example: HH:mm:ss

withseconds::Bool — allows time selection with seconds (duplicates the behavior parameter of the same name).

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

disable::Bool — switches the component to a disabled state.

color::String — the color of the component from the color palette.

textcolor::String — text color (redefines the primary color, if necessary). Values from are used Quasar color palettes.

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

square::Bool — removes the rounding of corners, making the component square.

flat::Bool — applies a "flat" style (without shadows, used by default).

bordered::Bool — adds a standard border around the component.

side::String — the side on which the timeline elements are placed in the modes dense and comfortable. For the mode loose the parameter is ignored and redefined by the property side for individual elements (timelineentry). Default value: right. Acceptable values: left, right

layout::String — timeline layout mode. Default value: dense. Supported values:

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

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

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

indeterminatevalue::Union{Int, Float64, String, Bool} — the value of the model, which is considered the "undefined" state. Default value: null. Example: "not_answered"

toggleorder::String — defines the order of switching states. Default value: "tf". Available:

toggleindeterminate::Bool — determines whether it is necessary to switch through the state when clicking/tapping indeterminate.

keepcolor::Bool — whether to keep the specified component color when turned off.

icon::String — the name of the icon according to the Quasar convention. Make sure that the icon library is enabled if the prefix is not used. img:. If the value is specified "none", then the icon is not displayed (but the place for it is saved). Examples: map, ion-add, img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg, img:path/to/some_image.png.

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

checkedicon::String — the icon displayed when enabled (checked).

uncheckedicon::String — the icon displayed when turned off (unchecked).

indeterminateicon::String — the icon displayed when the status is indeterminate.

label::Union{String, Symbol} — the text of the signature displayed next to the component. Example: I agree to terms and conditions

leftlabel::Bool — if specified, the signature will be displayed to the left of the component.

val::Union{Bool, Int, Float64, String, Vector} — used when the model (value) is an array (Array). Defines which value to add or remove from the model when the component is turned on/off. Example: ["a", "b", "c"]

truevalue::Union{Bool, Int, Float64, String, Vector} — the value of the model, which is considered the "enabled/marked" state. Default value: true Example: "Agreed"

falsevalue::Union{Bool, Int, Float64, String, Vector} — the value of the model, which is considered the "off/unchecked" state. Default value: false. Example: "Not agreed"

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

size::String — the size of the component in CSS units or the standard size name. Supported values: xs, sm, md, lg, xl. Examples: 16px, 1.5rem, xs, md

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

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

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

iconcolor::String — redefines the icon color (applies only to the status true). The color is set by a value from the Quasar color palette. Example: primary, teal-10

title::String — the value of the native HTML attribute title for an internal iframe. It is used to improve accessibility (for example, for screen announcers).

fetchpriority::String — sets the relative priority of loading the iframe document. Acceptable values: auto, high, low. Default value: auto

loading::String — specifies how the browser should load the iframe. Acceptable values: eager — upload immediately, lazy — delayed loading. Default value: eager

referrerpolicy::String — determines which one Referer it will be sent when the iframe resource is loaded. Acceptable values: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url. Default value: strict-origin-when-cross-origin

src::String — The URL of the resource displayed inside the iframe.

ratio::Union{String, Int, Float64} — the aspect ratio of the displayed content. If the value is set as a string, it is recommended to specify an already calculated value (rather than an expression like 16/9). Example: ratio = "1.7777"