---
title: "Phần tử bố cục: container, carousel, bottom sheet"
description: "Nhóm các phần tử thành container, carousel và bottom sheet trong Flow Builder."
---

Các phần tử bố cục dùng để nhóm các phần tử khác lại và kiểm soát cách chúng được hiển thị trên màn hình.

:Flow Builder có năm loại phần tử bố cục:
- **Containers**: sắp xếp các phần tử con theo một trục — dọc hoặc ngang
- **Carousel**: vùng chứa có thể vuốt, hiển thị từng slide một
- **Bottom Sheet**: panel trượt lên từ phía dưới màn hình và hiển thị phủ lên nội dung bên dưới
- **Footer**: panel ghim ở cuối màn hình, nằm ngoài vùng cuộn
- **Dividers**: các đường kẻ mỏng phân tách các hàng hoặc cột

:::link
**Tabs** cũng thuộc nhóm này, nhưng được trình bày trong một bài viết riêng. Xem [Tabs](builder-tabs) để biết thêm chi tiết.
:::
## Container \{#containers\}

:::link
Bài viết chính: [Định vị phần tử](manage-paywall-ui-elements)
:::

Container nhóm các phần tử theo chiều dọc hoặc chiều ngang. **Vertical Container** sắp xếp các phần tử thành hàng; **Horizontal Container** sắp xếp chúng thành cột.

:::tip
Lồng các container vào nhau để tạo bố cục phức tạp hơn.
:::

### Thay đổi hướng container \{#change-container-direction\}

Hướng của container không cố định. Bạn có thể chuyển đổi giữa **Vertical**, **Horizontal** và **Free** trong phần **Layout** của panel bên phải bất kỳ lúc nào — không cần xóa và tạo lại container.

Cấu hình khoảng cách, căn chỉnh và phân bố trong cùng phần **Layout**. Các phần tử con được hiển thị theo thứ tự xuất hiện trong panel **Layers** — kéo để sắp xếp lại.

### Wrap và Unwrap \{#wrap-and-unwrap\}

