Skeleton 骨架屏

在需要等待加载内容的位置提供一个占位图形组合。

何时使用

• 网络较慢，需要长时间等待加载处理的情况下。
• 图文信息内容较多的列表/卡片中。
• 只在第一次加载数据的时候使用。
• 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

代码演示

基本

最简单的占位效果

import React from 'react';
import ReactDOM from 'react-dom';
import { Skeleton } from 'choerodon-ui';
​
ReactDOM.render(<Skeleton />, document.getElementById('container'));
​

复杂的组合

更复杂的组合

import React from 'react';
import ReactDOM from 'react-dom';
import { Skeleton } from 'choerodon-ui';
​
ReactDOM.render(<Skeleton avatar paragraph={{ rows: 4 }} />, document.getElementById('container'));
​

动画效果

显示动画效果

import React from 'react';
import ReactDOM from 'react-dom';
import { Skeleton } from 'choerodon-ui';
​
ReactDOM.render(<Skeleton active />, document.getElementById('container'));
​

骨架按钮、头像和输入框

骨架按钮、头像和输入框

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Skeleton, Switch, Form, Radio } from 'choerodon-ui';
​
class Demo extends React.Component {
  state = {
    buttonActive: false,
    avatarActive: false,
    inputActive: false,
    buttonSize: 'default',
    avatarSize: 'default',
    inputSize: 'default',
    buttonShape: 'default',
    avatarShape: 'circle',
  };
​
  handleActiveChange = prop => checked => {
    this.setState({ [prop]: checked });
  };
​
  handleSizeChange = prop => e => {
    this.setState({ [prop]: e.target.value });
  };
​
  handleShapeChange = prop => e => {
    this.setState({ [prop]: e.target.value });
  };
​
  render() {
    const {
      buttonActive,
      avatarActive,
      inputActive,
      buttonSize,
      avatarSize,
      inputSize,
      buttonShape,
      avatarShape,
    } = this.state;
    return (
      <div>
        <div>

包含子组件

加载占位图包含子组件

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Skeleton, Button } from 'choerodon-ui';
​
class Demo extends React.Component {
  state = {
    loading: false,
  };
​
  showSkeleton = () => {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false });
    }, 3000);
  };
​
  render() {
    return (
      <div className="article">
        <Skeleton loading={this.state.loading}>
          <div>
            <h4>Choerodon UI of React</h4>
            <p>
              Following the Ant Design specification, we developed a React UI library Choerodon UI that contains a set of high quality components and demos for building rich, interactive user interfaces.
            </p>
          </div>
        </Skeleton>
        <Button onClick={this.showSkeleton} disabled={this.state.loading}>
          Show Skeleton
        </Button>
      </div>
    );
  }
}

API

Skeleton

SkeletonAvatarProps

SkeletonTitleProps

SkeletonParagraphProps

SkeletonButtonProps

SkeletonInputProps