diff --git a/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json b/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json index 106d37757a..51d771306b 100644 --- a/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json +++ b/packages/nutui-harmony/entry/src/main/resources/base/profile/main_pages.json @@ -54,10 +54,10 @@ "feedback/pages/popover/index", "feedback/pages/popup/index", "feedback/pages/pulltorefresh/index", + "feedback/pages/resultpage/index", "feedback/pages/skeleton/index", "feedback/pages/swipe/index", "feedback/pages/toast/index", - "feedback/pages/resultpage/index", "exhibition/pages/animate/index", "exhibition/pages/animatingnumbers/index", "exhibition/pages/avatar/index", diff --git a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js index 6dcf727b2d..a01b4af19f 100644 --- a/packages/nutui-taro-demo-rn/scripts/taro/adapted.js +++ b/packages/nutui-taro-demo-rn/scripts/taro/adapted.js @@ -17,6 +17,7 @@ exports = module.exports = [ 'divider', 'image', 'resultpage', + 'skeleton', 'notify', 'pagination', 'swiper', diff --git a/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx b/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx index 039e05e8ec..337c2e3124 100644 --- a/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx +++ b/packages/nutui-taro-demo-rn/src/feedback/pages/skeleton/index.tsx @@ -1 +1,2 @@ -export default <>button; \ No newline at end of file +import Demo from '@/packages/skeleton/demo.taro' +export default Demo diff --git a/src/config.json b/src/config.json index 39f79d5019..e778d01cee 100644 --- a/src/config.json +++ b/src/config.json @@ -850,7 +850,7 @@ "author": "oasis" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "Skeleton", "type": "component", "cName": "骨架屏", diff --git a/src/packages/skeleton/demo.scss b/src/packages/skeleton/demo.scss index 70382ff79b..e69de29bb2 100644 --- a/src/packages/skeleton/demo.scss +++ b/src/packages/skeleton/demo.scss @@ -1,45 +0,0 @@ -.content { - .nut-switch { - display: flex; - margin: 0 16px 8px 0; - } - - .nut-skeleton-content { - display: flex; - - .right-content { - font-family: PingFangSC; - display: flex; - flex-direction: column; - - .title { - font-size: 14px; - color: rgba(51, 51, 51, 1); - } - - .description { - margin-top: 10px; - font-size: 13px; - color: rgba(154, 155, 157, 1); - } - } - } -} - -.pic-compose { - display: flex; - justify-content: space-between; - - .item { - width: 47%; - } -} - -.ske-cell-single { - display: block; - padding-top: 3px; -} - -.ske-cell-double { - display: block; -} diff --git a/src/packages/skeleton/demo.taro.tsx b/src/packages/skeleton/demo.taro.tsx index c56adc1262..40e31b5ba3 100644 --- a/src/packages/skeleton/demo.taro.tsx +++ b/src/packages/skeleton/demo.taro.tsx @@ -10,6 +10,7 @@ import Demo2 from './demos/taro/demo2' import Demo3 from './demos/taro/demo3' import Demo4 from './demos/taro/demo4' import Demo5 from './demos/taro/demo5' +import { harmonyAndRn } from '@/utils/platform-taro' const SkeletonDemo = () => { const [translated] = useTranslate({ @@ -41,21 +42,25 @@ const SkeletonDemo = () => {
{translated['84aa6bce']} - + {translated.ea3bc18a} - + {translated['02a53df5']} - {translated['0a001122']} - - - + {harmonyAndRn() ? null : ( + <> + {translated['0a001122']} + + + + + )} {translated['07d62d5c']} diff --git a/src/packages/skeleton/demo.tsx b/src/packages/skeleton/demo.tsx index 809c259561..53a5016b30 100644 --- a/src/packages/skeleton/demo.tsx +++ b/src/packages/skeleton/demo.tsx @@ -37,11 +37,11 @@ const SkeletonDemo = () => { <>

{translated['84aa6bce']}

- +

{translated.ea3bc18a}

- +

{translated['02a53df5']}

@@ -49,7 +49,7 @@ const SkeletonDemo = () => {

{translated['0a001122']}

- +

{translated['07d62d5c']}

diff --git a/src/packages/skeleton/demos/h5/demo5.tsx b/src/packages/skeleton/demos/h5/demo5.tsx index ffa1bf87f0..d007ed1bfd 100644 --- a/src/packages/skeleton/demos/h5/demo5.tsx +++ b/src/packages/skeleton/demos/h5/demo5.tsx @@ -11,11 +11,15 @@ const Demo5 = () => { setChecked(value) } return ( -
- changeStatus(value, event)} /> +
+ changeStatus(value, event)} + style={{ display: 'flex', marginBottom: '8px' }} + />
{ /> } /> -
- NutUI-React -
+
+ NutUI-React +
一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx index a4d15b1216..85be784261 100644 --- a/src/packages/skeleton/demos/taro/demo5.tsx +++ b/src/packages/skeleton/demos/taro/demo5.tsx @@ -1,6 +1,7 @@ import { Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react-taro' import React, { useState } from 'react' import { View, Text } from '@tarojs/components' +import pxTransform from '@/utils/px-transform' const Demo5 = () => { const [checked, setChecked] = useState(false) @@ -12,11 +13,19 @@ const Demo5 = () => { setChecked(value) } return ( - - changeStatus(value, event)} /> + + changeStatus(value, event)} + style={{ display: 'flex', marginBottom: pxTransform(8) }} + /> - + { /> } /> - - NutUI-React + + NutUI-React 一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。 diff --git a/src/packages/skeleton/skeleton.harmony.css b/src/packages/skeleton/skeleton.harmony.css index a00db0f425..34bf352a46 100644 --- a/src/packages/skeleton/skeleton.harmony.css +++ b/src/packages/skeleton/skeleton.harmony.css @@ -1,3 +1,152 @@ +.nut-avatar-group { + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + display: inline-block; + position: relative; + flex: 0 0 auto; +} +.nut-avatar-group .nut-avatar { + border: 1px solid #fff; +} +.nut-avatar-group .nut-avatar:not(:first-of-type) { + margin-left: -8px; +} + +[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type), +.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) { + margin-left: 0; + margin-right: -8px; +} + +.nut-image { + display: block; + position: relative; +} +.nut-image .nut-img { + display: block; + width: 100%; + height: 100%; +} +.nut-image.nut-image-round { + border-radius: 50%; + overflow: hidden; +} +.nut-image .nut-img-loading { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #f5f6fa; + background-size: 100% 100%; +} +.nut-image .nut-img-error { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #f5f6fa; + background-size: 100% 100%; +} + +[dir=rtl] .nut-image .nut-img-loading, +.nut-rtl .nut-image .nut-img-loading { + left: auto; + right: 0; +} +[dir=rtl] .nut-image .nut-img-error, +.nut-rtl .nut-image .nut-img-error { + left: auto; + right: 0; +} + +.nut-avatar { + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + display: inline-block; + position: relative; + flex: 0 0 auto; + text-align: center; +} +.nut-avatar .avatar-img { + position: absolute; + width: 100%; + height: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + flex-shrink: 0; +} +.nut-avatar .icon { + background-size: 100% 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.nut-avatar .nut-icon-img { + width: 100%; + height: 100%; +} +.nut-avatar .text { + display: inline-block; + width: 100%; + height: 100%; + text-align: center; + overflow: hidden; +} + +[dir=rtl] .nut-avatar .avatar-img, +.nut-rtl .nut-avatar .avatar-img { + left: auto; + right: 50%; + transform: translate(50%, -50%); +} +[dir=rtl] .nut-avatar .icon, +.nut-rtl .nut-avatar .icon { + left: auto; + right: 50%; + transform: translate(50%, -50%); +} + +.nut-avatar-large { + width: 60px; + height: 60px; + line-height: 60px; +} + +.nut-avatar-small { + width: 32px; + height: 32px; + line-height: 32px; +} + +.nut-avatar-normal { + width: 40px; + height: 40px; + line-height: 40px; +} + +.nut-avatar-round { + border-radius: 50%; + overflow: hidden; +} + +.nut-avatar-square { + border-radius: 5px; +} + .nut-skeleton { display: inline-block; position: relative; @@ -7,15 +156,16 @@ } .nut-skeleton-content { display: flex; + flex-direction: row; } -.nut-skeleton-content .nut-avatar { +.nut-skeleton-content-avatar { margin-right: 20px; - background: #F7F8FC !important; + background: #f5f6fa !important; } -.nut-skeleton-content .nut-skeleton-block { +.nut-skeleton-content-block { width: 100%; height: 15px; - background: #F7F8FC; + background: #f5f6fa; margin-top: 10px; border-radius: 0; } @@ -24,13 +174,16 @@ display: flex; flex-direction: column; } -.nut-skeleton-content-line .nut-skeleton-title { +.nut-skeleton-content-line .nut-skeleton-content-block:last-child { + width: 70%; +} +.nut-skeleton-content-title { width: 30%; height: 15px; - background: #F7F8FC; + background: #f5f6fa; } -.nut-skeleton-content-line .nut-skeleton-block:last-child { - width: 70%; +.nut-skeleton-content-block-last-child { + width: 55%; } .nut-skeleton-animation { position: absolute; @@ -39,7 +192,9 @@ width: 100%; height: 100%; z-index: 1; + /* #ifndef rn */ background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%); + /* #endif */ animation: nut-skeleton 2s ease-in-out 0s infinite; } @keyframes nut-skeleton { @@ -60,7 +215,9 @@ .nut-rtl .nut-skeleton-animation { left: auto; right: 0; + /* #ifndef rn */ background: linear-gradient(-90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%); + /* #endif */ animation: nut-skeleton-rtl 2s ease-in-out 0s infinite; } @keyframes nut-skeleton-rtl { diff --git a/src/packages/skeleton/skeleton.scss b/src/packages/skeleton/skeleton.scss index 4394b47e28..74730e6aca 100644 --- a/src/packages/skeleton/skeleton.scss +++ b/src/packages/skeleton/skeleton.scss @@ -9,13 +9,14 @@ &-content { display: flex; + flex-direction: row; - .nut-avatar { + &-avatar { margin-right: 20px; background: $skeleton-background !important; } - .nut-skeleton-block { + &-block { width: $skeleton-line-width; height: $skeleton-line-height; background: $skeleton-background; @@ -27,17 +28,20 @@ width: 100%; display: flex; flex-direction: column; - - .nut-skeleton-title { - width: 30%; - height: $skeleton-line-height; - background: $skeleton-background; - } - - .nut-skeleton-block:last-child { + .nut-skeleton-content-block:last-child { width: 70%; } } + + &-title { + width: 30%; + height: $skeleton-line-height; + background: $skeleton-background; + } + + &-block-last-child { + width: 55%; + } } &-animation { @@ -47,12 +51,15 @@ width: 100%; height: 100%; z-index: 1; + + /* #ifndef rn */ background: linear-gradient( 90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80% ); + /* #endif */ animation: nut-skeleton 2s ease-in-out 0s infinite; } @@ -78,12 +85,15 @@ &-animation { left: auto; right: 0; + + /* #ifndef rn */ background: linear-gradient( -90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80% ); + /* #endif */ animation: nut-skeleton-rtl 2s ease-in-out 0s infinite; } diff --git a/src/packages/skeleton/skeleton.taro.tsx b/src/packages/skeleton/skeleton.taro.tsx index fd69c374d5..7bd6e14e5e 100644 --- a/src/packages/skeleton/skeleton.taro.tsx +++ b/src/packages/skeleton/skeleton.taro.tsx @@ -1,7 +1,9 @@ import React, { FunctionComponent } from 'react' +import { View } from '@tarojs/components' import classNames from 'classnames' import Avatar from '@/packages/avatar/index.taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import pxTransform from '@/utils/px-transform' type avatarShape = 'round' | 'square' @@ -46,6 +48,7 @@ export const Skeleton: FunctionComponent> = (props) => { const classes = classNames(classPrefix, className) const avatarClass = classNames({ [`nut-avatar`]: true, + [`nut-skeleton-content-avatar`]: true, [`avatar-${avatarShape}`]: avatarShape, }) @@ -56,13 +59,13 @@ export const Skeleton: FunctionComponent> = (props) => { const getStyle = () => { if (avatarSize) { return { - width: avatarSize, - height: avatarSize, + width: pxTransform(parseInt(avatarSize)), + height: pxTransform(parseInt(avatarSize)), } } return { - width: '50px', - height: '50px', + width: pxTransform(50), + height: pxTransform(50), } } @@ -71,9 +74,9 @@ export const Skeleton: FunctionComponent> = (props) => { {visible ? ( <>{children} ) : ( -
- {animated &&
} -
+ + {animated && } + {avatar && ( > = (props) => { /> )} {rows === 1 ? ( -
+ ) : ( -
- {title &&
} + + {title && } {repeatLines(rows).map((item, index) => { - return
+ return ( + + ) })} -
+ )} -
-
+ + )} ) diff --git a/src/packages/skeleton/skeleton.tsx b/src/packages/skeleton/skeleton.tsx index 03dc00b257..09cf9c6abb 100644 --- a/src/packages/skeleton/skeleton.tsx +++ b/src/packages/skeleton/skeleton.tsx @@ -46,6 +46,7 @@ export const Skeleton: FunctionComponent> = (props) => { const classes = classNames(classPrefix, className) const avatarClass = classNames({ [`nut-avatar`]: true, + [`nut-skeleton-content-avatar`]: true, [`avatar-${avatarShape}`]: avatarShape, }) @@ -83,12 +84,17 @@ export const Skeleton: FunctionComponent> = (props) => { /> )} {rows === 1 ? ( -
+
) : (
- {title &&
} + {title &&
} {repeatLines(rows).map((item, index) => { - return
+ return ( +
+ ) })}
)}