75 lines
3.1 KiB
TypeScript
75 lines
3.1 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Loading as LoadingComponent, Button } from '../../../src';
|
||
import { CodeBlock, ApiTable, ApiRow, sectionStyle, sectionTitleStyle, tagStyle, demoBodyStyle, labelStyle } from '../../tools';
|
||
|
||
const LoadingDemo: React.FC = () => {
|
||
const [active, setActive] = useState(true);
|
||
|
||
return (
|
||
<div style={sectionStyle}>
|
||
<div style={sectionTitleStyle}>
|
||
Loading <span style={tagStyle}>加载动画</span>
|
||
</div>
|
||
<div style={labelStyle}>
|
||
动森风格小岛 Loading 动画组件，带有漂浮的小岛、摇曳的树叶和游动的鱼。关闭时会从中间圆形透明扩散，露出底层内容。
|
||
</div>
|
||
<div style={{ marginBottom: 16 }}>
|
||
<Button type={active ? 'default' : 'primary'} onClick={() => setActive(!active)}>
|
||
{active ? '关闭 Loading' : '开启 Loading'}
|
||
</Button>
|
||
</div>
|
||
<div style={{ ...demoBodyStyle, position: 'relative', height: 800, padding: 0, overflow: 'hidden' }}>
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
background: 'linear-gradient(135deg, #ffd6a5 0%, #fdffb6 25%, #caffbf 50%, #9bf6ff 75%, #a0c4ff 100%)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: 28,
|
||
fontWeight: 600,
|
||
color: '#333',
|
||
}}
|
||
>
|
||
底层内容 · Underlying Content
|
||
</div>
|
||
<LoadingComponent
|
||
active={active}
|
||
style={{ height: '100%', position: 'absolute', inset: 0 }}
|
||
/>
|
||
</div>
|
||
<CodeBlock
|
||
code={`import React, { useState } from 'react';
|
||
import { Loading } from 'animal-island-ui';
|
||
|
||
const App = () => {
|
||
const [active, setActive] = useState(true);
|
||
return (
|
||
<div style={{ position: 'relative', height: 800 }}>
|
||
{/* 底层内容 */}
|
||
<div style={{ position: 'absolute', inset: 0 }}>Underlying Content</div>
|
||
{/* Loading 覆盖层，关闭时透明圆形扩散露出底层 */}
|
||
<Loading
|
||
active={active}
|
||
style={{ position: 'absolute', inset: 0, height: '100%' }}
|
||
/>
|
||
<button onClick={() => setActive(!active)}>
|
||
{active ? '关闭 Loading' : '开启 Loading'}
|
||
</button>
|
||
</div>
|
||
);
|
||
};`}
|
||
/>
|
||
<ApiTable rows={LOADING_API} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const LOADING_API: ApiRow[] = [
|
||
{ prop: 'active', desc: '是否显示加载动画', type: 'boolean', defaultVal: 'true' },
|
||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||
{ prop: 'style', desc: '自定义样式', type: 'CSSProperties', defaultVal: '-' },
|
||
];
|
||
|
||
export default LoadingDemo; |