# Sidebar

Sidebar component disabling on Cancel button click.

# Most common usage scenario

<template>
  <SfSidebar
    :visible="isSidebarOpen"
    @close="isSidebarOpen = false"
    :title="title"
    :subtitle="subtitle"
    :heading-level="headingLevel"
    :button="button"
    :overlay="overlay"
    :class="customClass"
    :persistent="persistent"
  >
    Total items: 0
  </SfSidebar>
</template>
<script>
import { SfSidebar } from "@storefront-ui/vue";
export default {
  components: {
    SfSidebar,
  },
  data() {
    return {
      isSidebarOpen: true,
      title: "My Cart",
      subtitle: "",
      headingLevel: 3,
      overlay: true,
      button: true,
      persistent: false,
    };
  },
};
</script>

# Props

  • title

    • type: string
    • defaultValue: ""
  • subtitle

    • type: string
    • defaultValue: ""
  • headingLevel

    • type: number
    • defaultValue: 3
  • button

    • type: boolean
    • defaultValue: true
  • visible

    • type: boolean
    • defaultValue: false
  • overlay

    • type: boolean
    • defaultValue: true
  • persistent

    • If true clicking outside will not dismiss the sidebar
    • type: boolean
    • defaultValue: false

# Slots

  • bar

    • Use this slot to place content inside the modal bar.
  • circle-icon

    • Use this slot to replace close icon.
    • bindings: close, button
  • title

    • Use this slot to replace SfHeading component.
    • bindings: title, subtitle, headingLevel
  • content-top

    • Use this slot to add sticky top content.
  • default

    • Use this slot to add SfSidebar content.
  • content-bottom

# Events

  • close

# CSS modifiers

  • .sf-sidebar--right

# CSS custom properties (variables)

# Overridden other components CSS variables

  • --heading-title-color
  • --heading-title-font
  • --font-size--xl
  • --heading-title-font
  • --font-weight--semibold
  • --heading-description-font
  • --font-size--xl
  • --circle-icon-position
  • --sidebar-width
  • --sidebar-content-padding
  • --sidebar-left
  • --sidebar-right
  • --sidebar-top-padding
  • --sidebar-circle-icon-top
  • --sidebar-circle-icon-transform
  • --button-background
  • --icon-color
  • --button-box-shadow-opacity

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.