浏览代码

docs: improve toast api usage (#1303)

* docs: improve toast api usage

* docs: improve toast api usage
YannLynn 2 年之前
父节点
当前提交
948d3bb713
共有 2 个文件被更改,包括 24 次插入41 次删除
  1. 12 21
      content/feedback/toast/index-en-US.md
  2. 12 20
      content/feedback/toast/index.md

+ 12 - 21
content/feedback/toast/index-en-US.md

@@ -366,40 +366,31 @@ The static methods provided are as follows: Display: You can pass in `options` o
 -   `Toast.error(options || string)`
 -   `Toast.error(options || string)`
 -   `Toast.warning(options || string)`
 -   `Toast.warning(options || string)`
 -   `Toast.success(options || string)`
 -   `Toast.success(options || string)`
+-   `Toast.close(toastId)`  Close Manually ( `toastId` is the return value of the display methods)
+-   `Toast.config(config)`  The global configuration is set before any method call, and takes effect only once (>= 0.25.0)
 
 
-Close Manually ( `toastId` is the return value of the display methods)
-
--   `Toast.close(toastId)`
+**The following APIs can take effect without calling additional ToastFactory.create(config) to create a new Toast**
 
 
 | Properties | Instructions | type | Default | version |
 | Properties | Instructions | type | Default | version |
 | --- | --- | --- | --- | --- |
 | --- | --- | --- | --- | --- |
-| bottom | Pop-up position bottom | number \| string | - | 0.25.0 |
 | content | Toast content | string | ReactNode | '' |  |
 | content | Toast content | string | ReactNode | '' |  |
 | duration | Automatic close delay, no auto-close when set to 0 | number | 3 |  |
 | duration | Automatic close delay, no auto-close when set to 0 | number | 3 |  |
-| getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper  'position: relative` | () => HTMLElement \| null | () => document.body | 0.34.0 |
 | icon | Custom icons | ReactNode |  | 0.25.0 |
 | icon | Custom icons | ReactNode |  | 0.25.0 |
-| left | Pop-up position left | number \| string | - | 0.25.0 |
-| right | Pop-up position right | number \| string | - | 0.25.0 |
 | showClose | Toggle Whether show close button | boolean | true | 0.25.0 |
 | showClose | Toggle Whether show close button | boolean | true | 0.25.0 |
 | textMaxWidth | Maximum width of content | number \| string | 450 | 0.25.0 |
 | textMaxWidth | Maximum width of content | number \| string | 450 | 0.25.0 |
 | theme | Style of background fill, one of `light`, `normal` | string | `normal` | 1.0.0 |
 | theme | Style of background fill, one of `light`, `normal` | string | `normal` | 1.0.0 |
-| top | Pop-up position top | number \| string | - | 0.25.0 |
-| zIndex | Z-index value | number | 1010 |  |
 | onClose | Callback function when closing toast | () => void |  |  |
 | onClose | Callback function when closing toast | () => void |  |  |
 
 
-The global configuration is set before any method call, and takes effect only once (>= 0.25.0):
-
--   `Toast.config(config)`
+**If not specifically declared in Toast.config(config), the following APIs need to call additional ToastFactory.create(config) to create new Toast settings**
 
 
-| Properties | Instructions                                                                                                                                              | type | Default | version |
-| --- |-----------------------------------------------------------------------------------------------------------------------------------------------------------| --- | --- | --- |
-| bottom | Bottom, absolute position                                                                                                                                 | number \| string | - | 0.25.0 |
-| duration | Automatic close delay, no auto-close when set to 0                                                                                                        | number(second) | 3 | 0.25.0 |
-| getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper  'position: relative` | () => HTMLElement \| null | () => document.body | 1.23.0 |
-| left | Left, absolute position                                                                                                                                   | number \| string | - | 0.25.0 |
-| right | Right, absolute position                                                                                                                                  | number \| string | - | 0.25.0 |
-| top | Top, absolute position                                                                                                                                    | number \| string | - | 0.25.0 |
-| zIndex | Z-index                                                                                                                                                   | number | 1010 | 0.25.0 |
+| Properties | Instructions | type | Default | version |
+| --- | --- | --- | --- | --- |
+| bottom | Pop-up position bottom | number \| string | - | 0.25.0 |
+| getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM, you need to set container and inner .semi-toast-wrapper  'position: relative` | () => HTMLElement \| null | () => document.body | 0.34.0 |
+| left | Pop-up position left | number \| string | - | 0.25.0 |
+| right | Pop-up position right | number \| string | - | 0.25.0 |
+| top | Pop-up position top | number \| string | - | 0.25.0 |
+| zIndex | Z-index value | number | 1010 |  |
 
 
 -   `ToastFactory.create(config) => Toast`  
 -   `ToastFactory.create(config) => Toast`  
     If you need Toast with different configs in your application, you can use ToastFactory.create(config)to create a new Toast (>= 1.23):
     If you need Toast with different configs in your application, you can use ToastFactory.create(config)to create a new Toast (>= 1.23):

+ 12 - 20
content/feedback/toast/index.md

@@ -367,40 +367,32 @@ render(Demo);
 -   `Toast.error(options || string)`
 -   `Toast.error(options || string)`
 -   `Toast.warning(options || string)`
 -   `Toast.warning(options || string)`
 -   `Toast.success(options || string)`
 -   `Toast.success(options || string)`
+-   `Toast.close(toastId)` 手动关闭 ( `toastId` 为展示方法的返回值)
+-   `Toast.config(config)` 全局配置在调用前提前配置,全局一次生效 ( >= 0.25.0 )
 
 
-手动关闭 ( `toastId` 为展示方法的返回值)
-
--   `Toast.close(toastId)`
+**以下API无需调用额外的 ToastFactory.create(config) 创建新 Toast 即能生效设置**
 
 
 | 属性 | 说明                                                                                       | 类型 | 默认值 | 版本 |
 | 属性 | 说明                                                                                       | 类型 | 默认值 | 版本 |
 | --- |------------------------------------------------------------------------------------------| --- | --- | --- |
 | --- |------------------------------------------------------------------------------------------| --- | --- | --- |
-| bottom | 弹出位置 bottom                                                                              | number \| string | - | 0.25.0 |
 | content | 提示内容                                                                                     | ReactNode | '' |  |
 | content | 提示内容                                                                                     | ReactNode | '' |  |
 | duration | 自动关闭的延时,单位 s,设为 0 时不自动关闭                                                                 | number | 3 |  |
 | duration | 自动关闭的延时,单位 s,设为 0 时不自动关闭                                                                 | number | 3 |  |
-| getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 container 和 内部的 .semi-toast-wrapper `position: relative` | () => HTMLElement \| null | () => document.body | 0.34.0 |
 | icon | 自定义图标                                                                                    | ReactNode |  | 0.25.0 |
 | icon | 自定义图标                                                                                    | ReactNode |  | 0.25.0 |
-| left | 弹出位置 left                                                                                | number \| string | - | 0.25.0 |
-| right | 弹出位置 right                                                                               | number \| string | - | 0.25.0 |
 | showClose | 是否展示关闭按钮                                                                                 | boolean | true | 0.25.0 |
 | showClose | 是否展示关闭按钮                                                                                 | boolean | true | 0.25.0 |
 | textMaxWidth | 内容的最大宽度                                                                                  | number \| string | 450 | 0.25.0 |
 | textMaxWidth | 内容的最大宽度                                                                                  | number \| string | 450 | 0.25.0 |
 | theme | 填充样式,支持 `light`, `normal`                                                                | string | `normal` | 1.0.0 |
 | theme | 填充样式,支持 `light`, `normal`                                                                | string | `normal` | 1.0.0 |
-| top | 弹出位置 top                                                                                 | number \| string | - | 0.25.0 |
-| zIndex | 弹层 z-index 值                                                                             | number | 1010 |  |
 | onClose | toast 关闭的回调函数                                                                            | () => void |  |  |
 | onClose | toast 关闭的回调函数                                                                            | () => void |  |  |
 
 
-全局配置在调用前提前配置,全局一次生效 ( >= 0.25.0 ):
+**若未在 Toast.config(config) 中特别声明,以下API需要调用额外的 ToastFactory.create(config) 创建新 Toast 生效设置**
 
 
--   `Toast.config(config)`
+| 属性 | 说明                                                                                       | 类型 | 默认值 | 版本 |
+| --- |------------------------------------------------------------------------------------------| --- | --- | --- |
+| bottom | 弹出位置 bottom                                                                              | number \| string | - | 0.25.0 |
+| getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 container 和 内部的 .semi-toast-wrapper `position: relative` | () => HTMLElement \| null | () => document.body | 0.34.0 |
+| left | 弹出位置 left                                                                                | number \| string | - | 0.25.0 |
+| right | 弹出位置 right                                                                               | number \| string | - | 0.25.0 |
+| top | 弹出位置 top                                                                                 | number \| string | - | 0.25.0 |
+| zIndex | 弹层 z-index 值                                                                             | number | 1010 |  |
 
 
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| bottom | 弹出位置 bottom | number \| string | - | 0.25.0 |
-| duration | 自动关闭的延时,单位 s,设为 0 时不自动关闭 | number | 3 | 0.25.0 |
-| getPopupContainer | 指定父级 DOM,弹层将会渲染至该 DOM 中,自定义需要设置 container 和 内部的 .semi-toast-wrapper `position: relative` | () => HTMLElement \| null | () => document.body | 1.23.0 |
-| left | 弹出位置 left | number \| string | - | 0.25.0 |
-| right | 弹出位置 right | number \| string | - | 0.25.0 |
-| top | 弹出位置 top | number \| string | - | 0.25.0 |
-| zIndex | 弹层 z-index 值 | number | 1010 | 0.25.0 |
 
 
 -   `ToastFactory.create(config) => Toast`  
 -   `ToastFactory.create(config) => Toast`  
     如果您的应用中需要使用不同 config 的 Toast,可以使用 ToastFactory.create(config)创建新的 Toast (>= 1.23):
     如果您的应用中需要使用不同 config 的 Toast,可以使用 ToastFactory.create(config)创建新的 Toast (>= 1.23):