Sidebar

A sidebar to use as left/right overlay or static

---

edit on github

Examples

Base

<template>
  <section>
    <o-sidebar :fullheight="fullheight" :fullwidth="fullwidth" :overlay="overlay" :right="right" :open.sync="open">
      <o-button v-if="fullwidth" icon-left="times" label="Close" @click="open = false" />
      <img width="128" src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" alt="Lightweight UI components for Vue.js" />
      <h3>Example</h3>
    </o-sidebar>
    <div class="block">
      <o-field grouped group-multiline>
        <o-switch v-model="overlay">Overlay</o-switch>
        <o-switch v-model="fullheight">Fullheight</o-switch>
        <o-switch v-model="fullwidth">Fullwidth</o-switch>
        <o-switch v-model="right">Right</o-switch>
      </o-field>
    </div>

    <br />

    <o-button @click="open = true">Show</o-button>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        open: false,
        overlay: true,
        fullheight: true,
        fullwidth: false,
        right: false
      }
    }
  }
</script>

Static

<template>
  <div class="sidebar-page">
    <section class="sidebar-layout">
      <o-sidebar position="static" :mobile="mobile" :expand-on-hover="expandOnHover" :reduce="reduce" open>
        <img width="128" src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4" alt="Lightweight UI components for Vue.js" />
        <section style="padding: 1em">
          <h5>Example 1</h5>
          <h5>Example 2</h5>
          <h5>Example 3</h5>
          <h5>Example 4</h5>
          <h5>Example 5</h5>
        </section>
      </o-sidebar>

      <div style="padding: 1em">
        <o-field>
          <o-switch v-model="reduce">Reduced</o-switch>
        </o-field>
        <o-field>
          <o-switch v-model="expandOnHover">Expand on hover</o-switch>
        </o-field>
        <br />
        <o-field label="Mobile Layout">
          <o-select v-model="mobile">
            <option :value="null"></option>
            <option value="reduced">Reduced</option>
            <option value="hidden">Hidden</option>
            <option value="fullwidth">Fullwidth</option>
          </o-select>
        </o-field>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        expandOnHover: false,
        mobile: 'reduced',
        reduce: false
      }
    }
  }
</script>

<style>
  .sidebar-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
  }
  .sidebar-layout {
    display: flex;
    flex-direction: row;
    min-height: 100%;
  }
</style>

Class props

📄 Full scss file

Example 1

Example 2

Example 3

Example 4

Example 5

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
absoluteClass	Class of the sidebar when its position is absolute. 👉 Scroll to the top of this page to see the sidebar	position
contentClass	Class of the sidebar content.
expandOnHoverClass	Class of the sidebar when expanded on hover.	expandOnHover
expandOnHoverFixedClass	Class of the sidebar when expanded on hover and its position is fixed.	expandOnHover expandOnHoverFixed
fixedClass	Class of the sidebar when its position is fixed.	position
fullheightClass	Class of the sidebar when is fullheight.	fullheight
fullwidthClass	Class of the sidebar when is fullwidth.	fullwidth
hiddenClass	Class of the sidebar when sidebar is hidden.
mobileClass	Class of sidebar component when on mobile. 👉 Switch to mobile view to see it in action!
overlayClass	Class of the sidebar overlay.
reduceClass	Class of the sidebar when reduced.	reduce
rightClass	Class of the sidebar when is positioned on the right.	right
rootClass	Class of the root element.
staticClass	Class of the sidebar when its position is static.	position
variantClass	Class of the sidebar variant.	variant	primary info warning danger
visibleClass	Class of the sidebar when sidebar is visible.

Props

Prop name	Description	Type	Values	Default
canCancel	Sidebar cancel options	array|boolean	true, false, 'escape', 'outside'	From config sidebar: {   canCancel: ['escape', 'outside'] }
expandOnHover	Expand sidebar on hover when reduced or mobile is reduce	boolean	-
expandOnHoverFixed	Expand sidebar on hover with fixed position when reduced or mobile is reduce	boolean	-
fullheight	Show sidebar in fullheight	boolean	-
fullwidth	Show sidebar in fullwidth	boolean	-
mobile	Custom layout on mobile	string	fullwidth, reduced, hidden
mobileBreakpoint	Mobile breakpoint as max-width value	string	-
onCancel	Callback on cancel	func	-	Default function (see source code)
open	To control the behaviour of the sidebar programmatically, use the .sync modifier (Vue 2.x) or v-model:open (Vue 3.x) to make it two-way binding	boolean	-
overlay	Show an overlay like modal	boolean	-
override	Override classes	boolean	-	false
position	Skeleton position in relation to the window	string	fixed, absolute, static	From config sidebar: {   position: 'fixed' }
reduce	Show a small sidebar	boolean	-
right	Show the sidebar on right	boolean	-
scroll		string	-	From config sidebar: {   scroll: 'clip' }
variant	Color of the sidebar, optional	string|object	primary, info, success, warning, danger, and any other custom color

Events

Event name	Properties	Description
close
update:open

Slots

Name	Description	Bindings
default

Style

CSS Variable	SASS Variable	Default
--oruga-sidebar-overlay	$sidebar-overlay	hsla(0,0%,4%,.86)
--oruga-sidebar-box-shadow	$sidebar-box-shadow	5px 0px 13px 3px rgba($black, 0.1)
--oruga-sidebar-content-background-color	$sidebar-content-background-color	$grey-lighter
--oruga-sidebar-mobile-width	$sidebar-mobile-width	80px
--oruga-sidebar-width	$sidebar-width	260px
--oruga-sidebar-zindex	$sidebar-zindex	38