Перейти к основному содержимому

FlippableCard

Виджет FlippableCard обеспечивает визуальное взаимодействие под названием «Анимация переворота карточки». Изначально он отображает лицевую сторону карточки, а при нажатии на неё показывает обратную сторону.

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

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

Чтобы добавить виджет FlippableCard:

  1. Сначала нажмите + Add Widget и перетащите виджет FlippableCard из вкладки Layout Elements или добавьте его напрямую из дерева виджетов.
  2. Выберите Card Front в дереве виджетов и настройте или замените Container на виджет по вашему выбору. Например, замените его на виджет Credit Card (в разделе Templates > Card Views).
  3. Чтобы отредактировать обратную сторону карточки, выберите FlippableCard, перейдите в панель свойств, прокрутите вниз до раздела Flippable Card Properties и включите Edit Back of Card.
  4. Теперь выберите Card Back в дереве виджетов и настройте или замените Container на виджет по вашему выбору. Например, добавьте виджет Credit Card и настройте его для отображения деталей.

Настройка​

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

Изменение направления переворота​

По умолчанию этот виджет переворачивает карточку в горизонтальном направлении (т. е. слева направо и справа налево).

Чтобы изменить направление переворота:

  1. Выберите виджет FlippableCard в дереве виджетов или области холста.
  2. Перейдите в панель свойств и прокрутите вниз до раздела Flippable Card Properties.
  3. Найдите выпадающий список Flip Direction и измените его на Horizontal или Vertical.

Изменение длительности анимации переворота​

При нажатии на этот виджет анимация переворота завершается за 400 мс (миллисекунд). Вы можете изменить эту длительность, чтобы сделать анимацию немного быстрее или медленнее.

Чтобы изменить длительность анимации переворота:

  1. Выберите виджет FlippableCard в дереве виджетов или области холста.
  2. Перейдите в панель свойств и прокрутите вниз до раздела Flippable Card Properties.
  3. Найдите свойство Flip Animation Duration и измените значение. Примечание: значение должно быть в миллисекундах (например, 1000 мс = 1 секунда).

Отключение переворота при нажатии​

По умолчанию карточка переворачивается при нажатии на неё. Чтобы отключить это поведение, перейдите в properties panel > Flippable Card Properties > отключите переключатель Flip on Tap.