Card

卡片是一個靈活的容器組件。

導入 #


import Card from 'primevue/card';

基本 #

使用title屬性以及子項內容來建立一個簡單的卡片。

簡單卡片

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>

進階 #

卡片提供header、title、subtitle、content和footer作為具名範本來放置內容。

進階卡片

卡片副標題


<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>

無障礙 #

螢幕閱讀器

卡片可以用於許多用例，因此不強制執行角色，事實上，如果卡片僅用於演示目的，則可能不需要角色。任何有效的屬性都會傳遞到容器元素，因此如果您需要使用諸如region等地標角色，則可以使用role屬性。


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

鍵盤支援

組件不包含任何互動元素。