mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
docs(notification): add docs (#667)
This commit is contained in:
Yugang Cao
GitHub
parent
5ca9a34b5a
commit
404f5eae60
@ -50,37 +50,37 @@ duration
|
||||
|
||||
### NotificationProvider Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| ---------- | ----------------------- | -------- | ----------- |
|
||||
| scrollable | `boolean` | `true` | |
|
||||
| to | `string \| HTMLElement` | `'body'` | |
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| scrollable | `boolean` | `true` | Whether notification can be scroll. |
|
||||
| to | `string \| HTMLElement` | `'body'` | Container node of notification container. |
|
||||
|
||||
### `notification` Injection Methods
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| create | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| error | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| info | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| success | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| warning | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| create | `(option: NotificationOption) => NotificationReactive` | Create a notification. |
|
||||
| error | `(option: NotificationOption) => NotificationReactive` | Use `error` type notification. |
|
||||
| info | `(option: NotificationOption) => NotificationReactive` | Use `info` type notification. |
|
||||
| success | `(option: NotificationOption) => NotificationReactive` | Use `success` type notification. |
|
||||
| warning | `(option: NotificationOption) => NotificationReactive` | Use `warning` type notification. |
|
||||
|
||||
### NotificationOption Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| action | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
|
||||
| avatar | `() => VNodeChild` | `undefined` | Can be a render function. |
|
||||
| closable | `boolean` | `true` | |
|
||||
| content | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
|
||||
| description | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
|
||||
| action | `string \| (() => VNodeChild)` | `undefined` | Content of the operation area,, can be a render function. |
|
||||
| avatar | `() => VNodeChild` | `undefined` | Content of the `avatar`, can be a render function. |
|
||||
| closable | `boolean` | `true` | Whether to show close icon. |
|
||||
| content | `string \| (() => VNodeChild)` | `undefined` | Content, can be a render function. |
|
||||
| description | `string \| (() => VNodeChild)` | `undefined` | Content of the `description`, can be a render function. |
|
||||
| duration | `number` | `undefined` | If not set, it won't automatically close. Unit is millisecond. |
|
||||
| meta | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
|
||||
| title | `string \| (() => VNodeChild)` | `undefined` | Can be a render function. |
|
||||
| onAfterEnter | `Function` | `undefined` | |
|
||||
| onAfterLeave | `Function` | `undefined` | |
|
||||
| meta | `string \| (() => VNodeChild)` | `undefined` | Content of the `meta`, can be a render function. |
|
||||
| title | `string \| (() => VNodeChild)` | `undefined` | Content of the `title`, can be a render function. |
|
||||
| onAfterEnter | `Function` | `undefined` | Callback triggered after Transition's enter animation executed. |
|
||||
| onAfterLeave | `Function` | `undefined` | Callback triggered after Transition's leave animation executed. |
|
||||
| onClose | `() => boolean \| Promise<boolean>` | `undefined` | The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing. |
|
||||
| onLeave | `Function` | | |
|
||||
| onLeave | `Function` | `undefined` | Callback triggered when Transition's leave animation executed. |
|
||||
|
||||
### NotificationReactive API
|
||||
|
||||
@ -90,20 +90,20 @@ Properties of NotificationReactive can be dynamically changed.
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| action | `string \| (() => VNodeChild)` | Can be a render function. |
|
||||
| avatar | `() => VNodeChild` | Can be a render function. |
|
||||
| closable | `boolean` | |
|
||||
| content | `string \| (() => VNodeChild)` | Can be a render function. |
|
||||
| description | `string \| (() => VNodeChild)` | Can be a render function. |
|
||||
| meta | `string \| (() => VNodeChild)` | Can be a render function. |
|
||||
| title | `string \| (() => VNodeChild)` | Can be a render function. |
|
||||
| onAfterEnter | `Function` | |
|
||||
| onAfterLeave | `Function` | |
|
||||
| action | `string \| (() => VNodeChild)` | Content of the operation area,, can be a render function. |
|
||||
| avatar | `() => VNodeChild` | Content of the `avatar`, can be a render function. |
|
||||
| closable | `boolean` | Whether to show close icon. |
|
||||
| content | `string \| (() => VNodeChild)` | Content, can be a render function. |
|
||||
| description | `string \| (() => VNodeChild)` | Content of the `description`, can be a render function. |
|
||||
| meta | `string \| (() => VNodeChild)` | Content of the `meta`, can be a render function. |
|
||||
| title | `string \| (() => VNodeChild)` | Content of the `title`, can be a render function |
|
||||
| onAfterEnter | `Function` | Callback triggered after Transition's enter animation executed. |
|
||||
| onAfterLeave | `Function` | Callback triggered after Transition's leave animation executed. |
|
||||
| onClose | `() => boolean \| Promise<boolean>` | The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing. |
|
||||
| onLeave | `Function` | |
|
||||
| onLeave | `Function` | Callback triggered when Transition's leave animation executed. |
|
||||
|
||||
#### NotificationReactive Methods
|
||||
|
||||
| Name | Type | Description |
|
||||
| ------- | ---- | ------------------------ |
|
||||
| destroy | `()` | Destroy the notification |
|
||||
| Name | Type | Description |
|
||||
| ------- | ---- | ------------------------- |
|
||||
| destroy | `()` | Destroy the notification. |
|
||||
|
||||
@ -50,37 +50,37 @@ duration
|
||||
|
||||
### NotificationProvider Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | ----------------------- | -------- | ---- |
|
||||
| scrollable | `boolean` | `true` | |
|
||||
| to | `string \| HTMLElement` | `'body'` | |
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| scrollable | `boolean` | `true` | 通知是否可滚动 |
|
||||
| to | `string \| HTMLElement` | `'body'` | `Notification` 容器节点的位置 |
|
||||
|
||||
### `notification` Injection Methods
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| ------- | ------------------------------------------------------ | ---- |
|
||||
| create | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| error | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| info | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| success | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| warning | `(option: NotificationOption) => NotificationReactive` | |
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| create | `(option: NotificationOption) => NotificationReactive` | 创建通知框 |
|
||||
| error | `(option: NotificationOption) => NotificationReactive` | 调用 `error` 类型的通知框 |
|
||||
| info | `(option: NotificationOption) => NotificationReactive` | 调用 `info` 类型的通知框 |
|
||||
| success | `(option: NotificationOption) => NotificationReactive` | 调用 `success` 类型的通知框 |
|
||||
| warning | `(option: NotificationOption) => NotificationReactive` | 调用 `warning` 类型的通知框 |
|
||||
|
||||
### NotificationOption Properties
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| action | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
|
||||
| avatar | `() => VNodeChild` | `undefined` | 可以是 render 函数 |
|
||||
| closable | `boolean` | `true` | |
|
||||
| content | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
|
||||
| description | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
|
||||
| action | `string \| (() => VNodeChild)` | `undefined` | 操作区域的内容,可以是 render 函数 |
|
||||
| avatar | `() => VNodeChild` | `undefined` | 头像区域的内容，可以是 render 函数 |
|
||||
| closable | `boolean` | `true` | 是否显示 close 图标 |
|
||||
| content | `string \| (() => VNodeChild)` | `undefined` | 通知框内容，可以是 render 函数 |
|
||||
| description | `string \| (() => VNodeChild)` | `undefined` | 描述的内容，可以是 render 函数 |
|
||||
| duration | `number` | `undefined` | 如果没有设定则不会自动关闭，单位毫秒 |
|
||||
| meta | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
|
||||
| title | `string \| (() => VNodeChild)` | `undefined` | 可以是 render 函数 |
|
||||
| onAfterEnter | `Function` | `undefined` | |
|
||||
| onAfterLeave | `Function` | `undefined` | |
|
||||
| onClose | `() => boolean \| Promise<boolean>` | `undefined` | 关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭 |
|
||||
| onLeave | `Function` | `undefined` | |
|
||||
| meta | `string \| (() => VNodeChild)` | `undefined` | `meta` 信息，可以是 render 函数 |
|
||||
| title | `string \| (() => VNodeChild)` | `undefined` | `title` 信息，可以是 render 函数 |
|
||||
| onAfterEnter | `Function` | `undefined` | 过渡动画进入执行完后执行的回调 |
|
||||
| onAfterLeave | `Function` | `undefined` | 过渡动画离开执行完后执行的回调 |
|
||||
| onClose | `() => boolean \| Promise<boolean>` | `undefined` | 关闭通知的回调，返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭 |
|
||||
| onLeave | `Function` | `undefined` | 过渡动画离开时执行的回调 |
|
||||
|
||||
### NotificationReactive API
|
||||
|
||||
@ -90,17 +90,17 @@ NotificationReactive 实例的属性可以被动态改变。
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| action | `string \| (() => VNodeChild)` | 可以是 render 函数 |
|
||||
| avatar | `() => VNodeChild` | 可以是 render 函数 |
|
||||
| closable | `boolean` | |
|
||||
| content | `string \| (() => VNodeChild)` | 可以是 render 函数 |
|
||||
| description | `string \| (() => VNodeChild)` | 可以是 render 函数 |
|
||||
| meta | `string \| (() => VNodeChild)` | 可以是 render 函数 |
|
||||
| title | `string \| (() => VNodeChild)` | 可以是 render 函数 |
|
||||
| onAfterEnter | `Function` | |
|
||||
| onAfterLeave | `Function` | |
|
||||
| action | `string \| (() => VNodeChild)` | 操作区域的内容,可以是 render 函数 |
|
||||
| avatar | `() => VNodeChild` | 头像区域的内容，可以是 render 函数 |
|
||||
| closable | `boolean` | 是否显示 close 图标 |
|
||||
| content | `string \| (() => VNodeChild)` | 通知框内容，可以是 render 函数 |
|
||||
| description | `string \| (() => VNodeChild)` | 描述的内容，可以是 render 函数 |
|
||||
| meta | `string \| (() => VNodeChild)` | `meta` 信息，可以是 render 函数 |
|
||||
| title | `string \| (() => VNodeChild)` | `title` 信息，可以是 render 函数 |
|
||||
| onAfterEnter | `Function` | 过渡动画进入执行完后执行的回调 |
|
||||
| onAfterLeave | `Function` | 过渡动画离开进入执行完后执行的回调 |
|
||||
| onClose | `() => boolean \| Promise<boolean>` | 关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭 |
|
||||
| onLeave | `Function` | |
|
||||
| onLeave | `Function` | 过渡动画离开动画执行时的回调 |
|
||||
|
||||
#### NotificationReactive Methods
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user