卡片

使用 QCard 组件来把重要的信息分组展示,这种模式已经成为各种网站和应用程序的主流设计,不仅能把信息展示得清晰条理,而且还很美观,不会让您的页面看上去很死板。

为了在有限的屏幕尺寸上展示足够多的信息,卡片式的设计风格已经成为谷歌,推特等各大公司的首选设计模式。

Qcard 组件很轻巧,它实际上是一个容器元素,您可以使用 QCard 组件来包裹任何元素,使其具有卡片式的设计感。

QCard API

Loading QCard API...

QCardSection API

Loading QCardSection API...

QCardActions API

Loading QCardActions API...

用法

TIP

您可以在卡片中使用排版来创造精美的卡片。

基础




带有操作控件




可以通过 align 属性来自定义操作控件的对齐方式




媒体内容










水平

在下面的示例中,注意一个外层的带 horizontal 属性的 QCardSection 组件包裹了另外的 QCardSection。另外您可以直接把 col-* css 类添加到子 QCardSection 组件的 class 中来控制大小。

如果需要在带有 horizontal 属性的 QCardSections 组件中展示图片,更推荐您使用 QImg 组件而不是原生的 <img> 标签







多样的内容










可展开的

下面的示例可以点击最右边的按钮来展开操作面板