Tabbar

Cú pháp

<zmp-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"
top-ios	boolean		Tabbar ở trị trí phía trên với IOS theme
top-md	boolean		Tabbar ở trị trí phía trên với MD theme
top-aurora	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"
bottom-ios	boolean		Tabbar ở trị trí phía dưới với IOS theme
bottom-md	boolean		Tabbar ở trị trí phía dưới với MD theme
bottom-aurora	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
no-shadow	boolean		Bỏ shadow trên Md theme
no-hairline	boolean	false	Ẩn đường viền tabbar
hidden	boolean	false	Ẩn tabbar

Tabbar Events

Event	Description
@tabbar:hide	Event sẽ được triggered khi Tabbar ẩn
@tabbar:show	Event sẽ được triggered khi Tabbar hiện

Slots

Component Tabbar 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 là con của <div className="toolbarInner"\> element
#before-inner	Element sẽ được chèn ngay trước <div className="toolbarInner"\> element
#after-inner	Element sẽ được chèn ngay sau <div className="toolbarInner"\> element

<zmp-tabbar>
  <template #before-inner>
    <div>Before Inner</div>
  </template>
  <template #after-inner>
    <div>After Inner</div>
  </template>
  <zmp-link>Left Link</zmp-link>
  <zmp-link>Right Link</zmp-link>
</zmp-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!