Документация Engee

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

Страница в процессе разработки.

В статье представлены вспомогательные компоненты Stipple.jl, которые дополняют основную галерею элементов пользовательского интерфейса, используемых в Engee. Эти компоненты применяются реже, однако могут существенно упростить разработку отдельных интерфейсных модулей, обработку пользовательских действий и построение сложных визуальных структур.

Основные компоненты для работы с компонентами Stipple.jl в Engee подробно описаны в статье Галерея основных компонентов Stipple.jl. Текущая статья расширяет эту подборку и включает дополнительные элементы, которые могут быть полезны в определенных сценариях и нестандартных интерфейсных решениях.

Ручка

Ручка

knob

Показать код

  • JULIA

  • HTML

knob(1:1:10, :knob_value, color = "primary")
Реактивный код 
@app begin
    @in knob_value = 5
end
<q-knob color="primary" :min="1" v-model="knob_value" :max="10" :step="1"></q-knob>

Программное использование

knob(
    range::AbstractRange{T} where {T<:Real},
    fieldname::Union{Symbol,Nothing} = nothing,
    args...;
    kwargs...,
)

Отображает элемент ввода с помощью ручки.

Список

Список

list

Показать код

  • JULIA

  • HTML

list(
    bordered = true,
    separator = true,
    @recur("fruit in List_fruits"),
    item(clickable = true, item_section("{{fruit}}")),
)
Реактивный код 
@app begin
    @out List_fruits = ["orange", "melon", "watermelon"]
end
<q-list bordered="" v-for="fruit in List_fruits" separator="">
    <q-item clickable="">
        <q-item-section>
            {{fruit}}
        </q-item-section>
    </q-item>
</q-list>

Сложный список

complex list

Показать код

  • JULIA

  • HTML

list(
    bordered = true,
    separator = true,
    padding = true,
    style = "width:400px",
    [
        toolbar("Configuration", class = "bg-primary text-white shadow-2"),
        item(
            clickable = "",
            vripple = "",
            item_section([
                item_label("Content filtering"),
                item_label(
                    caption = true,
                    "Set the content filtering level to restrict apps that can be downloaded",
                ),
            ]),
        ),
        item(
            clickable = "",
            vripple = "",
            item_section([
                item_label("Password"),
                item_label(
                    caption = true,
                    "Require password for purchase or use password to m'estrict purchase",
                ),
            ]),
        ),
        separator(spaced = true),
        item_label(header = true, "Other"),
        separator(spaced = true),
        item(
            var"v-ripple" = true,
            [
                item_section(checkbox("", :ListComplex_check)),
                item_section([
                    item_label("Auto-add widgets"),
                    item_label(caption = true, "Automatically add home screen widgets"),
                ]),
            ],
        ),
        item(
            var"v-ripple" = true,
            [
                item_section(side = true, top = true, checkbox("", :ListComplex_check)),
                item_section([
                    item_label("Auto-add widgets"),
                    item_label(caption = true, "Automatically add home screen widgets"),
                ]),
            ],
        ),
    ],
)
Реактивный код 
@app begin
    @in ListComplex_check = "false"
end
<q-list padding="" bordered="" separator="" style="width:400px">
    <q-toolbar class="bg-primary text-white shadow-2">
        Configuration
    </q-toolbar>
    <q-item clickable="" v-ripple="">
        <q-item-section>
            <q-item-label>
                Content filtering
            </q-item-label>
            <q-item-label caption="">
                Set the content filtering level to restrict apps that can be downloaded
            </q-item-label>
        </q-item-section>
    </q-item>
    <q-item clickable="" v-ripple="">
        <q-item-section>
            <q-item-label>
                Password
            </q-item-label>
            <q-item-label caption="">
                Require password for purchase or use password to m'estrict purchase
            </q-item-label>
        </q-item-section>
    </q-item>
    <q-separator spaced=""></q-separator>
    <q-item-label header="">
        Other
    </q-item-label>
    <q-separator spaced=""></q-separator>
    <q-item v-ripple="">
        <q-item-section>
            <q-checkbox label="" v-model="ListComplex_check"></q-checkbox>
        </q-item-section>
        <q-item-section>
            <q-item-label>
                Auto-add widgets
            </q-item-label>
            <q-item-label caption="">
                Automatically add home screen widgets
            </q-item-label>
        </q-item-section>
    </q-item>
    <q-item v-ripple="">
        <q-item-section top="" side="">
            <q-checkbox label="" v-model="ListComplex_check"></q-checkbox>
        </q-item-section>
        <q-item-section>
            <q-item-label>
                Auto-add widgets
            </q-item-label>
            <q-item-label caption="">
                Automatically add home screen widgets
            </q-item-label>
        </q-item-section>
    </q-item>
</q-list>

Программное использование

list(args...; kwargs...)

Список и элемент представляют собой группу компонентов, которые могут работать вместе, чтобы представлять несколько позиций по вертикали в виде единого непрерывного элемента. Они лучше всего подходят для отображения аналогичных типов данных в виде строк информации, таких как список контактов, список воспроизведения или меню. Каждая строка называется элементом. Элемент также можно использовать и вне списка.

Примеры:

  • Вид:

    julia > list(
    bordered = true,
    separator = true,
    [
        item(clickable = true, vripple = true, [itemsection("Single line item")]),
        item(
            clickable = true,
            vripple = true,
            [
                itemsection([
                    itemlabel("Item with caption"),
                    itemlabel("Caption", caption = true),
                ]),
            ],
        ),
        item(
            clickable = true,
            vripple = true,
            [
                itemsection([
                    itemlabel("OVERLINE", overline = true),
                    itemlabel("Item with caption"),
                ]),
            ],
        ),
    ],
)
Аргументы

  1. Содержимое

    • separator::Bool — добавляет разделитель между вложенными элементами.

    • padding::Bool — добавляет вертикальные отступы в стиле Material Design (сверху и снизу).

  2. Стиль

    • bordered::Bool — добавляет стандартную рамку вокруг компонента.

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

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

