Các thành phần

Để mở thư viện thành phần và thêm một thành phần mới vào màn hình, nhấp vào nút dấu cộng trong bảng bên trái hoặc phía trên bản xem trước thiết bị. Các phần tử được phân thành các nhóm sau:

Cơ bản (container bố cục, văn bản, media, danh sách, badge, dấu tích)
Form & Quiz (nút, input, quiz, tab)
Paywall & Thương mại (sản phẩm, toggle dùng thử, tương tác người dùng, đếm ngược)
Chỉ số tiến trình và loader

Với mỗi phần tử, Adapty cung cấp nhiều preset — các template kèm nội dung mẫu hoặc tương tác được định sẵn.

Cơ bản

Bố cục

Bài viết chính: Phần tử bố cục

Phần tử bố cục là các container dùng để tổ chức các phần tử bên trong chúng.

Vertical Container: sắp xếp các phần tử con từ trên xuống dưới
Horizontal Container: sắp xếp các phần tử con từ trái sang phải
Dividers (horizontal and vertical): các đường kẻ phân tách trực quan các phần nội dung
Carousel: vùng chứa có thể vuốt
Footer: thanh cố định ở cuối màn hình, nằm ngoài vùng cuộn
Bottom Sheet: bảng trượt lên được neo ở cuối màn hình

Bài viết chính: Nội dung văn bản

Văn bản có thể là tĩnh hoặc bao gồm biến (ví dụ: tên người dùng) và nội dung được bản địa hóa.

Các preset văn bản sau đây có sẵn theo mặc định. Để thay đổi danh sách này, hãy thêm hoặc xóa kiểu văn bản đã lưu:

H1
H2
H3
Button Label
Body
Caption
Small Label Menu Text cũng bao gồm phần tử Old Price — giá gốc của sản phẩm bị gạch ngang, được tính tự động từ một hệ số nhân. Xem Thêm giá gốc.

Media

Bài viết chính: Hình ảnh, video và biểu tượng

Phần này mô tả các phần tử media ở nền trước. Thay đổi nền màn hình để phủ toàn bộ màn hình bằng hình ảnh hoặc video.

Icon: biểu tượng vector từ thư viện icon tích hợp, có thể tùy chỉnh kích thước và màu sắc
Image: hình ảnh — tải lên ảnh của bạn hoặc cung cấp URL
Video: trình phát video nhúng cho các file tối đa 50MB. Hỗ trợ phát lặp.

Danh sách

Các phần tử danh sách sắp xếp nội dung thành hàng và cột để hiển thị dữ liệu theo định dạng đồng nhất. Về cơ bản, một danh sách là một container.

Icon List: các hàng có biểu tượng dẫn đầu và nhãn văn bản
Timeline: chuỗi dọc với các chỉ báo bước được kết nối
Image List: các hàng có hình ảnh dẫn đầu và văn bản
Icon Cards: lưới thẻ với biểu tượng căn giữa
Image Cards: lưới thẻ có hình ảnh
Comparison Table: bảng nhiều cột so sánh các tính năng giữa các gói (ví dụ: Free và Pro)

Badge

Nhãn phủ nhỏ để làm nổi bật một phần tử — thường dùng để quảng bá giảm giá hoặc các gói cụ thể (ví dụ: “Tiết kiệm 5%”). Dùng định vị tuyệt đối để đặt badge lên một phần tử khác.

Dấu tích

Biểu tượng chỉ báo lựa chọn dùng bên trong các phần tử có thể chọn. Mỗi preset dấu tích có trạng thái bật và tắt tự động cập nhật theo lựa chọn của người dùng.

Checkbox
Circle
Radiobutton
Toggle

Biểu mẫu & Câu hỏi

Nút

Bài viết chính: Nút

Nút kích hoạt hành động khi chạm vào — điều hướng đến màn hình khác, mở URL, hoặc đóng flow.

Mỗi preset là điểm khởi đầu — tùy chỉnh giao diện và gán bất kỳ hành động nào. Cấu hình hành vi nút trong tab Interactions.

Base: nút thông thường với văn bản căn giữa
Right Icon: nút có biểu tượng ở bên phải
With Subtitle: gồm hai dòng văn bản
Pulse Animation: có hiệu ứng nhấp nháy động
Purchase: kích hoạt mua hàng
Secondary Outline: nút có viền cho các hành động phụ
Back: quay lại màn hình trước
Close flow: thoát khỏi flow
View more plans: hiển thị thêm các tùy chọn sản phẩm
Links: một tập hợp các nút footer (Restore, Terms of Service, Privacy Policy)

Input

Bài viết chính: Input và biểu mẫu

Trường input cho phép người dùng nhập dữ liệu. Mỗi trường áp dụng phương thức nhập và quy tắc xác thực phù hợp.

