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

Container

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.

Thay đổi hướng container

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

Để chuyển một phần tử hiện có thành container, chọn nó và dùng thao tác layer 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 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 — 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

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.

Thuộc tính

Tự động cuộn

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

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

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

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

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 . 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.

Hiển thị ban đầu

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 .

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

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

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

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.