Notification
Notification is the notification bar, which can display three types of information: success, warning, and error.
Code demo
Warning
import { Notification } from 'tuya-panel-kit'Notification.show({message: 'Warning Notification',onClose: () => {Notification.hide();},theme: {successIcon: 'red',errorIcon: 'yellow',warningIcon: 'black',},});
API
| Name | Description | Type | Default |
|---|---|---|---|
| accessibilityLabel | Test identification | string | 'Notification' |
| style | Container style | null | |
| theme | Theme configuration | { background?: string; text?: string; iconColor?: string; successIcon?: string; warningIcon?: string; errorIcon?: string; closeIcon?: string; radius?: number;} | { background: '#fff', text: '#495054', iconColor: undefined, successIcon: undefined, warningIcon: undefined, errorIcon: undefined, closeIcon: '#81828B' } |
| show | Show notification bar | boolean | false |
| icon | Custom icon path for notification bar | string | undefined |
| backIcon | Path notification icon behind the copybar | string | 'M329.557333 281.9072a32.8704 32.8704 0 0 1 0.887467 0.853333l177.527467 178.449067 161.6896-171.281067a33.1776 33.1776 0 0 1 47.581866-0.682666l0.682667 0.682666a34.133333 34.133333 0 0 1 0.682667 47.581867l-162.474667 172.100267 162.269867 163.157333a34.133333 34.133333 0 0 1 0.750933 47.377067l-0.853333 0.9216a32.8704 32.8704 0 0 1-46.455467 1.604266l-0.887467-0.853333-161.6896-162.577067-155.7504 165.034667a33.1776 33.1776 0 0 1-46.865066 1.365333l-1.365334-1.365333a34.133333 34.133333 0 0 1-0.682666-47.581867l156.501333-165.853866L282.999467 331.776a34.133333 34.133333 0 0 1-0.750934-47.342933l0.853334-0.9216a32.8704 32.8704 0 0 1 46.455466-1.604267z' |
| variant | Type of notification bar | 'success' | 'warning' | 'error' | 'warning' |
| enableClose | Whether the close button is displayed. If false, the onclose callback is automatically triggered after autoCloseTime | boolean | true |
| autoCloseTime | Auto off time. It should be used with enableclose: false | number | 1500 |
| message | Notice board copy | string | '' |
| onClose | Close callback | () => void | () => {} |
| motionConfig | For notification animation configuration, refer to pushdown property | {} | |
| motionStyle | Motion style | null | |
| imageSource | Image source | null | |
| imageStyle | Image style | null | |
| backIconSize | Size icon behind copy | number | 24 |
| backIconCenter | Is the icon behind the copy centered vertically | boolean | false |