Aqua Basis

Enables the display of a side panel (drawer) by binding the directive to a component’s ID. The drawer is triggered when the directive is active, allowing additional content or actions to be shown without navigating away.

Implementation

The attribute aq-drawer="id-drawer" in the <aq-button> is bound to the id of the corresponding <aq-drawer>.

For example, in this case:

<aq-button aq-drawer="id-drawer" info="Open drawer">
  Open drawer as directive
</aq-button>

<aq-drawer id="id-drawer" float-side="right" title-drawer="Drawer title">
  <div slot="header">
    <aq-helper-text><span slot="text">[slot]</span></aq-helper-text>
  </div>

  <aq-label>Drawer content:</aq-label>
  <aq-banner title="title" state="danger">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </aq-banner>

  <div slot="footer-right">
    <aq-button>Secondary</aq-button>
    <aq-button variant="primary" info="Primary button">Primary</aq-button>
  </div>

  <div slot="footer-left">
    <aq-button is-plain> Tertiary </aq-button>
  </div>
</aq-drawer>

The value of aq-drawer attribute in the <aq-button> must match the id of the <aq-drawer>.
When the button is clicked, it automatically finds the <aq-drawer id="id-drawer"> and opens it.
No additional JavaScript code is needed. This removes the need for manual JavaScript listeners.

Web Component

<div>
  <aq-button aq-drawer="id-drawer" info="Open drawer">
    Open drawer as directive
  </aq-button>

  <aq-drawer id="id-drawer" float-side="right" title-drawer="Drawer title">
    <div slot="header">
      <aq-helper-text><span slot="text">[slot]</span></aq-helper-text>
    </div>

    <aq-label>Drawer content:</aq-label>
    <aq-banner title="title" state="danger">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </aq-banner>

    <div slot="footer-right">
      <aq-button>Secondary</aq-button>
      <aq-button variant="primary" info="Primary button">Primary</aq-button>
    </div>

    <div slot="footer-left">
      <aq-button is-plain> Tertiary </aq-button>
    </div>
  </aq-drawer>
</div>

Vue

<script lang="ts">
  import { AqDrawer, AqButton } from "@aqua-ds/vue";
  import { defineComponent } from "vue";

  export default defineComponent({
    components: {
      AqDrawer,
      AqButton,
    },
    setup() {
      const onOpen = () => {
        console.log('Get drawer <open> event.')
      }
      const onClose = () => {
        console.log('Get drawer <close> event.')
      }

      return {
        onOpen,
        onClose,
      };
    },
  });
</script>

<template>
  <div>
    <aq-drawer
      size="small"
      id="id-drawer"
      title-drawer="Drawer title"
      state="warning"
      float-side="right"
      icon="aq-icon-message"
      close-on-escape
      close-on-backdrop
      has-back-icon
      :has-close-icon="false"
      @open="onOpen"
      @close="onClose"
    >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>

      <div slot="footer-right">
        <aq-button>Secondary</aq-button>
        <aq-button variant="primary">Primary</aq-button>
      </div>

      <div slot="footer-left">
        <aq-button> Tertiary </aq-button>
      </div>
    </aq-drawer>

    <aq-button
      aq-drawer="id-drawer"
      is-outline
      info="Open drawer using a directive"
    >
      Open drawer
    </aq-button>
  </div>
</template>

React

import { AqDrawer, AqButton } from "@aqua-ds/react";

export const DrawerSet = () => {
  const onOpen = () => {
    console.log("Get drawer <open> event.");
  };

  const onClose = () => {
    console.log("Get drawer <close> event.");
  };

  return (
    <div>
      <AqDrawer
        size="small"
        id="id-drawer"
        title-drawer="Drawer title"
        state="warning"
        float-side="right"
        icon="aq-icon-message"
        close-on-escape
        close-on-backdrop
        has-back-icon
        has-close-icon={false}
        onOpen={onOpen}
        onClose={onClose}
      >
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <div slot="footer-right">
          <AqButton>
            Secondary
          </AqButton>
          <AqButton variant="primary">Primary</AqButton>
        </div>

        <div slot="footer-left">
          <AqButton>Tertiary</AqButton>
        </div>
      </AqDrawer>

      <AqButton
        aq-drawer="id-drawer"
        is-outline
        info="Open drawer using a directive"
      >
        Open drawer
      </AqButton>
    </div>
  );
};

Angular

// set-drawer.component.ts
import { Component } from '@angular/core';
import { AqDrawer, AqButton } from '@aqua-ds/angular';

@Component({
  selector: 'app-set-drawer',
  imports: [AqDrawer, AqButton],
  templateUrl: './set-drawer.component.html',
})
export class SetDrawerComponent {
  onOpen() {
    console.log('Get drawer <open> event.');
  }

  onClose() {
    console.log('Get drawer <close> event.');
  }
}

<!-- set-drawer.component.html -->
<div>
  <aq-button aq-drawer="id-drawer" is-outline>
    Open drawer by directive
  </aq-button>
  <aq-drawer
    size="small"
    id="id-drawer"
    title-drawer="Drawer directive"
    state="warning"
    float-side="right"
    icon="aq-icon-message"
    close-on-escape
    close-on-backdrop
    has-back-icon
    has-close-icon="false"
    (open)="onOpen()"
    (close)="onClose()"
  >
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
      occaecat cupidatat non proident, sunt in culpa qui officia deserunt
      mollit anim id est laborum.
    </p>

    <div slot="footer-right">
      <aq-button>Secondary</aq-button>
      <aq-button variant="primary">Primary</aq-button>
    </div>

    <div slot="footer-left">
      <aq-button> Tertiary </aq-button>
    </div>
  </aq-drawer>
</div>

On this page

✨ Design together. Build together. Speak the same language. ✨

back Aqua.png