GitHub

Drawer

Examples

Usage

Edit this demo

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>

Sizes

Edit this demo

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>

Placements

Edit this demo

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>

Combining Placement and Size

Edit this demo

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>

API

Arg Type Description Required Default
isOpen boolean Whether it is open or not Yes -
allowCloseButton boolean If set to false, the close button will not be displayed. - true
allowClosing boolean 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. - true
backdropTransitionName string The name of the transition to be used in the backdrop. - 'overlay-transition--fade'
closeButtonSize 'xs' | 'sm' | 'lg' | 'xl' | 'md' The Close Button size. - -
closeOnEscapeKey boolean Whether to close when the escape key is pressed - true
closeOnOutsideClick boolean Whether to close when the area outside (the backdrop) is clicked - true
destinationElementId string The destination where the overlay will be inserted, defaults to `document.body` - undefined
didClose () => void A function that will be called when closing is finished executing, this includes waiting for animations/transitions to finish. - -
disableBackdrop boolean Whether to hide the backdrop or not - false
disableFocusTrap boolean Whether the focus trap is disabled or not - false
disableTransitions boolean Disable css transitions - false
focusTrapOptions unknown Focus trap options - { allowOutsideClick: true }
onClose () => void A function that will be called when closed - -
onOpen () => void A function that will be called when opened - -
placement 'top' | 'bottom' | 'left' | 'right' The Drawer can appear from any side of the screen. The 'placement' option allows to choose where it appears from. - 'right'
renderInPlace boolean Whether to render in place or in the specified/default destination - false
size 'xs' | 'sm' | 'lg' | 'xl' | 'md' | 'full' The Drawer size. - 'md'
transitionDuration number Duration of the animation - 200
transitionName string The name of the transition to be used in the modal. - 'overlay-transition--slide-from-[placement]'
Edit this page on GitHub
Overlay
Modal