卡片

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

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

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

QCard API

Loading API...
Please wait...

QCardSection API

Loading API...
Please wait...

QCardActions API

Loading API...
Please wait...

用法

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