RYZE Digital Dialog

Install

npm i @ryze-digital/dialog --save

Usage

HTML

<button data-open-dialog="your-dialog-id">Open dialog button label</button>

<dialog id="your-dialog-id" data-dialog>
    <button data-close-dialog>Close dialog button label</button>
    Your dialog content
</dialog>

Scss

@use "@ryze-digital/dialog";

Use the provided configure mixin to define your dialog defaults.

@include dialog.configure(...);

| Option | Type | Default | Description | |--------------------|--------|---------------------------------|--------------------------------------| | padding | Map | | | | padding.horizontal | Number | scss-utilities.rem-calc(20px) | Left and right padding of the dialog | | padding.vertical | Number | scss-utilities.rem-calc(20px) | Top and bottom padding of the dialog | | max | Map | | | | max.width | Number | 95ch | | | max.height | Number | 100% | | | z-index | Number | null | |

Check out the actual configure mixin for better understanding.

Add familiar styles to get a typical dialog look using base mixin. Use the clone-modal-style mixin to make the modal dialog look the same as the non-modal.

dialog {
    @include dialog.base();
    @include dialog.clone-modal-style();
}

JavaScript

import { Dialog } from '@ryze-digital/dialog';

new Dialog({...}).init();

| Option | Type | Default | Description | |--------|-------------|-------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | el | HTMLElement | document.querySelector('[data-dialog]') | Container to which the library should be bound | | modal | boolean | true | Should dialog use showModal() (true) or show() (false) |

Demos

Checkout this repository and use the /demos folder as document root to see a running demo in the browser.

• Basic use case
• Multiple instances
• Event binding
• Confirmation
• Auto open
• Custom animation
• Fetch content
• Multiple triggers