diff --git a/src/packages/loading/demo.taro.tsx b/src/packages/loading/demo.taro.tsx index 7ee4e13d3c..6fcbd1abc8 100644 --- a/src/packages/loading/demo.taro.tsx +++ b/src/packages/loading/demo.taro.tsx @@ -10,6 +10,7 @@ import Demo5 from './demos/taro/demo5' import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' +import Demo9 from './demos/taro/demo9' const LoadingDemo = () => { const [translated] = useTranslate({ @@ -65,6 +66,7 @@ const LoadingDemo = () => { {translated.title8} + ) diff --git a/src/packages/loading/demo.tsx b/src/packages/loading/demo.tsx index fcb6510459..e8c27a1f5e 100644 --- a/src/packages/loading/demo.tsx +++ b/src/packages/loading/demo.tsx @@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5' import Demo6 from './demos/h5/demo6' import Demo7 from './demos/h5/demo7' import Demo8 from './demos/h5/demo8' +import Demo9 from './demos/h5/demo9' const LoadingDemo = () => { const [translated] = useTranslate({ @@ -61,6 +62,7 @@ const LoadingDemo = () => {

{translated.title8}

+ ) diff --git a/src/packages/loading/demos/h5/demo9.tsx b/src/packages/loading/demos/h5/demo9.tsx new file mode 100644 index 0000000000..d6c3f37258 --- /dev/null +++ b/src/packages/loading/demos/h5/demo9.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { Loading, Cell, Lottie } from '@nutui/nutui-react' +import lightLoading from '@nutui/nutui-react/dist/es/lottie/animation/light/loading.json' + +const Demo9 = () => { + const WrapperStyle = { + padding: 8, + borderRadius: 8, + backgroundColor: '#11141A05', + } + + const WrapperTextStyle = { + height: 18, + padding: 0, + } + + const lottie = ( + + ) + + return ( + <> + + + 内容加载中 + + + + ) +} +export default Demo9 diff --git a/src/packages/loading/demos/taro/demo9.tsx b/src/packages/loading/demos/taro/demo9.tsx new file mode 100644 index 0000000000..c790a7e918 --- /dev/null +++ b/src/packages/loading/demos/taro/demo9.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { Loading, Cell, Lottie } from '@nutui/nutui-react-taro' +import lightLoading from '@nutui/nutui-react-taro/dist/es/lottie/animation/light/loading.json' + +const Demo9 = () => { + const WrapperStyle = { + padding: 8, + borderRadius: 8, + backgroundColor: '#11141A05', + } + + const WrapperTextStyle = { + height: 18, + padding: 0, + } + + const lottie = ( + + ) + + return ( + <> + + + 内容加载中 + + + + ) +} +export default Demo9 diff --git a/src/packages/loading/loading.taro.tsx b/src/packages/loading/loading.taro.tsx index fcecdba8e3..7d770c2777 100644 --- a/src/packages/loading/loading.taro.tsx +++ b/src/packages/loading/loading.taro.tsx @@ -23,10 +23,11 @@ const defaultProps = { export const Loading = React.forwardRef>( (props, ref) => { - const { className, style, children, direction, icon, ...rest } = { - ...defaultProps, - ...props, - } + const { className, style, children, direction, icon, textStyle, ...rest } = + { + ...defaultProps, + ...props, + } const classPrefix = 'nut-loading' const getLoadingIcon = () => { @@ -47,7 +48,9 @@ export const Loading = React.forwardRef>( > {icon || getLoadingIcon()} {children ? ( - {children} + + {children} + ) : null} ) diff --git a/src/packages/loading/loading.tsx b/src/packages/loading/loading.tsx index 6517de575d..6cbf0b5d1a 100644 --- a/src/packages/loading/loading.tsx +++ b/src/packages/loading/loading.tsx @@ -19,14 +19,16 @@ const defaultProps = { type: 'circular', direction: 'horizontal', lottieProps: {}, + textStyle: {}, } as WebLoadingProps export const Loading = React.forwardRef>( (props, ref) => { - const { className, style, children, direction, icon, ...rest } = { - ...defaultProps, - ...props, - } + const { className, style, children, direction, icon, textStyle, ...rest } = + { + ...defaultProps, + ...props, + } const classPrefix = 'nut-loading' const getLoadingIcon = () => { @@ -47,7 +49,9 @@ export const Loading = React.forwardRef>( >
{icon || getLoadingIcon()}
{children ? ( -
{children}
+
+ {children} +
) : null} ) diff --git a/src/types/spec/loading/base.ts b/src/types/spec/loading/base.ts index a883bc6eb8..0b241f3feb 100644 --- a/src/types/spec/loading/base.ts +++ b/src/types/spec/loading/base.ts @@ -1,4 +1,4 @@ -import { ReactNode } from 'react' +import { CSSProperties, ReactNode } from 'react' import { BaseProps } from '../../base/props' import { Direction } from '../../base/atoms' @@ -12,4 +12,5 @@ export interface BaseLoading extends BaseProps { jsonData: any lottieProps: Partial + textStyle?: CSSProperties }