Skeleton骨架屏

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

何时使用

  • 网络较慢,需要长时间等待加载处理的情况下。

  • 图文信息内容较多的列表/卡片中。

  • 只适合用在第一次加载数据的场景。

  • 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

代码演示

Skeleton 骨架屏 - 图1

基本

最简单的占位效果。

  1. import { Skeleton } from 'antd';
  2. ReactDOM.render(<Skeleton />, mountNode);

Skeleton 骨架屏 - 图2

复杂的组合

更复杂的组合。

  1. import { Skeleton } from 'antd';
  2. ReactDOM.render(<Skeleton avatar paragraph={{ rows: 4 }} />, mountNode);

Skeleton 骨架屏 - 图3

动画效果

显示动画效果。

  1. import { Skeleton } from 'antd';
  2. ReactDOM.render(<Skeleton active />, mountNode);

Skeleton 骨架屏 - 图4

包含子组件

加载占位图包含子组件。

  1. import { Skeleton, Button } from 'antd';
  2. class Demo extends React.Component {
  3. state = {
  4. loading: false,
  5. };
  6. showSkeleton = () => {
  7. this.setState({ loading: true });
  8. setTimeout(() => {
  9. this.setState({ loading: false });
  10. }, 3000);
  11. };
  12. render() {
  13. return (
  14. <div className="article">
  15. <Skeleton loading={this.state.loading}>
  16. <div>
  17. <h4>Ant Design, a design language</h4>
  18. <p>
  19. We supply a series of design principles, practical patterns and high quality design
  20. resources (Sketch and Axure), to help people create their product prototypes
  21. beautifully and efficiently.
  22. </p>
  23. </div>
  24. </Skeleton>
  25. <Button onClick={this.showSkeleton} disabled={this.state.loading}>
  26. Show Skeleton
  27. </Button>
  28. </div>
  29. );
  30. }
  31. }
  32. ReactDOM.render(<Demo />, mountNode);

Skeleton 骨架屏 - 图5

列表

在列表组件中使用加载占位符。

  1. import { Skeleton, Switch, List, Avatar, Icon } from 'antd';
  2. const listData = [];
  3. for (let i = 0; i < 3; i++) {
  4. listData.push({
  5. href: 'http://ant.design',
  6. title: `ant design part ${i}`,
  7. avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
  8. description:
  9. 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  10. content:
  11. 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  12. });
  13. }
  14. const IconText = ({ type, text }) => (
  15. <span>
  16. <Icon type={type} style={{ marginRight: 8 }} />
  17. {text}
  18. </span>
  19. );
  20. class App extends React.Component {
  21. state = {
  22. loading: true,
  23. };
  24. onChange = checked => {
  25. this.setState({ loading: !checked });
  26. };
  27. render() {
  28. const { loading } = this.state;
  29. return (
  30. <div>
  31. <Switch checked={!loading} onChange={this.onChange} />
  32. <List
  33. itemLayout="vertical"
  34. size="large"
  35. dataSource={listData}
  36. renderItem={item => (
  37. <List.Item
  38. key={item.title}
  39. actions={
  40. !loading && [
  41. <IconText type="star-o" text="156" />,
  42. <IconText type="like-o" text="156" />,
  43. <IconText type="message" text="2" />,
  44. ]
  45. }
  46. extra={
  47. !loading && (
  48. <img
  49. width={272}
  50. alt="logo"
  51. src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
  52. />
  53. )
  54. }
  55. >
  56. <Skeleton loading={loading} active avatar>
  57. <List.Item.Meta
  58. avatar={<Avatar src={item.avatar} />}
  59. title={<a href={item.href}>{item.title}</a>}
  60. description={item.description}
  61. />
  62. {item.content}
  63. </Skeleton>
  64. </List.Item>
  65. )}
  66. />
  67. </div>
  68. );
  69. }
  70. }
  71. ReactDOM.render(<App />, mountNode);

API

Skeleton

属性说明类型默认值
active是否展示动画效果booleanfalse
avatar是否显示头像占位图boolean | SkeletonAvatarPropsfalse
loadingtrue 时,显示占位图。反之则直接展示子组件boolean-
paragraph是否显示段落占位图boolean | SkeletonParagraphPropstrue
title是否显示标题占位图boolean | SkeletonTitlePropstrue

SkeletonAvatarProps

属性说明类型默认值
size设置头像占位图的大小number | Enum{ 'large', 'small', 'default' }-
shape指定头像的形状Enum{ 'circle', 'square' }-

SkeletonTitleProps

属性说明类型默认值
width设置标题占位图的宽度number | string-

SkeletonParagraphProps

属性说明类型默认值
rows设置段落占位图的行数number-
width设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度number | string | Array<number | string>-