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
}