Skeleton - 图1

Skeleton React Component

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) are basically “gray box” representations of UI that will be available soon. They are designed to improve perceived performance.

Skeleton React component represents Skeleton component.

Skeleton Components

There are following components included:

  • **SkeletonBlock**
  • **SkeletonText**

Skeleton Properties

PropTypeDefaultDescription
<SkeletonBlock> properties
string
number
stringSkeleton block width
string
number
stringSkeleton block height
tagstringdivSkeleton block tag
<SkeletonText> properties
string
number
stringSkeleton text element width
string
number
stringSkeleton text element height
tagstringspanSkeleton text element tag

Examples

  1. class AppComponent extends React.Component {
  2. constructor() {
  3. super();
  4. this.state = {
  5. loading: false,
  6. effect: null,
  7. };
  8. }
  9. load(effect) {
  10. var self = this;
  11. if (self.state.loading) return;
  12. self.setState({
  13. effect: effect,
  14. loading: true,
  15. });
  16. setTimeout(() => {
  17. self.setState({ loading: false });
  18. }, 3000);
  19. }
  20. render() {
  21. return (
  22. <App>
  23. <View main>
  24. <Page>
  25. <Navbar title="Menu" />
  26. <BlockTitle>Skeleton List</BlockTitle>
  27. <List mediaList className="skeleton-text">
  28. <ListItem
  29. title="Title"
  30. subtitle="Subtitle"
  31. text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum."
  32. >
  33. <SkeletonBlock style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
  34. </ListItem>
  35. <ListItem
  36. title="Title"
  37. subtitle="Subtitle"
  38. text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum."
  39. >
  40. <SkeletonBlock style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
  41. </ListItem>
  42. </List>
  43. <BlockTitle>Skeleton Card</BlockTitle>
  44. <Card
  45. className="skeleton-text"
  46. title="Card Header"
  47. content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit."
  48. footer="Card Footer"
  49. ></Card>
  50. <BlockTitle>Loading Effects</BlockTitle>
  51. <Block strong>
  52. <Row tag="p">
  53. <Button fill small round className="col" onClick={() => this.load('fade')}>Fade</Button>
  54. <Button fill small round className="col" onClick={() => this.load('blink')}>Blink</Button>
  55. <Button fill small round className="col" onClick={() => this.load('pulse')}>Pulse</Button>
  56. </Row>
  57. </Block>
  58. {this.state.loading
  59. ? (
  60. <List mediaList v-if="loading">
  61. {[1,2,3].map(n => (
  62. <ListItem
  63. key={n}
  64. className={`skeleton-text skeleton-effect-${this.state.effect}`}
  65. title="Full Name"
  66. subtitle="Position"
  67. text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis. Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
  68. >
  69. <SkeletonBlock style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
  70. </ListItem>
  71. ))}
  72. </List>
  73. )
  74. : (
  75. <List mediaList>
  76. <ListItem
  77. title="John Doe"
  78. subtitle="CEO"
  79. text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis. Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
  80. >
  81. <img src="https://placeimg.com/80/80/people/1" style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
  82. </ListItem>
  83. <ListItem
  84. title="Jane Doe"
  85. subtitle="Marketing"
  86. text="Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis. Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
  87. >
  88. <img src="https://placeimg.com/80/80/people/2" style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
  89. </ListItem>
  90. <ListItem
  91. title="Kate Johnson"
  92. subtitle="Admin"
  93. text="Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
  94. >
  95. <img src="https://placeimg.com/80/80/people/3" style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
  96. </ListItem>
  97. </List>
  98. )
  99. }
  100. </Page>
  101. </View>
  102. </App>
  103. )
  104. }
  105. }