Flip Card
Карточка с двумя сторонами, переворачивается в 3D. Pro · 3D и моушн › 3D-объекты и витрины
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add flip-cardnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { FlipCard } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
front * | ReactNode | The front face. | |
back * | ReactNode | The back face. | |
flipped | boolean | Whether the back is shown (controlled). | |
defaultFlipped | boolean | false | Whether the back is shown at first (uncontrolled). |
onFlippedChange | (flipped: boolean) => void | Called when the card turns over. | |
trigger | 'click' | 'hover' | 'manual' | 'click' | click — a press on the card (outside its links and buttons) turns it over; hover — it turns over while a mouse is over it, and on a press on touch screens; manual — only flipped and the flip button. |
axis | 'x' | 'y' | 'y' | y — turns around the vertical axis, like a card; x — around the horizontal one, like a calendar page. |
duration | number | 800 | Length of the turn, ms. |
flipButton | boolean | true | Shows the round flip button in the corner — the keyboard's way to turn the card over. |
labels | Partial<FlipCardLabels> | Text for the flip button. |
Похожие компоненты
- Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
- Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура
- Word Prism — Слово на гранях призмы: поворачивается к следующему
- Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
- Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
- Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
- Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
- Presence — Появление и уход: элемент живёт, пока проигрывается выход
- Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
- Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
- Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
- Helix Rail — Карточки на спирали, которая вращается от прокрутки
Назад: Coverflow Carousel · Далее: Word Prism · Весь раздел «3D и моушн»