ChoiceChips

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

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

Состояние виджета

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

Добавление виджета ChoiceChips

Чтобы добавить виджет ChoiceChips в ваше приложение:

1. Добавьте виджет ChoiceChips из вкладки Элементы формы.
2. По умолчанию этот виджет добавляет один вариант с именем Option 1. Чтобы изменить название, перейдите в панель свойств, прокрутите вниз до раздела Определение опций. Найдите свойство Option 1 и измените название и значок.
3. Чтобы добавить больше вариантов, нажмите на текст Добавить опцию и установите имя и значок для новых опций.
4. Чтобы установить любой чип по умолчанию, найдите свойство Начальный вариант и введите название чипа.
   1. Чтобы устанавливать это значение динамически, откройте меню Установить из переменной и укажите переменную.
   2. Когда включена множественная выборка, вы также можете установить список вариантов для предварительного выбора.

Вызов действия при изменении

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

Выбор или сброс всех выборов [Действие]

Пользователи могут быстро снять выделение со всех чипов или выбрать все доступные выборочные чипы сразу. Вы можете сделать это, добавив действие Снять все/Выбрать все.

к сведению

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

Настройка

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

Разрешить множественный выбор

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

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

Отключение ChoiceChips

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

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

Добавление отступа между чипами

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

• Отступ чипов: Это добавляет горизонтальные промежутки между отдельными чипами.
• Отступ строки: Это добавляет вертикальные промежутки между чипами в строке.

Выравнивание чипов

Когда у вас есть чипы в нескольких рядах, вы можете выравнивать их, используя свойство Выравнивание. Это аналог установки выравнивания основной оси для виджета Row.

Настройка стиля выбранных и невыбранных чипов

Различные свойства в разделе Стиль выбранного чипа и Стиль невыбранного чипа позволяют настроить чипы под свой дизайн. Вот как это сделать:

1. Чтобы изменить цвет фона, используйте свойство Цвет.

2. Чтобы изменить цвет и размер значка, используйте свойства Цвет значка и Размер значка.

3. Чтобы добавить тень или создать ощущение глубины для чипа, вы можете использовать свойство Высота.

4. Чтобы настроить границу, используйте свойства Цвет границы, Ширина границы (толщина) и Радиус границы (скругленный угол).

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

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

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