Quasar
卡片(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 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> |
卡片主要内容（QCardMain）
QCardMain定义了一个包含主卡内容的区域，如描述、细节或您需要的其他卡片组件用途之外的任何内容。
<q-card-main> |
卡片操作（QCardActions）
卡片可以附加一些操作（按钮）。
| Vue属性 | 类型 | 说明 |
|---|---|---|
vertical |
布尔 | 垂直堆叠操作元素 |
align |
字符串 | ‘start’, ‘center’, ‘end’, ‘around’, ‘between’之一，相对于操作容器的按钮对齐方向 |
<!-- 水平的操作按钮 --> |
卡片媒体（QCardMedia）
卡片还可以包含媒体元素：图像、视频（通过QVideo）或视差（通过QParallax）。 这可以通过QCardMedia组件完成，该组件也支持可选的覆盖层（用于诸如标题和/或字幕之类的东西）。
| Vue属性 | 类型 | 说明 |
|---|---|---|
overlay-position |
字符串 | ‘top’, ‘bottom’ or ‘full’之一，用于设置媒体元素顶部的覆盖层位置。 |
<!-- 显示图像 --> |
现在让我们看看我们如何添加覆盖层(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> |
一些更多的例子
卡片着色
使用Quasar调色板中的颜色设置卡片的颜色。
<q-card color="primary"> |
卡片上的列表
在您的QCard的根目录下放置一个QList及其QItem，如下所示：
<q-card> |
也有可能为你的卡片创建一个漂亮的头像，包括图片/头像、人名和一些快速的细节。 在这个例子中，我们跳过使用QCardList：
<q-card> |
制作一张卡片网格
为了制作一张卡片网格，您需要使用QCard组件的inline属性并设置卡片的宽度。
<div> |
卡片与可折叠项
由于可折叠项也是列表项，所以使用QList组件来封装它们是有意义的。 另外，想象一张含有卡片的可折叠卡片。 让我们开始:)
<q-card> |