Галерея основных компонентов Stipple.jl

floating::Bool — отображать значок в правом верхнем углу относительно родительского элемента.

transparent::Bool — включить полупрозрачный режим (примерно 0.8 opacity); полезно для «плавающих» значков.

multiline::Bool — разрешить перенос текста на несколько строк.

label::Union{String,Int} — основной текст значка; перекрывает слот по умолчанию.

align::String — вертикальное выравнивание контента (например: top, middle, bottom).

outline::Bool — контурный стиль (цветная обводка и текст без заливки).

color::String — цвет фона значка из палитры Quasar (например: primary, teal-10).

textcolor::String — цвет текста (также из палитры Quasar).

rounded::Bool — скругленная форма значка (pill-стиль).

name::String — имя контрола; полезно, если форма отправляется напрямую на URL и нужно различать поля по имени.

indeterminatevalue::Union{String,Float64,Int,Bool} — значение модели, которое следует считать «неопределенным» (indeterminate).

toggleorder::String — порядок переключения двух состояний (t — состояние true, f — состояние false). Если toggle-indeterminate = true, порядок такой: indet → первое состояние → второе состояние → indet (и далее по кругу). В противном случае: indet → первое состояние → второе состояние → первое состояние → второе состояние → …​. Примеры: "tf", "ft".

toggleindeterminate::Bool — если true, при клике/тапе по компоненту состояние будет проходить через «неопределенное» (indeterminate).

keepcolor::Bool — если указано, цвет компонента (если он задан) сохраняется, даже когда переключатель снят/выключен.

tabindex::Union{Int,String} — значение HTML-атрибута tabindex.

label::Union{String,Symbol} — текст метки, отображаемой рядом с компонентом.

leftlabel::Bool — если true, метка (если задана) отображается слева от компонента.

fieldname::Symbol — имя поля модели компонента.

val::Union{String,Float64,Int,Bool} — используется, когда модель (value) имеет тип Array. Определяет значение, которое будет добавляться/удаляться при установке/снятии флажка.

truevalue::Union{Int,Float64,String} — значение модели, которое считается состоянием «включено / отмечено».

falsevalue::Union{Int,Float64,String} — значение модели, которое считается состоянием «выключено / не отмечено».

disable::Bool — перевести компонент в неактивное (disabled) состояние.

size::String — размер в единицах CSS (с указанием единицы измерения) или одно из стандартных имен размеров (xs|sm|md|lg|xl). Примеры: "16px", "2rem", "xs", "md".

color::String — имя цвета компонента из палитры Quasar, например: primary, teal-10.

dark::Bool — сообщает компоненту, что фон под ним темный.

dense::Bool — компактный режим; компонент занимает меньше места.

icon::String — имя иконки по соглашениям Quasar. Требуется установленная библиотека иконок, если не используется префикс img:. Если указать строку "none", иконка не будет отрисована (но под нее все равно будет зарезервировано место). Примеры: map, ion-add, img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg, img:path/to/some_image.png.

iconright::String — имя иконки, отображаемой справа, по тем же правилам, что и icon.

iconremove::String — имя иконки для действия «удалить» (кнопка удаления), по тем же правилам, что и icon.

iconselected::String — имя иконки, отображаемой для выбранного состояния, по тем же правилам, что и icon.

label::Union{String,Int} — текстовое содержимое компонента; перекрывает слот по умолчанию. Примеры: "Joe Doe", "Book", 42.

tabindex::Union{Int,String} — значение HTML-атрибута tabindex (например: 0, 100).

value::Bool — модель, определяющая, должен ли chip отображаться. Значение true по умолчанию означает, что компонент виден.

selected::Bool — модель, определяющая, выбран chip или нет. Требуется модификатор .sync.

clickable::Bool — делает chip кликабельным; в этом режиме он реагирует на наведение и генерирует событие click.

removable::Bool — добавляет кнопку удаления; при нажатии генерируются соответствующие события удаления.

