碎片(Chip)

Chip组件基本上是一个简单的UI块实体，以紧凑的方式表示更高级的底层数据，如联系人。

碎片可以包含实体，如头像、文本或图标，也可以有一个指针。 经过配置，它们也可以被关闭或移除。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QChip']
}

基本用法

一些基本的例子：

<!-- 图标在左侧 -->
<q-chip icon="alarm" color="primary">
  q-chip
</q-chip>

<!-- 图标在右侧 -->
<q-chip icon-right="alarm" color="primary">
  q-chip
</q-chip>

<!-- 头像在左侧 -->
<q-chip avatar="/statics/some.png" color="primary">
  q-chip
</q-chip>

<!-- 浮动碎片，应用于按钮 (v0.15.7+) -->
<q-btn round dense color="dark" icon="announcement">
  <q-chip floating color="red">1</q-chip>
</q-btn>

Vue属性

有许多可用的属性：

Vue属性 类型 说明
floating 布尔 允许碎片浮在其他元素上。
tag 布尔 使其成为“tag”类型。
detail 布尔 突出显示右侧的区域（图标或头像），如果有的话。
icon 字符串 左侧的图标。
icon-right 字符串 右侧的图标。
avatar 字符串 左侧指向静态文件夹的图像URL。
small 布尔 减小碎片的尺寸。使其紧凑。
dense 布尔 （Quasar v0.15.7 +）使碎片变小，填充最少。 使用此属性或small属性，但不是两者。
square 布尔 显示成直角。圆角是默认的。
pointing 字符串 向碎片添加一个箭头，指向 up、 right、 down 或者left。
color 字符串 碎片的颜色。
text-color 字符串 覆盖碎片的文本颜色。
closable 布尔 在碎片右侧添加一个关闭按钮，单击该按钮时将发出“@hide”事件。

Vue事件

Vue属性 说明
@hide 关闭按钮已被点击/轻按。
@focus 被聚焦。
@click 在关闭按钮之外点击/轻按。

当使用closable属性时，关闭按钮将显示在右侧。当点击/轻按按钮时，@hide事件将被触发。这不会自行移除碎片。你将不得不自己处理它。

这两个事件独立触发，但不能同时触发，具体取决于用户点击/轻按的位置（在关闭按钮或碎片内的任何其他位置）。

更多示例

您也可以添加隐藏碎片的功能。

<q-chip closable color="red">
  Joe
</q-chip>

您也可以使用碎片来标记按钮。

<q-btn color="light" label="Inbox">
  <q-chip floating color="primary">22</q-chip>
</q-btn>

或者标记你想要的任何东西，只要容器有position：relative（提示：使用relative-position Quasar CSS helper class）：

<div class="relative-position">
  ....content...
  <q-chip floating color="primary">22</q-chip>
</div>

您也可以使用碎片作为指向标签。

<q-chip pointing="up" color="primary">
  Pointing Up
</q-chip>

您可以创建高级标签碎片，使用头像/图像和可关闭的按钮来删除碎片。

<q-chip closable avatar="statics/some.png" color="red">
  Joe
</q-chip>

您也可以创建看起来像标签的碎片。

<q-chip tag color="secondary" icon-right="mail">
  New
</q-chip>

该碎片使用detail属性突出显示图标。

<q-chip tag color="secondary" detail icon="mail">
  10 emails
</q-chip>

再举一个例子, 我们在碎片上添加阴影：

<q-chip class="shadow-1" square color="primary">10k</q-chip>

警报栏 聊天