Vant4 Sidebar 側(cè)邊導(dǎo)航

介紹

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

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

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

代碼演示

基礎(chǔ)用法

通過(guò) ?v-model? 綁定當(dāng)前選中項(xiàng)的索引。

<van-sidebar v-model="active">
  <van-sidebar-item title="標(biāo)簽名稱" />
  <van-sidebar-item title="標(biāo)簽名稱" />
  <van-sidebar-item title="標(biāo)簽名稱" />
</van-sidebar>

import { ref } from 'vue';

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

徽標(biāo)提示

設(shè)置 ?dot? 屬性后，會(huì)在右上角展示一個(gè)小紅點(diǎn)；設(shè)置 ?badge? 屬性后，會(huì)在右上角展示相應(yīng)的徽標(biāo)。

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

禁用選項(xiàng)

通過(guò) ?disabled? 屬性禁用選項(xiàng)。

<van-sidebar v-model="active">
  <van-sidebar-item title="標(biāo)簽名稱" />
  <van-sidebar-item title="標(biāo)簽名稱" disabled />
  <van-sidebar-item title="標(biāo)簽名稱" />
</van-sidebar>

監(jiān)聽切換事件

設(shè)置 ?change? 方法來(lái)監(jiān)聽切換導(dǎo)航項(xiàng)時(shí)的事件。

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

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

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

API

Sidebar Props

Sidebar Events

SidebarItem Props

SidebarItem Events

SidebarItem Slots

類型定義

組件導(dǎo)出以下類型定義：

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

主題定制

樣式變量

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