disable::Bool — переводит компонент в неактивное состояние (disabled).

ripple::Union{Bool,Dict} — настройка материал-декора «рябь» (эффект клика). Можно отключить (false) или передать объект конфигурации (напр. true, center: true, color: "teal").

dense::Bool — компактный режим; компонент занимает меньше места.

size::String — размер chip’а по имени или в единицах CSS. Примеры: xs, sm, md, lg, xl, 1rem.

dark::Bool — сообщает компоненту, что фон под ним темный (для корректного подбора цветов).

color::String — цвет компонента из палитры Quasar, например: primary, teal-10.

square::Bool — уменьшает скругление углов по сравнению со значением по умолчанию, делая форму ближе к квадрату.

outline::Bool — включает «контурный» стиль: цветная рамка и текст без заливки.

duration::Int — длительность анимации (в миллисекундах). Пример: duration="1000".

default-opened::Bool — раскрывать элемент по умолчанию при первом рендере. Переопределяется моделью (ReactiveModel), если она используется.

expandiconrotategc::Bool — применять события расширения только к иконке раскрытия, а не ко всей шапке элемента.

group::String — регистрирует элемент в группе раскрытия. Все элементы в группе должны иметь одинаковое имя группы. Используется для создания поведения в стиле аккордеона. Пример: my-emails.

popup::Bool — отображать раскрываемый список в режиме «popup».

icon::String — имя иконки по соглашениям Quasar. Если библиотека иконок не установлена — используйте префикс img:. Если значение none, иконка не отрисовывается (но место под нее занимает пространство). Примеры: map, ion-add, img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg, img:path/to/some_image.png.

expandicon::String — имя иконки для состояния «развернуть». Требования аналогичны обычному icon:. Работает только при expandsonitem = false.

expandedicon::String — имя иконки для состояния «свернуть». Требования те же, что для expandicon:. Использование отключает анимацию вращения иконки.

label::Union{String,Symbol} — заголовок (header label).

labellines::Union{Int,String} — обрезка по числу строк, если текст не помещается. При указании более 1 строки работает только в браузерах на основе WebKit (из-за -webkit-line-clamp). Пример: labellines="2".

caption::String — подзаголовок (header sub-label). Пример: Unread message: 5.

captionlines::Union{Int,String} — обрезка подзаголовка по числу строк (аналогично labellines).

headerinsetlevel::Int — применять отступ на уровне заголовка (кроме случаев, когда используется слот header). Полезно, если аватар отсутствует, но нужен выравнивающий отступ. Пример: headerinsetlevel="1".

contentinsetlevel::Int — применять отступ к контентной части. Пример: contentinsetlevel="1".

expandseparator::Bool — добавить разделитель между заголовком и контентом (как визуальный разграничитель).

disable::Bool — отключить компонент (режим disabled).

expand-icon-class::Union{Vector,String,Dict} — применить кастомные CSS-классы к иконке раскрытия. Пример: text-purple.

dark::Bool — указать компоненту, что фон страницы темный.

dense::Bool — компактный режим, занимает меньше вертикального пространства.

densetoggle::Bool — применять компактный режим только к иконке раскрытия.

headerstyle::Union{Vector,String,Dict} — применить кастомные стили к шапке компонента. Пример: '#ff0000' headerstyle=opts( backgroundColor: "#ff0000")

tag::String — HTML-тег, который будет использован для рендеринга иконки, если не задана сама иконка или используется SVG-иконка. Примеры: div, i.

left::Bool — используется, когда иконка располагается слева от текста/контента; добавляет стандартный отступ справа от иконки.

right::Bool — используется, когда иконка располагается справа от текста/контента; добавляет стандартный отступ слева от иконки.

name::String — имя иконки. Необходимо, чтобы библиотека иконок была установлена (если не используется префикс img:). Если указать значение "none", иконка не будет отрисована (но место под нее останется зарезервированным). Примеры: map, ion-add, img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg, img:path/to/some_image.png.

