Basic Drawer usage.
<Button
{{on "click" this.toggle}}
>
Open Drawer
</Button>
<Drawer
@isOpen={{this.isOpen}}
@onClose={{this.toggle}}
as |d|
>
<d.Header>Title</d.Header>
<d.Body>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</d.Body>
<d.Footer>
<Button
@appearance="minimal"
class="mr-4"
{{on "click" this.toggle}}
>
Cancel
</Button>
<Button
@intent="primary"
disabled={{this.isLoading}}
{{on "click" this.save}}
>
{{if this.isLoading "Loading..." "Save"}}
</Button>
</d.Footer>
</Drawer>
Use the size argument to set the desired Drawer size.
{{#each this.sizes as |size|}}
<Button
{{on "click" (fn this.toggle size)}}
>
Open {{size}}
</Button>
{{/each}}
<Drawer
@isOpen={{this.isOpen}}
@size={{this.size}}
@onClose={{this.toggle}}
as |m|
>
<m.Header>Title</m.Header>
<m.Body>
<p>
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
</p>
<p>
Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
</p>
</m.Body>
<m.Footer>
<Button
class="mr-4"
{{on "click" this.toggle}}
>
Close
</Button>
</m.Footer>
</Drawer>
Use the placement argument to set the desired Drawer placement.
{{#each this.placements as |placement|}}
<Button
{{on "click" (fn this.toggle placement)}}
>
Open {{placement}}
</Button>
{{/each}}
<Drawer
@isOpen={{this.isOpen}}
@placement={{this.placement}}
@onClose={{this.toggle}}
as |m|
>
<m.Header>Title</m.Header>
<m.Body>
<p>
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
</p>
<p>
Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
</p>
</m.Body>
<m.Footer>
<Button
class="mr-4"
{{on "click" this.toggle}}
>
Close
</Button>
</m.Footer>
</Drawer>
As an composition example, you can set the Drawer to a given placement and size at the same time.
<FormRadioGroup
@isInline={{true}}
@label="Placement"
@value={{this.placement}}
@onChange={{this.setPlacement}}
as |Radio|
>
{{#each this.placements as |placement|}}
<Radio @value={{placement}} @label={{placement}} />
{{/each}}
</FormRadioGroup>
<FormRadioGroup
@containerClass="mt-2"
@isInline={{true}}
@label="Size"
@value={{this.size}}
@onChange={{this.setSize}}
as |Radio|
>
{{#each this.sizes as |size|}}
<Radio @value={{size}} @label={{size}} />
{{/each}}
</FormRadioGroup>
<Button
class="mt-6"
{{on "click" this.toggle}}
>
Open Drawer
</Button>
<Drawer
@isOpen={{this.isOpen}}
@placement={{this.placement}}
@size={{this.size}}
@onClose={{this.toggle}}
as |m|
>
<m.Header>Title</m.Header>
<m.Body>
<p>
Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
</p>
<p>
Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
</p>
</m.Body>
<m.Footer>
<Button
class="mr-4"
{{on "click" this.toggle}}
>
Close
</Button>
</m.Footer>
</Drawer>
Element: HTMLDivElement
| Name | Type | Default | Description |
|---|---|---|---|
isOpen
*
|
boolean
|
- | Whether it is open or not |
allowCloseButton
|
boolean
|
true
|
If set to false, the close button will not be displayed. |
allowClosing
|
boolean
|
true
|
If set to false, the close button will not be displayed, closeOnOutsideClick will be set to false, and closeOnEscapeKey will also be set to false. |
backdrop
|
enum
|
- | |
backdropTransition
|
Object
|
- | |
closeButtonSize
|
enum
|
- | The Close Button size. |
closeOnEscapeKey
|
boolean
|
true
|
Whether to close when the escape key is pressed |
closeOnOutsideClick
|
boolean
|
true
|
Whether to close when the area outside (the backdrop) is clicked |
destinationElementId
|
string
|
undefined
|
The destination where the overlay will be inserted, defaults to `document.body` |
didClose
|
function
|
- | A function that will be called when closing is finished executing, this includes waiting for animations/transitions to finish. |
disableFocusTrap
|
boolean
|
false
|
Whether the focus trap is disabled or not |
disableTransitions
|
boolean
|
false
|
Disable css transitions |
focusTrapOptions
|
unknown
|
{ clickOutsideDeactivates: true, allowOutsideClick: true }
|
Focus trap options |
onClose
|
function
|
- | A function that will be called when closed |
onOpen
|
function
|
- | A function that will be called when opened |
placement
|
enum
|
'right'
|
The Drawer can appear from any side of the screen. The 'placement' option allows to choose where it appears from. |
renderInPlace
|
boolean
|
false
|
Whether to render in place or in the specified/default destination |
size
|
enum
|
'md'
|
The Drawer size. |
transition
|
Object
|
{name: 'overlay-transition--slide-from-[placement]'}
|
The transition to be used in the Drawer. |
transitionDuration
|
number
|
200
|
Duration of the animation |
| Name | Type | Default | Description |
|---|---|---|---|
default
*
|
Array
|
- |