Text
E-mail
Password
Number
Phone number
Date
Time
Date & Time

Các input Date, Time và Date & Time sẽ mở bộ chọn gốc của thiết bị (dạng bánh xe hoặc lịch) khi nhấn.

Dùng biến để xử lý đầu vào của người dùng và ảnh hưởng đến logic có điều kiện.

Câu hỏi trắc nghiệm

Bài viết chính: Khảo sát và câu hỏi trắc nghiệm

Các phần tử câu hỏi trắc nghiệm hiển thị màn hình chọn nhiều lựa chọn dùng cho khảo sát, thu thập sở thích và phân khúc người dùng. Thiết lập tương tác để phân nhánh flow dựa trên câu trả lời của người dùng.

Icon Options: danh sách một cột với biểu tượng
Emoji Options: danh sách một cột với emoji
Image Options: danh sách một cột với hình ảnh
Icon Grid: lưới nhiều cột với biểu tượng
Emoji Grid: lưới nhiều cột với emoji
Image Grid: lưới nhiều cột với ảnh
Rating: thang điểm số (ví dụ: 1–5)

Tab

Bài viết chính: Tab

Tab chia một phần màn hình thành các bảng nội dung có thể chuyển đổi. Người dùng chọn tab, và nội dung bên dưới cập nhật theo. Thường dùng để nhóm các gói sản phẩm hoặc chuyển đổi giữa giá theo tháng và theo năm.

Segment control: thanh chuyển đổi hình viên thuốc với góc bo tròn quanh tab được chọn
Button Tabs: các tab riêng biệt kiểu nút
Underline: nhãn văn bản với gạch chân đánh dấu tab được chọn

Paywall & Thương mại

Sản phẩm

Bài viết chính: Sản phẩm

Các phần tử sản phẩm hiển thị thông tin in-app purchase và xử lý việc chọn sản phẩm. Mỗi preset sắp xếp dữ liệu sản phẩm theo một bố cục khác nhau. Hãy liên kết sản phẩm của bạn để các phần tử hiển thị dữ liệu thực từ Adapty.

Vertical List: các thẻ sản phẩm xếp dọc
Horizontal List: các thẻ sản phẩm xếp ngang
Feature Carousel: thẻ có thể vuốt kèm danh sách tính năng
Feature Cards: thẻ tĩnh kèm danh sách tính năng
Banner List: các hàng thu gọn với nhãn hiển thị inline

Toggle dùng thử

Bài viết chính: Toggle

Toggle chuyển đổi sản phẩm được hiển thị giữa giá tiêu chuẩn và ưu đãi dùng thử miễn phí. Khi được bật, lựa chọn sản phẩm và trạng thái phần tử cập nhật tự động.

Tương tác người dùng

Các khối được tạo kiểu sẵn với đánh giá người dùng giúp tạo niềm tin và khuyến khích chuyển đổi. Các mẫu là container cơ bản với nội dung giữ chỗ.

Review: đánh giá sao kèm nhận xét và tên người đánh giá
Rating: điểm số kèm hiển thị sao
App Rating: điểm số lớn với thanh sao và số lượt đánh giá
Social Proof: chồng avatar kèm số lượng người dùng

Đồng hồ đếm ngược

Bài viết chính: Đồng hồ đếm ngược

Hiển thị giờ, phút và giây đếm ngược về không. Dùng để tạo cảm giác cấp bách cho các ưu đãi có thời hạn. Đồng hồ có thể kích hoạt hành động khi về đến không — ví dụ như chuyển sang màn hình khác hoặc ẩn huy hiệu giảm giá.

Inline: hiển thị số gọn nhẹ
Inline with units: hiển thị số kèm nhãn đơn vị
Badge: overlay đếm ngược nhỏ nổi bật
Blocks: thẻ riêng biệt cho ngày, giờ, phút và giây

Tiến trình

Bài viết chính: Loader và thanh tiến trình

Chỉ báo tiến trình

Thanh tiến trình theo bước hiển thị vị trí của người dùng trong flow nhiều màn hình. Hữu ích cho các chuỗi onboarding khi người dùng cần biết còn bao nhiêu bước nữa.

Linear: một thanh liên tục duy nhất lấp đầy khi người dùng tiến lên
Segmented: thanh được chia thành các đoạn rời, mỗi đoạn tương ứng một bước
Connectors: các điểm bước có số được nối bởi các đường kết nối ngắn

Loader

Chỉ báo tải động cho các chuyển tiếp. Dùng loader khi ứng dụng xử lý dữ liệu người dùng — ví dụ sau khi gửi câu hỏi.

Spinner: chỉ báo vòng tròn xoay
Spinner with label: spinner kết hợp với nhãn văn bản (ví dụ: “Đang tải…”)
Loader: thanh tiến trình ngang