Tabbar

Tabbar là component giúp tạo phần điều kiển chuyển đổi, hiển thị trạng thái của Tabs

Tabbar Properties

Prop	Type	Default	Description
inner	boolean	true	Khi bật (mặc định) sẽ đặt tất cả nội dung trongtoolbarInner elemenent. Chỉ tắt trong trường hợp muốn tùy chỉnh nội dung bên trong
fill	boolean		Bật chế độ màu cho tabbar
position	string		có thể là top hoặc bottom
top	boolean		Tabbar ở trị trí phía trên tương ứng với position="top"
topIos	boolean		Tabbar ở trị trí phía trên với IOS theme
topMd	boolean		Tabbar ở trị trí phía trên với MD theme
topAurora	boolean		Tabbar ở trị trí phía trên với Aurora theme
bottom	boolean		Tabbar ở trị trí phía dưới tương ứng với position="bottom"
bottomIos	boolean		Tabbar ở trị trí phía dưới với IOS theme
bottomMd	boolean		Tabbar ở trị trí phía dưới với MD theme
bottomAurora	boolean		Tabbar ở trị trí phía dưới với Aurora theme
labels	boolean	false	Bật Tabbar có labels
scrollable	boolean	false	Bật scrollable Tabbar
noShadow	boolean		Bỏ shadow trên Md theme
noHairline	boolean	false	Ẩn đường viền tabbar
hidden	boolean	false	Ẩn tabbar

Tabbar Methods

<Tabbar/> methods
.hide(animate)	Ẩn tabbar
.show(animate)	Hiện tabbar

Tabbar Events

Event	Prop	Description
toolbarHide	onTabbarHide	Event sẽ được triggered khi Tabbar ẩn
toolbarShow	onTabbarShow	Event sẽ được triggered khi Tabbar hiện

Tabbar Slots

Tabbar React component (<Toolbar>) cung cấp các slots để tùy chỉnh componet:

• default - element sẽ được chèn là con của <div className="toolbarInner"\> element
• beforeInner - element sẽ được chèn ngay trước <div className="toolbarInner"\> element
• afterInner - element sẽ được chèn ngay sau <div className="toolbarInner"\> element

<Tabbar>
  <div slot='beforeInner'>Before Inner</div>
  <div slot='afterInner'>After Inner</div>
  {/* sẽ thêm vào vị trí 'default': */}
  <Link>Left Link</Link>
  <Link>Right Link</Link>
</Tabbar>;

{
  /* Renders thành: */
}

<div className='toolbar tabbar'>
  <div>Before Inner</div>
  <div className='toolbarInner'>
    <a href='#' className='link'>
      Left Link
    </a>
    <a href='#' className='link'>
      Right Link
    </a>
  </div>
  <div>After Inner</div>
</div>;

Ví dụ

Top Tabbar

Code demo fallback when rendering server side!

Bottom Tabbar

Code demo fallback when rendering server side!