Vant4 Sidebar 側(cè)邊導航

介紹

垂直展示的導航欄，用于在不同的內(nèi)容區(qū)域之間進行切換。

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { Sidebar, SidebarItem } from 'vant';

const app = createApp();
app.use(Sidebar);
app.use(SidebarItem);

代碼演示

基礎(chǔ)用法

通過 ?v-model? 綁定當前選中項的索引。

<van-sidebar v-model="active">
  <van-sidebar-item title="標簽名稱" />
  <van-sidebar-item title="標簽名稱" />
  <van-sidebar-item title="標簽名稱" />
</van-sidebar>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};

徽標提示

設(shè)置 ?dot? 屬性后，會在右上角展示一個小紅點；設(shè)置 ?badge? 屬性后，會在右上角展示相應(yīng)的徽標。

<van-sidebar v-model="active">
  <van-sidebar-item title="標簽名稱" dot />
  <van-sidebar-item title="標簽名稱" badge="5" />
  <van-sidebar-item title="標簽名稱" />
</van-sidebar>

禁用選項

通過 ?disabled? 屬性禁用選項。

<van-sidebar v-model="active">
  <van-sidebar-item title="標簽名稱" />
  <van-sidebar-item title="標簽名稱" disabled />
  <van-sidebar-item title="標簽名稱" />
</van-sidebar>

監(jiān)聽切換事件

設(shè)置 ?change? 方法來監(jiān)聽切換導航項時的事件。

<van-sidebar v-model="active" @change="onChange">
  <van-sidebar-item title="標簽名 1" />
  <van-sidebar-item title="標簽名 2" />
  <van-sidebar-item title="標簽名 3" />
</van-sidebar>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const active = ref(0);
    const onChange = (index) => showToast(`標簽名 ${index + 1}`);
    return {
      active,
      onChange,
    };
  },
};

API

Sidebar Props

Sidebar Events

SidebarItem Props

SidebarItem Events

SidebarItem Slots

類型定義

組件導出以下類型定義：

import type { SidebarProps, SidebarItemProps } from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。