卡片(Cards)

Quasar卡片是显示重要内容块的好组件,并且很快成为应用的核心设计模式。 它们是包含和组织信息的好方法,同时也为用户建立了可预测的期望。 这么多内容需要立即显示,而且屏幕空间通常非常小,卡片很快就成为许多公司的首选设计模式,包括Google和Twitter等。

根据需要,Quasar卡片是可以使用的组件集合。 这完全跟创意有关。 将不同的Web组件嵌入到卡片组件中,以创建出色的结果。

安装

编辑 /quasar.conf.js:

framework: {
components: [
'QCard',
'QCardTitle',
'QCardMain',
'QCardMedia',
'QCardSeparator',
'QCardActions'
]
}

基本用法

使用下面的示例熟悉卡片组件。 唯一的要求是QCard需要包装所有其他的。 其他一切都是可选的,只要它们是QCard的直接子项,就可以插入到您的模板中。

以下是QCard组件的Vue属性:

Vue属性| 类型| 说明|
| — | — | — | — |
| square | 布尔| 方的边界,而不是圆的。|
| flat | 布尔| 去除阴影。|
| inline | 布尔| 使其内联。 还设置一个CSS宽度以使用。 查看“更多示例”部分的网格示例。|
| color | 字符串| Quasar调色板中的一种颜色。|
| text-color | 字符串| 覆盖文字的颜色,来自Quasar调色板的一种颜色。|

<!-- 一个基本例子 -->
<q-card>
<q-card-title>
Card Title
</q-card-title>
<q-card-separator />
<q-card-main>
Card Content
</q-card-main>
</q-card>

一个更复杂的例子:

<q-card inline style="width: 500px">
<q-card-media>
<img src="~assets/donuts.png">
</q-card-media>
<q-card-title>
Cafe Basilico
<q-rating slot="subtitle" v-model="stars" :max="5" />
<div slot="right" class="row items-center">
<q-icon name="place" /> 250 ft
</div>
</q-card-title>
<q-card-main>
<p>$・Italian, Cafe</p>
<p class="text-faded">Small plates, salads & sandwiches in an intimate setting.</p>
</q-card-main>
<q-card-separator />
<q-card-actions>
<q-btn flat round dense icon="event" />
<q-btn flat label="5:30PM" />
<q-btn flat label="7:30PM" />
<q-btn flat label="9:00PM" />
<q-btn flat color="primary" label="Reserve" />
</q-card-actions>
</q-card>

卡片标题(QCardTitle)

QCardTitle有三个主要区域(全部是可选的):标题,副标题(“subtitle”槽)和右侧(“right”槽)。

请注意,您也可以通过QCardMedia组件以覆盖图像或视频的方式设置标题和副标题(请参阅QCardMedia部分)。

<q-card-title>
<!--
可选的。 任何没有指定“slot”的地方,
    被认为是主要标题
-->
Title

<!-- 可选的。 添加副标题。 注意slot="subtitle" -->
<span slot="subtitle">Subtitle</span>

<!--
可选的。 在右侧添加一些东西,
    就像一个触发包含菜单弹出框的图标。
    注意slot="right"
-->
<q-icon slot="right" name="more_vert">
<q-popover>
<q-list link class="no-border">
<q-item v-close-overlay>
<q-item-main label="Remove Card" />
</q-item>
<q-item v-close-overlay>
<q-item-main label="Send Feedback" />
</q-item>
<q-item v-close-overlay>
<q-item-main label="Share" />
</q-item>
</q-list>
</q-popover>
</q-icon>
</q-card-title>

卡片主要内容(QCardMain)

QCardMain定义了一个包含主卡内容的区域,如描述、细节或您需要的其他卡片组件用途之外的任何内容。

<q-card-main>
Card main content.
</q-card-main>

<q-card-main>
<p>$・Italian, Cafe</p>
<p class="text-faded">
Small plates, salads & sandwiches in an intimate setting.
</p>
</q-card-main>

卡片操作(QCardActions)

卡片可以附加一些操作(按钮)。

Vue属性 类型 说明
vertical 布尔 垂直堆叠操作元素
align 字符串 ‘start’, ‘center’, ‘end’, ‘around’, ‘between’之一,相对于操作容器的按钮对齐方向
<!-- 水平的操作按钮 -->
<q-card-actions>
<!--
定义你喜欢的按钮,
    这些只是例子
-->
<q-btn flat round dense icon="event" />
<q-btn flat label="5:30PM" />
<q-btn flat label="7:30PM" />
<q-btn flat label="9:00PM" />
<q-btn flat color="primary" label="Reserve" />
</q-card-actions>

<!-- 垂直的操作按钮 -->
<q-card-actions vertical>
<q-btn flat label="Action 1" />
<q-btn flat label="Action 2" />
</q-card-actions>

卡片媒体(QCardMedia)

卡片还可以包含媒体元素:图像、视频(通过QVideo)或视差(通过QParallax)。 这可以通过QCardMedia组件完成,该组件也支持可选的覆盖层(用于诸如标题和/或字幕之类的东西)。