size::String — размер в единицах CSS (с указанием единицы измерения) или одно из стандартных имен размера. Примеры: 16px, 2rem, xs, md.

color::String — имя цвета компонента из палитры Quasar. Примеры: primary, teal-10.

transition::String — название анимации (одна из встроенных). Примеры: fade, slide-down.

nativecontextmenu::Bool — включает нативное контекстное меню браузера для изображения.

ratio::Union{String,Int} — принудительное соблюдение соотношения сторон. Примеры: "4/3", "16/9", 1.

alt::String — альтернативный текст, отображаемый, если изображение невозможно загрузить.

basic::Bool — отключает анимации и переходы; работает быстрее.

contain::Bool — гарантирует, что изображение полностью помещается в область отображения (даже если остаются пустые поля по краям).

src::String — путь к изображению. Примеры: src="img/something.png" (из публичной папки); src="assets/my-img.gif" (из assets); src="https://placeimg.com/500/300/nature" (URL)

srcset::String — набор вариантов изображения для разных разрешений. Примеры: elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w

sizes::String — CSS-условия выбора изображения. Примеры: (max-width: 320px) 280px, (max-width: 480px) 440px, 800px

width::String — фиксированная ширина изображения (в px или %). Пример: 280px, 70%.

height::String — фиксированная высота изображения. Пример: 300px.

placeholdersrc::String — статика, показываемая до загрузки изображения. Пример: src="assets/my-img.gif" src="https://placeimg.com/500/300/nature" (URL)

color::String — цветовая тема компонента из палитры Quasar. Пример: primary, teal-10.

imgclass::Union{Vector,String,Dict} — дополнительные CSS-классы для контейнера изображения. Пример: imgclass! = { 'my-special-class': <условие> }

imgstyle::Dict — CSS-стили для контейнера изображения. Пример: imgstyle="{transform: 'rotate(45deg)'}"

spinnercolor::String — цвет индикатора загрузки (если используется). Пример: primary, teal-10.

spinnersize::String — размер индикатора загрузки (работает при отсутствии собственного loader-слота). Пример: 16px, 2rem.

type::String — тип поля. Может быть одним из: text (по умолчанию), textarea, email, tel, number, password, url. Влияет также на то, какая клавиатура будет отображаться на мобильных устройствах.

name::String — имя компонента. Полезно при работе с формами. Если не задано, берется значение for, если оно существует. Пример: car_id.

mask::String — маска ввода или одно из предопределенных значений масок (например, date, datetime, fulltime, phone, card).

fillmask::Union{Bool,String} — заполнять ли маску спецсимволами (или использовать строку-значение вместо Bool). Пример: true, "0_*".

reversefillmask::Bool — заполнять маску справа налево. Пример: для маски денежных значений.

unmaskedvalue::Bool — если включено, модель будет получать значение без служебных символов маски.

error::Bool — есть ли у поля ошибка.

rules::Vector — набор правил валидации. Если элемент — строка, он должен соответствовать имени встроенного правила. Пример: rules = ["fulltime", val -> length(val) < 3 || "Максимум 3 символа"]

reactiverules::Bool — если true, правила проверяются каждый раз при обновлении модели. По умолчанию выключено (ради производительности).

lazyrules::Union{Bool,String} — если true, валидация выполняется только после первой потери фокуса. Если "ondemand", то правила проверяются только вручную.

loading::Bool — отображать индикатор загрузки; может настраиваться через слот loading.

clearable::Bool — показывает иконку очистки, если значение не undefined или null.

autofocus::Bool — автоматически сфокусировать поле после отображения.

for::String — задает id компонента и привязывает к нему <label>. Если name не указан, то это значение используется и для name.

errormessage::String — текст ошибки валидации (отображается, если error=true). Пример: Username must have at least 5 characters.

noerroricon::Bool — скрыть иконку ошибки.

