Developer Notice
jsx
import Notice from '@semcore/ui/notice';
<Notice />;import Notice from '@semcore/ui/notice';
<Notice />;NoticeProps
& & {...}| Name | Type | Description |
|---|---|---|
| hidden | boolean | Property for managing visibility of Notice |
| use | Notice type | |
| theme | Notice theme | |
| duration | number | Duration of animation, ms |
| locale | string |
Notice.Label
The component is inherited from Box and is used to insert a label in the left part of the notification, usually it is an icon.
jsx
import Notice from '@semcore/ui/notice';
<Notice.label />;import Notice from '@semcore/ui/notice';
<Notice.label />;Notice.Actions
The component is inherited from Box and is used to insert control components in the lower part of the notification, usually it is a button or a group of buttons.
jsx
import Notice from '@semcore/ui/notice';
<Notice.Actions />;import Notice from '@semcore/ui/notice';
<Notice.Actions />;Notice.Content
The component is inherited from Box and is used to insert content in the notification.
jsx
import Notice from '@semcore/ui/notice';
<Notice.Content />;import Notice from '@semcore/ui/notice';
<Notice.Content />;Notice.CloseIcon
The component is inherited from Box and is used to insert the close cross.
jsx
import Notice from '@semcore/ui/notice';
<Notice.CloseIcon />;import Notice from '@semcore/ui/notice';
<Notice.CloseIcon />;NoticeSmart
This is the component version for simplified operation; for more details, see demo examples.
jsx
import { NoticeSmart } from '@semcore/ui/notice';
<NoticeSmart />;import { NoticeSmart } from '@semcore/ui/notice';
<NoticeSmart />;NoticeSmartProps
& {...}| Name | Type | Description |
|---|---|---|
| label | React.ReactNode | A custom element for additional information |
| actions | React.ReactNode | Custom action element |
| closable | boolean | Adds a Close icon |
| onClose | (event: React.SyntheticEvent) => void | Callback on a click on the close button |