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

Цвет

Задаётся свойством mode.

"default"

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

"destructive"

Цвет критических действий (чаще всего красный), старайтесь располагать такие действия сверху списка, где они наиболее заметны.

"cancel"

Цвет действия отмены.

Кнопка “Отмена”

Свойство isCancelItem позволяет пометить пункт действия как “Отмена”.

Согласно рекомендациям Apple в ActionSheet должен быть вариант действия “Отмена”, который бы позволял закрывать всплывающее окно без выполнения дополнительных действий.

Подробнее с использованием можно ознакомиться на странице ActionSheet.

Текстовые элементы

Основной контент компонента (заголовок) можно задать, передав в свойство children необходимый текст:

Свойство subtitle позволяет отобразить дополнительный текст под заголовком:

Свойство meta даёт возможность отобразить небольшой пояснительный текст или индикатор рядом с заголовком:

Многострочный режим

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

Контент в начале/в конце

В компоненте доступна возможность добавления дополнительного контента слева и/или справа от текста, задаётся свойством before и after соответственно. Наиболее частый вариант использования свойств before/after - иконки или аватары.

В соответствии с рекомендациями дизайн-системы, для десктопного представления (compact-режим) следует использовать иконки размером 20px, для мобильного представления (regular-режим) — 28px. Проще всего это сделать, используя компонент AdaptiveIconRenderer.

Состояния

disabled

Свойство позволяет отключить возможность взаимодействия с пунктом меню.

selectable

Свойство даёт возможность выбирать элемент (визуальная и нативная имитация элемента радиокнопки). При использовании данного свойства вы также можете передавать стандартные свойства радиокнопок, для управления поведением:

  • name — имя группы для радиокнопок;
  • value — значение радиокнопки;
  • defaultChecked — установить выбранным по умолчанию;
  • checked и onChange — для контролируемого извне использования выбранного значения;

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

Обработчики событий

onClick/ onImmediateClick

Нажатие на пункт меню можно обработать с помощью свойств onClick и onImmediateClick.

По умолчанию onClick будет вызван после завершения анимации скрытия всплывающего меню и после вызова onClosed. Из этого следует, что в объекте события значение поля currentTarget будет не определено. Если вам нужен объект события именно на момент нажатия, воспользуйтесь onImmediateClick.

onChange

Если задано свойство selectable={true}, то выбор пункта следует обрабатывать с помощью свойства onChange. Пример можно увидеть выше.

Ссылки

Если указать свойство href, компонент будет рендериться как ссылка <a>. Также можно задать стандартное свойство target:

<ActionSheetItem href="https://vk.com" target="_blank">
  Перейти на vk.com
</ActionSheetItem>
Предыдущая
Темы
Следующая
ButtonGroup