Проведите пальцем, чтобы открыть

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

Компонент «Проведите пальцем для открытия» позволяет добавлять дополнительные действия к фишкам и картам, особенно когда они появляются в списках. Этот компонент позволяет пользователям быстро выполнять задачи, не отходя от экрана.

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

Компонент имеет 2 слота для этих действий:

  1. Начальный
  2. Вторичный (необязательно)

Анатомия

Выявленные действия

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

Выявленные действия отображаются на одной стороне для всех языковых локалей.

  1. Первичное действие
  2. Вторичное действие (необязательно)

Совершите основное действие

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

В первом примере показан вариант с одной кнопкой . Во втором примере показан вариант с двойной кнопкой .

Отменить действие

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

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

Смахните пороги

Проведение пальцем по экрану для отображения поведения компонента зависит от того, как далеко пользователь проводит пальцем по экрану:

  • Если пользователь проведет пальцем по менее чем 50% экрана, компонент вернется в исходное положение, и никаких действий не будет предпринято.
  • Если пользователь проводит пальцем по экрану на расстояние от 50% до 75% полной ширины, компонент остается частично видимым, и отображаются действия, связанные с ним.
  • Если пользователь проведет пальцем по более чем 75% экрана, компонент исчезнет, ​​и система автоматически выполнит основное действие.

Следующие компоненты с тематикой материалов реализуют пролистывание для отображения поведения:

На картах

На следующих снимках экрана показано пролистывание для отображения внешнего вида компонента при использовании класса SwipeToRevealCard :

На чипсах

На следующих снимках экрана показано пролистывание, чтобы показать внешний вид компонента при использовании класса SwipeToRevealChip :