Перейти к основному содержимому

Параметры конструктора виджетов

Иногда вам может потребоваться создать компонент, который предлагает некоторый постоянный дизайн, а также позволяет настраивать его. Здесь ценность приобретает передача конструктора виджетов в качестве параметров.

Параметры конструктора виджетов позволяют авторам компонентов заменять динамическое содержимое внутри дерева виджетов компонента. Это означает, что при использовании компонента пользователь может динамически передавать куски пользовательского интерфейса для использования внутри компонента.

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

возможные случаи использования
  • Пользовательские карточки: Представьте, что вам необходимо отображать карточки продуктов в приложении электронной коммерции. Вы можете создать повторно используемый компонент карточки с параметрами для изображения, заголовка, содержимого и кнопки вызова действия. Эту карточку можно использовать на разных страницах, но с разным содержимым.
  • Динамические формы: Создайте компонент формы, в котором различные поля (текстовые поля, выпадающие списки или флажки) передаются в качестве параметров. Это позволяет использовать одну и ту же структуру формы, но адаптироваться к различным входным полям.
  • Модульные макеты: Создайте консистентную структуру макета с элементами, такими как заголовки и нижние колонтитулы, которые остаются одинаковыми, передавая различное содержимое тела в качестве параметров для адаптации к разным страницам.

Давайте рассмотрим пример из приложения электронной коммерции. На странице ввода адреса доставки, возможно, вам захочется сохранить согласованный дизайн для различных полей ввода (где пользователь может указать свое имя, электронную почту и т. д.). Однако вам может потребоваться разрешить настройку различных полей - например, вы хотите использовать TextField для ввода имени пользователя и DropDown для выбора страны.

widget-builder-as-parameter-example.avif

Создание конструкторов виджетов в качестве параметров​

Чтобы создать компонент с конструктором виджетов в качестве параметра, используйте следующие шаги.

Создание параметра типа конструктора виджетов​

Создайте новый компонент и добавьте базовые виджеты, которые будут неизменными. Затем определите параметр и установите его тип как Конструктор виджетов. Чтобы передавать данные из текущего компонента в конструктор виджетов, можно указать параметр для конструктора виджетов.

<div style={{
    position: 'relative',
    paddingBottom: 'calc(55.67989417989418% + 41px)', // Сохраняет соотношение сторон и дополнительное заполнение
    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>

Добавление конструктора виджетов в дерево виджетов​

Добавьте заполнитель конструктора виджетов в желаемое место в дереве виджетов компонента, где должен появиться динамический элемент. Конструкторы виджетов появляются в разделе Компоненты палитры виджетов при добавлении виджета в дерево виджетов.

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Сохраняет соотношение сторон и дополнительное заполнение
    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>

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

Иногда вам нужно передавать данные из компонента конструктору виджетов. Например, на странице ввода адреса доставки вам может понадобиться, чтобы подсказка в поле ввода менялась в зависимости от некоторой конфигурации. В этом случае можно передать подсказку в качестве параметра в конструктор виджетов. Вот как это сделать:

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Сохраняет соотношение сторон и дополнительное заполнение
    height: 0,
    width: '100%'}}>
    <iframe 
        src="https://demo.arcade.software/eNz0LKXEpeh90p9qNIyU?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>

Просмотр конструктора виджетов с использованием различных компонентов​

Вы можете выбрать различные компоненты для предпросмотра при создании компонента с параметром конструктора виджетов.

Чтобы выбрать компонент для использования в предпросмотре, выберите Конструктор виджетов, затем перейдите в раздел Свойства пользовательского интерфейса конструктора виджетов панели свойств.

preview-component.png

Использование компонентов с конструкторами виджетов в качестве параметров​

При использовании компонента, который имеет конструктор виджетов в качестве параметра, вы можете передавать компоненты, чтобы настроить содержимое в соответствии с вашими потребностями.

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

<div style={{
    position: 'relative',
    paddingBottom: 'calc(56.67989417989418% + 41px)', // Сохраняет соотношение сторон и дополнительное заполнение
    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>