diff --git a/src/packages/avatar/avatar.harmony.css b/src/packages/avatar/avatar.harmony.css index 8eff79debd..887a5d4a1d 100644 --- a/src/packages/avatar/avatar.harmony.css +++ b/src/packages/avatar/avatar.harmony.css @@ -73,6 +73,11 @@ .nut-avatar { position: relative; flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; } .nut-avatar-round { border-radius: 999px; @@ -96,21 +101,12 @@ .nut-avatar-icon { background-size: 100% 100%; } -.nut-avatar .nut-icon-img { - width: 100%; - height: 100%; -} .nut-avatar-text { display: flex; justify-content: center; align-items: center; - width: 100%; - height: 100%; } .nut-avatar-large { - display: flex; - justify-content: center; - align-items: center; width: 60px; height: 60px; } @@ -118,53 +114,19 @@ width: 60px; height: 60px; } -.nut-avatar-large-img-image { - width: 60px; - height: 60px; -} .nut-avatar-large-icon { width: 60px; height: 60px; } -.nut-avatar-large .nut-icon-img { - width: 100%; - height: 100%; -} .nut-avatar-large-text { width: 60px; height: 60px; } .nut-avatar-small { - display: flex; - justify-content: center; - align-items: center; - width: 32px; - height: 32px; -} -.nut-avatar-small-img-image { width: 32px; height: 32px; } .nut-avatar-small-text { width: 32px; height: 32px; -} -.nut-avatar-normal { - display: flex; - justify-content: center; - align-items: center; - width: 40px; - height: 40px; -} -.nut-avatar-normal-img-image { - width: 40px; - height: 40px; -} -.nut-avatar-normal .nut-icon-img { - width: 100%; - height: 100%; -} -.nut-avatar-normal-text { - width: 40px; - height: 40px; } \ No newline at end of file diff --git a/src/packages/avatar/avatar.scss b/src/packages/avatar/avatar.scss index e2647bef2a..f3480990ce 100644 --- a/src/packages/avatar/avatar.scss +++ b/src/packages/avatar/avatar.scss @@ -4,6 +4,13 @@ .nut-avatar { position: relative; flex: 0 0 auto; // 防止被压缩 + + display: flex; + justify-content: center; + align-items: center; + width: $avatar-normal-width; + height: $avatar-normal-height; + &-round { border-radius: 999px; overflow: hidden; @@ -31,45 +38,23 @@ background-size: 100% 100%; } - .nut-icon-img { - width: 100%; - height: 100%; - } - &-text { display: flex; justify-content: center; align-items: center; - width: 100%; - height: 100%; } &-large { - display: flex; - justify-content: center; - align-items: center; width: $avatar-large-width; height: $avatar-large-height; - &-img { width: $avatar-large-width; height: $avatar-large-height; - &-image { - width: $avatar-large-width; - height: $avatar-large-height; - } } - &-icon { width: $avatar-large-width; height: $avatar-large-height; } - - .nut-icon-img { - width: 100%; - height: 100%; - } - &-text { width: $avatar-large-width; height: $avatar-large-height; @@ -77,51 +62,13 @@ } &-small { - display: flex; - justify-content: center; - align-items: center; width: $avatar-small-width; height: $avatar-small-height; - - &-img-image { - width: $avatar-small-width; - height: $avatar-small-height; - } - &-icon { - // width: $avatar-small-width; - // height: $avatar-small-height; - } &-text { width: $avatar-small-width; height: $avatar-small-height; } } - - &-normal { - display: flex; - justify-content: center; - align-items: center; - width: $avatar-normal-width; - height: $avatar-normal-height; - - &-img-image { - width: $avatar-normal-width; - height: $avatar-normal-height; - } - - &-icon { - } - - .nut-icon-img { - width: 100%; - height: 100%; - } - - &-text { - width: $avatar-normal-width; - height: $avatar-normal-height; - } - } } // [dir='rtl'] .nut-avatar, diff --git a/src/packages/avatar/avatar.taro.tsx b/src/packages/avatar/avatar.taro.tsx index d62751f851..6948858eb7 100644 --- a/src/packages/avatar/avatar.taro.tsx +++ b/src/packages/avatar/avatar.taro.tsx @@ -136,7 +136,6 @@ export const Avatar: FunctionComponent< {(showMax || !groupMax || avatarIndex <= groupMax) && ( )} - {React.isValidElement(icon) - ? React.cloneElement(icon, { + {React.isValidElement(icon) ? ( + + {React.cloneElement(icon, { ...icon.props, className: `${icon.props.className || ''} nut-avatar-icon nut-avatar-${groupSize || size || 'normal'}-icon`, - style: { position: 'absolute' }, - }) - : null} + })} + + ) : null} {children && ( )} - {!src && !icon && !children && !harmonyAndRn() && ( - + {!src && !icon && !children && ( + + + )} )} {showMax && ( {propAvatarGroup?.maxContent ? propAvatarGroup?.maxContent diff --git a/src/packages/avatar/demo.taro.tsx b/src/packages/avatar/demo.taro.tsx index 2c49d50341..932dc07753 100644 --- a/src/packages/avatar/demo.taro.tsx +++ b/src/packages/avatar/demo.taro.tsx @@ -13,7 +13,6 @@ import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' import Demo9 from './demos/taro/demo9' -import { harmonyAndRn } from '@/utils/platform-taro' const AvatarDemo = () => { const [translated] = useTranslate({ @@ -65,14 +64,10 @@ const AvatarDemo = () => { {translated['049b6a97']} - {harmonyAndRn() ? null : ( - <> - {translated.a304dabf} - - {translated['89bca4e7']} - - - )} + {translated.a304dabf} + + {translated['89bca4e7']} + {translated.e981579e} {translated.f645fc65} diff --git a/src/packages/avatar/demos/taro/demo2.tsx b/src/packages/avatar/demos/taro/demo2.tsx index a7dac9fbdf..1a16eec983 100644 --- a/src/packages/avatar/demos/taro/demo2.tsx +++ b/src/packages/avatar/demos/taro/demo2.tsx @@ -1,22 +1,12 @@ import React from 'react' import { Avatar, Cell } from '@nutui/nutui-react-taro' import { User } from '@nutui/icons-react-taro' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo2 = () => { return ( - {harmonyAndRn() ? ( - <> - N - N - - ) : ( - <> - } shape="square" /> - } shape="round" /> - - )} + } shape="square" /> + } shape="round" /> ) } diff --git a/src/packages/avatar/demos/taro/demo3.tsx b/src/packages/avatar/demos/taro/demo3.tsx index b88f641164..6c0f891e8b 100644 --- a/src/packages/avatar/demos/taro/demo3.tsx +++ b/src/packages/avatar/demos/taro/demo3.tsx @@ -1,24 +1,13 @@ import React from 'react' import { Avatar, Cell } from '@nutui/nutui-react-taro' import { User } from '@nutui/icons-react-taro' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo3 = () => { return ( - {harmonyAndRn() ? ( - <> - - N - N - - ) : ( - <> - - } /> - N - - )} + + } /> + N ) } diff --git a/src/packages/avatar/demos/taro/demo4.tsx b/src/packages/avatar/demos/taro/demo4.tsx index f309b7cb19..200ed1879c 100644 --- a/src/packages/avatar/demos/taro/demo4.tsx +++ b/src/packages/avatar/demos/taro/demo4.tsx @@ -1,17 +1,19 @@ import React from 'react' import { Avatar, Cell } from '@nutui/nutui-react-taro' +import { User } from '@nutui/icons-react-taro' +import { harmonyAndRn } from '@/utils/platform-taro' const Demo4 = () => { return ( } + color="#ffffff" + background={`${harmonyAndRn() ? '#ff0f23' : 'var(--nutui-color-primary)'}`} + icon={} /> U diff --git a/src/packages/avatar/demos/taro/demo6.tsx b/src/packages/avatar/demos/taro/demo6.tsx index 22622b239f..9f269e45bf 100644 --- a/src/packages/avatar/demos/taro/demo6.tsx +++ b/src/packages/avatar/demos/taro/demo6.tsx @@ -7,66 +7,29 @@ const Demo6 = () => { return ( <> - {harmonyAndRn() ? ( - - - U - - - U - - - U - - - ) : ( - - - } /> - - U - - - )} + + + } /> + + U + + - {harmonyAndRn() ? ( - - - N - - U - - N - - ) : ( - - - } /> - - U - - } /> - - )} + + + } /> + + U + + } /> + ) diff --git a/src/packages/avatar/demos/taro/demo7.tsx b/src/packages/avatar/demos/taro/demo7.tsx index bea73ff22a..bcc5697ce7 100644 --- a/src/packages/avatar/demos/taro/demo7.tsx +++ b/src/packages/avatar/demos/taro/demo7.tsx @@ -6,31 +6,17 @@ import { harmonyAndRn } from '@/utils/platform-taro' const Demo7 = () => { return ( - {harmonyAndRn() ? ( - - - N - - U - - N - - ) : ( - - - } /> - - U - - } /> - - )} + + + } /> + + U + + } /> + ) } diff --git a/src/packages/avatar/demos/taro/demo8.tsx b/src/packages/avatar/demos/taro/demo8.tsx index f634a26a9e..510b181a20 100644 --- a/src/packages/avatar/demos/taro/demo8.tsx +++ b/src/packages/avatar/demos/taro/demo8.tsx @@ -2,7 +2,6 @@ import React from 'react' import { Avatar, Cell } from '@nutui/nutui-react-taro' import { User } from '@nutui/icons-react-taro' import Taro from '@tarojs/taro' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo8 = () => { const activeAvatar = () => { @@ -10,11 +9,7 @@ const Demo8 = () => { } return ( - {harmonyAndRn() ? ( - N - ) : ( - } onClick={activeAvatar} /> - )} + } onClick={activeAvatar} /> ) } diff --git a/src/packages/input/input.harmony.css b/src/packages/input/input.harmony.css index f505097aab..47289dbf35 100644 --- a/src/packages/input/input.harmony.css +++ b/src/packages/input/input.harmony.css @@ -43,4 +43,8 @@ background: none; opacity: 1; -webkit-text-fill-color: #c2c4cc; +} + +.nut-input-clear { + flex: 0; } \ No newline at end of file diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx index 95f67948cf..1bd665c329 100644 --- a/src/packages/skeleton/demos/taro/demo5.tsx +++ b/src/packages/skeleton/demos/taro/demo5.tsx @@ -1,4 +1,4 @@ -import { Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react-taro' +import { Avatar, Skeleton, Switch } from '@nutui/nutui-react-taro' import React, { useState } from 'react' import { View, Text } from '@tarojs/components' import pxTransform from '@/utils/px-transform' @@ -27,12 +27,7 @@ const Demo5 = () => { className="nut-skeleton-content-avatar" style={{ marginRight: '20px' }} size="50" - icon={ - - } + src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" /> NutUI-React