Modal3.0
Installation
npm i @tryg/ui-libraryUsage
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 as defineCustomModalElement } from '@tryg/ui-library/dist/components/anchor-modal';
import { defineCustomElement as defineCustomButtonElement } from '@tryg/ui-library/dist/components/anchor-button';
defineCustomModalElement();
defineCustomButtonElement();
</script>
<anchor-modal>ANYTHING HERE IS SHOWN WHEN THE DIALOG OPENS</anchor-modal>
<anchor-button text="OPEN MODAL" variant="primary" color="brand" onclick="javascript: document.querySelector('anchor-modal').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-modal>ANYTHING HERE IS SHOWN WHEN THE DIALOG OPENS</anchor-modal>
<anchor-button text="OPEN MODAL" variant="primary" color="brand" onclick="javascript: document.querySelector('anchor-modal').open()"></anchor-button>Modal button slots
You have to specify the text you want shown next to the Close icon. You add the text as a slot and use the slot name to control if the text is shown before or after the Close icon.
Like this:
<anchor-modal>
<span slot="close-button-before-icon">Close</span>
</anchor-modal>or
<anchor-modal>
<span slot="close-button-after-icon">Close</span>
ANYTHING HERE IS SHOWN WHEN THE MODAL OPENS
</anchor-modal>Modal size
The modal 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 Modal width and height
Set a custom width and height for the Modal by setting your own values for these CSS variables:
anchor-modal {
--width: 400px;
--height: 400px;
}Modal with out close button
<anchor-modal close-btn="false">CONTENT</anchor-modal>
<anchor-button text="OPEN MODAL" variant="primary" color="brand" onclick="javascript: document.querySelector('anchor-modal').open()"></anchor-button>Modal is open from the beginning
<anchor-modal is-visible="true">CONTENT</anchor-modal>
<anchor-button text="OPEN MODAL" variant="primary" color="brand" onclick="javascript: document.querySelector('anchor-modal').open()"></anchor-button>API
anchor-modal
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
closeBtn | close-btn | Determines whether the close button should be displayed in the modal. If true, the close button will be shown. If false, the close button will be hidden. The default value is true. | boolean | true |
closeBtnTitle (required) | close-btn-title | Set a text to use as the title and aria-label for close button. The text will be shown on hover | string | undefined |
focusTrap | focus-trap | Determines whether the focus should be trapped within the modal 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 modal is visible or hidden. If true, the modal will be visible. If false, the modal 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 modal 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 modal component. It is used to set the id attribute of the modal element. The default value is generated using the generateGuid() function. | string | `anchor-modal-${uuidv4()}` |
Events
| Event | Description | Type |
|---|---|---|
closed | Emitted when the modal is closed. The event data is set to true. | CustomEvent<any> |
opened | Emitted when the modal is opened. The event data is set to true. | CustomEvent<any> |
Methods
close() => Promise<void>
Closes the modal. It removes the scroll lock, hides the modal, and emits the closed event with a value of true.
Returns
Type: Promise<void>
open() => Promise<void>
Opens the modal. It shows the modal, 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 |
|---|---|
--height | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--modal-border-radius | This sets the radius for the corners of the Modal |
--modal-font-family | This allows you to set a specific font-family for the Modal |
--modal-header-height | This sets the height of the header of the Modal |
--modal-height | The height of the Modal. It is set to 100% of its parent container. |
--modal-margin-horizontal | The space reserved to the left and right of the Modal |
--modal-margin-vertical | The space reserved above and below the Modal |
--modal-padding | The padding of the content area |
--modal-position | Determines the position value of the anchor-modal and anchor-modal__overlay classes |
--modal-width | The width of the Modal. It is set to 600 pixels. |
--modal-z-index | The z-index of the Modal, when opened |
--width | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
Dependencies
Depends on
Graph
Built with StencilJS