label::Union{String,Symbol} — текст заголовка поля.

stacklabel::Bool — заголовок фиксируется над полем всегда, даже если оно пустое.

hint::String — поясняющий текст под полем.

hidehint::Bool — скрывать подсказку, если поле не в фокусе и не имеет error.

prefix::String — префикс перед текстом ввода (например, $).

suffix::String — суффикс после текста (например, @gmail.com).

loading::Bool — отображение индикатора загрузки (если слот loading не используется).

clearicon::String — иконка очистки; если не указано, используется значение по умолчанию.

labelslot::Bool — если true, вместо label используется слот label.

bottomslots::Bool — включает нижний слот (ошибки, подсказки, счетчик).

disable::Bool — отключает поле.

readonly::Bool — делает поле только для чтения.

labelcolor::String — цвет заголовка (отличается от color, потому что действует всегда, даже когда поле не в фокусе). Пример: primary.

color::String — цвет поля из палитры Quasar. Пример: teal-10.

dark::Bool — фон темный.

filled::Bool — стиль «заливки» поля.

outline::Bool — стиль «контурного» поля.

standout::Union{Bool,String} — стиль выделяющегося поля.

borderless::Bool — стиль без рамок.

hidebottomspace::Bool — убрать резервное пространство для ошибок/подсказок/счетчика.

rounded::Bool — небольшие скругления углов.

square::Bool — убрать скругления, полностью квадратный стиль.

dense::Bool — компактная версия, занимает меньше места.

itemalign::Union{Vector,String,Dict} — выравнивание содержимого.

inputclass::Union{Vector,String,Dict} — CSS-классы для <input>.

inputstyle::Union{Vector,String,Dict} — стили <input>, например: inputstyle = "{ backgroundColor: '#ff0000' }"

debounce::Union{String,Int} — задержка обновления модели в миллисекундах.Пример: 500.

maxlength::Union{String,Int} — максимальная длина строки. Пример: 12.

name::String — имя элемента управления; полезно при работе с формами, отправляемыми напрямую на URL. Пример: car_id.

keep-color::Bool — сохранять ли цвет (если задан), когда чекбокс снят.

tabindex::Union{Int, String} — значение HTML-атрибута tabindex.

fieldname::Symbol — имя переменной, к которой выполняется привязка.

label::AbstractString — текст метки.

leftlabel::Bool — если указано, метка отображается слева от чекбокса.

disable::Bool — переводит компонент в состояние «недоступен».

size::String — размер в единицах CSS или стандартных именах размеров (xs|sm|md|lg|xl). Пример: 16px, 2rem, xs, md.

color::String — цвет компонента из палитры Quasar. Пример: primary, teal-10.

dark::Bool — сообщает компоненту, что используется темный фон.

dense::Bool — компактный режим, уменьшающий вертикальные отступы.

name::String — имя элемента управления. Полезно при работе с формами, которые отправляются напрямую по URL. Пример: car_id

snap::Bool — «прилипание» ползунка к допустимым значениям вместо свободного перемещения. Рекомендуется использовать совместно с параметром step.

reverse::Bool — включает обратное направление работы ползунка (инверсия).

vertical::Bool — отображает ползунок в вертикальном направлении.

labelalways::Bool — всегда отображать подпись элемента.

label::Bool — всплывающая подпись, отображаемая при клике/касании ползунка и его перемещении.

markers::Union{Bool, Int} — отображать маркеры на шкале. Можно показать маркер для каждого возможного значения модели или указать шаг при помощи числа. Пример: markers="5"

dragrange::Bool — пользователь может перемещать диапазон целиком, а не только отдельные ползунки.

dragonlyrange::Bool — пользователь может перемещать только диапазон, но не отдельные ползунки.

tabindex::Union{Int, String} — значение HTML-атрибута tabindex. Пример: 100

labelcolorleft::String — цвет фона левой подписи из цветовой палитры Quasar. Пример: primary, teal-10

