/*! For license information please see 9949.e7bb9fad.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["9949"],{60055:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'Sidebar
\nIntro
\n
The vertically displayed navigation bar is used to switch between different content areas.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport { Sidebar, SidebarItem } from 'vant';\n\nconst app = createApp();\napp.use(Sidebar);\napp.use(SidebarItem);\n
\n
Usage
\nBasic Usage
\n
<van-sidebar v-model="active">\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const active = ref(0);\n return { active };\n },\n};\n
\n
Show Badge
\n
<van-sidebar v-model="active">\n <van-sidebar-item title="Title" dot />\n <van-sidebar-item title="Title" badge="5" />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\n
Disabled
\n
<van-sidebar v-model="active">\n <van-sidebar-item title="Title" />\n <van-sidebar-item title="Title" disabled />\n <van-sidebar-item title="Title" />\n</van-sidebar>\n
\n
Change Event
\n
<van-sidebar v-model="active" @change="onChange">\n <van-sidebar-item title="Title 1" />\n <van-sidebar-item title="Title 2" />\n <van-sidebar-item title="Title 3" />\n</van-sidebar>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const active = ref(0);\n const onChange = (index) => showToast(`Title ${index + 1}`);\n return {\n active,\n onChange,\n };\n },\n};\n
\n
API
\n\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| v-model | \nIndex of chosen item | \nnumber | string | \n0 | \n
\n\n
\n
\n
\n\n\n| Event | \nDescription | \nArguments | \n
\n\n\n\n| change | \nEmitted when chosen item changed | \nindex: number | \n
\n\n
\n
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| title | \nContent | \nstring | \n\'\' | \n
\n\n| dot | \nWhether to show red dot | \nboolean | \nfalse | \n
\n\n| badge | \nContent of the badge | \nnumber | string | \n\'\' | \n
\n\n| badge-props | \nProps of Badge, see Badge - props | \nBadgeProps | \n- | \n
\n\n| disabled | \nWhether to be disabled | \nboolean | \nfalse | \n
\n\n| url | \nLink | \nstring | \n- | \n
\n\n| to | \nThe target route should navigate to when clicked on, same as the to prop of Vue Router | \nstring | object | \n- | \n
\n\n| replace | \nIf true, the navigation will not leave a history record | \nboolean | \nfalse | \n
\n\n
\n
\n
\n\n\n| Event | \nDescription | \nArguments | \n
\n\n\n\n| click | \nEmitted when an item is clicked | \nindex: number | \n
\n\n
\n
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| title | \nCustom item title | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type { SidebarProps, SidebarItemProps } from 'vant';\n
\n
Theming
\nCSS Variables
\n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n
\n\n\n| Name | \nDefault Value | \nDescription | \n
\n\n\n\n| --van-sidebar-width | \n80px | \n- | \n
\n\n| --van-sidebar-font-size | \nvar(--van-font-size-md) | \n- | \n
\n\n| --van-sidebar-line-height | \nvar(--van-line-height-md) | \n- | \n
\n\n| --van-sidebar-text-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-sidebar-disabled-text-color | \nvar(--van-text-color-3) | \n- | \n
\n\n| --van-sidebar-padding | \n20px var(--van-padding-sm) | \n- | \n
\n\n| --van-sidebar-active-color | \nvar(--van-active-color) | \n- | \n
\n\n| --van-sidebar-background | \nvar(--van-background) | \n- | \n
\n\n| --van-sidebar-selected-font-weight | \nvar(--van-font-bold) | \n- | \n
\n\n| --van-sidebar-selected-text-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-sidebar-selected-border-width | \n4px | \n- | \n
\n\n| --van-sidebar-selected-border-height | \n16px | \n- | \n
\n\n| --van-sidebar-selected-border-color | \nvar(--van-primary-color) | \n- | \n
\n\n| --van-sidebar-selected-background | \nvar(--van-background-2) | \n- | \n
\n\n
\n