Side Drawer

BsSideDrawer is a lightweight component's container which may contains application navigation, logo and others.

Overview

BsSideDrawer is usually used to house your application navigation. It works well with BsAppbar and can automatically adapt to the screen size. You also can change the component's color using the color property and use any color variants as you like.

Location

BsSideDrawer support 2 position location: left and right. Use position property with value left or right to change the position location.

Added since v2.0.0

Mini Side Drawer

BsSideDrawer also support mini size. Sets the mini property to true to enable the mini Side Drawer. You can adjust the width of <bs-side-drawer> on minimize state using the mini-width property.

Usage Example

The following are a collection of examples that demonstrate more advanced use of the <bs-side-drawer>.

Use With Appbar

Clipped Side Drawer

API Reference

Property	Type	Default	Description
color	String	'white'	Sets the component colors. Any color variants can be used.
clipped	Boolean	false	Cut off the top edge of the component.
fixed-layout	Boolean	false	Sets the component position fixed on the left or right side even when scrolling the page. v2.0.0
mini	Boolean	false	The component minimize state.
mini-width	Number	56	The component width in pixel when on minimize state.
modal-width	Number	300	The component width in pixel when display as modal on small screen.
open v-model	Boolean	true	The component state, show or hide.
overlay-color	String	'#000'	The backdrop overlay color when the component is displayed as modal. The value must be in hexa-decimal color format. v2.0.0
position	String	'left'	The component position location. Valid values are: left, right. v2.0.0
shadow	Boolean	false	Add shadow effect to the component.
tag	String	'aside'	Html tag used to render the component.
width	Number	250	The component width in pixel.

Name	Arguments	Description
resize	( target:HTMLElement)	Triggers when the component is resized. v2.0.0
update:open	( state:Boolean)	Triggers when the component becomes visible or invisible. Use this event to update the open property or just use the shortcut v-model:open.

Name	Description
default	The outlet slot used to place the main content.