Drawer v0.17.0+

The Drawer provides a temporary overlay dialog, anchored to the right side of the screen.

Basic Drawer

(triggers scrolling)

<hx-disclosure
  aria-controls="demo-drawer"
  class="hxBtn">
  Toggle Drawer
</hx-disclosure>

<hx-drawer
  id="demo-drawer">
  <header></header>

  <hx-div class="hxMd">
    ...
  </hx-div>

  <footer>
    ...
  </footer>
</hx-drawer>

Drawer with Positionable Child Elements

Positionable elements (e.g., <hx-tooltip> and <hx-popover>) need to be direct children of the <hx-drawer> element, and placed in a named slot. Positionable elements require the [slot="fixed] attribute.

(triggers scrolling)

<hx-disclosure
  aria-controls="drawer-with-slotted-positionable-element"
  class="hxBtn">
Drawer with Slotted Positionable Element
</hx-disclosure>

<hx-drawer
  id="drawer-with-slotted-positionable-element">
  <header></header>

  <hx-div class="hxMd">
    ...
  </hx-div>
  <hx-tooltip slot="fixed" for="info1" position="left-middle">
    <header>Tooltip #1</header>
    <p>
      <code>hx-drawer &gt; hx-tooltip[slot="fixed"]</code>
    </p>
  </hx-tooltip>
  <hx-popover slot="fixed" id="popover1" position="left-middle">
    <header>
      Popover #1
    </header>
    <hx-div>
      <p>This popover is a slotted child of hx-drawer.</p>
      <p><code>hx-drawer &gt; hx-popover[slot="fixed"]</code></p>
    </hx-div>
  </hx-popover>
  <footer>
    ...
  </footer>
</hx-drawer>

See Also