OrugaSidebar
A sidebar to use as left/right overlay or static
Class props
Example 1
Example 2
Example 3
Example 4
Example 5
| 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 | ||
| 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 | |
| visibleClass | Class of the sidebar when sidebar is visible. |
Sidebar component
html
<o-sidebar></o-sidebar>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| canCancel | Sidebar cancel options | array|boolean | true, false, 'escape', 'outside' | From config: sidebar: { |
| 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 v-model:open to make it two-way binding | boolean | - | |
| overlay | Show an overlay like modal | boolean | - | |
| override | boolean | - | ||
| position | Skeleton position in relation to the window | string | fixed, absolute, static | From config: sidebar: { |
| reduce | Show a small sidebar | boolean | - | |
| right | Show the sidebar on right | boolean | - | |
| scroll | string | - | From config: sidebar: { | |
| variant | Color of the sidebar, optional | string|object | primary, info, success, warning, danger, and any other custom color |
Events
| Event name | Properties | Description |
|---|---|---|
| update:open | ||
| close |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
Sass variables
Current theme ➜ Oruga Base
| SASS Variable | Default |
|---|---|
| $sidebar-overlay | hsla(0, 0%, 4%, 0.86) |
| $sidebar-box-shadow | 5px 0px 13px 3px rgba($black, 0.1) |
| $sidebar-content-background-color | $grey-lighter |
| $sidebar-mobile-width | 80px |
| $sidebar-width | 260px |
| $sidebar-zindex | 38 |
See ➜ 📄 Full scss file
Current theme ➜ Oruga Full
| SASS Variable | Default |
|---|---|
| $sidebar-overlay | hsla(0, 0%, 4%, 0.86) |
| $sidebar-box-shadow | 5px 0px 13px 3px rgba($black, 0.1) |
| $sidebar-content-background-color | $grey-lighter |
| $sidebar-mobile-width | 80px |
| $sidebar-width | 260px |
| $sidebar-zindex | 38 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
| SASS Variable | Default |
|---|---|
| $sidebar-reduced-width | 5rem |
| $sidebar-reduced-height | 10vh |
See ➜ 📄 Full scss file