my.setNavigationBar

setNavigationBar

Cập nhật lần cuối vào 4/11/2022

my.setNavigationBar là API để set style cho Navigation Bar

Quét mã để trải nghiệm

Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/api/navigation-bar/set-navigation-bar/index

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

API Params

Thuộc tính	Kiểu dữ liệu	Mô tả
title	String	Tiêu đề của Navigation Bar.
image	String	Image URL được sử dụng để render trên title. Có thể set cùng lúc title và image.
titleBarColor	HexColor	Background color của Navigation Bar.
borderBottomColor	HexColor	Nếu backgroundColor được set, thì borderBottomColor sẽ luôn nhận giá trị bằng backgroundColor.
theme	String	Set theme của Navigation. Giá trị reverse hoặc default.
search	Object	Các giá trị hiển thị khung search.
reset	Boolean	Reset về titleBarColor và borderBottomColor về màu mặc định.
success	Function	Callback function khi thành công.
fail	Function	Callback function khi thất bại.
complete	Function	Callback function khi hoàn tất tác vụ cho dù thành công hay thất bại.

Theme

Giá trị trong search

Thuộc tính	Kiểu dữ liệu	Mô tả
show	Boolean	Bật/tắt hiển thị khung search.
placeholder	String	Placeholder.
borderRadius	Number	Border radius.

Sample Code

Page({
  setNavigationBar(e) {
    var title = e.detail.value.title;
    var backgroundColor = e.detail.value.backgroundColor;
    var borderBottomColor = e.detail.value.borderBottomColor;
    var image = e.detail.value.image;
    var show = e.detail.value.show;
    var placeholder = e.detail.value.placeholder;
    var borderRadius = e.detail.value.borderRadius;
    var theme = e.detail.value.theme;
    my.setNavigationBar({
      title,
      backgroundColor,
      borderBottomColor,
      image,
      search: {
        show,
        placeholder
        borderRadius,
      },
      theme,
    });
  },
  resetNavigationBar() {
    my.setNavigationBar({
      reset: true,
      title: 'Navigation Bar'
    });
  }
});