Notice
Display notice messages that require attention.
Importing
To use the notice component, first you need to register the component inside the page. You can register the component manually by importing the register function:
ts
import { register } from "@tapsioss/web-components/notice";
register(); // Now the notice component is ready to use!
ts
import { registerNotice } from "@tapsioss/web-components";
registerNotice(); // Now the notice component is ready to use!
Also you can automatically register the component by importing it with the following approach:
ts
import "@tapsioss/web-components/notice/element";
TIP
If you want to use all the component in your app, you can call registerAll
at the root of your project.
ts
import { registerAll } from "@tapsioss/web-components";
registerAll(); // All the components are now available
In the React package, you can easily add the component using the following code:
ts
import { Notice } from "@tapsioss/react-components";
Component Usage
html
<tapsi-notice></tapsi-notice>
tsx
<Notice />
Properties
Name | Attribute Name | Description | Type | Default Value |
---|---|---|---|---|
visible | visible | Indicates whether the notice is visible or not. | boolean | false |
heading | heading | The title of the notice. | string | "" |
description | description | The description of the notice. | string | "" |
color | color | The color of the notice, indicating the type of message. | | "success" | "error" | "info" | "warning" | "info" |
priority | priority | The priority level of the notice. High priority uses bolder colors and the role of alert for screen readers, while low priority uses lighter colors and the role of status . | "high" | "low" | "high" |
artwork | artwork | The artwork of the notice component. Setting to none hides the artwork.The icon value shows a default icon based on the color,and custom enables the use of the artwork slot. | | "none" | "icon" | "custom" | "icon" |
variant | variant | The variant of the notice. | "standard" | "compact" | "standard" |
dismissible | dismissible | Indicates whether the notice can be dismissed. | boolean | false |
Methods
Name | Description | Parameters |
---|---|---|
show | Forces the notice to display. | |
hide | Forces the notice to hide. |
Slots
Name | Value | Description |
---|---|---|
ARTWORK | artwork | The slot for custom artwork the notice component. To display this slot, set the artwork property to custom . |
ACTION | action | The slot for custom artwork the notice component. To display this slot, set the artwork property to custom . |
TIP
The value of slots are available for developer as JavaScript Variables:
ts
// Option 1
import { NoticeSlots } from "@tapsioss/web-components";
// Option 2
import { Slots } from "@tapsioss/web-components/notice";
ts
// Option 1
import { NoticeSlots } from "@tapsioss/react-components";
// Option 2
import { Slots } from "@tapsioss/react-components/Notice";
Events
Name | Description | Type | Bubbles | Cancelable |
---|---|---|---|---|
show | Fires when the tooltip should be visible. | ShowEvent | ❌ | ❌ |
hide | Fires when the tooltip should be hidden. | HideEvent | ❌ | ❌ |
TIP
Event details are available as JavaScript variables:
ts
// Option 1
import {
ShowEvent,
HideEvent
} from "@tapsioss/web-components/notice";
// Option 2
import {
NoticeShowEvent,
NoticeHideEvent
} from "@tapsioss/web-components";
You can have access to the event name using the type
property:
ts
// Option 1
element.addEventListener(ShowEvent.type, handleShow);
element.addEventListener(HideEvent.type, handleHide);
// Option 2
element.addEventListener(NoticeShowEvent.type, handleShow);
element.addEventListener(NoticeHideEvent.type, handleHide);