ÿÿ Phần tá»­ bố cục: container, carousel, bottom sheet | Flow Builder | Tài liệu Adapty
English 中文TürkçeРуÑÑкийEspañol日本語Tiếng Việt

Phần tử bố cục: container, carousel, bottom sheet

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

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 để biết thêm chi tiết.

Container

Bài viết chính: Äịnh vị phần tá»­

Vertical Stack and Horizontal Stack tiles

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.

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

Thay đổi hướng container

A Stack on the canvas alongside its Layout settings

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 tile

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.

Carousel control bar with the Slide dropdown and Add Slide button

Thuộc tính

Carousel section of the right panel with Width, Height, Gap, Auto-scroll, Delay, and Duration

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

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 section of the right panel with Width and Height controls

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

Phần Dots trên bảng bên phải với Show Dots, Color, Active Color, Size, Gap và Padding

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

Hướng dẫn: Hiển thị tất cả các gói trong bottom sheet

Bottom Sheet tile

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.
Bottom sheet with a heading added inside it

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.

Hiding the bottom sheet from the Layers panel

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.
Show action targeting the bottom sheet
Footer ghim ở cuối màn hình trong khi nội dung cuộn bên dưới

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.

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

A horizontal divider beneath a heading and vertical dividers between three feature cards

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.

ÿÿÿÿ