Frontile
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

Drawer

Element: HTMLDivElement

Arguments

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 -
classes SlotsToClasses<'base' | 'closeButton' | 'header' | 'body' | 'footer'> -
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
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.
target enum - The target where to render the portal. There are 3 options: 1) `Element` object, 2) element id, 3) portal target name. For element id, string must be prefixed with `#`. If no value is passee in, we will render to the closest unnamed portal target, parent portal or `document.body`.
transition Object {name: 'overlay-transition--slide-from-[placement]'} The transition to be used in the Drawer.
transitionDuration number 200 Duration of the animation

Blocks

Name Type Default Description
default * Array -
Edit this page on GitHub
NotificationsContainer
Modal
Released under MIT License - Created by Josemar Luedke