Chuyển tới nội dung chính
ZZalo Platforms

configAppView

Cập nhật lần cuối:
import { configAppView } from "zmp-sdk";

API tuỳ chỉnh các thành phần giao diện chính trên Mini App, bao gồm:

  • Status bar
  • Action bar
  • Bottom Navigation (Android) / Safe Area Inset Bottom (iOS)

Với api configAppView, bạn có thể ẩn/ hiện, tuỳ chỉnh màu sắc, kiểu hiển thị của các thành phần mặc định trên Mini App. Xem hình ảnh mô tả bên dưới để hiểu rõ các thành phần có thể tuỳ chỉnh trên Mini App của bạn.

Ví dụ​

Thay đổi tiêu đề action bar:

configAppView({
  actionBar: {
    title: "Giỏ hàng",
  },
});

Để có được giao diện toàn màn hình:

configAppView({
  hideAndroidBottomNavigationBar: true,
  hideIOSSafeAreaBottom: true,
  statusBarType: "transparent", // hoặc "hidden"
  actionBar: {
    hide: true,
  },
});

Xem hướng dẫn xử lý lỗi và bảng mô tả chi tiết mã lỗi tại đây.

Tham số​

Truyền tham số vào API dưới dạng object chứa các thuộc tính:

PropertyTypeRequiredDescription
headerColorstringYesMã màu, có giá trị hợp lệ là màu thập lục phân, ví dụ #000000.
headerTextColor"white" | "black"NoMàu của text và icon trên thanh action bar và status bar.
statusBarType"normal" | "hidden" | "transparent"NoKiểu hiển thị của status bar. (default: "normal")
hideAndroidBottomNavigationBarbooleanNoẨn thanh navigation bar trên Android. (default: false)
hideIOSSafeAreaBottombooleanNoẨn thanh safe area inset bottom trên iOS. (default: false)
hidebooleanNoẨn action bar.
titlestringNoTiêu đề hiển thị trên action bar.
leftButton"back" | "none"NoTuỳ chỉnh nút điều hướng bên trái action bar. Mặc định hiển thị nút back. Truyền none để ẩn nút. (default: "back")
textAlign"left" | "center"NoTuỳ chỉnh vị trí tiêu đề hiển thị trên action bar. (default: "left")