Navbar

Navbar Components

Bao gồm các components:

• Navbar
• NavLeft
• NavRight
• NavTitle
• NavTitleLarge

Navbar Properties

<Navbar/> properties

Prop	Type	Default	Description
title	string		Navbar title
subtitle	string		Navbar sub title
backLink	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
backLinkUrl	string		Tùy chỉnh back link URL
backLinkForce	boolean	false	Buộc tải trang không quan tâm các trang trước trong lịch sử
backLinkShowText	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
innerClass	string		Thêm class cho navbar-inner element
innerClassName	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).
titleLarge	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

<NavLeft/> properties

Prop	Type	Default	Description
backLink	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
backLinkUrl	string		Tùy chỉnh back link URL
backLinkForce	boolean	false	Buộc tải trang không quan tâm các trang trước trong lịch sử
backLinkShowText	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)

<NavTitle/> 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

<NavRight/> 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 <Navbar > component ngay trong <Page> component. Trường hợp tự xây dựng component render Navbar cần export component với CustomNavbar.displayName = 'zmp-navbar'. Ví dụ:

const CustomNavbar = (props) => ({
  /* ... */
});
CustomNavbar.displayName = 'zmp-navbar';
export default CustomNavbar;

<Page>
  <CustomNavbar />
</Page>

Navbar Methods

<Navbar/> methods
.hide(animate)	Hide navbar
.show(animate)	Show navbar
.size()	Size navbar

Navbar Events

<Navbar/> events

Event	Prop	Description
backClick clickBack	onBackClick onClickBack	Event sẽ được triggered sau khi người dùng click lên back link
navbarHide	onNavbarHide	Event sẽ được triggered khi navbar ẩn đi
navbarShow	onNavbarShow	Event sẽ được triggered khi navbar hiện lên

<NavLeft/> events

Event	Prop	Description
backClick clickBack	onBackClick	Event sẽ được triggered sau khi người dùng click lên back link

Navbar Slots

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

• default - element sẽ được chèn dưới dạng children của <div className="navbar-inner"\> element
• before-inner - element sẽ được chèn ngay trước <div className="navbar-inner"\>element
• after-inner - element sẽ được chèn ngay sau <div className="navbar-inner"\> element
• left - element sẽ được chèn trong <div className="left"\> element
• right - element sẽ được chèn trong <div className="right"\> element
• title - element sẽ được chèn trong <div className="title"\> element
• title-large - element sẽ được chèn trong <div className="title-large"\> element

<Navbar title='My App'>
  <a href='#' slot='left'>
    Left Link
  </a>
  <a href='#' slot='right'>
    Right Link
  </a>
  <div slot='before-inner'>Before Inner</div>
  <div slot='after-inner'>After Inner</div>
  <div>Default slot</div>
</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

<Navbar title='My App'></Navbar>

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

<Navbar title='My App' backLink='Back'></Navbar>

Navabar không hiệu ứng "sliding" (hiệu ứng trên IOS theme)

<Navbar title='My App' backLink='Back' sliding='{false}'></Navbar>

Navbar với large title

<Navbar title='My App' backLink='Back' large></Navbar>;

{
  /* với tiêu đề*/
}

<Navbar title='My App' backLink='Back' large titleLarge='Large Title'></Navbar>;

Tùy chỉnh layout

<Navbar large>
  <NavLeft displayName='zmp-navleft'>
    <Link className='no-ripple' noLinkClass back>
      <Icon zmp='zi-arrow-left' />
    </Link>
  </NavLeft>
  <NavTitleLarge>{title}</NavTitleLarge>
  <NavRight>
    {/* Thêm các button tuỳ chỉnh */}
    <ActionButton />
  </NavRight>
</Navbar>