Để 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

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

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

• 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

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

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

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

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

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ử

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

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

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