diff --git a/src/config.json b/src/config.json index f2ef69a4c9..774717ecb4 100644 --- a/src/config.json +++ b/src/config.json @@ -842,7 +842,7 @@ "sort": 11, "show": true, "taro": true, - "v15": 2, + "v15": 1, "author": "dsj", "dd": true }, diff --git a/src/packages/actionsheet/actionsheet.scss b/src/packages/actionsheet/actionsheet.scss index 10c15a1b49..fde0e322c2 100644 --- a/src/packages/actionsheet/actionsheet.scss +++ b/src/packages/actionsheet/actionsheet.scss @@ -2,14 +2,22 @@ .nut-actionsheet { text-align: center; - + box-sizing: border-box; + padding: 16px; + .nut-popup-title { + padding: 0; + } + width: 100%; + &-bottom { + padding-bottom: 34px; + } &.nut-popup { min-height: 10%; background-color: $actionsheet-background-color; } - - .nut-popup-title { - border-bottom: 1px solid $actionsheet-border-color; + &-close-icon { + width: 16px; + height: 16px; } &-list { @@ -23,12 +31,17 @@ &-cancel, &-item { display: block; - padding: 10px; text-align: $actionsheet-item-text-align; line-height: $actionsheet-item-line-height; font-size: $font-size-base; color: $actionsheet-item-color; cursor: pointer; + &-border { + border-bottom: $actionsheet-item-border-bottom; + /* #ifdef harmony */ + border-width: 1px; + /* #endif */ + } &-name { text-align: $actionsheet-item-text-align; line-height: $actionsheet-item-line-height; @@ -54,9 +67,19 @@ } &-cancel { - margin-top: 5px; - border-top: 1px solid $actionsheet-border-color; + border: 0.5px solid #c2c4cc; + /* #ifdef harmony */ + border-width: 1px; + /* #endif */ border-radius: $actionsheet-border-radius; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + line-height: 40px; + color: $color-title; + margin-top: 16px; } &-safe-area { diff --git a/src/packages/actionsheet/actionsheet.taro.tsx b/src/packages/actionsheet/actionsheet.taro.tsx index 3508bff770..0341722005 100644 --- a/src/packages/actionsheet/actionsheet.taro.tsx +++ b/src/packages/actionsheet/actionsheet.taro.tsx @@ -1,5 +1,7 @@ import React, { FunctionComponent } from 'react' import { View } from '@tarojs/components' +import { Close } from '@nutui/icons-react-taro' +import classNames from 'classnames' import Popup from '@/packages/popup/index.taro' import { ComponentDefaults } from '@/utils/typings' import { mergeProps } from '@/utils/merge-props' @@ -12,6 +14,7 @@ const defaultProps = { options: [], optionKey: { name: 'name', description: 'description' }, cancelText: '', + position: 'bottom', onCancel: () => {}, onSelect: () => {}, } as unknown as TaroActionSheetProps @@ -31,6 +34,7 @@ export const ActionSheet: FunctionComponent< visible, className, style, + position, ...rest } = mergeProps(defaultProps, props) @@ -52,15 +56,17 @@ export const ActionSheet: FunctionComponent< return ( { - onCancel && onCancel() + onCancel?.() }} + closeable={position === 'top'} + closeIcon={} > {options.length ? ( @@ -69,7 +75,10 @@ export const ActionSheet: FunctionComponent< const statusClass = `${item.disabled ? `${classPrefix}-item-disabled` : ''} ${item.danger ? `${classPrefix}-item-danger` : ''}` return ( chooseItem(item, index)} > diff --git a/src/packages/actionsheet/actionsheet.tsx b/src/packages/actionsheet/actionsheet.tsx index 41904455a9..b02b56c166 100644 --- a/src/packages/actionsheet/actionsheet.tsx +++ b/src/packages/actionsheet/actionsheet.tsx @@ -1,4 +1,6 @@ import React, { FunctionComponent } from 'react' +import { Close } from '@nutui/icons-react' +import classNames from 'classnames' import Popup from '@/packages/popup/index' import { ComponentDefaults } from '@/utils/typings' import { mergeProps } from '@/utils/merge-props' @@ -11,6 +13,7 @@ const defaultProps = { options: [], optionKey: { name: 'name', description: 'description' }, cancelText: '', + position: 'bottom', onCancel: () => {}, onSelect: () => {}, } as unknown as WebActionSheetProps @@ -30,6 +33,7 @@ export const ActionSheet: FunctionComponent< visible, className, style, + position, ...rest } = mergeProps(defaultProps, props) @@ -51,24 +55,32 @@ export const ActionSheet: FunctionComponent< return ( { - onCancel && onCancel() + onCancel?.() }} + closeable={position === 'top'} + closeIcon={} >
+ {/* {title && ( +
{title}
+ )} */} {options.length ? (
{options.map((item, index) => { const statusClass = `${item.disabled ? `${classPrefix}-item-disabled` : ''} ${item.danger ? `${classPrefix}-item-danger` : ''}` return (
chooseItem(item, index)} > diff --git a/src/packages/actionsheet/demo.taro.tsx b/src/packages/actionsheet/demo.taro.tsx index 0904583460..9b4b47edac 100644 --- a/src/packages/actionsheet/demo.taro.tsx +++ b/src/packages/actionsheet/demo.taro.tsx @@ -10,6 +10,7 @@ import Demo3 from './demos/taro/demo3' import Demo4 from './demos/taro/demo4' import Demo5 from './demos/taro/demo5' import Demo6 from './demos/taro/demo6' +import Demo7 from './demos/taro/demo7' const ActionSheetDemo = () => { const [translated] = useTranslate({ @@ -45,8 +46,9 @@ const ActionSheetDemo = () => { {translated.c3a08065} - {translated.c3a08066} + {translated.c3a08066} + ) diff --git a/src/packages/actionsheet/demo.tsx b/src/packages/actionsheet/demo.tsx index db9d0fcf43..2702176d22 100644 --- a/src/packages/actionsheet/demo.tsx +++ b/src/packages/actionsheet/demo.tsx @@ -7,6 +7,7 @@ import Demo3 from './demos/h5/demo3' import Demo4 from './demos/h5/demo4' import Demo5 from './demos/h5/demo5' import Demo6 from './demos/h5/demo6' +import Demo7 from './demos/h5/demo7' const ActionSheetDemo = () => { const [translated] = useTranslate({ @@ -41,8 +42,9 @@ const ActionSheetDemo = () => {

{translated.c3a08065}

-

{translated.c3a08066}

+

{translated.c3a08066}

+
) diff --git a/src/packages/actionsheet/demos/h5/demo1.tsx b/src/packages/actionsheet/demos/h5/demo1.tsx index 6b36ced9bc..cbab474375 100644 --- a/src/packages/actionsheet/demos/h5/demo1.tsx +++ b/src/packages/actionsheet/demos/h5/demo1.tsx @@ -1,18 +1,18 @@ import React, { useState } from 'react' import { ActionSheet, Cell } from '@nutui/nutui-react' -const Demo1 = () => { +const Demo = () => { const [val, setVal] = useState('') const [isVisible, setIsVisible] = useState(false) const options = [ { - name: '权限设置', + name: '分享给朋友', }, { - name: '重命名', + name: '添加到收藏夹', }, { - name: '删除', + name: '复制商品链接', }, ] @@ -28,7 +28,6 @@ const Demo1 = () => {
{val}
{ ) } -export default Demo1 +export default Demo diff --git a/src/packages/actionsheet/demos/h5/demo2.tsx b/src/packages/actionsheet/demos/h5/demo2.tsx index cd8b693e5a..933c038718 100644 --- a/src/packages/actionsheet/demos/h5/demo2.tsx +++ b/src/packages/actionsheet/demos/h5/demo2.tsx @@ -1,39 +1,38 @@ import React, { useState } from 'react' import { ActionSheet, Cell } from '@nutui/nutui-react' -const Demo2 = () => { - const [isVisible, setIsVisible] = useState(false) +const Demo = () => { const [val, setVal] = useState('') + const [isVisible, setIsVisible] = useState(false) const options = [ { - name: '权限设置', + name: '分享给朋友', }, { - name: '重命名', - }, - { - name: '删除', + name: '添加到收藏夹', }, ] + const handleSelect = (item: any) => { setVal(item.name) setIsVisible(false) } + return ( <> setIsVisible(!isVisible)}> - 展示取消按钮 + 展示标题
{val}
 - setIsVisible(false)} + cancelText="取消" /> ) } -export default Demo2 +export default Demo diff --git a/src/packages/actionsheet/demos/h5/demo3.tsx b/src/packages/actionsheet/demos/h5/demo3.tsx index dcd02b3132..d862ad562a 100644 --- a/src/packages/actionsheet/demos/h5/demo3.tsx +++ b/src/packages/actionsheet/demos/h5/demo3.tsx @@ -1,19 +1,15 @@ import React, { useState } from 'react' import { ActionSheet, Cell } from '@nutui/nutui-react' -const Demo3 = () => { +const Demo = () => { const [isVisible, setIsVisible] = useState(false) const [val, setVal] = useState('') - const options: Record[] = [ + const options = [ { - name: '权限设置', + name: '分享给朋友', }, { - name: '重命名', - }, - { - name: '删除', - description: '删除后无法恢复', + name: '添加到收藏夹', }, ] @@ -25,14 +21,13 @@ const Demo3 = () => { return ( <> setIsVisible(!isVisible)}> - 展示描述信息 + 顶部弹出
{val}
 setIsVisible(false)} @@ -40,4 +35,4 @@ const Demo3 = () => { ) } -export default Demo3 +export default Demo diff --git a/src/packages/actionsheet/demos/h5/demo4.tsx b/src/packages/actionsheet/demos/h5/demo4.tsx index 7a6d6a2931..d8d9623c57 100644 --- a/src/packages/actionsheet/demos/h5/demo4.tsx +++ b/src/packages/actionsheet/demos/h5/demo4.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import { ActionSheet, Cell } from '@nutui/nutui-react' -const Demo4 = () => { +const Demo = () => { const [isVisible, setIsVisible] = useState(false) const optionsThree: Record[] = [ { @@ -30,4 +30,4 @@ const Demo4 = () => { ) } -export default Demo4 +export default Demo diff --git a/src/packages/actionsheet/demos/h5/demo5.tsx b/src/packages/actionsheet/demos/h5/demo5.tsx index 678032affa..f11f7d9542 100644 --- a/src/packages/actionsheet/demos/h5/demo5.tsx +++ b/src/packages/actionsheet/demos/h5/demo5.tsx @@ -1,12 +1,14 @@ import React, { useState } from 'react' import { ActionSheet, Cell } from '@nutui/nutui-react' +import { Dongdong, Message } from '@nutui/icons-react' -const Demo5 = () => { +const Demo = () => { const [isVisible, setIsVisible] = useState(false) + const itemStyle = { display: 'flex', alignItems: 'center', height: 52 } return ( <> setIsVisible(!isVisible)}> - 自定义内容 + 自定义内容1 { }} onCancel={() => setIsVisible(false)} > -
新建表格
-
新建文档
+
+ + 加密呼叫（86）18888888888 +
+
+ + 在线客服 +
) } -export default Demo5 +export default Demo diff --git a/src/packages/actionsheet/demos/h5/demo6.tsx b/src/packages/actionsheet/demos/h5/demo6.tsx index 112b168a8b..b698dbf92b 100644 --- a/src/packages/actionsheet/demos/h5/demo6.tsx +++ b/src/packages/actionsheet/demos/h5/demo6.tsx @@ -1,39 +1,85 @@ -import React, { useState } from 'react' -import { ActionSheet, Cell } from '@nutui/nutui-react' +import React, { CSSProperties, useState } from 'react' +import { ActionSheet, Cell, Image } from '@nutui/nutui-react' -const Demo6 = () => { +const Demo = () => { const [isVisible, setIsVisible] = useState(false) - const options: Record[] = [ + + const menuItems = [ + { + imgUrl: + 'https://img30.360buyimg.com/img/jfs/t1/299968/23/743/5275/68109db2F9215132b/fbd319950809ce50.png', + text: '付款码', + }, { - title: '权限设置', + imgUrl: + 'https://img20.360buyimg.com/img/jfs/t1/297408/33/1417/5099/6810a064F1f30bf4e/e9b3bbb0a45fdc14.png', + text: '扫一扫', }, { - title: '重命名', + imgUrl: + 'https://img20.360buyimg.com/img/jfs/t1/245714/27/28464/4576/6810a07fFc4c1c1cc/48fcb0ea90ddeefd.png', + text: '乘车码', }, { - title: '删除', - disabled: true, + imgUrl: + 'https://img20.360buyimg.com/img/jfs/t1/294415/36/1399/5281/6810a1b8Faa5feebe/f52259f67396db62.png', + text: 'NFC', + }, + { + imgUrl: + 'https://img14.360buyimg.com/img/jfs/t1/280555/29/25424/4649/6810a0cfF2c4557bd/84ed54ecb9764107.png', + text: '录入条码', + }, + { + imgUrl: + 'https://img20.360buyimg.com/img/jfs/t1/302991/1/742/5953/6810a0e6F2ed90b17/17744ec1d19e212d.png', + text: '扫描历史', + }, + { + imgUrl: + 'https://img12.360buyimg.com/img/jfs/t1/270335/38/29480/5484/6810a0f8F5c08ea36/ff9ac40d01ffa1cc.png', + text: 'AR扫描', }, ] - const optionKey = { - name: 'title', + + const itemStyle: CSSProperties = { + width: 50, + height: 72, + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'center', + margin: '0 16px 16px', } + return ( <> setIsVisible(!isVisible)}> - 自定义key + 自定义内容2 { - setIsVisible(false) - }} + onSelect={() => setIsVisible(false)} onCancel={() => setIsVisible(false)} - /> + > +
+ {menuItems.map((item, index) => ( +
+ +
+ {item.text} +
+
+ ))} +
+ ) } -export default Demo6 +export default Demo diff --git a/src/packages/actionsheet/demos/h5/demo7.tsx b/src/packages/actionsheet/demos/h5/demo7.tsx new file mode 100644 index 0000000000..e92190f08c --- /dev/null +++ b/src/packages/actionsheet/demos/h5/demo7.tsx @@ -0,0 +1,39 @@ +import React, { useState } from 'react' +import { ActionSheet, Cell } from '@nutui/nutui-react' + +const Demo = () => { + const [isVisible, setIsVisible] = useState(false) + const options: Record[] = [ + { + title: '分享给朋友', + }, + { + title: '添加到收藏夹', + }, + { + title: '复制商品链接', + disabled: true, + }, + ] + const optionKey = { + name: 'title', + } + return ( + <> + setIsVisible(!isVisible)}> + 自定义key + + { + setIsVisible(false) + }} + onCancel={() => setIsVisible(false)} + /> + + ) +} +export default Demo diff --git a/src/packages/actionsheet/demos/taro/demo1.tsx b/src/packages/actionsheet/demos/taro/demo1.tsx index 483ba8f250..5132e8432b 100644 --- a/src/packages/actionsheet/demos/taro/demo1.tsx +++ b/src/packages/actionsheet/demos/taro/demo1.tsx @@ -7,13 +7,13 @@ const Demo1 = () => { const [isVisible, setIsVisible] = useState(false) const options = [ { - name: '权限设置', + name: '分享给朋友', }, { - name: '重命名', + name: '添加到收藏夹', }, { - name: '删除', + name: '复制商品链接', }, ] @@ -31,7 +31,6 @@ const Demo1 = () => { { const [val, setVal] = useState('') const options = [ { - name: '权限设置', + name: '分享给朋友', }, { - name: '重命名', - }, - { - name: '删除', + name: '添加到收藏夹', }, ] const handleSelect = (item: any) => { @@ -23,17 +20,18 @@ const Demo2 = () => { return ( <> setIsVisible(!isVisible)}> - 展示取消按钮 + 展示标题 {val} setIsVisible(false)} + cancelText="取消" /> ) diff --git a/src/packages/actionsheet/demos/taro/demo3.tsx b/src/packages/actionsheet/demos/taro/demo3.tsx index 37d37b2e6d..c4cd152e14 100644 --- a/src/packages/actionsheet/demos/taro/demo3.tsx +++ b/src/packages/actionsheet/demos/taro/demo3.tsx @@ -5,16 +5,12 @@ import { View } from '@tarojs/components' const Demo3 = () => { const [isVisible, setIsVisible] = useState(false) const [val, setVal] = useState('') - const options: Record[] = [ + const options = [ { - name: '权限设置', + name: '分享给朋友', }, { - name: '重命名', - }, - { - name: '删除', - description: '删除后无法恢复', + name: '添加到收藏夹', }, ] const handleSelect = (item: any) => { @@ -24,16 +20,15 @@ const Demo3 = () => { return ( <> setIsVisible(!isVisible)}> - 展示描述信息 + 顶部弹出 {val} setIsVisible(false)} diff --git a/src/packages/actionsheet/demos/taro/demo5.tsx b/src/packages/actionsheet/demos/taro/demo5.tsx index 4d8c230170..8f338d2041 100644 --- a/src/packages/actionsheet/demos/taro/demo5.tsx +++ b/src/packages/actionsheet/demos/taro/demo5.tsx @@ -1,18 +1,16 @@ -import React, { CSSProperties, useState } from 'react' -import { ActionSheet, Cell, pxTransform } from '@nutui/nutui-react-taro' +import React, { useState } from 'react' +import { ActionSheet, Cell } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components' +import { Dongdong, Message } from '@nutui/icons-react-taro' const Demo5 = () => { const [isVisible, setIsVisible] = useState(false) - const viewStyle: CSSProperties = { - textAlign: 'left', - paddingLeft: pxTransform(20), - paddingTop: pxTransform(10), - } + const itemStyle = { display: 'flex', alignItems: 'center', height: 52 } + return ( <> setIsVisible(!isVisible)}> - 自定义内容 + 自定义内容1 { }} onCancel={() => setIsVisible(false)} > - 新建表格 - 新建文档 + + + 加密呼叫（86）18888888888 + + + + 在线客服 + ) diff --git a/src/packages/actionsheet/demos/taro/demo6.tsx b/src/packages/actionsheet/demos/taro/demo6.tsx index 633e527dfc..98db7a1e9d 100644 --- a/src/packages/actionsheet/demos/taro/demo6.tsx +++ b/src/packages/actionsheet/demos/taro/demo6.tsx @@ -1,39 +1,83 @@ -import React, { useState } from 'react' -import { ActionSheet, Cell } from '@nutui/nutui-react-taro' +import React, { CSSProperties, useState } from 'react' +import { ActionSheet, Cell, Image } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components' const Demo6 = () => { const [isVisible, setIsVisible] = useState(false) - const options: Record[] = [ + + const menuItems = [ + { + imgUrl: + 'https://img30.360buyimg.com/img/jfs/t1/299968/23/743/5275/68109db2F9215132b/fbd319950809ce50.png', + text: '付款码', + }, { - title: '权限设置', + imgUrl: + 'https://img20.360buyimg.com/img/jfs/t1/297408/33/1417/5099/6810a064F1f30bf4e/e9b3bbb0a45fdc14.png', + text: '扫一扫', }, { - title: '重命名', + imgUrl: + 'https://img20.360buyimg.com/img/jfs/t1/245714/27/28464/4576/6810a07fFc4c1c1cc/48fcb0ea90ddeefd.png', + text: '乘车码', }, { - title: '删除', - disabled: true, + imgUrl: + 'https://img20.360buyimg.com/img/jfs/t1/294415/36/1399/5281/6810a1b8Faa5feebe/f52259f67396db62.png', + text: 'NFC', + }, + { + imgUrl: + 'https://img14.360buyimg.com/img/jfs/t1/280555/29/25424/4649/6810a0cfF2c4557bd/84ed54ecb9764107.png', + text: '录入条码', + }, + { + imgUrl: + 'https://img20.360buyimg.com/img/jfs/t1/302991/1/742/5953/6810a0e6F2ed90b17/17744ec1d19e212d.png', + text: '扫描历史', + }, + { + imgUrl: + 'https://img12.360buyimg.com/img/jfs/t1/270335/38/29480/5484/6810a0f8F5c08ea36/ff9ac40d01ffa1cc.png', + text: 'AR扫描', }, ] - const optionKey = { - name: 'title', + + const itemStyle: CSSProperties = { + width: 50, + height: 72, + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'center', + marginTop: 0, + marginBottom: 16, + marginLeft: 16, + marginRight: 16, } + return ( <> setIsVisible(!isVisible)}> - 自定义key + 自定义内容2 { - setIsVisible(false) - }} + onSelect={() => setIsVisible(false)} onCancel={() => setIsVisible(false)} - /> + > + + {menuItems.map((item, index) => ( + + + + {item.text} + + + ))} + + ) } diff --git a/src/packages/actionsheet/demos/taro/demo7.tsx b/src/packages/actionsheet/demos/taro/demo7.tsx new file mode 100644 index 0000000000..acf66e6956 --- /dev/null +++ b/src/packages/actionsheet/demos/taro/demo7.tsx @@ -0,0 +1,40 @@ +import React, { useState } from 'react' +import { ActionSheet, Cell } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' + +const Demo = () => { + const [isVisible, setIsVisible] = useState(false) + const options: Record[] = [ + { + title: '分享给朋友', + }, + { + title: '添加到收藏夹', + }, + { + title: '复制商品链接', + disabled: true, + }, + ] + const optionKey = { + name: 'title', + } + return ( + <> + setIsVisible(!isVisible)}> + 自定义key + + { + setIsVisible(false) + }} + onCancel={() => setIsVisible(false)} + /> + + ) +} +export default Demo diff --git a/src/packages/actionsheet/doc.en-US.md b/src/packages/actionsheet/doc.en-US.md index 8eb4c2b979..630208dd06 100644 --- a/src/packages/actionsheet/doc.en-US.md +++ b/src/packages/actionsheet/doc.en-US.md @@ -82,11 +82,11 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default Value | | --- | --- | --- | | \--nutui-actionsheet-background-color | the backgroundColor of actionsheet panel | `$color-background-overlay` | -| \--nutui-actionsheet-border-radius | the borderRadius of list and cancel button | `0` | -| \--nutui-actionsheet-border-color | title border-bottom and cancle border-top | `#F7F8FC` | -| \--nutui-actionsheet-item-text-align | item text align | `center` | -| \--nutui-actionsheet-item-border-bottom | item border bottom | `none` | -| \--nutui-actionsheet-item-line-height | item line height | `24px` | +| \--nutui-actionsheet-border-radius | the borderRadius of list and cancel button | `$radius-l` | +| \--nutui-actionsheet-cancel-border | cancel button border | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-item-text-align | item text align | `left` | +| \--nutui-actionsheet-item-border-bottom | item border bottom | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-item-line-height | item line height | `52px` | | \--nutui-actionsheet-item-color | item color | `$color-title` | | \--nutui-actionsheet-item-danger | item danger color | `$color-primary` | diff --git a/src/packages/actionsheet/doc.md b/src/packages/actionsheet/doc.md index 2c2a93bc21..ef1fa87532 100644 --- a/src/packages/actionsheet/doc.md +++ b/src/packages/actionsheet/doc.md @@ -91,11 +91,11 @@ import { ActionSheet } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-actionsheet-background-color | 背景色 | `$color-background-overlay` | -| \--nutui-actionsheet-border-radius | 列表和取消按钮圆角 | `0` | -| \--nutui-actionsheet-border-color | 标题和取消位置的border色值 | `#F7F8FC` | -| \--nutui-actionsheet-item-text-align | 列表项的文字对齐方式 | `center` | -| \--nutui-actionsheet-item-border-bottom | 列表项的底部border | `none` | -| \--nutui-actionsheet-item-line-height | 列表项行高 | `24px` | +| \--nutui-actionsheet-border-radius | 列表和取消按钮圆角 | `$radius-l` | +| \--nutui-actionsheet-cancel-border | 取消位置的border | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-item-text-align | 列表项的文字对齐方式 | `left` | +| \--nutui-actionsheet-item-border-bottom | 列表项的底部border | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-item-line-height | 列表项行高 | `52px` | | \--nutui-actionsheet-item-color | 列表项字色 | `$color-title` | | \--nutui-actionsheet-item-danger | 列表项danger字色 | `$color-primary` | diff --git a/src/packages/actionsheet/doc.taro.md b/src/packages/actionsheet/doc.taro.md index b5acfb6c27..28e2273fda 100644 --- a/src/packages/actionsheet/doc.taro.md +++ b/src/packages/actionsheet/doc.taro.md @@ -91,11 +91,11 @@ import { ActionSheet } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | | \--nutui-actionsheet-background-color | 背景色 | `$color-background-overlay` | -| \--nutui-actionsheet-border-radius | 列表和取消按钮圆角 | `0` | -| \--nutui-actionsheet-border-color | 标题和取消位置的border色值 | `#f6f6f6` | -| \--nutui-actionsheet-item-text-align | 列表项的文字对齐方式 | `center` | -| \--nutui-actionsheet-item-border-bottom | 列表项的底部border | `none` | -| \--nutui-actionsheet-item-line-height | 列表项行高 | `24px` | +| \--nutui-actionsheet-border-radius | 列表和取消按钮圆角 | `$radius-l` | +| \--nutui-actionsheet-cancel-border, | 取消位置的border | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-item-text-align | 列表项的文字对齐方式 | `left` | +| \--nutui-actionsheet-item-border-bottom | 列表项的底部border | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-item-line-height | 列表项行高 | `52px` | | \--nutui-actionsheet-item-color | 列表项字色 | `$color-title` | | \--nutui-actionsheet-item-danger | 列表项danger字色 | `$color-primary` | diff --git a/src/packages/actionsheet/doc.zh-TW.md b/src/packages/actionsheet/doc.zh-TW.md index 292f95a97c..99f8103869 100644 --- a/src/packages/actionsheet/doc.zh-TW.md +++ b/src/packages/actionsheet/doc.zh-TW.md @@ -91,11 +91,11 @@ import { ActionSheet } from '@nutui/nutui-react' | 名稱 | 說明 | 預設值 | | --- | --- | --- | | \--nutui-actionsheet-background-color | 背景色 | `$color-background-overlay` | -| \--nutui-actionsheet-border-radius | 列錶和取消按鈕圓角 | `0` | -| \--nutui-actionsheet-border-color | 標題和取消位置的border色值 | `#F7F8FC` | -| \--nutui-actionsheet-item-text-align | 列錶項的文字對齊方式 | center | -| \--nutui-actionsheet-item-border-bottom | 列錶項的底部border | `none` | -| \--nutui-actionsheet-item-line-height | 列錶項行高 | `24px` | +| \--nutui-actionsheet-border-radius | 列錶和取消按鈕圓角 | `$radius-l` | +| \--nutui-actionsheet-cancel-border, | 取消位置的border | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-item-text-align | 列錶項的文字對齊方式 | left | +| \--nutui-actionsheet-item-border-bottom | 列錶項的底部border | `0.5px solid #c2c4cc` | +| \--nutui-actionsheet-item-line-height | 列錶項行高 | `52px` | | \--nutui-actionsheet-item-color | 列錶項字色 | `$color-title` | | \--nutui-actionsheet-item-danger | 列錶項danger字色 | `$color-primary` | diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap index c788efdf28..5958c4029a 100644 --- a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap +++ b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap @@ -1,15 +1,15 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Address: exist defaultIcon & selectIcon 1`] = `"
请选择地址
  • 123
    探探鱼
    182****1718
    北京市次渠镇通州区
  • 123
    探探鱼
    182****1718
    钓鱼岛钓鱼岛全区
  • 456
    探探鱼
    182****1718
    北京市大兴区科创十一街18号院京东大厦
"`; +exports[`Address: exist defaultIcon & selectIcon 1`] = `"
请选择地址
  • 123
    探探鱼
    182****1718
    北京市次渠镇通州区
  • 123
    探探鱼
    182****1718
    钓鱼岛钓鱼岛全区
  • 456
    探探鱼
    182****1718
    北京市大兴区科创十一街18号院京东大厦
"`; -exports[`Address: show cascader false 1`] = `"
选择地址
请选择
浙江
湖南
福建
北京
"`; +exports[`Address: show cascader false 1`] = `"
选择地址
请选择
浙江
湖南
福建
北京
"`; -exports[`Address: show custom icon 1`] = `"
选择地址
请选择
浙江
湖南
福建
北京
"`; +exports[`Address: show custom icon 1`] = `"
选择地址
请选择
浙江
湖南
福建
北京
"`; -exports[`Address: show custom icon 2`] = `"
请选择地址
  • 探探鱼
    182****1718
    北京市次渠镇通州区
  • 探探鱼
    182****1718
    钓鱼岛钓鱼岛全区
  • 探探鱼
    182****1718
    北京市大兴区科创十一街18号院京东大厦
选择其他地址
"`; +exports[`Address: show custom icon 2`] = `"
请选择地址
  • 探探鱼
    182****1718
    北京市次渠镇通州区
  • 探探鱼
    182****1718
    钓鱼岛钓鱼岛全区
  • 探探鱼
    182****1718
    北京市大兴区科创十一街18号院京东大厦
选择其他地址
"`; -exports[`Address: show custom true 1`] = `"
选择地址
请选择
浙江
湖南
福建
北京
"`; +exports[`Address: show custom true 1`] = `"
选择地址
请选择
浙江
湖南
福建
北京
"`; -exports[`Address: show elevator 1`] = `"
选择地址
热门城市
选择省份/地区
A
安徽
B
北京
C
重庆
F
福建
G
贵州
广东
广西
甘肃
H
河北
河南
湖南
湖北
S
山东
山西
上海
陕西
四川
Z
浙江
A
B
C
F
G
H
S
Z
"`; +exports[`Address: show elevator 1`] = `"
选择地址
热门城市
选择省份/地区
A
安徽
B
北京
C
重庆
F
福建
G
贵州
广东
广西
甘肃
H
河北
河南
湖南
湖北
S
山东
山西
上海
陕西
四川
Z
浙江
A
B
C
F
G
H
S
Z
"`; -exports[`Address: show exist 1`] = `"
选择地址
  • 探探鱼
    182****1718
    北京市次渠镇通州区
  • 探探鱼
    182****1718
    钓鱼岛钓鱼岛全区
  • 探探鱼
    182****1718
    北京市大兴区科创十一街18号院京东大厦
"`; +exports[`Address: show exist 1`] = `"
选择地址
  • 探探鱼
    182****1718
    北京市次渠镇通州区
  • 探探鱼
    182****1718
    钓鱼岛钓鱼岛全区
  • 探探鱼
    182****1718
    北京市大兴区科创十一街18号院京东大厦
"`; diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index e14b25a059..78c22bd8ad 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -9,13 +9,8 @@ font-size: $font-size-base; &-title { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; border-bottom: $popup-title-border-bottom; padding: $popup-title-padding; - position: relative; &-wrapper { display: flex; @@ -24,13 +19,6 @@ align-items: center; } - &-title { - color: $color-title; - font-weight: $font-weight-bold; - font-size: $popup-title-font-size; - line-height: $popup-title-font-size; - } - &-description { color: $color-text; font-size: $popup-description-font-size; @@ -77,7 +65,20 @@ } } } - + &-bottom-title, + &-top-title { + color: $color-title; + font-weight: $font-weight-bold; + font-size: $popup-title-font-size; + line-height: $popup-title-font-size; + justify-content: center; + margin-bottom: 16px; + display: flex; + align-items: center; + } + &-top-title { + justify-content: space-between; + } &-center { top: 50%; left: 50%; diff --git a/src/packages/popup/popup.taro.tsx b/src/packages/popup/popup.taro.tsx index 90a33b2858..a552f2742e 100644 --- a/src/packages/popup/popup.taro.tsx +++ b/src/packages/popup/popup.taro.tsx @@ -149,30 +149,30 @@ export const Popup: FunctionComponent< const renderTitle = () => { if (left || title || description) { return ( - - {position === 'bottom' && ( - <> - {left && ( - {left} - )} - {(title || description) && ( - - {title && ( - - {title} - - )} - {description && ( - - {description} - - )} - - )} - - )} + + <> + {left && ( + {left} + )} + {(title || description) && ( + + {title && ( + {title} + )} + {description && ( + + {description} + + )} + + )} + {renderCloseIcon()} ) diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx index 1328c667d5..8bd962a3f2 100644 --- a/src/packages/popup/popup.tsx +++ b/src/packages/popup/popup.tsx @@ -146,28 +146,28 @@ export const Popup: FunctionComponent< const renderTitle = () => { if (left || title || description) { return ( -
- {position === 'bottom' && ( - <> - {left && ( -
{left}
- )} - {(title || description) && ( -
- {title && ( -
{title}
- )} - {description && ( -
- {description} -
- )} -
- )} - - )} +
+ <> + {left &&
{left}
} + {(title || description) && ( +
+ {title && ( +
{title}
+ )} + {description && ( +
+ {description} +
+ )} +
+ )} + {renderCloseIcon()}
) diff --git a/src/packages/skeleton/__test__/__snapshots__/skeleton.spec.tsx.snap b/src/packages/skeleton/__test__/__snapshots__/skeleton.spec.tsx.snap deleted file mode 100644 index 57ace4ca5d..0000000000 --- a/src/packages/skeleton/__test__/__snapshots__/skeleton.spec.tsx.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`should change avatar shape when using avatarShape prop 1`] = ` -
-`; - -exports[`should change avatar size when using avatarSize prop 1`] = ` -
-
-
-
-
-
-
-
-`; diff --git a/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap b/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap index b56c82fbe3..8a2e2707fc 100644 --- a/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap +++ b/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap @@ -1,3 +1,3 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`timeselect props test 1`] = `"
取件时间
520
521
09:00-10:0010:00-11:0011:00-12:00
"`; +exports[`timeselect props test 1`] = `"
取件时间
520
521
09:00-10:0010:00-11:0011:00-12:00
"`; diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index 55b068d3cc..9fd1b07e12 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -703,6 +703,10 @@ $actionsheet-background-color: var( $color-background ) !default; $actionsheet-border-color: var(--nutui-actionsheet-border-color, none) !default; +$actionsheet-cancel-border: var( + --nutui-actionsheet-cancel-border, + none +) !default; $actionsheet-border-radius: var( --nutui-actionsheet-border-radius, $radius-l diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss index d51ca41429..f67511214f 100644 --- a/src/styles/variables-jrkf.scss +++ b/src/styles/variables-jrkf.scss @@ -783,6 +783,10 @@ $actionsheet-background-color: var( $color-surface-1 ) !default; $actionsheet-border-color: var(--nutui-actionsheet-border-color, none) !default; +$actionsheet-cancel-border: var( + --nutui-actionsheet-cancel-border, + none +) !default; $actionsheet-border-radius: var( --nutui-actionsheet-border-radius, $radius-l diff --git a/src/styles/variables.scss b/src/styles/variables.scss index aa6b6f0c1c..a3f4d4755c 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -659,22 +659,25 @@ $actionsheet-background-color: var( --nutui-actionsheet-background-color, $color-background-overlay ) !default; -$actionsheet-border-color: var( - --nutui-actionsheet-border-color, - $color-border +$actionsheet-cancel-border: var( + --nutui-actionsheet-cancel-border, + 0.5px solid #c2c4cc +) !default; +$actionsheet-border-radius: var( + --nutui-actionsheet-border-radius, + $radius-l ) !default; -$actionsheet-border-radius: var(--nutui-actionsheet-border-radius, 0) !default; $actionsheet-item-text-align: var( --nutui-actionsheet-item-text-align, - center + left ) !default; $actionsheet-item-border-bottom: var( --nutui-actionsheet-item-border-bottom, - none + 0.5px solid #c2c4cc ) !default; $actionsheet-item-line-height: var( --nutui-actionsheet-item-line-height, - 24px + 52px ) !default; $actionsheet-item-color: var( --nutui-actionsheet-item-color,