TabView

TabView Component

TabView là container giúp tạo giao diện ứng dụng dạng Tabs. TabView sẽ chứa các View với prop tab, mỗi View ứng với một tab, sẽ được khai báo url là route path của Page tương ứng với View tab đó.

Xem hướng dẫn sử dụng TabView để tạo tab layout cho mini app tại đây

Ví dụ

Ví dụ ứng dụng có giao diện dạng tab với 3 trang index, settings, catalog ứng với tab Home, Settings, Catalog

Cấu trúc thư mục

Zalo Mini App
└─── src
   └── pages
       ├── index.jsx
       └── settings.jsx
       └── catalog.jsx

Khai báo routes tại app-config.json

{
  //...
  "pages": ["catalog", "settings"]
}

Tại app.jsx

return (
  <App {...zmpparams}>
    <TabView className="safe-areas">
      {/* Tabbar for switching Tab*/}
      <Tabbar bottom id="app-tab-bar">
        <Link tabLink="#view-home" iconZMP="zi-home" tabLinkActive>
          Home
        </Link>
        <Link tabLink="#view-catalog" iconZMP="zi-list-1">
          Catalog
        </Link>
        <Link tabLink="#view-settings" iconZMP="zi-setting">
          Settings
        </Link>
      </Tabbar>

      <View id="view-home" main tab tabActive url="/" />
      <View id="view-catalog" name="catalog" tab url="/catalog/" />
      <View id="view-settings" name="settings" tab url="/settings/" />
    </TabView>
  </App>
);