卡片

QCard组件是显示重要分组内容的好方法。 这种模式正在迅速成为应用、网站预览和电子邮件内容的核心设计模式。 它通过包含和组织信息来帮助观看者,同时还设置可预测的期望。

卡片具有一次可显示的大量内容,而屏幕尺寸通常很少,因此,卡片已迅速成为许多公司(包括Google和Twitter之类)的首选设计模式。

QCard组件特意是轻巧的,并且实质上是一个包含元素,该元素能够“容纳”任何其他合适的组件。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

TIP

您可以使用卡片中的字体来制作精美的卡片。

基础

Basic cards

带有操作的卡片

Cards with actions

以下是一些可通过align属性用于操作的自定义对齐方式:

Aligning actions

媒体内容

Cards with media content
Card with video
Card with parallax

水平

在下面的示例中,请注意带有horizontal属性的QCardSection,该属性包装了其他QCardSections。 还要注意,您可以在水平QCardSection的子级上直接使用col-*类来控制大小。

在处理水平QCardSections时,建议您使用QImg组件而不是原生的<img>

Basic horizontal
More involved examples

各种内容

Various content
Table
Tabs

可展开的

在下面的示例中,单击右下角的圆形按钮以查看展开的操作。

Expandable

QCard API

Loading API...
Please wait...

QCardSection API

Loading API...
Please wait...

QCardActions API

Loading API...
Please wait...