Skeleton - 图1

Skeleton Svelte 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 Svelte component represents Skeleton component.

Skeleton Components

There are following components included:

  • SkeletonBlock
  • SkeletonText

Skeleton Properties

PropTypeDefaultDescription
<SkeletonBlock> properties
widthstring
number		Skeleton block width
heightstring
number		Skeleton block height
tagstringdivSkeleton block tag. Can be div or span
<SkeletonText> properties
widthstring
number		Skeleton text element width
heightstring
number		Skeleton text element height
tagstringspanSkeleton text element tag. Can be div or span

Examples

  1. <Page>
  2.   <Navbar title="Menu" />
  4.   <BlockTitle>Skeleton List</BlockTitle>
  5.   <List mediaList class="skeleton-text">
  6.     <ListItem
  7.       title="Title"
  8.       subtitle="Subtitle"
  9.       text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum."
  10.     >
  11.       <span slot="media">
  12.         <SkeletonBlock style="width: 40px; height: 40px; border-radius: 50%" />
  13.       </span>
  14.     </ListItem>
  15.     <ListItem
  16.       title="Title"
  17.       subtitle="Subtitle"
  18.       text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum."
  19.     >
  20.       <span slot="media">
  21.         <SkeletonBlock style="width: 40px; height: 40px; border-radius: 50%" />
  22.       </span>
  23.     </ListItem>
  24.   </List>
  26.   <BlockTitle>Skeleton Card</BlockTitle>
  27.   <Card
  28.     class="skeleton-text"
  29.     title="Card Header"
  30.     content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit."
  31.     footer="Card Footer"
  32.   ></Card>
  34.   <BlockTitle>Loading Effects</BlockTitle>
  35.   <Block strong>
  36.     <Row tag="p">
  37.       <Button fill small round class="col" onClick={() => load('fade')}>Fade</Button>
  38.       <Button fill small round class="col" onClick={() => load('blink')}>Blink</Button>
  39.       <Button fill small round class="col" onClick={() => load('pulse')}>Pulse</Button>
  40.     </Row>
  41.   </Block>
  42.   {#if loading}
  43.     <List mediaList v-if="loading">
  44.       {#each [1,2,3] as n, index (index)}
  45.         <ListItem
  46.           class={`skeleton-text skeleton-effect-${effect}`}
  47.           title="Full Name"
  48.           subtitle="Position"
  49.           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."
  50.         >
  51.           <span slot="media">
  52.             <SkeletonBlock style="width: 40px; height: 40px; border-radius: 50%" />
  53.           </span>
  54.         </ListItem>
  55.       {/each}
  56.     </List>
  57.   {:else}
  58.     <List mediaList>
  59.       <ListItem
  60.         title="John Doe"
  61.         subtitle="CEO"
  62.         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."
  63.       >
  64.         <img src="https://placeimg.com/80/80/people/1" style="width: 40px; height: 40px; border-radius: 50%" slot="media" />
  65.       </ListItem>
  66.       <ListItem
  67.         title="Jane Doe"
  68.         subtitle="Marketing"
  69.         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."
  70.       >
  71.         <img src="https://placeimg.com/80/80/people/2" style="width: 40px; height: 40px; border-radius: 50%" slot="media" />
  72.       </ListItem>
  73.       <ListItem
  74.         title="Kate Johnson"
  75.         subtitle="Admin"
  76.         text="Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
  77.       >
  78.         <img src="https://placeimg.com/80/80/people/3" style="width: 40px; height: 40px; border-radius: 50%" slot="media" />
  79.       </ListItem>
  80.     </List>
  81.   {/if}
  82. </Page>
  85. <script>
  86.   import {Page, Navbar, BlockTitle, List, ListItem, SkeletonBlock, Card, Block, Row, Button} from 'framework7-svelte';
  88.   let loading = false;
  89.   let effect = null;
  91.   function load(newEffect) {
  92.     if (loading) return;
  94.     effect = newEffect;
  95.     loading = true;
  96.     setTimeout(() => {
  97.       loading = false;
  98.     }, 3000);
  99.   }
  100. </script>

← Sheet Modal

Smart Select →