Skeleton

スケルトンは、実際のコンテンツの代わりに表示するプレースホルダーです。

インポート#


import { Skeleton } from 'primereact/skeleton';

形状#

shape、width、height、borderRadius、classNameなどのスタイリングプロパティを使用して、さまざまな形状とサイズを作成できます。

長方形

丸形

正方形

円


<h5>Rectangle</h5>
<Skeleton className="mb-2"></Skeleton>
<Skeleton width="10rem" className="mb-2"></Skeleton>
<Skeleton width="5rem" className="mb-2"></Skeleton>
<Skeleton height="2rem" className="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>

<h5>Rounded</h5>
<Skeleton className="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" className="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" className="mb-2"></Skeleton>
<Skeleton height="2rem" className="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>

<h5 className="mt-3">Square</h5>
<Skeleton size="2rem" className="mr-2"></Skeleton>
<Skeleton size="3rem" className="mr-2"></Skeleton>
<Skeleton size="4rem" className="mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>

<h5 className="mt-3">Circle</h5>
<Skeleton shape="circle" size="2rem" className="mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" className="mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>

カード#

さまざまなスケルトンコンポーネントとPrimeFlex CSSユーティリティを使用したサンプルカードの実装。


<div className="border-round border-1 surface-border p-4 surface-card">
    <div className="flex mb-3">
        <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
        <div>
            <Skeleton width="10rem" className="mb-2"></Skeleton>
            <Skeleton width="5rem" className="mb-2"></Skeleton>
            <Skeleton height=".5rem"></Skeleton>
        </div>
    </div>
    <Skeleton width="100%" height="150px"></Skeleton>
    <div className="flex justify-content-between mt-3">
        <Skeleton width="4rem" height="2rem"></Skeleton>
        <Skeleton width="4rem" height="2rem"></Skeleton>
    </div>
</div>

リスト#

さまざまなスケルトンコンポーネントとPrimeFlex CSSユーティリティを使用したサンプルリストの実装。


<div className="border-round border-1 surface-border p-4">
    <ul className="m-0 p-0 list-none">
        <li className="mb-3">
            <div className="flex">
                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
                <div style={{ flex: '1' }}>
                    <Skeleton width="100%" className="mb-2"></Skeleton>
                    <Skeleton width="75%"></Skeleton>
                </div>
            </div>
        </li>
        <li className="mb-3">
            <div className="flex">
                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
                <div style={{ flex: '1' }}>
                    <Skeleton width="100%" className="mb-2"></Skeleton>
                    <Skeleton width="75%"></Skeleton>
                </div>
            </div>
        </li>
        <li className="mb-3">
            <div className="flex">
                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
                <div style={{ flex: '1' }}>
                    <Skeleton width="100%" className="mb-2"></Skeleton>
                    <Skeleton width="75%"></Skeleton>
                </div>
            </div>
        </li>
        <li>
            <div className="flex">
                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
                <div style={{ flex: '1' }}>
                    <Skeleton width="100%" className="mb-2"></Skeleton>
                    <Skeleton width="75%"></Skeleton>
                </div>
            </div>
        </li>
    </ul>
</div>

DataTable#

さまざまなスケルトンコンポーネントとPrimeFlex CSSユーティリティを使用したサンプルDataTableの実装。

コード	名前	カテゴリ	数量


<DataTable value={items} className="p-datatable-striped">
    <Column field="code" header="Code" style={{ width: '25%' }} body={<Skeleton />}></Column>
    <Column field="name" header="Name" style={{ width: '25%' }} body={<Skeleton />}></Column>
    <Column field="category" header="Category" style={{ width: '25%' }} body={<Skeleton />}></Column>
    <Column field="quantity" header="Quantity" style={{ width: '25%' }} body={<Skeleton />}></Column>
</DataTable>

アクセシビリティ#

スクリーンリーダー

スケルトンは、スクリーンリーダーによって無視されるようにaria-hiddenを "true"として使用します。有効な属性はルート要素に渡されるため、必要に応じてさらにカスタマイズできます。複数のスケルトンがコンテナ内にグループ化されている場合は、コンテナ要素でaria-busyを使用して、読み込みプロセスを示すこともできます。

キーボードサポート

コンポーネントには、インタラクティブな要素は含まれていません。