From fc3832c7a4a2b66811f322648ee37f74aee864bd Mon Sep 17 00:00:00 2001 From: lockiechen <290015551@qq.com> Date: Fri, 11 Nov 2022 21:23:14 +0800 Subject: [PATCH] docs(Loading): update demo #476 --- src/loading/_example/bar.jsx | 8 +- src/loading/_example/base.jsx | 18 +++- src/loading/_example/delay.jsx | 7 +- src/loading/_example/horz.jsx | 6 +- src/loading/_example/index.jsx | 126 ++++++-------------------- src/loading/_example/pure-text.jsx | 11 +-- src/loading/_example/size.jsx | 8 +- src/loading/_example/speed.jsx | 16 ++++ src/loading/_example/style/index.less | 30 +++++- src/loading/_example/vert.jsx | 6 +- 10 files changed, 114 insertions(+), 122 deletions(-) create mode 100644 src/loading/_example/speed.jsx diff --git a/src/loading/_example/bar.jsx b/src/loading/_example/bar.jsx index fb4e5b2c..6adb6810 100644 --- a/src/loading/_example/bar.jsx +++ b/src/loading/_example/bar.jsx @@ -26,14 +26,14 @@ export default function () { progressValue += 0.01; setProgress((pre) => pre + 0.01); }, 100); - }, [progress, timer]); + }, [timer]); return ( - <> +
- - +
); } diff --git a/src/loading/_example/base.jsx b/src/loading/_example/base.jsx index 6bee2dd5..2b33c335 100644 --- a/src/loading/_example/base.jsx +++ b/src/loading/_example/base.jsx @@ -2,5 +2,21 @@ import React from 'react'; import { Loading } from 'tdesign-mobile-react'; export default function () { - return ; + return ( +
+ + +
+ +
+ ); } diff --git a/src/loading/_example/delay.jsx b/src/loading/_example/delay.jsx index 9daab226..520bdada 100644 --- a/src/loading/_example/delay.jsx +++ b/src/loading/_example/delay.jsx @@ -5,16 +5,15 @@ export default function () { const [showLoading, setShowLoading] = useState(false); const clickSwitch = (value) => { - console.log(value); setShowLoading(value); }; return ( - <> +
-
+
- +
); } diff --git a/src/loading/_example/horz.jsx b/src/loading/_example/horz.jsx index 5abdbc56..11f0ddc7 100644 --- a/src/loading/_example/horz.jsx +++ b/src/loading/_example/horz.jsx @@ -3,12 +3,14 @@ import { Loading } from 'tdesign-mobile-react'; export default function () { return ( - <> +
+
+
加载中... - +
); } diff --git a/src/loading/_example/index.jsx b/src/loading/_example/index.jsx index ec8b2c21..5f726def 100644 --- a/src/loading/_example/index.jsx +++ b/src/loading/_example/index.jsx @@ -1,120 +1,48 @@ -import React, { useState, useCallback, useRef } from 'react'; -import { Loading, Button, Switch } from 'tdesign-mobile-react'; +import React from 'react'; import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import Base from './base'; +import Horz from './horz'; +import Vert from './vert'; +import PureText from './pure-text'; +import Bar from './bar'; +import Delay from './delay'; +import Size from './size'; +import Speed from './speed'; + import './style/index.less'; export default function () { - const [progress, setProgress] = useState(0); - const [showLoading, setShowLoading] = useState(false); - const timer = useRef(null); - - const onPageLoading = useCallback(() => { - if (timer.current) { - return; - } - - let progressValue = 0; - setProgress(0); - - timer.current = setInterval(() => { - if (progressValue >= 1) { - setTimeout(() => { - setProgress(0); - }, 2000); - - clearInterval(timer.current); - timer.current = null; - return; - } - progressValue += 0.01; - setProgress((pre) => pre + 0.01); - }, 100); - }, [progress, timer]); - - const clickSwitch = (value) => { - console.log(value); - setShowLoading(value); - }; - return ( <> - -
- - -
- -
+ + - -
- -
- -
- - 加载中... - -
+ + - -
- -
+ + -
- -
- - -
- -
- 加载失败 刷新 -
- -
+ -
- - -
+ + + + - -
- -
- -
-
+ + - -
- -
- -
- -
+ + ); diff --git a/src/loading/_example/pure-text.jsx b/src/loading/_example/pure-text.jsx index 1ed9314b..5ae5a082 100644 --- a/src/loading/_example/pure-text.jsx +++ b/src/loading/_example/pure-text.jsx @@ -3,16 +3,15 @@ import { Loading } from 'tdesign-mobile-react'; export default function () { return ( - <> +
-
+
-
- 加载失败 刷新 -
+ 加载失败 + 刷新
- +
); } diff --git a/src/loading/_example/size.jsx b/src/loading/_example/size.jsx index d260025e..d6abb80e 100644 --- a/src/loading/_example/size.jsx +++ b/src/loading/_example/size.jsx @@ -3,10 +3,10 @@ import { Loading } from 'tdesign-mobile-react'; export default function () { return ( - <> - - +
- + + +
); } diff --git a/src/loading/_example/speed.jsx b/src/loading/_example/speed.jsx new file mode 100644 index 00000000..78c1785b --- /dev/null +++ b/src/loading/_example/speed.jsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react'; +import { Loading, Slider } from 'tdesign-mobile-react'; + +export default function () { + const [speed, setSpeed] = useState(300); + + return ( +
+ +
+ 速度调整 + +
+
+ ); +} diff --git a/src/loading/_example/style/index.less b/src/loading/_example/style/index.less index a6910750..7567e095 100644 --- a/src/loading/_example/style/index.less +++ b/src/loading/_example/style/index.less @@ -2,6 +2,31 @@ padding: 0 16px; display: flex; // flex-direction: column; + &--column { + flex-direction: column; + } + .demo-loading { + margin-top: 20px; + } + .demo-loading-speed-slider { + width: 100%; + margin-top: 20px; + display: grid; + align-items: center; + grid-gap: 24px; + grid-template-columns: auto 1fr; + } + &.pure-text-demo-box { + display: grid; + align-items: center; + grid-gap: 40px; + grid-template-columns: repeat(3, auto); + } + &.demo-content-size { + .t-loading { + margin-bottom: 20px; + } + } } .normal-content { @@ -10,8 +35,11 @@ .custom-error { font-size: 14px; - color: rgba(0, 0, 0, 0.9); + .t-loading { + color: rgba(0, 0, 0, 0.9); + } span { + margin-left: 10px; color: rgba(0, 82, 217, 1); cursor: pointer; } diff --git a/src/loading/_example/vert.jsx b/src/loading/_example/vert.jsx index 29b4e03b..d5307672 100644 --- a/src/loading/_example/vert.jsx +++ b/src/loading/_example/vert.jsx @@ -2,5 +2,9 @@ import React from 'react'; import { Loading } from 'tdesign-mobile-react'; export default function () { - return ; + return ( +
+ +
+ ); }