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

Когда это действие срабатывает, открывается окно выбора цвета, где пользователи могут настроить цвет. После выбора нужного цвета палитра закроется, и выбранный цвет будет доступен через Widget State > Color Picked.

кол 1ъ

Добавление действия Color Picker

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

  1. Выберите виджет (например, контейнер, кнопку и т.д.), на который вы хотите добавить действие.
  2. Выберите Действия на панели свойств (правое меню), Если это первое действие, нажмите кнопку + Добавить действие. В противном случае нажмите кнопку «+» под плиткой предыдущего действия (внутри Action Flow Editor) и выберите Add Action.
  3. Найдите и выберите действие Color Picker (в разделе UI Interactions).
  4. Когда открывается окно выбора цвета, по умолчанию выбирается основной цвет. Чтобы изменить это, установите параметр Первоначально выбранный цвет.
  5. Вы также можете настроить внешний вид и ощущение от выбора цвета, изменив цвет текста, фона и кнопки.
  6. По умолчанию выборщик цветов позволяет пользователям добавлять непрозрачность к цвету. Чтобы пользователи могли выбирать только непрозрачные цвета, отключите переключатель «Разрешить непрозрачность».
  7. Недавние цвета помогают пользователям выбрать любой предыдущий цвет, который они уже использовали.
  8. Отключите тумблер Показывать последние цвета, если не хотите их показывать. Выбранный цвет теперь доступен по адресу Состояние виджета > Выбранный цвет. Вы можете получить доступ к нему из свойства color любого виджета или нажать кнопку «+» и добавить следующее действие для обновления выбранного цвета в бэкенде или локальном состоянии.
После того как пользователь выберет нужный цвет, пикер автоматически закроется, а доступ к выбранному цвету можно получить через Widget State > Color Picked.

Вот пример добавления действия выбора цвета и обновления выбранного цвета в локальной переменной состояния.

кол 2
кол 3