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

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

Чтобы добавить виджет ChoiceChips в свое приложение, выполните следующие действия:

1. Добавьте виджет ChoiceChips на вкладке Элементы формы.
2. По умолчанию этот виджет добавляет один вариант с названием Option 1. Чтобы изменить название, перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Define Options. Найдите свойство Option 1 и измените его название и значок.
3. Чтобы добавить другие опции, щелкните на тексте Add Option и задайте имя и значок для новых опций.
4. Чтобы установить любую микросхему в качестве выбранной по умолчанию, найдите свойство Initial Option и введите название микросхемы.
   1. Чтобы задать это значение динамически, откройте меню Set from Variable и задайте переменную.
   2. При включении функции multiselect можно также задать список опций для предварительного выбора.

Видео:https://www.loom.com/share/16bb138384864990ae6991f477589d13?sid=d8e3ad02-4f0e-48d3-8d99-f3ec427fd50e

Посмотрите, как вызвать действие при изменении выбора в этом виджете.

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

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

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

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

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

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

Видео:https://www.loom.com/share/6521e458211b4250b1376f8462a9cce2?sid=e9225303-f15f-4845-b3fc-17adc8ead2c1

Для добавления промежутка между фишками можно использовать свойство Chip Spacing ad Row Spacing.

• Расстояние между фишками: Добавляет горизонтальные промежутки между отдельными фишками.
• Расстояние между рядами: Добавляет вертикальные промежутки между фишками в ряду.

Если фишки расположены в нескольких рядах, их можно выровнять с помощью свойства Alignment. Это аналогично настройке выравнивания по главной оси для виджета Row.

Различные свойства раздела Selected Chip Style и Unselected Chip Style позволяют настроить микросхемы в соответствии с дизайном. Вот как это делается:

1. Чтобы изменить цвет фона, используйте свойство Color.
2. Чтобы изменить цвет и размер значка, используйте свойства Icon Color и Icon Size.
3. Чтобы добавить тень или создать ощущение глубины микросхемы, можно использовать свойство Elevation.
4. Для настройки границы используйте свойства Border Color (цвет границы), Border Width (толщина границы) и Border Radius (скругленный угол).
5. Чтобы создать свободное пространство вокруг этикетки, используйте свойство Label Padding.
6. Для изменения стиля текста метки используется свойство Selected Text Style.

Видео:https://www.loom.com/share/75141dcf90cd4d1a8e22dd288a7e9dee?sid=600ebf52-c9a4-4361-8048-4afdb4545531

Аналогичным образом можно настроить свойства под стилем Unselected Chip Style.

Посмотрите, как показать или скрыть любой виджет с помощью свойства Conditional Visibility.

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

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