PassPreview
Thẻ trượt vào màn hình ứng dụng Wallet, kèm hiệu ứng nhấn nút nguồn:
NotificationPreview
Thông báo đẩy xuất hiện trên màn hình khóa:
LocationPreview
Gợi ý vị trí và thẻ liên quan trên màn hình khóa:
Wallpaper
Cả bốn component điện thoại đều nhận prop wallpaper để hiển thị ảnh nền màn hình khóa (tự làm mờ và tối giản 45%):
Khi có wallpaper, thẻ trượt lên trên ảnh nền màn hình khóa với thanh trạng thái màu trắng. Khi không có, PassPreview hiển thị nền ứng dụng Wallet sáng với thanh trạng thái màu đen.
Các component cơ bản
Ngoài ba biến thể trên, file snippets/wallet-preview.jsx còn export các component độc lập để tự lắp ghép:
Props chính
WalletPass: color, brand, logo, pointsLabel, pointsValue, showPoints, stripImage, stripLabel, stripValue, tierLabel, tierValue, code ("qr" | "barcode" | null), codeValue, style.
PhoneMockup: wallpaper, screenBg, time, date, showClock, darkStatus, hideStatusBar, hideNotch, hideSideButton, walletBg, animate, scale, style, children.
PassPreview: pass (object chứa props của WalletPass), wallpaper, animate, scale, time và các props còn lại của PhoneMockup.
NotificationPreview: notification (object chứa props của WalletNotification), wallpaper, animate, scale, time.
LocationPreview: glance (object chứa props của PassGlance), pill, wallpaper, animate, scale, time.
Đặt animate={false} để tắt vòng lặp hoạt cảnh và hiển thị trạng thái cuối cố định. Hoạt cảnh tự tôn trọng cài đặt prefers-reduced-motion.
Lắp ghép tự do
Bạn có thể đặt bất kỳ nội dung nào vào PhoneMockup:
