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

Custom header cho H5 App

Giới thiệu​

Mặc định Title Bar sẽ được hiển thị như hình bên trái dưới đây. Tuy nhiên sẽ nhu cầu bạn muốn tự tùy chỉnh title bar của mình thì bài viết này nhằm mục đích hướng đẫn cấu hình để ẩn đi Title Bar.

  • Title Bar mặc định: mặc định title bar sẽ hiển thị theo màu sắc quy định chung của app host hoặc sử dụng giá trị titleBarColor
  • Title Bar trong suốt: khi cấu hình title bar là transparent thì title bar sẽ được hiển thị trong suốt để bạn có thể tùy biến phát triển title bar của mình.

Giới thiệu các cấu hình transparentTitle​

transparentTitle là thuộc tính dùng để cấu hình độ transparent (trong suốt) của thanh navigation bar (thanh điều hướng), được khai báo trong file config app-config.json.

{
  "h5App": "YES",
  "window": {
    "defaultTitle": "",
    "titleBarColor": "#000000",
    "titleColor": "#fff",
    "transparentTitle": "always"
  }
}

{
  "transparentTitle": "always"
}

transparentTitle hỗ trợ 2 giá trị:

  • none: giá trị mặc định, navigation bar sẽ không có transparent, và nó sẽ có màu dựa vào config của titleBarColor (Mặc định là màu trắng)
  • always: luôn transparent

Bạn có thể xem thêm các cấu hình khác cho cho app tại đây