Sidepanel

Component source on Github This page on Github

Reference

v-modelfalse
Boolean
Controls the state of sidepanel. If true, sidepanel is open
backdrop
(attributes)
{}
Object
Attributes of backdrop component
base"sidepanel"
String
Base name used to style component
close-button
(attributes)
{}
Object
Attributes of v-close-button component. See documentation for valid values
mod-sidepanelempty string
String
Style of the main sidepanel element
modalfalse
Boolean
Displays modal variant of sidepanel. Backdrop is displayed over the page. Clicking backdrop closes sidepanel
nameempty string
String
Name of the component
no-headerfalse
Boolean
When true the header slot content and close button is not rendered
show-close-buttontrue
Boolean
If true shows a close button in top right corner
sidebar-leftfalse
Boolean
If true displays sidepanel on the left
transition"fade-slide"
String
Sets animation effect when showing or hiding sidepanel. Valid values are: 'fade-slide' or empty string to disable animations. Animation speed can be set in --sidepanel-transition-duration css variable.
variantempty string
String
Active variant of the element mod-* props
width"320px"
String
Width of sidepanel
Slots
header
Slot for header content
default
Slot for sidepanel content

Notes

Sidepanel activation

To control sidepanel visibility you can use v-model or v-trigger component.

Example - props

true
false
false
false
fade-slide
    <template>
  <v-button @click="isOpen = !isOpen">Toggle sidepanel</v-button>

  <v-sidepanel
    v-model="isOpen"
    v-bind="example"
  >
    <template #header>
      <span class="text-xl font-bold">Sidepanel</span>
    </template>
    <div class="p-5">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </div>
  </v-sidepanel>

</template>
  

    
  

  
    <script setup>
import { ref, reactive } from "vue";

let example = reactive({
  showCloseButton: true,
  sidebarLeft: false,
  width: "320px",
  modal: false,
  noHeader: false,
  transition: "fade-slide",
});

let isOpen = ref(false);
</script>

Example - open by id

You can also control state of the sidepanel menu by using v-trigger component. The for prop of the v-trigger should be the same as id of the sidepanel. The advantage of this method is that v-triggers can be put anywhere in application. Read more about v-trigger here.

    <template>
  <v-trigger for="sidepanel" v-slot="{ onTrigger }">
    <v-button v-on="onTrigger">Toggle sidepanel</v-button>
  </v-trigger>

  <v-sidepanel id="sidepanel">
    <template #header>
      <span class="text-xl font-bold">Sidepanel</span>
    </template>
    <div class="p-5">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </div>
  </v-sidepanel>
</template>