Drawer
Default End
Drawer Title
Optional description text
Drawer content goes here.
Base
| Class | Description |
|---|---|
.ui-drawer | Base class |
Size
| Class | Value |
|---|---|
.ui-drawer--sm | sm |
.ui-drawer--lg | lg |
.ui-drawer--full | full |
Position
| Class | Value |
|---|---|
.ui-drawer--end | end |
.ui-drawer--start | start |
.ui-drawer--top | top |
.ui-drawer--bottom | bottom |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-drawer-size |
calc(var(--ui-unit) * 40) |
Overall size |
--ui-drawer-max-size |
90% |
Max size |
--ui-drawer-bg |
var(--ui-color-bg) |
Background color |
--ui-drawer-shadow |
var(--ui-shadow-lg) |
Box shadow |
--ui-drawer-header-padding |
calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3) |
Header padding on all sides |
--ui-drawer-body-padding |
calc(var(--ui-unit) * 3) |
Body area padding on all sides |
--ui-drawer-footer-padding |
calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3) |
Footer padding on all sides |
--ui-drawer-border-color |
var(--ui-color-border) |
Border color |
Positions
Start
From start edge
Top
From top edge
Bottom
From bottom edge
<div class="demo-container demo-container--overflow">
<div class="ui-drawer ui-drawer--start ui-drawer--sm ui-absolute" data-state="open">
<div class="ui-drawer__header">
<h2 class="ui-drawer__title">Start</h2>
</div>
<div class="ui-drawer__body">
<p>From start edge</p>
</div>
</div>
</div>
<div class="demo-container demo-container--overflow">
<div class="ui-drawer ui-drawer--top ui-absolute" data-state="open">
<div class="ui-drawer__header">
<h2 class="ui-drawer__title">Top</h2>
</div>
<div class="ui-drawer__body">
<p>From top edge</p>
</div>
</div>
</div>
<div class="demo-container demo-container--overflow">
<div class="ui-drawer ui-drawer--bottom ui-absolute" data-state="open">
<div class="ui-drawer__header">
<h2 class="ui-drawer__title">Bottom</h2>
</div>
<div class="ui-drawer__body">
<p>From bottom edge</p>
</div>
</div>
</div>Sizes
Small drawer
Default drawer
Large drawer
Full-size drawer
<div class="demo-container demo-container--overflow" style="--demo-h: 152px">
<div class="ui-drawer ui-drawer--end ui-drawer--sm ui-absolute" data-state="open">
<div class="ui-drawer__body">
<p>Small drawer</p>
</div>
</div>
</div>
<div class="demo-container demo-container--overflow" style="--demo-h: 152px">
<div class="ui-drawer ui-drawer--end ui-absolute" data-state="open">
<div class="ui-drawer__body">
<p>Default drawer</p>
</div>
</div>
</div>
<div class="demo-container demo-container--overflow" style="--demo-h: 152px">
<div class="ui-drawer ui-drawer--end ui-drawer--lg ui-absolute" data-state="open">
<div class="ui-drawer__body">
<p>Large drawer</p>
</div>
</div>
</div>
<div class="demo-container demo-container--overflow" style="--demo-h: 152px">
<div class="ui-drawer ui-drawer--end ui-drawer--full ui-absolute" data-state="open">
<div class="ui-drawer__body">
<p>Full-size drawer</p>
</div>
</div>
</div>