Sidebar

Introduction

A vertically displayed navigation bar for switching between different content areas.

Basic usage

Bind the index of the currently selected item through v-model.

<z-sidebar v-model="active"> 
  <z-sidebar-item title="tag name" /> 
  <z-sidebar-item title="label name" /> 
  <z-sidebar-item title="tag name" /> 
</z-sidebar>

import { ref } from 'vue'; 
 
export default { 
  setup() { 
    const active = ref(0); 
    return { active }; 
  }, 
};

Disable options

Disable the option with the disabled attribute.

<z-sidebar v-model="active"> 
  <z-sidebar-item title="tag name" /> 
  <z-sidebar-item title="label name" disabled /> 
  <z-sidebar-item title="label name" /> 
</z-sidebar>

Listening to Switch Events

Set the change method to listen for events when switching navigation items.

<z-sidebar v-model="active" @change="onChange"> 
  <z-sidebar-item title="Tag name 1" /> 
  <z-sidebar-item title="label name 2" /> 
  <z-sidebar-item title="Tag name 3" /> 
</z-sidebar>

import { ref } from 'vue'; 
import { useToast } from '@/uni_modules/zebra-ui' 
const toast = useToast() 
 
export default { 
  setup() { 
    const active = ref(0); 
    const onChange = (index: number) => toast.showToast(`Title ${index + 1}`) 
    return { 
      active, 
      onChange, 
    }; 
  }, 
};

Logo tips

After setting the dot property, a small red dot will be displayed in the upper right corner; After setting the badge property, the corresponding logo will be displayed in the upper right corner.

<z-sidebar v-model="active"> 
  <z-sidebar-item title="label name" dot /> 
  <z-sidebar-item title="label name" badge="5" /> 
  <z-sidebar-item title="tag name" /> 
</z-sidebar>

Sidebar Props

Sidebar Events

SidebarItem Props

SidebarItem Events

SidebarItem Slots

Style Variables

The component provides the following CSS variables that can be used to customize styles. For usage, please refer to the ConfigProvider Component.