Drawer is another layer of the interface. It adds more information or functionality to the current layout without messing up the elements.

It is best to place secondary functionality or information into the drawer, and only present the most important elements or interaction in the workspace.

Structure

• Drawer: The size of drawer depends on information density.
• Handle: By clicking the handles, the drawer can be Expanded to display more information.
• Background: The background should be black #000000 with 46% opacity.

Size

There are different ways to customize the width of the drawer.

Each drawer has a default state and a wide state, the transition can be triggered by clicking on the arrow at the edge of the drawer.

When the isWide flag is set to true the default state will be 26.8rem wide, the expanded state will be 75% of the screen width.

You can also customize the width of drawer by setting both defaultWidth and expandWidth. If only one values is set, this will not work

<!-- Wide width drawer -->
<KtDrawer isWide> ... </KtDrawer>

<!-- Customize width drawer -->
<KtDrawer defaultWidth="400px" expandWidth="600px"> ... </KtDrawer>

Close from outside

When the disallowCloseOutside flag is set, it prevents the user from accidentally closing the drawer by clicking outside of the drawer.

<KtDrawer v-if="showDrawer" @close="showDrawer=false" disallowCloseOutside>
	<div slot="drawer-header">
		<h2>Default Size Drawer</h2>
	</div>
	<div slot="drawer-body">
		<p>Close from outside disabled</p>
	</div>
	<div slot="drawer-footer">
		<KtButton @click="showDrawer=false" class="w-100" label="Close Drawer" />
	</div>
</KtDrawer>

Usage

Attributes