Card

Cardは柔軟なコンテナコンポーネントです。

インポート #


import Card from 'primevue/card';

基本 #

シンプルなCardは、title プロパティと、子要素としてのコンテンツで作成します。

シンプルなCard

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!


<Card>
    <template #title>Simple Card</template>
    <template #content>
        <p class="m-0">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
            quas!
        </p>
    </template>
</Card>

高度 #

Cardは、コンテンツを配置するための名前付きテンプレートとして header、title、subtitle、content、footer を提供します。

高度なCard

Cardのサブタイトル


<Card style="width: 25rem; overflow: hidden">
    <template #header>
        <img alt="user header" src="/images/usercard.png" />
    </template>
    <template #title>Advanced Card</template>
    <template #subtitle>Card subtitle</template>
    <template #content>
        <p class="m-0">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
            quas!
        </p>
    </template>
    <template #footer>
        <div class="flex gap-4 mt-1">
            <Button label="Cancel" severity="secondary" outlined class="w-full" />
            <Button label="Save" class="w-full" />
        </div>
    </template>
</Card>

アクセシビリティ #

スクリーンリーダー

Cardは多くのユースケースで利用できるため、ロールは強制されません。実際、Cardがプレゼンテーション目的のみに使用される場合は、ロールは必要ない場合があります。有効な属性はコンテナ要素に渡されるため、region のようなランドマークロールのいずれかを使用する必要がある場合は、role プロパティを使用できます。


<Card role="region">
    Content
</Card>

キーボードサポート

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