ProSkeleton - 骨架屏

该组件为内部组件，请勿直接使用。

页面级别的骨架屏，不支持自定义

安装和初始化

import   Skeleton from '@ant-design/pro-skeleton';

return <Skeleton type="list" />;

DEMO

列表页面

import { ProSkeleton } from '@ant-design/pro-components';
export default () => (
  <div
    style={{
      background: '#fafafa',
      padding: 24,
    }}
  >
    <ProSkeleton type="list" />
  </div>
);

静态列表

import { ProSkeleton } from '@ant-design/pro-components';
export default () => (
  <div
    style={{
      background: '#fafafa',
      padding: 24,
    }}
  >
    <ProSkeleton statistic={2} type="list" />
  </div>
);

结果页

import { ProSkeleton } from '@ant-design/pro-components';
export default () => (
  <div
    style={{
      background: '#fafafa',
      padding: 24,
    }}
  >
    <ProSkeleton type="result" />
  </div>
);

详情页

import { ProSkeleton } from '@ant-design/pro-components';

export default () => {
  return (
    <div
      style={{
        background: '#fafafa',
        padding: 24,
      }}
    >
      <ProSkeleton type="descriptions" />
    </div>
  );
};

API

参数	说明	类型	默认值
type	不同类型的骨架屏	`'list' \| 'result' \| 'descriptions'`	`list`
active	是否显示动态	`boolean`	`true`
pageHeader	是否显示 pageHeader 的骨架屏，设为 `false` 隐藏	`false`	-
statistic	统计信息骨架屏的数量，设为 `false` 隐藏，不设置时按屏幕宽度自适应	`number` \| `false`	-
list	列表的骨架屏，可以控制数量，设为 `false` 隐藏	`number` \| `false`	`5`
toolbar	列表的操作栏骨架屏，设为 `false` 隐藏	`false`	-
actionButton	列表的操作按钮骨架屏，设为 `false` 隐藏	`false`	-

#ProSkeleton - 骨架屏

#安装和初始化

#DEMO

#API

ProSkeleton - 骨架屏

安装和初始化

DEMO

API