naive-ui/demo/documentation/components/notification/enUS/index.md

65 lines
2.4 KiB
Markdown
Raw Normal View History

2019-10-16 23:28:36 +08:00
# Notification
2020-02-04 14:10:35 +08:00
If something is to be telled to somebody.
2020-01-30 20:56:17 +08:00
2020-02-04 14:10:35 +08:00
UI has designed it long long ago. However, you know, notification component is always with low piority so I can make a lot of useless animations on it.
2020-01-30 20:56:17 +08:00
## Demos
2019-10-16 23:28:36 +08:00
```demo
basic
type
2020-01-30 20:56:17 +08:00
change-content
2019-12-08 20:47:14 +08:00
scrollable
closable
duration
2020-01-30 20:56:17 +08:00
```
## API
2020-02-04 14:10:35 +08:00
### $NNotification Methods
|Name|Type|Description|
2020-01-30 20:56:17 +08:00
|-|-|-|
2020-02-05 12:21:18 +08:00
|open|`(option: NotificationOption, type: string = 'default') => NotificationEnvironment`|`type` can be `'default'`, `'warning'`, `'info'`, `'success'` and `'error'`|
|success|`(option: NofiticationOption) => NotificationEnvironment`||
|info|`(option: NofiticationOption) => NotificationEnvironment`||
|warning|`(option: NofiticationOption) => NotificationEnvironment`||
|error|`(option: NofiticationOption) => NotificationEnvironment`||
2020-01-30 20:56:17 +08:00
2020-02-04 14:10:35 +08:00
### $Notification Properties
|Name|Type|Default|Description|
|-|-|-|-|
|scrollable|`boolean`|`false`||
### NotificationOption Type
|Name|Type|Default|Description|
2020-01-30 20:56:17 +08:00
|-|-|-|-|
|avatar|`string \| function`|`null`|Can be render function|
|title|`string \| function`|`null`|Can be render function|
|description|`string \| function`|`null`|Can be render function|
|content|`string \| function`|`null`|Can be render function|
|meta|`string \| function`|`null`|Can be render function|
|action|`string \| function`|`null`|Can be render function|
|closable|`boolean`|`true`||
2020-02-04 14:10:35 +08:00
|onClose|`(next: function) => any`|`next => next()`|Only if next is called notification will close.|
2020-01-30 23:23:51 +08:00
|onAfterHide|`function`|`null`||
|onAfterShow|`function`|`null`||
2020-02-04 14:10:35 +08:00
|duration|`number`|`null`|If not set, it won't automatically close. Unit is millisecond.|
2020-01-30 20:56:17 +08:00
### NotificationEnvironment API
2020-01-30 23:23:51 +08:00
#### NotificationEnvironment Properties
Properties of Instance of NofiticationEnvironment can be dynamically set.
2020-01-30 20:56:17 +08:00
2020-02-04 14:10:35 +08:00
|Name|Type|Description|
2020-01-30 20:56:17 +08:00
|-|-|-|
|avatar|`string \| function`|Can be render function|
|title|`string \| function`|Can be render function|
|description|`string \| function`|Can be render function|
|content|`string \| function`|Can be render function|
|meta|`string \| function`|Can be render function|
|action|`string \| function`|Can be render function|
|closable|`boolean`||
2020-02-04 14:10:35 +08:00
|onClose|`(next: function) => any`|Callback when close button is clicked. Only if next is called notification will close|
2020-01-30 23:23:51 +08:00
|onHide|`function`||
|onAfterHide|`function`||
|onAfterShow|`function`||
#### NotificationEnvironment Methods
2020-02-04 14:10:35 +08:00
|Name|Type|Description|
2020-01-30 23:23:51 +08:00
|-|-|-|
|hide|`()`||