Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

Displays a modal dialog by targeting a component’s ID. The directive controls when the dialog is shown, enabling developers to present confirmations, forms, or other important content as overlays.

Implementation

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

For example, in this case:

<div>
  <aq-button aq-dialog="id-dialog" is-outline info="Open dialog using directive">
    Open dialog as directive
  </aq-button>

  <aq-dialog
    id="id-dialog"
    size="small"
    title-dialog="Dialog Title Toggle"
    state="info"
    allow-maximize
  >
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
      Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
      nibh elementum imperdiet. Duis sagittis ipsum.
    </p>

    <div slot="header-right">
      <em class="aq-icon-three-dots-vertical"></em>
    </div>

    <div slot="footer-right">
      <aq-button id="secondary-btn">Secondary</aq-button>
      <aq-button variant="primary" id="close-dialog">Close</aq-button>
    </div>

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

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

Web Component

<div>
  <aq-button aq-dialog="id-dialog" is-outline info="Open dialog using directive">
    Open dialog as directive
  </aq-button>

  <aq-dialog
    id="id-dialog"
    size="small"
    title-dialog="Dialog Title Toggle"
    state="info"
    allow-maximize
  >
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
      Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
      nibh elementum imperdiet. Duis sagittis ipsum.
    </p>

    <div slot="header-right">
      <em class="aq-icon-three-dots-vertical"></em>
    </div>

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

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

Vue

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

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

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

<template>
  <div>
    <aq-dialog
      id="id-dialog"
      size="small"
      title-dialog="Dialog Title Toggle"
      state="info"
      allow-maximize
    >
      <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
        odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
        quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
      </span>

      <div slot="header-right">
        <em class="aq-icon-three-dots-vertical"></em>
      </div>

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

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

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

React

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

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

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

  return (
    <div>
      <AqDialog
        id="id-dialog"
        size="small"
        title-dialog="Dialog Title Toggle"
        state="info"
        allow-maximize
      >
        <span>
	        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
	        odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
	        quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
	      </span>
	
	      <div slot="header-right">
	        <em class="aq-icon-three-dots-vertical"></em>
	      </div>
	
	      <div slot="footer-right">
	        <aq-button id="secondary-btn">Secondary</aq-button>
	        <aq-button variant="primary">Primary</aq-button>
	      </div>
	
	      <div slot="footer-left">
	        <aq-button>Tertiary</aq-button>
	      </div>
      </AqDialog>

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

Angular

// set-dialog.component.ts
import { Component } from "@angular/core";
import { AqDialog, AqButton } from "@aqua-ds/angular";

@Component({
  selector: "app-set-dialog",
  imports: [
    AqDialog,
    AqButton
  ],
  templateUrl: "./set-dialog.component.html",
})
export class SetDialogComponent {
  onOpen() {
    console.log("Get dialog <open> event.");
  }
  onClose() {
    console.log("Get dialog <close> event.");
  }
}

<!-- set-drawer.component.html -->
<div>
  <aq-button aq-dialog="id-dialog" is-outline info="Open dialog using directive">
    Open dialog
  </aq-button>

  <aq-dialog
    id="id-dialog"
    size="small"
    title-dialog="Dialog Title Toggle"
    state="info"
    allow-maximize
    (close)="onClose()"
    (open)="onOpen()"
  >
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
      Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
      nibh elementum imperdiet. Duis sagittis ipsum.
    </span>

    <div slot="header-right">
      <em class="aq-icon-three-dots-vertical"></em>
    </div>

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

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

On this page

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