Loader component
npm install @uiw/react-loaderLoader 加载器
===
用于页面和区块的加载中状态。
``jsx`
import { Loader } from 'uiw';
// or
import Loader from '@uiw/react-loader';
`jsx mdx:preview&bg=#fff
import React from 'react';
import { Loader } from "uiw";
export default function Demo() {
return (
$3
jsx mdx:preview&bg=#fff
import React, { Component } from 'react';
import { Loader, Row, Col, Message, Icon, Button } from "uiw";class Demo extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
};
}
render() {
return (
size="small"
onClick={() => {
this.setState({
loading: !this.state.loading,
});
}}
>
点击切换加载状态
|
title="成功提示标题"
description={
verticalAlign="baseline"
style={{ fill: "#009688" }}
/>
这里是成功提示详情描述。
}
/>
title="成功提示标题"
description="这里是成功提示详情描述。"
/>
|
);
}
}
export default Demo;
`
$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Loader, Card, Col, Row } from "uiw";export default function Demo() {
return (
extra={更多}
style={{ minWidth: 230 }}
>
卡片内容
卡片内容
卡片内容
extra={更多}
style={{ minWidth: 230 }}
>
卡片内容
卡片内容
卡片内容
extra={更多}
style={{ minWidth: 230 }}
>
color="#fff"
tip="loading..."
vertical
style={{ width: "100%" }}
>
卡片内容
卡片内容
卡片内容
|
);
}
`
$3
jsx mdx:preview&bg=#fff
import React from 'react';
import { Loader, Card, Icon } from "uiw";export default function Demo() {
return (
更多} style={{ width: 300 }}>
color="red"
indicator={
spin={true}
style={{ verticalAlign: "text-top" }}
/>
}
style={{ width: "100%" }}
>
卡片内容
卡片内容
卡片内容
);
}
`
$3
页面数据加载时显示。
jsx mdx:preview&bg=#fff
import React from 'react';
import { Loader, Icon, Button } from "uiw";class Demo extends React.Component {
constructor() {
super();
this.state = {
fullscreen: false,
};
}
render() {
return (
type="primary"
onClick={() => {
this.setState(
{
fullscreen: !this.state.fullscreen,
},
() => {
setTimeout(() => {
this.setState({
fullscreen: !this.state.fullscreen,
});
}, 3000);
}
);
}}
>
显示整页加载，3 秒后消失
{this.state.fullscreen && (
size="large"
bgColor="rgba(255, 255, 255, 0.9)"
fullscreen={this.state.fullscreen}
/>
)}
);
}
}export default Demo;
`
$3
| 参数 | 说明 | 类型 | 默认值 |
| ---------- | ------- | ------- | --------- |
| size | 尺寸 | Enum{
, default, large} | default |
| loading | 是否旋转 | Boolean | true |
| indicator | 加载指示符，可以加载一个 Icon 动画 | ReactNode | - |
| tip | 当作为包裹元素时，可以自定义描述文案 | String | - |
| color | 设置图标与文字的颜色 | String | - |
| vertical | 图标与文字垂直显示 | Boolean | - |
| bgColor | 自定义背景颜色 | String | - |
| fullscreen | 是否全屏显示 | Boolean | false` |