Notification inline3.0
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.
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-inline';
defineCustomElement();
</script>
<anchor-notification-inline>This is an error message.</anchor-notification-inline>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-inline>This is an error message.</anchor-notification-inline>Error notification
<anchor-notification-inline type="error"> This is an error message. </anchor-notification-inline>Header slot
You can give the notification a bold header by using the header slot.
<anchor-notification-inline>
<div slot="header">Custom Header</div>
</anchor-notification-inline>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-inline>
Hello
<a slot="link" href="https://anchor.tryg.com">Learn more</a>
</anchor-notification-inline>API
Inline notification
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
type | type | The type of alert to display. Can be 'error', 'info', 'success', or 'warning'. | "error" | "info" | "success" | "warning" | undefined |
uuid | uuid | Give this instance of notification-inline a custom ID, or keep the default. | string | uuidv4() |
CSS Custom Properties
| Name | Description |
|---|---|
--background-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-radius | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-width | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--gap | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--inline-icon-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--lineheight | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--notification-inline-background-color | Set the background color of the |
--notification-inline-border-color | Set the border color of the |
--notification-inline-border-radius | Set the border radius of the |
--notification-inline-border-width | Set the border width of the |
--notification-inline-gap | Set the gap width of the |
--notification-inline-icon-color | Set the color of the inline icon in the |
--notification-inline-lineheight | Set the lineheight of the |
--notification-inline-link-color | Set the color of the links in the |
--notification-inline-text-color | Set the text color of the |
--notification-inline-width | Set the width of the |
--text-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
Dependencies
Depends on
Graph
Built with StencilJS