Vue属性 类型 说明
overlay-position 字符串 ‘top’, ‘bottom’ or ‘full’之一,用于设置媒体元素顶部的覆盖层位置。
<!-- 显示图像 -->
<q-card-media>
<img src="~assets/some-image.jpg">
</q-card-media>

<!-- 显示视频(借助QVideo组件) -->
<q-card-media>
<q-video src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0" />
</q-card-media>

<!-- 显示视差(借助QParallax) -->
<q-card-media>
<q-parallax :src="'statics/parallax1.jpg'" :height="150">
<div slot="loading">Loading...</div>
</q-parallax>
</q-card-media>

现在让我们看看我们如何添加覆盖层(overlays)的(通过“overlay”插槽方式):

<q-card-media>
<img src="~assets/mountains.jpg">

<!-- 注意slot="overlay" -->
<q-card-title slot="overlay">
Title
<span slot="subtitle">Subtitle</span>
</q-card-title>
</q-card-media>

<!--
覆盖媒体元素的顶部
  注意overlay-position="top"
-->
<q-card-media overlay-position="top">
<img src="~assets/mountains.jpg">

<!-- Notice the slot="overlay" -->
<q-card-title slot="overlay">
Title
<span slot="subtitle">Subtitle</span>
</q-card-title>
</q-card-media>

<!--
覆盖媒体元素的全部区域
  注意overlay-position="full"
-->
<q-card-media overlay-position="full">
<img src="~assets/mountains.jpg">

<!-- Notice the slot="overlay" -->
<q-card-title slot="overlay">
Title
<span slot="subtitle">Subtitle</span>
</q-card-title>
</q-card-media>

卡内分离器

通过添加QCardSeparator,您可以选择在卡组件之间添加分隔符,基本上它是一条水平细线。

<q-card>
<q-card-title>
...
</q-card-title>

<!-- 分隔符在这里 -->
<q-card-separator />

<q-card-actions>
...
</q-card-actions>
</q-card>

一些更多的例子

卡片着色

使用Quasar调色板中的颜色设置卡片的颜色。

<q-card color="primary">
...
</q-card>

<q-card color="amber-8" text-color="black">
...
</q-card>

卡片上的列表

在您的QCard的根目录下放置一个QList及其QItem,如下所示:

<q-card>
...
<q-list>
<q-item>
<q-item-side>
<q-item-tile color="primary" icon="local bar" />
</q-item-side>
<q-item-main>
<q-item-tile label>Bar XYZ</q-item-tile>
<q-item-tile sublabel>Have a drink.</q-item-tile>
</q-item-main>
</q-item>
<q-item>
<q-item-side>
<q-item-tile color="red" icon="local gas station" />
</q-item-side>
<q-item-main>
<q-item-tile label>Gas Station</q-item-tile>
<q-item-tile sublabel>Fill your gas tank.</q-item-tile>
</q-item-main>
</q-item>
<q-item>
<q-item-side>
<q-item-tile color="amber" icon="local movies" />
</q-item-side>
<q-item-main>
<q-item-tile label>Cinema XYZ</q-item-tile>
<q-item-tile sublabel>Watch a movie.</q-item-tile>
</q-item-main>
</q-item>
</q-list>
...
</q-card>

也有可能为你的卡片创建一个漂亮的头像,包括图片/头像、人名和一些快速的细节。 在这个例子中,我们跳过使用QCardList:

<q-card>
<q-item>
<q-item-side avatar="/statics/boy-avatar.png" />
<q-item-main>
<q-item-tile label>Title</q-item-tile>
<q-item-tile sublabel>Subhead</q-item-tile>
</q-item-main>
</q-item>
</q-card>

制作一张卡片网格

为了制作一张卡片网格,您需要使用QCard组件的inline属性并设置卡片的宽度。

<div>
<!--
In this example every card has a "style" tag with a width.
Consider defining a CSS class instead to ease the template syntax.
在这个例子中,每张卡都有一个拥有宽度的“style”的标签。
    考虑定义一个CSS类来简化模板语法。
-->
<q-card inline style="width: 300px">...</q-card>
<q-card inline style="width: 300px">...</q-card>
<q-card inline style="width: 300px">...</q-card>
...
<q-card inline style="width: 300px">...</q-card>
</div>

卡片与可折叠项

由于可折叠项也是列表项,所以使用QList组件来封装它们是有意义的。 另外,想象一张含有卡片的可折叠卡片。 让我们开始:)

<q-card>
<q-card-title>
Card with Collapsible List
</q-card-title>

<q-card-separator />

<q-list>
<q-collapsible icon="explore" label="First">
<div>
Lorem ipsum dolor sit amet...
</div>
</q-collapsible>

<q-collapsible icon="perm_identity" label="Second">
<div>
Lorem ipsum dolor sit amet...
</div>
</q-collapsible>

<q-collapsible icon="shopping_cart" label="Third">
<div>
Lorem ipsum dolor sit amet...
</div>
</q-collapsible>
</q-list>
</q-card>