Параметры Widget Builder

Иногда компонент должен сохранять общее устройство, но допускать разное наполнение. Для этого вёрстку передают внутрь него как параметр.

Widget Builder позволяет автору компонента оставить место, куда пользователь компонента подставит свои виджеты. Общая конструкция при этом остаётся неизменной.

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

совет

Где это пригодится

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

Посмотрим на пример из магазина. На странице адреса доставки поля ввода оформлены одинаково, но по сути разные: имя пользователь вводит в TextField, а страну выбирает в DropDown.

Создайте компонент и соберите в нём неизменную часть вёрстки. Затем добавьте параметр с типом Widget Builder. Если внутрь нужно передавать данные из компонента, опишите параметры и для самого конструктора.

<div style={{
    position: 'relative',
    paddingBottom: 'calc(55.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://demo.arcade.software/4JjEozeplDTGYYr1pqnF?embed&show_copy_link=true"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

Поставьте заглушку конструктора туда, где должно появляться переменное содержимое. Конструкторы виджетов находятся в разделе Components палитры виджетов.

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://demo.arcade.software/WIQE90y3f14ajwx2Wy7H?embed&show_copy_link=true"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

Данные из компонента передаются в конструктор параметрами. Скажем, подсказка в поле ввода на странице адреса доставки должна меняться в зависимости от настройки — её и передают как параметр.

Пока вы собираете компонент с параметром Widget Builder, в предпросмотре можно подставлять разные компоненты и смотреть, как всё выглядит.

Выделите Widget Builder и откройте раздел Widget Builder UI Properties в панели свойств.

Когда вы применяете компонент с параметром-конструктором, внутрь передаются компоненты с нужным содержимым.

В примере под TextField и Dropdown созданы два отдельных компонента — они и передаются как конструкторы виджетов.

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://demo.arcade.software/zlTGZrEymy56lONPvSn5?embed&show_copy_link=true"
        title=""
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            colorScheme: 'light'
        }}
        frameborder="0"
        loading="lazy"
        webkitAllowFullScreen
        mozAllowFullScreen
        allowFullScreen
        allow="clipboard-write">
    </iframe>
</div>
<p></p>

Параметры Widget Builder

Создание параметра

Параметр типа Widget Builder

Размещение в дереве виджетов

Передача параметров в конструктор

Предпросмотр с разными компонентами

Использование компонента