Оценка

Оценка

rating

Показать код

  • JULIA

  • HTML

rating(:rating_value, icon = "thumb_up")
Реактивный код 
@app begin
    @in rating_value = 5
end
<q-rating v-model="rating_value" icon="thumb_up"></q-rating>

Программное использование

rating(fieldname::Union{Symbol,Nothing} = nothing, args...; kwargs...)

Оценка (или же рейтинг) — это компонент, который позволяет пользователям оценивать товары, обычно известный как «Звездный рейтинг».

Примеры:

  • Модель:

    julia > @vars RatingModel begin
    myrating::R{Int} = 3
end

  • Вид:

    julia > rating(:myrating, size = "1.5em", icon = "thumb_up")
julia > rating(:myrating, size = "2em", color = "red-7", icon = "favorite_border")
julia > rating(:myrating, size = "2.5em", color = "purple-4", icon = "create")
Аргументы

  1. Поведение

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

  2. Содержимое

    • icon::Union{String, Vector} — базовая иконка. Убедитесь, что библиотека иконок подключена (если не используется префикс img:). Если передан массив, то каждая позиция рейтинга использует соответствующую иконку (индексация с 0). Пример: icon = "map ion-add" или img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg или img:path/to/some_image.png.

    • iconselected::Union{String, Vector} — иконка для выбранного состояния (опционально). Работает аналогично icon, поддерживает массивы (индексация с 0).

    • iconhalf::Union{String, Vector} — иконка для «половинного» состояния рейтинга. Аналогично предыдущим параметрам может быть строкой или массивом.

  3. Метка

    • max::Union{Int, String} — количество отображаемых иконок. Пример: max = "5".

  4. Модель

    • noreset::Bool — запрещает стандартное поведение сброса рейтинга в 0 при повторном клике на выбранную иконку.

  5. Состояние

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

    • disable::Bool — компонент выключен (неактивен).

  6. Стиль

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

    • color::Union{String, Vector} — цвет иконок (палитра Quasar). В версиях v1.5.0+ при передаче массива каждая позиция рейтинга использует свой цвет. Пример: ["accent", "grey-7"], primary, teal-10.

    • colorselected::Union{String, Vector} — цвет выбранных иконок. Также может быть массивом. Пример: primary teal-10.

    • colorhalf::Union{String, Vector} — цвет половинчатых иконок. Пример: primary teal-10.

    • nodimming::Bool — отключает затемнение (уменьшение прозрачности) для невыбранных иконок.

Ряд

Ряд

row

Показать код

  • JULIA

  • HTML

[row(span("Hello"), class = "bg-blue-2"), row(span("Genie"), class = "bg-red-2")]
<div class="bg-blue-2 row">
    <span>
        Hello
    </span>
</div>
<div class="bg-red-2 row">
    <span>
        Genie
    </span>
</div>

Область прокрутки

Область прокрутки

scroll area

Показать код

  • JULIA

  • HTML

scrollarea(
    style = "height: 200px; max-width: 300px;",
    Html.div(
        "Stipple is a reactive UI library for building interactive\n            data applications in pure Julia. It uses Genie.jl (on the server side)\n            and Vue.js (on the client). Stipple uses a high performance MVVM\n            architecture, which automatically synchronizes the state two-way\n            (server -> client and client -> server) sending only JSON data over\n            the wire. The Stipple package provides the fundamental communication\n            layer, extending Genie's HTML API with a reactive component.",
    ),
)
<q-scroll-area style="height: 200px; max-width: 300px;">
    <div>
        Stipple is a reactive UI library for building interactive
        data applications in pure Julia. It uses Genie.jl (on the server side)
        and Vue.js (on the client). Stipple uses a high performance MVVM
        architecture, which automatically synchronizes the state two-way
        (server -> client and client -> server) sending only JSON data over
        the wire. The Stipple package provides the fundamental communication
        layer, extending Genie's HTML API with a reactive component.
    </div>
</q-scroll-area>

Программное использование

scrollarea(args...; kwargs...)

Компонент «область прокрутки» предлагает удобный способ настройки полос прокрутки путем инкапсуляции вашего содержимого. Представьте его как элемент DOM с функцией overflow: auto, но с вашей собственной полосой прокрутки в пользовательском стиле вместо полосы прокрутки, используемой браузером по умолчанию, и несколькими приятными функциями сверху.

