Navbar

Cú pháp

<zmp-navbar>

Zalo Mini App mặc định cung cấp cho ứng dụng sử dụng thanh điều hướng của Zalo, tuy nhiên các ứng dụng có thể không sử dụng thanh điều hướng mặc định này (bằng cách set headerColor: "" trong app-config.json), và tự custom lại thanh điều hướng riêng của ứng dụng. Component Navbar hỗ trợ tạo thanh điều hướng với cú pháp như trên, kèm theo component con để kết hợp với nhau:

• zmp-nav-left
• zmp-nav-right
• zmp-nav-title
• zmp-nav-title-large

Navbar Properties

<zmp-navbar/> properties

Prop	Type	Default	Description
title	string		Navbar title
subtitle	string		Navbar sub title
back-link	boolean | string		Thêm back link với icon mặc định, với kiểu dữ liệu string sẽ thêm nội dung text đi kèm icon
back-link-url	string		Tùy chỉnh back link URL
back-link-force	boolean	false	Buộc tải trang không quan tâm các trang trước trong lịch sử
back-link-show-text	boolean		Cho phép hiển thị backLink đã khai báo với kiểu string cùng với back icon
sliding	boolean	true	Kích hoạt hiệu ứng "sliding"
hidden	boolean	false	Ẩn navbar
inner-class	string		Thêm class cho navbar-inner element
inner-class-name	string		Alias cho innerClass prop
large	boolean		Chuyển navbar sang dạng kích thước lớn
transparent	boolean		Chuyển navbar sang dạng không có background (transparent).
title-large	string		Thêm title cho large navbar. Nếu không xác định thì title prop sẽ được sử dụng để render title cho large navbar

<zmp-nav-left/> properties

Prop	Type	Default	Description
back-link	boolean | string		Thêm back link với icon mặc định, với kiểu dữ liệu string sẽ thêm nội dung text đi kèm icon
back-link-url	string		Tùy chỉnh back link URL
back-link-force	boolean	false	Buộc tải trang không quan tâm các trang trước trong lịch sử
back-link-show-text	boolean		Kích hoạt hiệu ứng "sliding". Mặc định sẽ kế thừa sliding prop từ component Navbar cha
sliding	boolean	true	Bỏ hiệu ứng "sliding" khi set giá trị bằng false (Hiệu ứng trên IOS)

<zmp-nav-title/> properties

Prop	Type	Default	Description
title	string		Navbar title
subtitle	string		Sub title text
sliding	boolean		Kích hoạt hiệu ứng "sliding". Mặc định sẽ kế thừa sliding prop từ component Navbar cha

<zmp-nav-right/> properties

Prop	Type	Default	Description
sliding	boolean		Kích hoạt hiệu ứng "sliding". Mặc định sẽ kế thừa sliding prop từ component Navbar cha

Lưu ý

Để navbar fixed trên trang, cần đặt <zmp-navbar > component ngay trong <zmp-page > component

Navbar Events

<zmp-navbar/> events

Event	Description
@back:click @click:back	Event sẽ được triggered sau khi người dùng click lên back link
@navbar:hide	Event sẽ được triggered khi navbar ẩn đi
@navbar:show	Event sẽ được triggered khi navbar hiện lên

<zmp-nav-left/> events

Event	Description
@back:click @click:back	Event sẽ được triggered sau khi người dùng click lên back link

Slots

Component Navbar cung cấp các slots để nhà phát triển có thể đặt các đoạn markup để tuỳ biến giao diện vào:

Slot	Vị trí được chèn vào
#default	Element sẽ được chèn dưới dạng children của <div class="navbar-inner"\> element
#before-inner	Element sẽ được chèn ngay trước <div class="navbar-inner"\>element
#after-inner	Element sẽ được chèn ngay sau <div class="navbar-inner"\> element
#left	Element sẽ được chèn trong <div class="left"\> element
#right	Element sẽ được chèn trong <div class="right"\> element
#title	Element sẽ được chèn trong <div class="title"\> element
#title-large	Element sẽ được chèn trong <div class="title-large"\> element

<zmp-navbar title="My App">
  <template #left>
    <a href="#"> Left Link </a>
  </template>
  <template #right>
    <a href="#"> Right Link </a>
  </template>
  <template #before-inner>
    <div>Before Inner</div>
  </template>
  <template #after-inner>
    <div>After Inner</div>
  </template>
  <div>Default slot</div> </zmp-navbar
>; { /* render thành: */ }

<div className="navbar">
  <div className="navbar-bg"></div>
  <div>Before Inner</div>
  <div className="navbar-inner">
    <div className="left">
      <a href="#">Left Link</a>
    </div>
    <div className="title">My App</div>
    <div className="right">
      <a href="#">Right Link</a>
    </div>
    <div>Default slot</div>
  </div>
  <div>After Inner</div>
</div>
;

Ví dụ

Layout đơn giản nhất

Code demo fallback when rendering server side!

Layout đơn giản nhất với back link

Code demo fallback when rendering server side!

Navbar với large title

Code demo fallback when rendering server side!

Tùy chỉnh layout

Code demo fallback when rendering server side!