卡片
卡片是一个灵活的容器组件。
导入#
import { Card } from 'primereact/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 title="Simple Card">
<p className="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>
</Card>
高级#
可以使用 subTitle、header 和 footer 属性进一步自定义卡片内容。
高级卡片
卡片副标题
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 title="Advanced Card" subTitle="Card subtitle" footer={footer} header={header} className="md:w-25rem">
<p className="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>
</Card>
可访问性#
屏幕阅读器
卡片可以在许多用例中使用，因此没有强制的角色，事实上，如果卡片仅用于演示目的，则可能不需要角色。任何有效属性都会传递到容器元素，因此，如果您需要使用其中之一 地标 角色，如 region，您可以使用 role 属性。
<Card role="region">
Content
</Card>
键盘支持
组件不包含任何交互元素。