Notification banner3.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 } from '@tryg/ui-library/dist/components/anchor-notification-banner';
defineCustomElement();
</script>
<anchor-notification-banner> This is an error message. </anchor-notification-banner>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-notification-banner> This is an error message. </anchor-notification-banner>The notification-banner component is a simple alert component that can display a variety of different types of messages, including error, info, success, and warning messages. It also displays an icon corresponding to the type of message being displayed.
The notification-banner takes up the full width of the page and is fixed to the top of the page. It sits "on top" of the page content, and does not need to fit in the flow of the page.
Error notification banner
Use the component in your template like this:
<anchor-notification-banner type="error"> This is an error message. </anchor-notification-banner>Using the header slot
You can give the notification a bold header by using the header slot.
Example:
<anchor-notification-banner>
<div slot="header">Custom Header</div>
</anchor-notification-banner>Using the link slot
You can give the notification a link by using the link slot.
Remember that you have to use an <a> tag in the slot.
And you have to use the slot="link" attribute on the <a> tag.
Example:
<anchor-notification-banner>
<a slot="link" href="http://your-link-here">Learn more</a>
</anchor-notification-banner>Set the max-width of the Notification Banner
You can set the max-width of the Notification Banner content by using the --notification-banner-max-width CSS variable.
Example:
anchor-notification-banner {
--notification-banner-max-width: [your-max-width-here];
}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