QCard 组件非常适合用来展示重要的分组内容。这种设计模式正在迅速成为应用、网站预览和邮件内容的核心设计范式。它帮助用户整理和组织信息,同时建立可预期的视觉层次。
在需要同时展示大量内容而屏幕空间又十分有限的情况下,卡片已经成为包括 Google 和 Twitter 在内的众多公司首选的设计模式。
QCard 组件设计上非常轻量,本质上是一个容器元素,能够承载任何适合的其他组件。
用法
TIP
您可以利用卡片内的排版样式来创建精美的卡片。
基础用法
带操作按钮
下面展示了一些可以通过 align 属性设置的自定义对齐方式:
媒体内容
水平布局
在下面的示例中,请注意设置了 horizontal 属性的 QCardSection,它包裹了其他 QCardSection。另外,您可以直接在水平 QCardSection 的子元素上使用 col-* 类来控制尺寸。
在处理水平 QCardSection 时,建议使用 QImg 组件而不是原生的 <img> 标签。
多样内容
可展开
在下面的示例中,点击右下角的圆形按钮可以看到展开效果。
Accessibility v2.25+
QCard and its sections are semantic-free containers by design — no roles, no ARIA. Use the tag prop on QCard and QCardSection to build real document structure (article, section) and place proper heading elements inside, so screen reader users can navigate the card’s content like any other part of the page.