徽标
QBadge（徽标）组件用于创建一个小徽标来添加一些引人注目的信息，例如经常有人把他放在头像组件上来显示有几条新消息。
QBadge API
QBadge API
props
9
slots
1
content
4
style
5
floating
: Boolean
说明
控制 QBadge 是否浮动到相对定位的父元素的右上方
multi-line
: Boolean
说明
内容可以换行到多行
label
: String | Number
说明
使用字符串作为 QBadge 的内容。如果指定，则覆盖默认插槽
align
: String
说明
设置 vertical-align CSS 属性
用法
基础用法
Template
<template>
<div class="q-pa-md q-gutter-md">
<q-badge color="blue">
#4D96F2
</q-badge>
<q-badge color="orange" text-color="black" label="2" />
<q-badge color="purple">
<q-icon name="bluetooth" color="white" />
</q-badge>
<q-badge color="red">
12 <q-icon name="warning" color="white" class="q-ml-xs" />
</q-badge>
<div class="text-h6">
Badge <q-badge color="primary">v1.0.0+</q-badge>
</div>
<div>
Feature <q-badge color="primary">v1.0.0+</q-badge>
</div>
<q-item clickable v-ripple class="bg-grey-2">
<q-item-section avatar>
<q-avatar rounded>
<img src="https://cdn.quasar.dev/img/chaosmonkey.png">
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label>
Ganglia
</q-item-label>
<q-item-label caption>
<q-badge color="yellow-6" text-color="black">
3
<q-icon
name="warning"
size="14px"
class="q-ml-xs"
/>
</q-badge>
</q-item-label>
</q-item-section>
<q-item-section side>
<span>2 min ago</span>
</q-item-section>
</q-item>
</div>
</template>Copied to clipboard
#4D96F2
2
bluetooth
12 warning
Badge
v1.0.0+
Feature
v1.0.0+
Ganglia
3 warning
2 min ago
对齐方式
Template
<template>
<div class="q-pa-md q-gutter-sm">
<div class="text-h4">
Title
<q-badge align="top">cli v1.0.0</q-badge>
</div>
<q-separator />
<div class="text-h4">
Title
<q-badge align="middle">app v1.0.0</q-badge>
</div>
<q-separator />
<div class="text-h4">
Title
<q-badge align="bottom">docs v1.0.0</q-badge>
</div>
</div>
</template>Copied to clipboard
Title
cli v1.0.0
Title
app v1.0.0
Title
docs v1.0.0
浮动
Template
<template>
<div class="q-pa-md q-gutter-sm">
<q-btn push color="white" text-color="primary" label="Unread Mails">
<q-badge color="orange" floating>22</q-badge>
</q-btn>
<q-btn dense color="purple" round icon="email" class="q-ml-md">
<q-badge color="red" floating>4</q-badge>
</q-btn>
</div>
</template>Copied to clipboard
透明度
Template
<template>
<div class="q-pa-md q-gutter-md">
<q-btn color="teal" size="sm" label="Unread Mails">
<q-badge color="orange" floating transparent>
∞
</q-badge>
</q-btn>
<q-btn dense round flat icon="email">
<q-badge color="red" floating transparent>
4
</q-badge>
</q-btn>
<div class="text-h4">
Title
<q-badge transparent align="middle" color="orange">
app v3.0.0
</q-badge>
</div>
</div>
</template>Copied to clipboard
Title
app v3.0.0
轮廓样式
Template
<template>
<div class="q-pa-md q-gutter-md">
<q-badge outline color="primary" label="Outline" />
<q-badge outline color="orange" label="Outline" />
<q-badge outline color="secondary" label="Outline" />
<div class="text-h4">
Text
<q-badge outline align="middle" color="teal">
v2.0.0
</q-badge>
</div>
</div>
</template>Copied to clipboard
Outline
Outline
Outline
Text
v2.0.0
圆形的
Template
<template>
<div class="q-pa-md q-gutter-md">
<q-badge rounded color="red" label="1" />
<q-badge rounded color="primary" label="999+" />
<q-badge rounded color="orange" label="Round" />
</div>
</template>Copied to clipboard
1
999+
Round
指示器
Template
<template>
<div class="q-pa-md q-gutter-md">
<q-badge rounded color="yellow" />
<q-badge rounded color="green" />
<q-badge rounded color="red" />
<div class="q-gutter-md q-ml-none">
<q-btn round icon="notifications">
<q-badge floating color="red" rounded />
</q-btn>
<q-btn color="blue">
Notifications
<q-badge color="red" rounded floating />
</q-btn>
</div>
<div>
<q-badge color="blue" rounded class="q-mr-sm" />Status
</div>
</div>
</template>Copied to clipboard
Status
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。