labeltextcolorleft::String — цвет текста левой подписи из цветовой палитры Quasar.

labelcolorright::String — цвет фона правой подписи из цветовой палитры Quasar.

labeltextcolorright::String — цвет текста правой подписи из цветовой палитры Quasar.

labelvalueleft::Union{String, Int} — переопределяет подпись для минимального значения. Пример: model.min + "px"

labelvalueright::Union{String, Int} — переопределяет подпись для максимального значения. Пример: model.max + "px"

range::AbstractRange{T} — диапазон значений, доступных для выбора. Используется формат min:step:max. Также можно использовать символы или строки для ссылки на поля модели. Пример: range="1:2:max" myvalue

lazy::Bool — если установлено в true, значение модели обновляется только после отпускания ползунка.

disable::Bool — переводит компонент в отключенное состояние (недоступен для взаимодействия).

readonly::Bool — переводит компонент в режим «только для чтения».

color::String — основной цвет компонента из цветовой палитры Quasar. Пример: primary, teal-10

labelcolor::String — цвет подписи из цветовой палитры Quasar.

thumbpath::String — путь к изображению для кастомного «ползунка». Пример: M5 5 h10 v10 h-10 v-10

dark::Bool — указывает, что компонент используется на темном фоне.

dense::Bool — компактный режим отображения (занимает меньше пространства).

target::Union{Bool, String} — контрольная точка (breakpoint) в пикселях, при которой контейнер вкладок автоматически переключается в режим выравнивания justify. Значение по умолчанию: 600. Пример: breakpoint != "500"

vertical::Bool — вертикальное отображение вкладок (вкладки располагаются друг под другом, а не горизонтально).

outsiderarrows::Bool — резервирует место для стрелок прокрутки по краям вкладок (стрелки становятся полупрозрачными, когда неактивны).

mobilearrows::Bool — принудительно отображать стрелки прокрутки на мобильных устройствах.

align::String — горизонтальное выравнивание вкладок внутри контейнера. Допустимые значения: left, center, right, justify. Значение по умолчанию: center. Пример: align = "right"

breakpoint::Union{Int, String} — ширина контейнера вкладок (в пикселях), при которой вкладки автоматически переходят в режим justify. Значение по умолчанию: 600. Пример: breakpoint != "500"

lefticon::String — имя иконки для замены стандартной стрелки прокрутки влево, используемой при переполнении вкладок. Пример: arrow_left

righticon::String — имя иконки для замены стандартной стрелки прокрутки вправо, используемой при переполнении вкладок. Пример: arrow_right

stretch::Bool — при использовании во flex-контейнере вкладки растягиваются по высоте родителя.

shrink::Bool — по умолчанию вкладки растягиваются по доступной ширине. При включении этого параметра вкладки перестают растягиваться. Полезно и иногда обязательно при размещении вкладок в toolbar.

switchindicator::Bool — переключает позицию индикатора активной вкладки (слева — для вертикального режима, сверху — для горизонтального).

narrowindicator::Bool — делает индикатор шириной по содержимому вкладки (текст или иконка), а не по всей ширине вкладки.

inlinelabel::Bool — текст вкладки отображается в одну строку с иконкой (если она используется).

nocaps::Bool — отключает автоматическое преобразование текста вкладок в верхний регистр (по умолчанию все вкладки отображаются заглавными буквами).

activeclass::String — CSS-класс, применяемый к активной вкладке.

activecolor::String — цвет текста активной вкладки из палитры Color Palette. Примеры: teal-10, primary

activebgcolor::String — цвет фона активной вкладки. Примеры: teal-10, primary

indicatorcolor::String — цвет индикатора (подчеркивания) активной вкладки. Примеры: teal-10, primary

contentclass::String — CSS-класс, применяемый к контейнеру содержимого вкладок.

dense::Bool — компактный режим отображения (занимает меньше пространства).