Dialog3.0
Dialogs are overlays that require user to take specific action. They can be disruptive to the user and should be used thoughtfully and sparingly.
Installation
npm i @tryg/ui-libraryThe user is NOT able to close the modal via a close icon in the top right corner or clicking the backdrop.
Because of this, you must implement a way for the user to take action and close the modal. The suggested way to do this is by providing a secondary button for "Cancel" and a primary button for "Ok". You need to implement the logic for these buttons yourself.
Usage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-dialog';
defineCustomElement();
</script>
<anchor-dialog>ANYTHING HERE IS SHOWN WHEN THE DIALOG OPENS</anchor-dialog>
<anchor-button text="OPEN DIALOG" variant="primary" color="brand" onclick="javascript: document.querySelector('anchor-dialog').open()"></anchor-button>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-dialog>ANYTHING HERE IS SHOWN WHEN THE DIALOG OPENS</anchor-dialog>
<anchor-button text="OPEN DIALOG" variant="primary" color="brand" onclick="javascript: document.querySelector('anchor-dialog').open()"></anchor-button>Dialog size
The dialog is by default set to be 600px wide and 100% minus a padding for the height. Both of these values are exposed as CSS variables and can be changed in your stylesheet.
CSS variables
--width: 600px;
--height: 100%;Explanation:
These CSS variables are used to define the dimensions of elements in a stylesheet.
--width specifies the width of an element and is assigned a value of 768 pixels.
--height specifies the height of an element and is set to 100% of its parent container, meaning it will occupy the entire available vertical space within its parent.
Set Dialog width and height
Set a custom width and height for the Dialog by setting your own values for these CSS variables:
anchor-dialog {
--width: 400px;
--height: 400px;
}Dialog is open from the beginning
<anchor-dialog is-visible="true">CONTENT</anchor-dialog>anchor-dialog
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
focusTrap | focus-trap | Determines whether the focus should be trapped within the dialog when it is open. If true, the focus will be trapped. If false, the focus will not be trapped. The default value is true. | boolean | true |
isVisible | is-visible | Determines whether the dialog is visible or hidden. If true, the dialog will be visible. If false, the dialog will be hidden. The default value is false. | "false" | "true" | 'false' |
scrollLock | scroll-lock | Determines whether the scrolling of the background content should be locked when the dialog is open. If true, the scrolling will be locked. If false, the scrolling will not be locked. The default value is true. | boolean | true |
uuid | uuid | A unique identifier for the dialog component. It is used to set the id attribute of the dialog element. The default value is generated using the generateGuid() function. | string | `anchor-dialog-${uuidv4()}` |
Events
| Event | Description | Type |
|---|---|---|
closed | Emitted when the dialog is closed. The event data is set to true. | CustomEvent<any> |
opened | Emitted when the dialog is opened. The event data is set to true. | CustomEvent<any> |
Methods
close() => Promise<void>
Closes the dialog. It removes the scroll lock, hides the dialog, and emits the closed event with a value of true.
Returns
Type: Promise<void>
open() => Promise<void>
Opens the dialog. It shows the dialog, emits the opened event with a value of true, and sets the scroll lock if enabled.
Returns
Type: Promise<void>
CSS Custom Properties
| Name | Description |
|---|---|
--dialog-border-radius | This sets the radius for the corners of the Dialog |
--dialog-font-family | This allows you to set a specific font-family for the Dialog |
--dialog-header-height | This sets the height of the header of the Dialog |
--dialog-height | The height of the Dialog. |
--dialog-margin-horizontal | The space reserved to the left and right of the Dialog |
--dialog-margin-vertical | The space reserved above and below the Dialog |
--dialog-padding | The padding of the content area |
--dialog-position | Determines the position value of the anchor-dialog and anchor-dialog__overlay classes |
--dialog-width | The width of the Dialog. It is set to 600 pixels. |
--dialog-z-index | The z-index of the Dialog, when opened |
Built with StencilJS