スケルトンは、実際のコンテンツの代わりに表示されるプレースホルダーです。
import Skeleton from 'primevue/skeleton';
shape、width、height、borderRadius、class などのスタイリングプロパティを使用して、さまざまな形状とサイズを作成できます。
<h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height="2rem" class="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
<h5>Rounded</h5>
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
<h5 class="mt-4">Square</h5>
<Skeleton size="2rem" class="mr-2"></Skeleton>
<Skeleton size="3rem" class="mr-2"></Skeleton>
<Skeleton size="4rem" class="mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>
<h5 class="mt-4">Circle</h5>
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
異なるスケルトンコンポーネントとPrimeFlex CSSユーティリティを使用したサンプルカードの実装。
<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
<div class="flex mb-4">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height=".5rem"></Skeleton>
</div>
</div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="flex justify-between mt-4">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
異なるスケルトンコンポーネントとPrimeFlex CSSユーティリティを使用したサンプルリストの実装。
<div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
<ul class="m-0 p-0 list-none">
<li class="mb-4">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div class="self-center" style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="mb-4">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div class="self-center" style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li class="mb-4">
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div class="self-center" style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
<li>
<div class="flex">
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<div class="self-center" style="flex: 1">
<Skeleton width="100%" class="mb-2"></Skeleton>
<Skeleton width="75%"></Skeleton>
</div>
</div>
</li>
</ul>
</div>
異なるスケルトンコンポーネントとPrimeFlex CSSユーティリティを使用したサンプルデータテーブルの実装。
コード | 名前 | カテゴリ | 数量 |
|---|---|---|---|
<DataTable :value="products">
<Column field="code" header="Code">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="name" header="Name">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="category" header="Category">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
<Column field="quantity" header="Quantity">
<template #body>
<Skeleton></Skeleton>
</template>
</Column>
</DataTable>
スケルトンは、スクリーンリーダーによって無視されるように、aria-hidden を「true」として使用します。有効な属性はルート要素に渡されるため、必要に応じてさらにカスタマイズできます。コンテナ内に複数のスケルトンがグループ化されている場合は、読み込みプロセスを示すために、コンテナ要素で aria-busy を使用することもできます。
コンポーネントにはインタラクティブな要素は含まれていません。