Skip to content

Skeleton

コンテンツ読み込み中のプレースホルダサフェース。Collection は初回の pending 読み込みで自動利用します;独自レイアウトでは Skeleton を直接使います。

バリエーション

vue
<script setup lang="ts">
import { Skeleton } from 'pomikit-ui'
</script>

<template>
  <Skeleton variant="text" :lines="3" />
  <Skeleton variant="rect" width="100%" height="120px" />
  <Skeleton variant="circle" width="40px" height="40px" />
</template>
Propメモ
varianttext | rect | circle
linesテキスト行数(デフォルト 1
width / heightCSS 長さ
animatedやさしいシマー(デフォルト true

モーションは Design Kit の motion トークンに従います。