卡片

卡片是一个灵活的容器组件。

导入 #


import Card from 'primevue/card';

基本 #

一个简单的卡片可以通过 title 属性以及作为子元素的 content 创建。

简单卡片

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>

键盘支持

组件不包含任何交互元素。