Примеры:

  • Вид:

    julia > StippleUI.scrollarea(
    style = "height: 200px; max-width: 300px;",
    [Html.div("Stipple is a reactive UI library for building interactive
     data applications in pure Julia. It uses Genie.jl (on the server side)
     and Vue.js (on the client). Stipple uses a high performance MVVM
     architecture, which automatically synchronizes the state two-way
     (server -> client and client -> server) sending only JSON data over
     the wire. The Stipple package provides the fundamental communication
     layer, extending Genie's HTML API with a reactive component.")],
)
Аргументы

  1. Поведение

    • visible::Bool — ручное управление видимостью полосы прокрутки; переопределяет стандартное поведение появления/исчезновения при наведении курсора.

    • delay::Union{Int, String} — задержка (в миллисекундах), в течение которой скроллбар остается видимым после изменения содержимого; после истечения времени область прокрутки исчезает, если курсор не находится над компонентом. Пример: delay="500".

    • horizontal::Bool — переключает режим прокрутки: горизонтальная вместо вертикальной (по умолчанию вертикальная). Влияет на функции getScrollPosition, getScrollPercentage, setScrollPosition, setScrollPercentage.

  2. Общее

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

  3. Стиль

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

    • barstyle::Union{Vector, String, Dict} — CSS-стили для оформления полос прокрутки (вертикальной и горизонтальной). Пример: barstyle="{ borderRadius: '5px', background: 'red', opacity: 1 }".

    • contentstyle::Union{Vector, String, Dict} — CSS-стили для контейнера содержимого внутри области прокрутки.

Выбор

Выбор

select

Показать код

  • JULIA

  • HTML

select(:Select_fruit, options = :Select_fruit_list, label = "Fruits")
Реактивный код 
@app begin
    @in Select_fruit = ["orange"]
    @out Select_fruit_list = ["orange", "melon", "watermelon"]
end
<q-select v-model="Select_fruit" label="Fruits" :options="Select_fruit_list"></q-select>

Четкий выбор с помощью ввода

clearable select with input

Показать код

  • JULIA

  • HTML

select(
    :SelectClearable_fruit,
    options = :SelectClearable_fruit_list,
    label = "Fruits",
    clearable = true,
    useinput = true,
)
Реактивный код 
@app begin
    @in SelectClearable_fruit = ["orange"]
    @out SelectClearable_fruit_list = ["orange", "melon", "watermelon"]
end
<q-select v-model="SelectClearable_fruit" label="Fruits" use-input="" clearable="" :options="SelectClearable_fruit_list"></q-select>

Множественный выбор с чипами

multiple choices with chips

Показать код

  • JULIA

  • HTML

select(
    :SelectMultiple_fruit,
    options = :SelectMultiple_fruit_list,
    label = "Fruits",
    clearable = "",
    multiple = true,
    usechips = true,
)
Реактивный код 
@app begin
    @in SelectMultiple_fruit = ["orange"]
    @out SelectMultiple_fruit_list = ["orange", "melon", "watermelon"]
end
<q-select v-model="SelectMultiple_fruit" label="Fruits" clearable="" multiple="multiple" use-chips="" :options="SelectMultiple_fruit_list"></q-select>

Программное использование

select(fieldname::Symbol, args...; options::Union{Symbol,Vector}, kwargs...)

Примеры:

  • Модель:

    julia > @vars SelectModel begin
    model::R{Vector{String}} = []
    networks::R{Vector{String}} = ["Google", "Facebook", "Twitter", "Pinterest", "Reddit"]
end

  • Вид:

    julia > select(
    :model,
    options = :networks,
    useinput = true,
    multiple = true,
    clearable = true,
    filled = true,
    counter = true,
    usechips = true,
    label = "Social Networks",
)
Аргументы

  1. Поведение

    • name::String — имя элемента управления. Полезно при работе с формами; если не задано, используется значение свойства for, если оно существует (например, car_id).

    • virtualscrollhorizontal::Bool — включает виртуальную прокрутку в горизонтальном режиме.

    • error::Bool — указывает, есть ли у поля ошибки валидации.

    • rules::Vector — массив функций или строк с правилами валидации. Если используется строка, она должна соответствовать имени одного из встроенных правил валидации. Пример: ["val => val.length <= 3 || 'Используйте не более 3 символов'"]

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

    • lazyrules::Bool | String — режим «ленивой» валидации:

      • true — проверка правил выполняется только после первого получения полем фокуса.

      • false — обычная (стандартная) валидация.

      • "ondemand" — валидация выполняется только при ручном вызове validate().

    • loading::Bool — отображает индикатор загрузки (spinner), сигнализируя о выполнении процесса. Внешний вид можно переопределить через слот loading.

    • clearable::Bool — добавляет иконку очистки, если значение задано (не null). При клике значение модели сбрасывается в null.

    • autofocus::Bool — автоматически устанавливает фокус на элемент при первом рендеринге.

    • for::String — задает id элемента управления и атрибут for для связанного label. Если name не указан, используется и для него (например, myFieldsId).

    • hidedropdownicon::Bool — скрывает иконку выпадающего списка.

    • fillinput::Bool — заполняет поле текущим значением; полезно совместно с hideselected. Не работает вместе с multiple.

    • newvaluemode::String — определяет поведение при добавлении новых значений:

      • add — добавлять значение (даже если оно уже существует);

      • add-unique — добавлять только уникальные значения;

      • toggle — добавлять или удалять значение в зависимости от его наличия. При использовании этого параметра прослушивание события newvalue становится необязательным.

    • autocomplete::String — HTML-атрибут автозаполнения, например autocomplete="country".

    • transitionshow::String — анимация показа меню/диалога. Одно из встроенных значений, например fade, slide-down.

    • transitionhide::String — анимация скрытия меню/диалога. Одно из встроенных значений, например fade, slide-down.

    • behavior::String — переопределяет стандартное динамическое поведение: отображение как меню на компьютере и как диалог на мобильных устройствах.

  2. Содержимое

    • tablecolspan::Union{Int, String} — количество колонок в таблице (нужно, если используется table-layout: fixed). Пример: tablecolspan="12".

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

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

    • label::Union{String, Symbol} — подпись поля, которая «всплывает» над полем при получении фокуса. Пример: Username.

    • stacklabel::Bool — подпись всегда отображается над полем, независимо от содержимого.

    • hint::String — подсказка (helper text) под полем. Пример: Fill in between 3 and 12 characters.

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

    • prefix::String — префикс перед вводимым значением. Пример: $.

    • suffix::String — суффикс после значения. Пример: @gmail.com.

    • loading::Bool — показывает индикатор загрузки (spinner), сигнализируя о выполнении процесса; можно кастомизировать через слот loading.

    • clearable::Bool — добавляет иконку очистки, если значение задано (не undefined и не null). При клике значение модели сбрасывается в null.

    • clearicon::String — кастомная иконка для кнопки очистки (используется вместе с clearable). Пример: close.

    • labelslot::Bool — включает слот label. Нужно установить в true, чтобы принудительно использовать слот label, если параметр label не задан.

    • bottomslots::Bool — включает нижние слоты (error, hint, counter).

    • counter::Bool — отображает автоматический счетчик символов внизу справа.

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

    • useinput::Bool — использовать поле ввода, в которое пользователь может вводить текст.

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

  3. Общее

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

  4. Модель

    • multiple::Bool — разрешает множественный выбор. В этом режиме модель должна быть массивом (Array).

    • emitvalue::Bool — обновлять модель значением выбранной опции, а не всем объектом опции целиком.

  5. Опции

    • options::Vector — список доступных вариантов, из которых пользователь может выбирать. Для лучшей производительности рекомендуется «замораживать» список. Пример: ["BMW", "Samsung Phone"].

    • optionvalue::String — имя свойства опции, которое содержит ее значение. Если используется функция, для лучшей производительности следует ссылаться на функцию из области видимости, а не определять ее как inline. Примеры: optionvalue="modelNumber" optionvalue="(item) => item === null ? null : item.modelNumber"

    • optionlabel::Union{String, Symbol} — имя свойства опции, которое содержит отображаемую подпись (label). Аналогично optionvalue, при использовании функции рекомендуется не задавать ее как inline. Примеры: optionlabel="itemName" optionlabel="(item) => item === null ? null : item.itemName"

    • optiondisable::String — имя свойства опции, которое определяет, отключена ли опция. Значение свойства должно быть логическим (Bool). Пример: optiondisable="cannotSelect" optiondisable="(item) => item === null ? null : item.cannotSelect"

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

    • optionsdark::Bool — меню опций отображается в темной цветовой схеме.

    • optionsselectedclass::String — CSS-класс для активных/выбранных опций. Можно задать пустую строку, чтобы отключить стандартное оформление (текст + волна цвета).

    • optionssanitize::Bool — принудительно использовать textContent вместо innerHTML при рендеринге опций. Используйте, если опции могут быть небезопасными (приходят от пользователя). Не применяется при использовании слота option.

    • optionscover::Bool — раскрытое меню перекрывает компонент (не работает совместно с useinput).

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

    • mapoptions::Bool — попытка сопоставить подписи модели с элементами из options. Имеет небольшие накладные расходы по производительности. При использовании emitvalue = true обычно требуется включить mapoptions, чтобы отображать текст подписи в поле выбора вместо значения. Подробнее см. раздел Affecting model.

  6. Позиционирование

    • menuanchor::String — задает начальную точку (якорь) позиционирования списка опций относительно поля (используется только в режиме меню). Формат: две позиции. Примеры значений: 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 — задает собственную точку позиционирования списка опций относительно целевого элемента (используется только в режиме меню). Формат: две позиции. Примеры: top left, top right, center, bottom left

    • menuoffset::Vector — массив из двух чисел, задающий смещение списка опций по горизонтали и вертикали в пикселях (используется только в режиме меню). Пример: [8, 8].

  7. Выбор

    • multiple::Bool — разрешает множественный выбор. В этом режиме модель должна быть массивом (Array).

    • displayvalue::Union{Int, String} — переопределяет строковое представление выбранного значения по умолчанию. Используется, если не применяется selected slot/scoped slot и не используется атрибут usechips.

    • displayvaluesanitize::Bool — принудительно использовать textContent вместо innerHTML для рендеринга выбранных значений. Рекомендуется включать, если выбранные значения могут быть небезопасными (например, введены пользователем). Не применяется при использовании слотов selecteditem.

    • hideselected::Bool — скрывает выбранный элемент. При этом используется подлежащий input для отображения подписи (вместо вывода выбранного значения справа от поля). Работает только для одиночного выбора (не multiple).

    • maxvalues::Union{Int, String} — максимальное количество значений, которые пользователь может выбрать. Пример: 5.

    • usechips::Bool — отображать выбранные значения в виде чипов (chip).

  8. Состояние

    • disable::Bool — переводит компонент в отключенный режим (disabled).

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

  9. Стиль

    • labelcolor::String — цвет подписи (label) из палитры цветов Quasar. Переопределяет свойство color. В отличие от color, подпись всегда сохраняет этот цвет, даже когда поле не в фокусе. Пример: primary, teal-10.

    • color::String — основной цвет компонента из палитры цветов Quasar.

    • bgcolor::String — цвет фона компонента из палитры цветов Quasar.

    • dark::Bool — указывает, что фон компонента темный.

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

    • outlined::Bool — использовать контурный (outlined) стиль для поля.

    • borderless::Bool — использовать стиль без рамок (borderless).

    • standout::Union{Bool, String} — использовать стиль standout для поля. Можно указать CSS-классы, которые будут применяться при фокусе (переопределяя поведение по умолчанию). Пример: standout="bg-primary text-white".

    • hidebottomspace::Bool — не резервировать место под области hint / error / counter, если они не используются. Также отключает анимацию этих элементов и позволяет области ошибок/подсказок растягиваться по вертикали в зависимости от содержимого.

    • rounded::Bool — применяет стандартное небольшое скругление углов для квадратной формы компонента.

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

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

    • itemaligned::Bool — выравнивает внутренний контент в соответствии с элементами компонента.

    • popupcontentclass::String — CSS-классы для содержимого всплывающего окна. Пример: my-special-class.

    • popupcontentstyle::Union{Vector, String, Dict} — стили CSS для содержимого всплывающего окна. Пример: popupcontentstyle="background-color: #ff0000" popupcontentstyle="{ backgroundColor: '#ff0000' }"

    • inputclass::Union{Vector, String, Dict} — CSS-классы, применяемые к underlying input-элементу. Пример: my-special-class.

    • inputstyle::Union{Vector, String, Dict} — стили CSS, применяемые к underlying input-элементу. Пример: inputstyle="background-color: #ff0000" inputstyle="{ backgroundColor: '#ff0000' }"

  10. Виртуальная прокрутка

    • virtualscrollslicesize::Union{Int, String} — минимальное количество элементов, которые должны быть отрисованы в виртуальном списке. Пример: virtualscrollslicesize="60"

    • virtualscrollsliceratiobefore::Union{Int, String} — коэффициент количества элементов в видимой области, которые должны быть отрисованы до текущей области видимости. Пример: virtualscrollsliceratiobefore="30"

    • virtualscrollsliceratioafter::Union{Int, String} — коэффициент количества элементов в видимой области, которые должны быть отрисованы после текущей области видимости. Пример: virtualscrollsliceratioafter="0.3"

    • virtualscrollitemsize::Union{Int, String} — размер одного элемента списка в пикселях (высота — для вертикального списка, ширина — для горизонтального). Значение используется при первичной отрисовке списка. Рекомендуется указывать значение, близкое к минимальному размеру элемента. Пример: virtualscrollitemsize="48"

    • virtualscrollstickysizestart::Union{Int, String} — размер «липкой» области в начале списка в пикселях (если используется). Корректное значение повышает точность прокрутки. Пример: virtualscrollstickysizestart="23"

    • virtualscrollstickysizeend::Union{Int, String} — размер «липкой» области в конце списка в пикселях (если используется). Корректное значение повышает точность прокрутки.

    • tablecolspan::Union{Int, String} — количество колонок в таблице. Требуется при использовании табличной раскладки с фиксированной шириной (table-layout: fixed). Пример: tablecolspan="3"

Разделитель

Разделитель

separator

Показать код

  • JULIA

  • HTML

[p("above"), separator(color = "primary"), p("below")]
<p>
    above
</p>
<q-separator color="primary"></q-separator>
<p>
    below
</p>

Программное использование

separator(args...; kwargs...)

Компонент «разделитель» используется для разделения фрагментов текста, других компонентов и т.д. Он создает цветную линию по ширине родительского элемента. Она может быть горизонтальной или вертикальной.

Спиннер

Спиннер

spinner

Показать код

  • JULIA

  • HTML

[
    spinner("hourglass", color = "primary", size = "20px", @iif("spinner_count <10")),
    p("{{spinner_count}}"),
    btn("Start timer", @click(:spinner_start), loading = :spinner_start),
]
Реактивный код 
@app begin
    @out spinner_count = 0
    @in spinner_start = false
    @onbutton spinner_start begin
        while spinner_count <= 10
            @show spinner_count
            spinner_count += 1
            sleep(0.5)
        end
        spinner_count = 0
    end
end
<q-spinner-hourglass color="primary" v-if="spinner_count <10" size="20px"></q-spinner-hourglass>
<p>
    {{spinner_count}}
</p>
<q-btn :loading="spinner_start" label="Start timer" v-on:click="spinner_start = true"></q-btn>

Программное использование

spinner(spinner_type::Union{String,Symbol} = "", args...; kwargs...)

Компонент «спиннер» используется для того, чтобы показать пользователю, какой процесс выполняется в данный момент. Это важная функция UX, которая дает пользователю ощущение, что система продолжает работать для выполнения долгосрочных задач, таких как получение данных с сервера или какие-либо сложные вычисления.

Примеры:

  • Модель:

    julia > @vars SpinnerModel begin
    box::R{String} = "box"
    comment::R{String} = "comment"
    hourglass::R{String} = "hourglass"
end

  • Вид:

    julia > spinner(color = "primary", size = "3em")
julia > spinner(:box, color = "orange", size = "5.5em")
julia > spinner(:comment, color = "green", size = "3em")
julia > spinner(:hourglass, color = "purple", size = "4em")
Аргументы

  • size::String — размер компонента в CSS-единицах. Можно указывать конкретное значение с единицей измерения или стандартное имя размера. Поддерживаемые значения: xs, sm, md, lg, xl. Примеры: 16px, 2rem, xs, md

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

  • thickness::Int — толщина линии (stroke-width). Используется для управления визуальной «жирностью» компонента. Пример: thickness = 5

Поле времени

Поле времени

time field

Показать код

  • JULIA

  • HTML

timefield(
    "Start time",
    :Timefield_start_time,
    timepicker_props = Dict(
        :nowbtn => true,
        :nounset => true,
        :format24h => true,
        :withseconds => true,
    ),
    textfield_props = Dict(:bgcolor => "blue-1"),
)
Реактивный код 
@app begin
    @in Timefield_start_time = Dates.Time(now())
end
<q-input filled="" label="Start time" v-model="Timefield_start_time" clearable="" bg-color="blue-1">
    <q-icon name="alarm" class="cursor-pointer" style="height: 100%;">
        <q-popup-proxy cover="" transition-show="scale" transition-hide="scale">
            <q-time with-seconds="" format24h="" v-model="Timefield_start_time" now-btn="" no-unset="" mask="HH:mm:ss"></q-time>
        </q-popup-proxy>
    </q-icon>
</q-input>

Программное использование

timefield(args...; kwargs...)

Сложный тип ввода, который сочетает в себе текстовое поле со значком, средство выбора времени и всплывающее окно. Средство выбора времени по умолчанию скрыто и отображается при нажатии на значок. Всплывающее окно используется для скрытия средства выбора времени, когда пользователь нажимает за его пределами. Определен ряд общих аргументов, которые передаются в текстовое поле, значок, всплывающее окно и средство выбора времени. Кроме того, аргументы ключевых слов могут быть переданы каждому из этих компонентов по отдельности с помощью аргументов ключевых слов textfield_props, icon_props, popup_proxy_props и timepicker_props.

Выбор времени

Выбор времени

time picker

Показать код

  • JULIA

  • HTML

[
    timepicker(:timepicker_time, mask = "HH:mm"),
    timepicker(:timepicker_time, mask = "HH:mm:ss"),
]
Реактивный код 
@app begin
    @in timepicker_time = Dates.Time(20, 23, 5)
end
<q-time v-model="timepicker_time" mask="HH:mm"></q-time>
<q-time v-model="timepicker_time" mask="HH:mm:ss"></q-time>

Программное использование

tabpanelgroup(args...; kwargs...)

Компонент «Выбор времени» предоставляет метод ввода времени.

Примеры:

  • Модель:

    julia > @vars TabPanelModel begin
    time::R{Time} = Dates.Time(t -> Dates.minute(t) == 20, 23)
    timewithseconds::R{Time} = Dates.Time(t -> Dates.second(t) == 12, 20, 23)
end

  • Вид:

    julia > Html.div(
    class = "q-gutter-md",
    [timepicker(:time, mask = "HH:mm"), timepicker(:timewithseconds, mask = "HH:mm:ss")],
)
Аргументы

  1. Поведение

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

    • landscape::Bool — отображать компонент в альбомной ориентации.

    • format24h::Bool — принудительно использовать 24-часовой формат времени вместо AM/PM.

    • options::String — позволяет ограничить допустимое время выбора. Переопределяется параметрами hour-options, minute-options и second-options, если они заданы. Для лучшей производительности рекомендуется задавать значение из области видимости, а не inline. Пример: options!="(hr, min, sec) => hr <= 6"

    • optionshour::Array — список допустимых часов. Переопределяет options, если задан. Пример: optionshour!="[3,6,9]"

    • optionsminute::Array — список допустимых минут. Переопределяет options, если задан. Пример: optionsminute!="[3,6,9]"

    • optionssecond::Array — список допустимых секунд. Переопределяет options, если задан. Пример: optionssecond!="[3,6,9]"

    • withseconds::Bool — разрешает установку времени с учетом секунд.

  2. Содержимое

    • nowbtn::Bool — отображает кнопку для выбора текущего времени.

  3. Модель

    • mask::String — маска форматирования, используемая для разбора и отображения значения. Пример: HH:mm:ss

    • withseconds::Bool — разрешает выбор времени с секундами (дублирует одноименный параметр поведения).

  4. Состояние

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

    • disable::Bool — переводит компонент в отключенное состояние.

  5. Стиль

    • color::String — цвет компонента из палитры цветов.

    • textcolor::String — цвет текста (переопределяет основной цвет, если необходимо). Используются значения из палитры цветов Quasar.

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

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

    • flat::Bool — применяет «плоский» стиль (без тени, используется по умолчанию).

    • bordered::Bool — добавляет стандартную рамку вокруг компонента.

Временная шкала

Временная шкала

timeline

Показать код

  • JULIA

  • HTML

[
    timeline(
        color = "secondary",
        [
            timelineentry("Timeline Heading", heading = true),
            timelineentry(title = "Event Title", subtitle = "February 22, 1986"),
            timelineentry(
                title = "Event Title",
                subtitle = "February 22, 1986",
                avatar = "https://cdn.quasar.dev/img/avatar2.jpg",
                [
                    Html.div(
                        "Lorem ipsum dolor sit amet, consectetur adipisicing elit,\n                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\n                  deserunt mollit anim id est laborum.",
                    ),
                ],
            ),
        ],
    ),
]
<q-timeline color="secondary">
    <q-timeline-entry heading="">
        Timeline Heading
    </q-timeline-entry>
    <q-timeline-entry title="Event Title" subtitle="February 22, 1986"></q-timeline-entry>
    <q-timeline-entry avatar="https://cdn.quasar.dev/img/avatar2.jpg" title="Event Title" subtitle="February 22, 1986">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </div>
    </q-timeline-entry>
</q-timeline>

Программное использование

timeline(args...; kwargs...)

Компонент «Временная шкала» отображает список событий в хронологическом порядке. Обычно он представляет собой графический дизайн, на котором изображена длинная полоса, помеченная датами и, как правило, событиями. Временные шкалы могут использовать любую временную шкалу, в зависимости от темы и данных.

Примеры:

  • Вид:

    julia > Html.div(
    class = "q-px-lg q-pb-md",
    [
        timeline(
            color = "secondary",
            [
                timelineentry("Timeline Heading", heading = true),
                timelineentry(
                    title = "Event Title",
                    subtitle = "February 22, 1986",
                    [
                        Html.div(
                            "Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                         nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                         deserunt mollit anim id est laborum.",
                        ),
                    ],
                ),
                timelineentry(
                    title = "Event Title",
                    subtitle = "February 21, 1986",
                    icon = "delete",
                    [
                        Html.div(
                            "Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                         nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                         deserunt mollit anim id est laborum.",
                        ),
                    ],
                ),
                timelineentry(
                    title = "Event Title",
                    subtitle = "February 22, 1986",
                    avatar = "https://cdn.quasar.dev/img/avatar2.jpg",
                    [
                        Html.div(
                            "Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                         nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                         reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                         deserunt mollit anim id est laborum.",
                        ),
                    ],
                ),
            ],
        ),
    ],
)
Аргументы

  1. Поведение

    • side::String — сторона, на которой размещаются элементы временной шкалы (timeline) в режимах dense и comfortable. Для режима loose параметр игнорируется и переопределяется свойством side у отдельных элементов (timelineentry). Значение по умолчанию: right. Допустимые значения: left, right

    • layout::String — режим компоновки временной шкалы. Значение по умолчанию: dense. Поддерживаемые значения:

      • dense — компактный режим: содержимое и подписи располагаются по одной стороне (значение по умолчанию);

      • comfortable — содержимое располагается с одной стороны, подписи — с противоположной;

      • loose — содержимое располагается по обе стороны временной линии.

  2. Стиль

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

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

Тумблер

Тумблер

toggle

Показать код

  • JULIA

  • HTML

toggle("Toggle", :Toggle_value, color = "blue")
Реактивный код 
@app begin
    @in Toggle_value = "true"
end
<q-toggle color="blue" label="Toggle" v-model="Toggle_value"></q-toggle>

Тумблер с пользовательским значением true/false

toggle click me

Показать код

  • JULIA

  • HTML

toggle(
    "Click me!",
    :ToggleValue_value,
    color = "blue",
    var"true-value" = "On",
    var"false-value" = "Off",
)
Реактивный код 
@app begin
    @in ToggleValue_value = "true"
end
<q-toggle color="blue" false-value="Off" true-value="On" label="Click me!" v-model="ToggleValue_value"></q-toggle>

Множественный тумблер

multiple toggles

Показать код

  • JULIA

  • HTML

Html.div(
    @recur("toggle in ToggleMultiple_toggle_list"),
    toggle(:toggle, :ToggleMultiple_toggle_states, val = :toggle, color = :toggle),
)
Реактивный код 
@app begin
    @out ToggleMultiple_toggle_list = ["red", "green", "yellow"]
    @out ToggleMultiple_toggle_states = ["true", "false", "true"]
end
<div v-for="toggle in ToggleMultiple_toggle_list">
    <q-toggle :color="toggle" :val="toggle" :label="toggle" v-model="ToggleMultiple_toggle_states"></q-toggle>
</div>

Программное использование

toggle(label::Union{String,Symbol}, fieldname::Union{Symbol,Nothing}, args...; kwargs...)

Компонент «тумблер» является еще одним базовым элементом для пользовательского ввода. Его можно использовать для включения и выключения настроек, функций или ввода true/false.

Примеры:

  • Модель:

    julia > @vars ToggleModel begin
    value::R{Bool} = false
    selection::R{Vector{String}} = ["yellow", "red"]
end

  • Вид:

    julia > toggle("Blue", color = "blue", :selection, val = "blue")
julia > toggle("Yellow", color = "yellow", :selection, val = "yellow")
julia > toggle("Green", color = "green", :selection, val = "green")
julia > toggle("Red", color = "red", :selection, val = "red")
Аргументы

  1. Поведение

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

    • indeterminatevalue::Union{Int, Float64, String, Bool} — значение модели, которое считается состоянием «не определено». Значение по умолчанию: null. Пример: "not_answered"

    • toggleorder::String — определяет порядок переключения состояний. Значение по умолчанию: "tf". Доступны:

      • t — состояние true

      • f — состояние false

      • i — состояние indeterminate

        Если toggle-indeterminate=true, порядок будет: indet → first state → second state → indet → …. В противном случае: indet → first state → second state → first state → …. Примеры: "tf", "tft"

    • toggleindeterminate::Bool — определяет, нужно ли при клике/нажатии переключаться через состояние indeterminate.

    • keepcolor::Bool — сохранять ли указанный цвет компонента при выключенном состоянии.

  2. Содержимое

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

  3. Общие параметры

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

  4. Иконки

    • checkedicon::String — иконка, отображаемая при включенном состоянии (checked).

    • uncheckedicon::String — иконка, отображаемая при выключенном состоянии (unchecked).

    • indeterminateicon::String — иконка, отображаемая при состоянии indeterminate.

  5. Подпись

    • label::Union{String, Symbol} — текст подписи, отображаемой рядом с компонентом. Пример: I agree to terms and conditions

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

  6. Модель

    • val::Union{Bool, Int, Float64, String, Vector} — используется, когда модель (value) является массивом (Array). Определяет, какое значение добавлять или удалять из модели при включении/выключении компонента. Пример: ["a", "b", "c"]

    • truevalue::Union{Bool, Int, Float64, String, Vector} — значение модели, которое считается состоянием «включено / отмечено». Значение по умолчанию: true Пример: "Agreed"

    • falsevalue::Union{Bool, Int, Float64, String, Vector} — значение модели, которое считается состоянием «выключено / не отмечено». Значение по умолчанию: false. Пример: "Not agreed"

  7. Состояние

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

  8. Стиль

    • size::String — размер компонента в CSS-единицах или стандартное имя размера. Поддерживаемые значения: xs, sm, md, lg, xl. Примеры: 16px, 1.5rem, xs, md

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

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

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

    • iconcolor::String — переопределяет цвет иконки (применяется только для состояния true). Цвет задается значением из цветовой палитры Quasar. Пример: primary, teal-10

Панель инструментов

Панель инструментов

toolbar

Показать код

  • JULIA

  • HTML

[
    toolbar(
        class = "text-primary",
        [
            btn(flat = true, round = true, dense = true, icon = "menu"),
            toolbartitle("Toolbar"),
            btn(flat = true, round = true, dense = true, icon = "more_vert"),
        ],
    ),
]
<q-toolbar class="text-primary">
    <q-btn flat="" round="" label="" icon="menu" dense=""></q-btn>
    <q-toolbar-title>
        Toolbar
    </q-toolbar-title>
    <q-btn flat="" round="" label="" icon="more_vert" dense=""></q-btn>
</q-toolbar>

Программное использование

toolbar(args...; kwargs...)

Панель инструментов — это компонент, который обычно входит в верхний и нижний колонтитулы макета, но его можно использовать в любом месте страницы.

Примеры:

  • Вид:

    julia > toolbar(
    class = "text-primary",
    [
        btn(flat = true, round = true, dense = true, icon = "menu"),
        toolbartitle("Toolbar"),
        btn(flat = true, round = true, dense = true, icon = "more_vert"),
    ],
)
Аргументы

  • inset::Bool — применяет вставку к содержимому (полезно для последующих панелей инструментов)

Подсказка

Подсказка

tooltip

Показать код

  • JULIA

  • HTML

[
    icon("warning", size = "25px", [tooltip("Fire!")]),
    btn("Hover me", color = "primary", [tooltip("Additional info")]),
]
<q-icon name="warning" size="25px">
    <q-tooltip>
        Fire!
    </q-tooltip>
</q-icon>
<q-btn color="primary" label="Hover me">
    <q-tooltip>
        Additional info
    </q-tooltip>
</q-btn>

Программное использование

tooltip(args...; kwargs...)

Загрузчик

Загрузчик

uploader

Показать код

  • JULIA

  • HTML

uploader(
    multiple = true,
    accept = :upl_acceptext,
    maxfilesize = :upl_maxsize,
    maxfiles = 10,
    autoupload = true,
    hideuploadbtn = true,
    label = "Upload Images",
    nothumbnails = true,
    style = "max-width: 95%; width: 95%; margin: 0 auto;",
    @on("rejected", :rejected),
    @on("uploaded", :uploaded),
    @on("finish", :finished),
    @on("failed", :failed),
    @on("uploading", :uploading),
    @on("start", :started),
    @on("added", :added),
    @on("removed", :removed)
)
Реактивный код 
@app begin
    @out upl_acceptext = ".jpg, .jpeg, .pdf, image/*"
    @out upl_imgsrc = "https://placehold.co/600x400"
    @out upl_maxsize = 1 * 1024 * 1024
    @out upl_caption = "No image selected"
    @onchange fileuploads begin
        if !(isempty(fileuploads))
            @info "File was uploaded: " fileuploads
            filename = Random.randstring(10) * "_" * base64encode(fileuploads["name"])
            try
                isdir(joinpath("public", "uploads")) ||
                    mkpath(joinpath("public", "uploads"))
                mv(fileuploads["path"], joinpath("public", "uploads", filename))
            catch e
                @error "Error processing file: $(e)"
                notify(__model__, "Error processing file: $(fileuploads["name"])")
            end
            upl_imgsrc = "/uploads/$(filename)"
            fileuploads = Dict{AbstractString,AbstractString}()
            @show upl_imgsrc
        end
    end
    @event rejected begin
        @info "rejected"
        notify(__model__, "File rejected. Please make sure it is a valid image file.")
    end
    @event added begin
        @info "added"
    end
    @event removed begin
        @info "removed"
    end
    @event started begin
        @info "started"
    end
    @event uploading begin
        @info "uploading"
    end
    @event uploaded begin
        @info "uploaded"
    end
    @event finished begin
        @info "finished"
        notify(__model__, "Upload finished.")
    end
    @event failed begin
        @info "failed"
    end
end
<q-uploader v-on:start="function(event) { handle_event(event, 'started') }" label="Upload Images" hide-upload-btn="" auto-upload="" v-on:failed="function(event) { handle_event(event, 'failed') }" v-on:uploaded="function(event) { handle_event(event, 'uploaded') }" no-thumbnails="" v-on:removed="function(event) { handle_event(event, 'removed') }" v-on:finish="function(event) { handle_event(event, 'finished') }" :url="'/____/upload/' + channel_" v-on:rejected="function(event) { handle_event(event, 'rejected') }" max-files="10" v-on:uploading="function(event) { handle_event(event, 'uploading') }" multiple="multiple" :accept="upl_acceptext" v-on:added="function(event) { handle_event(event, 'added') }" style="max-width: 95%; width: 95%; margin: 0 auto;" :max-file-size="upl_maxsize"></q-uploader>

Видео

Видео

video

Показать код

  • JULIA

  • HTML

video(
    src = "https://www.youtube.com/embed/G2iIXMjIIcA?si=n8nETlgI-mRELVBF?cc_load_policy=1",
    var":ratio" = "16/9",
)
<q-video src="https://www.youtube.com/embed/G2iIXMjIIcA?si=n8nETlgI-mRELVBF?cc_load_policy=1" :ratio="16/9"></q-video>

Программное использование

video(args...; kwargs...)

Использование компонента «видео» упрощает встраивание видео, такого как Youtube. Кроме того, по умолчанию размер контейнера изменяется в соответствии с ним.

Примеры:

  • Модель:

    julia > @vars RadioModel begin
    v_ratio::R{String} = "16/9"
end

  • Вид:

    julia > video(src = "https://www.youtube.com/embed/dQw4w9WgXcQ")
julia > video(ratio = :v_ratio, src = "https://www.youtube.com/embed/k3_tw44QsZQ?rel=0")
Аргументы

  1. Доступность

    • title::String — значение нативного HTML-атрибута title для внутреннего iframe. Используется для улучшения доступности (например, для экранных дикторов).

  2. Поведение

    • fetchpriority::String — задает относительный приоритет загрузки iframe-документа. Допустимые значения: auto, high, low. Значение по умолчанию: auto

    • loading::String — указывает, каким образом браузер должен загружать iframe. Допустимые значения: eager — загружать сразу, lazy — отложенная загрузка. Значение по умолчанию: eager

    • referrerpolicy::String — определяет, какой Referer будет отправляться при загрузке ресурса iframe. Допустимые значения: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url. Значение по умолчанию: strict-origin-when-cross-origin

  3. Модель

    • src::String — URL-адрес ресурса, отображаемого внутри iframe.

  4. Стиль

    • ratio::Union{String, Int, Float64} — соотношение сторон отображаемого содержимого. Если значение задается строкой, рекомендуется указывать уже вычисленное значение (а не выражение вроде 16/9). Пример: ratio = "1.7777"

Полезные ссылки

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

  2. Работа с Genie в Engee

  3. Stipple

  4. Фреймворк Genie

  5. Интерактивная галерея компонентов Stipple