Sidebar

Install

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

Vue.use(Sidebar);
Vue.use(SidebarItem);

Usage

Basic Usage

<van-sidebar v-model="activeKey">
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" />
</van-sidebar>

export default {
  data() {
    return {
      activeKey: 0
    };
  }
};

Show Info

<van-sidebar v-model="activeKey">
  <van-sidebar-item title="Title" dot />
  <van-sidebar-item title="Title" info="5" />
  <van-sidebar-item title="Title" info="99+" />
</van-sidebar>

Disabled

<van-sidebar v-model="activeKey">
  <van-sidebar-item title="Title" />
  <van-sidebar-item title="Title" disabled />
  <van-sidebar-item title="Title" />
</van-sidebar>

Change Event

<van-sidebar v-model="activeKey" @change="onChange">
  <van-sidebar-item title="Title1" />
  <van-sidebar-item title="Title2" />
  <van-sidebar-item title="Title3" />
</van-sidebar>

export default {
  data() {
    return {
      activeKey: 0
    };
  },
  methods: {
    onChange(index) {
      Notify({ type: 'primary', message: index });
    }
  }
}

API

Sidebar Props

Attribute	Description	Type	Default	Version
v-model	Index of chosen item	string \| number	`0`	-

Sidebar Events

Event	Description	Arguments
change	Triggered when item changed	index: index of current item

SidebarItem Props

Attribute	Description	Type	Default	Version
title	Content	string	`''`	-
dot	Whether to show red dot	boolean	`false`	2.2.1
info	Content of the badge	string \| number	`''`	-
disabled	Whether to be disabled	boolean	`false`	2.2.0
url	Link	string	-	-
to	Target route of the link, same as to of vue-router	string \| object	-	2.0.4
replace	If true, the navigation will not leave a history record	boolean	`false`	2.0.4

SidebarItem Events

Event	Description	Arguments
click	Triggered when click item	index: index of current item