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-notification-banner
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
canClose | can-close | boolean | true | |
closeButtonAriaLabel | close-button-aria-label | arialabel for close button icon in banner- used for accessibility | string | undefined |
iconSize | icon-size | "large" | "medium" | "small" | "xlarge" | "xsmall" | 'small' | |
type | type | The type of notification to be displayed. Options are Error, Info, Success, and Warning. | "error" | "info" | "success" | "warning" | undefined |
uuid | uuid | Give this instance of notification-inline a custom ID, or keep the default. | string | uuidv4() |
Events
| Event | Description | Type |
|---|---|---|
closed | CustomEvent<any> |
Methods
close() => Promise<void>
Returns
Type: Promise<void>
CSS Custom Properties
| Name | Description |
|---|---|
--border | Border style for the notification banner. |
--notification-banner-background-color | Background color of the notification banner. |
--notification-banner-border-color | Border color of the notification banner. |
--notification-banner-border-width | Width of the notification banner border. |
--notification-banner-font-family | Font family for the notification banner text. |
--notification-banner-font-size | Font size for the notification banner text. |
--notification-banner-font-weight | Font weight for the notification banner text. |
--notification-banner-icon-color | Icon color in the notification banner. |
--notification-banner-inline-spacing | Spacing between inline elements in the notification banner. |
--notification-banner-line-height | Line height for the notification banner text. |
--notification-banner-max-width | Maximum width of the notification banner. |
--notification-banner-text-color | Text color in the notification banner. |
Dependencies
Depends on
Graph
graph TD;
anchor-notification-banner --> anchor-icon
anchor-notification-banner --> anchor-icon-button
style anchor-notification-banner fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
Navigation card
Navigation cards are a core component of Tryg’s digital universe. They support a wide range of use cases, from guiding users through content to highlighting key messages.
Notification inline
The notification-inline 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.