Để chuyển một phần tử hiện có thành container, chọn nó và dùng [thao tác layer](paywall-layout-and-products#layer-actions) **Wrap**. Kéo thêm các phần tử vào container mới từ panel **Layers**. Để xóa stack và đưa các phần tử con lên một cấp, dùng **Unwrap**.

## Carousel \{#carousel\}

**Carousel** là một vùng chứa có thể vuốt, hiển thị một slide tại một thời điểm. Người dùng vuốt ngang để chuyển sang slide tiếp theo, hoặc carousel tự động chuyển slide theo hẹn giờ.

Carousel chứa một tập hợp các layer **Slide**. Khi slide đang active, các phần tử trên layer đó sẽ hiển thị trên màn hình.
Không giống Tabs, slide đang hiển thị trong carousel không được hiển thị dưới dạng [nhóm có thể chọn](flow-selectable-elements) — các slide không thể được tham chiếu trong điều kiện hoặc văn bản động. Hãy dùng Carousel cho mục đích xoay vòng hình ảnh, không phải để phân nhánh theo lựa chọn của người dùng.
### Thay đổi slide đang hoạt động \{#change-active-slide\}

Khi bạn chọn carousel, builder hiển thị thanh điều khiển pop-up với dropdown **Slide** và nút **+ Add Slide**.

- Nhấp **+ Add Slide** để thêm một slide trống mới.
- Dùng dropdown **Slide** để chuyển slide nào đang hoạt động trên canvas — hoặc nhấp vào layer Slide tương ứng trong panel **Layers**.

Để sắp xếp lại các slide, kéo chúng trong Carousel ở panel Layers.

{/* TODO: on-device GIF */}

### Thuộc tính

#### Tự động cuộn \{#auto-scroll\}

Tự động cuộn sẽ chuyển slide liên tục — người dùng không cần vuốt để xem hết nội dung.

Hai tham số thời gian điều khiển hành vi này:

- **Delay** — thời gian mỗi slide hiển thị (ms).
- **Duration** — thời gian chuyển tiếp giữa các slide (ms).

#### Kích thước carousel \{#carousel-sizing\}
Các điều khiển chuyên dụng xác định kích thước của carousel và khoảng cách giữa các slide liền kề. Đặt **Height** thành **Fixed** để bố cục không bị dịch chuyển khi người dùng vuốt giữa các slide có độ dài nội dung khác nhau.

#### Kích thước slide \{#slide-sizing\}

**Width** và **Height** cho từng slide. Mặc định là Fill để mỗi slide theo kích thước của carousel. Đặt chiều rộng cố định để tạo hiệu ứng peek, nơi các slide lân cận hiển thị một phần.

#### Dots \{#dots\}

Chỉ báo trang ở cuối carousel. Nó cho người dùng biết có bao nhiêu slide và slide nào đang active.

Tắt toggle **Show dots** để ẩn chỉ báo slide. Khi dots hiển thị, các thuộc tính sau điều chỉnh giao diện của chúng:
- **Color** — màu nền của dấu chấm không hoạt động.
- **Active Color** — màu nền của dấu chấm tương ứng với slide đang hiển thị.
- **Size** — đường kính của mỗi dấu chấm, tính bằng pixel.
- **Gap** — khoảng cách giữa các dấu chấm liền kề.
- **Padding** — khoảng cách giữa hàng dấu chấm và nội dung carousel phía trên.
## Bottom Sheet \{#bottom-sheet\}

:::link
Hướng dẫn: [Hiển thị tất cả các gói trong bottom sheet](show-plans-bottom-sheet)
:::

**Bottom Sheet** là một panel bố cục trượt lên từ phía dưới màn hình, hiển thị phía trên nội dung bên dưới.

Sheet luôn làm mờ mọi thứ phía sau nó; không thể tắt hiệu ứng mờ này. Kích hoạt nó khi nhấn — ví dụ, đằng sau liên kết **Show all plans** — thay vì khi tải màn hình.

### Cấu trúc \{#structure\}

Một Bottom Sheet đi kèm với hai layer cấp cao nhất:

- **Heading** — một container ở đầu sheet, được điền sẵn với layer văn bản **Title** và **Close button** Close. Chỉnh sửa hoặc xóa chúng tùy ý.
- **Content** — container chính. Thêm sản phẩm, nút, liên kết hoặc bất kỳ phần tử nào khác vào đây.

{/* TODO: on-device GIF */}

### Hiển thị ban đầu \{#initial-visibility\}

Mặc định, bottom sheet xuất hiện ngay khi màn hình được hiển thị. Để mở nó theo yêu cầu thay vào đó:

1. **Hoàn thiện nội dung của sheet trước** — các layer ẩn không thể chỉnh sửa, vì vậy sheet phải giữ hiển thị cho đến khi bạn điền xong nội dung.
2. Trong panel **Layers**, chọn bottom sheet.
3. Đặt **Visibility** thành **Hide** Hide.

Sheet vẫn còn trong cây layer nhưng ngừng hiển thị trên màn hình.

### Kích hoạt bottom sheet \{#triggering-the-bottom-sheet\}

Để mở một bottom sheet đang ẩn, gắn hành động **Show** vào một phần tử khác:

1. Chọn phần tử kích hoạt (ví dụ: nút hoặc liên kết văn bản).
2. Mở tab **Interactions** trong panel bên phải.
3. Nhấp **Add trigger** > **On tap**, rồi **Add action**.
4. Đặt **Action** thành **Show** và chọn bottom sheet từ dropdown.

## Footer \{#footer\}

**Footer** là một container cố định chiếm phần dưới cùng của màn hình. Nó có thể có chiều cao tùy ý và chứa bất cứ thứ gì, từ một nút đơn lẻ đến nhiều hàng văn bản. Dùng footer cho những nội dung cần giữ nguyên vị trí trong khi phần còn lại của màn hình cuộn — nút CTA, văn bản pháp lý, liên kết.

Không giống các phần tử thông thường, footer kéo dài vào vùng an toàn phía dưới của thiết bị: nền của nó trải dài đến tận mép màn hình.
Chỉ được phép có một footer trên mỗi màn hình. Bạn không thể sao chép footer hiện có hoặc thêm một footer mới.
### Footer hay một phần tử cố định thông thường \{#footer-vs-a-regular-fixed-element\}

Cả hai đều hiển thị trên màn hình trong khi nội dung cuộn. Hãy chọn tùy chọn phù hợp với nhu cầu của bạn:
- **Dùng Footer** cho thanh điều hướng chính ở cuối màn hình (nút CTA, văn bản pháp lý, liên kết). Footer tự giữ không gian riêng, đảm bảo nội dung luôn cuộn rõ ràng phía trên nó và không bị ẩn sau, đồng thời tự động phủ vùng an toàn ở đáy màn hình.
- **Dùng [phần tử cố định](manage-paywall-ui-elements)** cho những thứ cần nổi trên nội dung đang cuộn thay vì giữ không gian riêng, hoặc ghim vào một cạnh khác ngoài cạnh đáy — ví dụ: nút đóng/khôi phục nổi, banner cố định ở đầu, hoặc nút cuộn lên đầu trang. Bạn tự quản lý khoảng cách vùng an toàn cho chúng.
## Divider \{#dividers\}

**Horizontal Divider** và **Vertical Divider** là các đường kẻ mỏng phân tách nội dung. Dùng Horizontal Divider để chia hàng, và Vertical Divider để chia cột bên trong container ngang. Điều chỉnh độ dày, màu sắc và độ dài từ panel bên phải.