---
title: "Các phần tử"
description: "Tất cả các phần tử trực quan có trong Flow Builder: container bố cục, văn bản, media, danh sách, nút, input, sản phẩm và nhiều hơn nữa."
---

Để mở thư viện phần tử và thêm phần tử mới vào màn hình, hãy nhấp vào nút dấu cộng Plus ở 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 chia thành các nhóm sau:
- [Cơ bản](#basics) (container bố cục, văn bản, media, danh sách, badge, dấu tích)
- [Biểu mẫu & Câu hỏi](#forms--quiz) (nút, input, câu hỏi, tab)
- [Paywall & Thương mại](#paywall--commerce) (sản phẩm, toggle dùng thử, tương tác người dùng, đếm ngược)
- [Chỉ báo tiến trình](#progress) và loader

Với mỗi phần tử, Adapty cung cấp nhiều preset — các mẫu có nội dung giữ chỗ hoặc tương tác được định nghĩa sẵn.

## Cơ bản \{#basics\}

### Bố cục \{#layout\}

:::link
Bài viết chính: [Phần tử bố cục](builder-containers)
:::

Phần tử bố cục là các container dùng để sắp xếp 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 (ngang và dọc)**: các đường kẻ phân tách trực quan các phần nội dung
- **Carousel**: container có thể vuốt
- **Bottom Sheet**: bảng trượt lên được neo vào phía dưới màn hình

### Văn bản \{#text\}

:::link
Bài viết chính: [Nội dung văn bản](onboarding-text)
:::

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

Các preset văn bản mặc định bao gồm. Để thay đổi danh sách này, thêm hoặc xóa [kiểu văn bản đã lưu](builder-styling#reusable-styles):

- H1
- H2
- H3
- Button Label
- Body
- Caption
- Small Label

### Media \{#media\}

:::link
Bài viết chính: [Hình ảnh, video và biểu tượng](custom-media)
:::

:::note
Phần này mô tả các phần tử media ở nền trước. Thay đổi [nền màn hình](paywall-layout-and-products#screen-background) để 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 \{#list\}

Phần tử danh sách tổ chức nội dung thành các hàng và cột để hiển thị dữ liệu được định dạng đồng nhất. Về cơ bản, danh sách là một [container](manage-paywall-ui-elements#layout).

- **Icon List**: các hàng với 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 với 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ẻ kèm hình ảnh
- **Comparison Table**: bảng nhiều cột so sánh tính năng giữa các gói (ví dụ: Free và Pro)

### Badge \{#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](manage-paywall-ui-elements#absolute) để đặt badge lên một phần tử khác.

### Dấu tích \{#checkmarks\}

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](flow-selectable-elements). 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 \{#forms--quiz\}

### Nút \{#buttons\}

:::link
Bài viết chính: [Nút](paywall-buttons)
:::

Nút kích hoạt các hành động khi nhấn — đ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 — bạn có thể tùy chỉnh kiểu dáng và gán bất kỳ hành động nào. Cấu hình hành vi nút trong tab [Interactions](builder-ui#interactions-properties).

- **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**: bao gồm hai dòng văn bản
- **Pulse Animation**: bao gồm hiệu ứng nhấp nháy động
- **Purchase**: kích hoạt thanh toán
- **Secondary Outline**: nút có viền cho các hành động phụ
- **Back**: điều hướng về màn hình trước
- **Close flow**: thoát flow
- **View more plans**: hiển thị thêm tùy chọn sản phẩm
- **Links**: bộ nút footer (Restore, Terms of Service, Privacy Policy)

### Input \{#inputs\}

:::link
Bài viết chính: [Input và biểu mẫu](builder-inputs-and-forms)
:::

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](onboarding-variables) để 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 \{#quizzes\}

:::link
Bài viết chính: [Khảo sát và câu hỏi](onboarding-quizzes)
:::

Phần tử câu hỏi hiển thị màn hình lựa chọn nhiều đáp án 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](onboarding-navigation-branching) để rẽ 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 có số (ví dụ: 1–5)

### Tab \{#tabs\}

:::link
Bài viết chính: [Tab](builder-tabs)
:::

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 \{#paywall--commerce\}

### Sản phẩm \{#products\}

:::link
Bài viết chính: [Sản phẩm](paywall-product-block)
:::

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 bố cục khác nhau. Liên kết sản phẩm của bạn để điền dữ liệu thực từ Adapty vào các phần tử.

- **Vertical List**: thẻ sản phẩm xếp chồng
- **Horizontal List**: thẻ sản phẩm đặt cạnh nhau
- **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 gọn với badge nội tuyến
{/* Coming soon - **Bottom Sheet**: bộ chọn sản phẩm trong bảng trượt lên */}

### Toggle dùng thử \{#trial-toggle\}

:::link
Bài viết chính: [Toggle](builder-toggles)
:::

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 \{#user-engagement\}

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

### Đếm ngược \{#countdown\}

:::link
Bài viết chính: [Đồng hồ đếm ngược](paywall-timer)
:::

Hiển thị giờ, phút và giây đếm ngược về không. Dùng để tạo sự khẩn cấp cho các ưu đãi có thời hạn. Bộ đếm có thể kích hoạt hành động khi về không — chẳng hạn điều hướng đến màn hình khác hoặc ẩn badge giảm giá.

- **Inline**: hiển thị số gọn
- **Inline with units**: hiển thị số kèm nhãn đơn vị
- **Badge**: lớp phủ đồng hồ nhỏ được làm nổi bật
- **Blocks**: thẻ riêng cho ngày, giờ, phút và giây

## Tiến trình \{#progress\}

:::link
Bài viết chính: [Loader và thanh tiến trình](builder-loaders-and-progress-bars)
:::

### Chỉ báo tiến trình \{#progress-indicators\}

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 \{#loaders\}

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
{/* - **Loader with label**: thanh tiến trình kết hợp với nhãn văn bản và phần trăm */}