diff --git a/src/config.json b/src/config.json index 1ba789e265..5af5997cbd 100644 --- a/src/config.json +++ b/src/config.json @@ -882,6 +882,7 @@ "sort": 1, "show": true, "taro": true, + "v14": true, "author": "VickyYe" } ] diff --git a/src/packages/toast/Notification.tsx b/src/packages/toast/Notification.tsx index 4a7dddba22..733128dc3e 100644 --- a/src/packages/toast/Notification.tsx +++ b/src/packages/toast/Notification.tsx @@ -138,7 +138,16 @@ export default class Notification extends React.PureComponent< >
{title}
) : null} - - {content} - + {content ? ( + {content} + ) : null}
diff --git a/src/packages/toast/demos/h5/demo1.tsx b/src/packages/toast/demos/h5/demo1.tsx index 37016161ea..6d09f7cf3f 100644 --- a/src/packages/toast/demos/h5/demo1.tsx +++ b/src/packages/toast/demos/h5/demo1.tsx @@ -8,13 +8,20 @@ const Demo1 = () => { title="文字提示" onClick={() => Toast.show('网络失败,请稍后再试~')} /> - Toast.show('标题提示')} /> + + Toast.show({ + title: '成功提示', + }) + } + /> Toast.show({ title: '成功提示', - content: '成功提示成功提示成功提示', + content: '简介表述最多展示十二个字', icon: 'success', }) } @@ -23,7 +30,7 @@ const Demo1 = () => { title="失败提示" onClick={() => Toast.show({ - content: '失败提示', + title: '失败提示', icon: 'fail', }) } @@ -32,7 +39,7 @@ const Demo1 = () => { title="警告提示" onClick={() => Toast.show({ - content: '警告提示', + title: '警告提示', icon: 'warn', }) } @@ -41,7 +48,7 @@ const Demo1 = () => { title="加载提示" onClick={() => Toast.show({ - content: '加载提示', + title: '加载提示', icon: 'loading', }) } diff --git a/src/packages/toast/demos/taro/demo1.tsx b/src/packages/toast/demos/taro/demo1.tsx index c26eb81bcc..d9d856a268 100644 --- a/src/packages/toast/demos/taro/demo1.tsx +++ b/src/packages/toast/demos/taro/demo1.tsx @@ -2,7 +2,13 @@ import React, { useState } from 'react' import { Cell, Toast } from '@nutui/nutui-react-taro' const Demo1 = () => { - const [state, setState] = useState({ + const [state, setState] = useState<{ + content?: string + type: string + duration?: number + icon?: string + title?: string + }>({ content: 'toast', type: 'text', duration: 2, @@ -13,10 +19,10 @@ const Demo1 = () => { const openToast = ( type: string, - content: string, + title?: string, duration?: number, icon?: string, - title?: string + content?: string ) => { const changeState = Object.assign(state, { type, @@ -43,27 +49,24 @@ const Demo1 = () => { { - openToast('text', '网络失败,请稍后再试~') + setState({ + type: 'text', + content: '网络失败,请稍后再试~', + }) setShowToast(true) }} /> { - openToast( - 'text', - '网络失败,请稍后再试~', - undefined, - undefined, - '标题提示' - ) + openToast('text', '标题提示') setShowToast(true) }} /> { - openToast('success', '成功提示成功提示成功提示') + openToast('success', '成功提示') setShowToast(true) }} /> diff --git a/src/packages/toast/doc.en-US.md b/src/packages/toast/doc.en-US.md index d871b8c6ce..b8a9bac995 100644 --- a/src/packages/toast/doc.en-US.md +++ b/src/packages/toast/doc.en-US.md @@ -100,7 +100,7 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-toast-text-font-size | the content font-size of toast | `14px` | | \--nutui-toast-font-color | the text color of toast | `#fff` | | \--nutui-toast-inner-top | the custom height of content | `50%` | -| \--nutui-toast-inner-padding | the padding value of toast content | `24px 30px` | +| \--nutui-toast-inner-padding | the padding value of toast content | `13px 16px` | | \--nutui-toast-inner-bg-color | the background color of toast content | `$color-mask` | -| \--nutui-toast-inner-border-radius | the border-radius value of toast content | `12px` | +| \--nutui-toast-inner-border-radius | the border-radius value of toast content | `$radius-xl` | | \--nutui-toast-inner-text-align | the text alignment of toast | `center` | diff --git a/src/packages/toast/doc.md b/src/packages/toast/doc.md index 74d3b1d520..8e79977684 100644 --- a/src/packages/toast/doc.md +++ b/src/packages/toast/doc.md @@ -98,7 +98,7 @@ Toast.config({ className: 'demo', contentClassName: 'content-demo' }) | \--nutui-toast-text-font-size | `toast`内容文字大小 | `14px` | | \--nutui-toast-font-color | `toast`文字颜色 | `#fff` | | \--nutui-toast-inner-top | `toast`内容区自定义高度 | `50%` | -| \--nutui-toast-inner-padding | `toast`内容区padding值 | `24px 30px` | +| \--nutui-toast-inner-padding | `toast`内容区padding值 | `13px 16px` | | \--nutui-toast-inner-bg-color | `toast`内容区背景色 | `$color-mask` | -| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `12px` | +| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `$radius-xl` | | \--nutui-toast-inner-text-align | `toast`内容区文本对齐方式 | `center` | diff --git a/src/packages/toast/doc.taro.md b/src/packages/toast/doc.taro.md index 2c2cc17d84..e812421ca3 100644 --- a/src/packages/toast/doc.taro.md +++ b/src/packages/toast/doc.taro.md @@ -94,7 +94,7 @@ ToastOptions 是 ToastProps 的子集,包含如下属性:msg, title, type, d | \--nutui-toast-text-font-size | `toast`内容文字大小 | `14px` | | \--nutui-toast-font-color | `toast`文字颜色 | `#fff` | | \--nutui-toast-inner-top | `toast`内容区自定义高度 | `50%` | -| \--nutui-toast-inner-padding | `toast`内容区padding值 | `24px 30px` | +| \--nutui-toast-inner-padding | `toast`内容区padding值 | `13px 16px` | | \--nutui-toast-inner-bg-color | `toast`内容区背景色 | `$color-mask` | -| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `12px` | +| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `$radius-xl` | | \--nutui-toast-inner-text-align | `toast`内容区文本对齐方式 | `center` | diff --git a/src/packages/toast/doc.zh-TW.md b/src/packages/toast/doc.zh-TW.md index 9f072e24d9..3a33f2a283 100644 --- a/src/packages/toast/doc.zh-TW.md +++ b/src/packages/toast/doc.zh-TW.md @@ -1,7 +1,5 @@ # Toast 吐司 -# - 用於輕提示。 ### 引入 @@ -99,7 +97,7 @@ Toast.config({ className: 'demo', contentClassName: 'content-demo' }) | \--nutui-toast-text-font-size | `toast`內容文字大小 | `14px` | | \--nutui-toast-font-color | `toast`文字顏色 | `#fff` | | \--nutui-toast-inner-top | `toast`內容區自定義高度 | `50%` | -| \--nutui-toast-inner-padding | `toast`內容區padding值 | `24px 30px` | +| \--nutui-toast-inner-padding | `toast`內容區padding值 | `13px 16px` | | \--nutui-toast-inner-bg-color | `toast`內容區背景色 | `$color-mask` | -| \--nutui-toast-inner-border-radius | `toast`內容區圓角值 | `12px` | +| \--nutui-toast-inner-border-radius | `toast`內容區圓角值 | `$radius-xl` | | \--nutui-toast-inner-text-align | `toast`內容區文本對齊方式 | `center` | diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss index 759a9373e9..37d9a41226 100644 --- a/src/packages/toast/toast.scss +++ b/src/packages/toast/toast.scss @@ -52,8 +52,10 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: 30%; - max-width: 95.7%; + min-width: 96px; + max-width: 60%; + // max-width: 224px; + box-sizing: border-box; font-size: $toast-text-font-size; text-align: $toast-inner-text-align; padding: $toast-inner-padding; @@ -62,6 +64,11 @@ border-radius: $toast-inner-border-radius; color: $toast-font-color; + &-descrption { + max-width: 68.2%; + // max-width: 256px; + } + &-normal { word-break: normal; word-wrap: normal; @@ -101,19 +108,18 @@ &-text { color: #ffffff; text-align: $toast-inner-text-align; - &-empty { - margin-bottom: -8px; - } + line-height: 20px; } &-title { color: #ffffff; font-size: $toast-title-font-size; - font-weight: 500; + font-weight: 600; text-align: $toast-inner-text-align; + line-height: 22px; } - &-icon { + .nut-icon { width: 24px; height: 24px; color: #ffffff; @@ -124,7 +130,7 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: 8px; + margin: 3px 0 5px; color: #ffffff; &-icon { diff --git a/src/packages/toast/toast.taro.tsx b/src/packages/toast/toast.taro.tsx index 2e3d059480..178b1c8d8b 100644 --- a/src/packages/toast/toast.taro.tsx +++ b/src/packages/toast/toast.taro.tsx @@ -28,7 +28,6 @@ export interface ToastProps extends BasicComponent { lockScroll: boolean size: ToastSize icon: React.ReactNode - iconSize: string maskClassName?: string content: React.ReactNode contentClassName?: string @@ -37,10 +36,6 @@ export interface ToastProps extends BasicComponent { visible: boolean wordBreak?: ToastWordBreak onClose: () => void - /** - * @deprecated Please use `content` prop instead. - */ - msg: React.ReactNode } const defaultProps = { @@ -51,9 +46,7 @@ const defaultProps = { title: '', size: 'base', // 设置字体大小,默认base,可选large\small\base icon: null, - iconSize: '20', content: '', - msg: '', type: 'text', closeOnOverlayClick: false, lockScroll: false, @@ -78,9 +71,7 @@ export const Toast: FunctionComponent< position, contentStyle, icon, - iconSize, content, - msg, duration, type, title, @@ -165,12 +156,10 @@ export const Toast: FunctionComponent< } return { - success: ( - - ), - fail: , - warn: , - loading: , + success: , + fail: , + warn: , + loading: , }[type] } @@ -198,7 +187,16 @@ export const Toast: FunctionComponent< > {hasIcon() ? ( @@ -209,11 +207,9 @@ export const Toast: FunctionComponent< {title ? ( {title} ) : null} - - {content || msg} - + {content ? ( + {content} + ) : null} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index d471a05575..5c9dabc92d 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -901,11 +901,11 @@ $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default; $toast-title-font-size: var(--nutui-toast-title-font-size, 16px) !default; $toast-text-font-size: var(--nutui-toast-text-font-size, 14px) !default; $toast-font-color: var(--nutui-toast-font-color, $white) !default; -$toast-inner-padding: var(--nutui-toast-inner-padding, 16px 24px) !default; +$toast-inner-padding: var(--nutui-toast-inner-padding, 13px 16px) !default; $toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default; $toast-inner-border-radius: var( --nutui-toast-inner-border-radius, - 16px + $radius-xl ) !default; $toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;