Skeleton

Basic usage

<div class="flex flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="flex-shrink-0">
      <CSkeleton />
    </div>
    <div class="flex flex-col gap-2 flex-grow">
      <CSkeleton height="12px" shape="square" />
      <CSkeleton height="12px" shape="square" />
    </div>
  </div>
  <CSkeleton shape="square" borderRadius="0" height="200px" />
  <div class="flex justify-end gap-4">
    <CSkeleton shape="square" width="100px" height="42px" />
    <CSkeleton shape="square" width="100px" height="42px" />
  </div>
</div>
<div class="flex flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="flex-shrink-0">
      <CSkeleton />
    </div>
    <div class="flex flex-col gap-2 flex-grow">
      <CSkeleton height="12px" shape="square" />
      <CSkeleton height="12px" shape="square" />
    </div>
  </div>
  <CSkeleton shape="square" borderRadius="0" height="200px" />
  <div class="flex justify-end gap-4">
    <CSkeleton shape="square" width="100px" height="42px" />
    <CSkeleton shape="square" width="100px" height="42px" />
  </div>
</div>
svelte
Click fold/expand code

CSkeleton Props

  • shape
    EShape
    default: circle

    The shape of skeleton

  • width
    any
    default: undefined
  • height
    any
    default: undefined
  • borderRadius
    any
    default: undefined

CSkeleton Events

No data

CSkeleton Slots

No data

CSkeleton Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55