为什么捐赠
API 浏览器
联系站长
卡片

QCard 组件非常适合用来展示重要的分组内容。这种设计模式正在迅速成为应用、网站预览和邮件内容的核心设计范式。它帮助用户整理和组织信息,同时建立可预期的视觉层次。

在需要同时展示大量内容而屏幕空间又十分有限的情况下,卡片已经成为包括 Google 和 Twitter 在内的众多公司首选的设计模式。

QCard 组件设计上非常轻量,本质上是一个容器元素,能够承载任何适合的其他组件。

正在加载 QCard API...
正在加载 QCardSection API...
正在加载 QCardActions API...

用法

TIP

您可以利用卡片内的排版样式来创建精美的卡片。

基础用法

基础卡片



带操作按钮

带操作按钮的卡片



下面展示了一些可以通过 align 属性设置的自定义对齐方式:

操作按钮对齐



媒体内容

带媒体内容的卡片



带视频的卡片



带视差效果的卡片



水平布局

在下面的示例中,请注意设置了 horizontal 属性的 QCardSection,它包裹了其他 QCardSection。另外,您可以直接在水平 QCardSection 的子元素上使用 col-* 类来控制尺寸。

在处理水平 QCardSection 时,建议使用 QImg 组件而不是原生的 <img> 标签。

基础水平布局



更复杂的示例



多样内容

多样内容



表格



选项卡



可展开

在下面的示例中,点击右下角的圆形按钮可以看到展开效果。

可展开