Skeleton 骨架屏

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

何时使用

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

代码演示

复杂的组合

更复杂的组合。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { TextArea, Button, DataSet, Skeleton } from 'choerodon-ui/pro';
import { Avatar } from 'choerodon-ui';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[dataset newValue]',
    value,
    '[oldValue]',
    oldValue,
    `[record.get('${name}')]`,
    record.get(name),
  );
}
​
​
class App extends React.Component {
  ds = new DataSet({
    autoQuery: true,
    queryUrl: '/tree.mock',
    fields: [
      {
        name: 'text',
        type: 'string',
        defaultValue: 'textarea',
      },
    ],
    events: {
      update: handleDataSetChange,
    },
​
  });
​
  render() {

动画效果

显示动画效果。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Tree, Skeleton, Button } from 'choerodon-ui/pro';
​
function nodeRenderer({ record }) {
  return record.get('text');
}
​
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree.mock',
    autoQuery: true,
    parentField: 'parentId',
    expandField: 'expand',
    idField: 'id',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'expand', type: 'boolean' },
      { name: 'parentId', type: 'number' },
    ],
    events: {
      select: ({ record, dataSet }) => console.log('select', record, dataSet),
      unSelect: ({ record, dataSet }) =>
        console.log('unSelect', record, dataSet),
    },
  });
​
  render() {
    return (
      <>
        <Skeleton
          height={200}
          paragraph={{
            rows: 10,
            style: { width: '5rem' },
          }}
          active
          dataSet={this.ds}
          skeletonTitle={false}
        >
          <Tree dataSet={this.ds} checkable renderer={nodeRenderer} />
        </Skeleton>
        <div style={{ padding: '0.1rem 0 0.1rem 0.25rem' }}>

API

Skeleton

更多案列和属性请参考 Skeleton。