徽章(Badge)

BootstrapVue组件和插件。

徽章通过使用相对字体大小和em单位来缩放以匹配直接父元素的大小。

Example heading New

<div>
  <h2>Example heading <b-badge>New</b-badge></h2>
  <h3>Example heading <b-badge>New</b-badge></h3>
  <h4>Example heading <b-badge>New</b-badge></h4>
  <h5>Example heading <b-badge>New</b-badge></h5>
  <h6>Example heading <b-badge>New</b-badge></h6>
</div>

徽章可以用作链接或按钮的一部分，以提供计数器（或类似的标志）。

<div class="text-center">
  <b-button variant="primary">
    Notifications <b-badge variant="light">4</b-badge>
  </b-button>
</div>

根据使用方式的不同，徽章可能会使屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了有关其用途的视觉提示，但这些用户将仅看到徽章的内容。根据具体情况，这些标记在句子，链接或按钮的末尾可能看起来像是随机附加的单词或数字。

除非上下文是清楚的（例如，在“通知”示例中理解为“4”是通知的数目），否则请考虑在视觉上隐藏的附加文本中包含附加上下文。

<div class="text-center">
  <b-button variant="primary">
    Profile
    <b-badge variant="light">9 <span class="sr-only">unread messages</span></b-badge>
  </b-button>
</div>

上下文差异

通过添加下列任何变量的variant方法来改变的外观 <b-badge>: default, primary, success, warning, info, 和 danger。如果未指定任何变体， default则将使用。

Primary Secondary Success Danger Warning Info Light Dark

<div>
  <b-badge variant="primary">Primary</b-badge>
  <b-badge variant="secondary">Secondary</b-badge>
  <b-badge variant="success">Success</b-badge>
  <b-badge variant="danger">Danger</b-badge>
  <b-badge variant="warning">Warning</b-badge>
  <b-badge variant="info">Info</b-badge>
  <b-badge variant="light">Light</b-badge>
  <b-badge variant="dark">Dark</b-badge>
</div>

向辅助技术传达意义

使用颜色添加含义仅提供视觉指示，而不会传达给辅助技术的用户（例如屏幕阅读器）。确保用颜色表示的信息在内容本身（例如可见文本）中是显而易见的，或者通过替代方式包括在该信息中，例如在.sr-only 类中隐藏的其他文本。

药丸徽章

使用pill方法使徽章更圆（具有更大的边框半径和附加的水平填充）。如果您错过了Bootstrap v3的徽章，该功能将非常有用。

Primary Secondary Success Danger Warning Info Light Dark

<div>
  <b-badge pill variant="primary">Primary</b-badge>
  <b-badge pill variant="secondary">Secondary</b-badge>
  <b-badge pill variant="success">Success</b-badge>
  <b-badge pill variant="danger">Danger</b-badge>
  <b-badge pill variant="warning">Warning</b-badge>
  <b-badge pill variant="info">Info</b-badge>
  <b-badge pill variant="light">Light</b-badge>
  <b-badge pill variant="dark">Dark</b-badge>
</div>

可操作的徽章

通过指定href方法（链接）或to方法（路由器链接），快速为悬停状态和焦点状态提供可操作的徽章：

Primary Secondary Success Danger Warning Info Light Dark

<div>
  <b-badge href="#" variant="primary">Primary</b-badge>
  <b-badge href="#" variant="secondary">Secondary</b-badge>
  <b-badge href="#" variant="success">Success</b-badge>
  <b-badge href="#" variant="danger">Danger</b-badge>
  <b-badge href="#" variant="warning">Warning</b-badge>
  <b-badge href="#" variant="info">Info</b-badge>
  <b-badge href="#" variant="light">Light</b-badge>
  <b-badge href="#" variant="dark">Dark</b-badge>
</div>

请参阅路由器支持参考页以获取特定于路由器链接的方法。

JavaScript行为

组件参考

`<b-badge>`

功能组件

查看资料

<b-badge>物产

物产

属性 (Click to sort Ascending)	类型	默认	描述
`href`	串		表示标准a链接的链接目标URL
`rel`	串		在渲染的链接上设置'rel'属性
`target`	串	`'_self'`	在渲染的链接上设置'target'属性
`active`	布尔型	`false`	设置为“ true”时，使用有效样式将组件置于活动状态
`disabled`	布尔型	`false`	设置为“ true”时，禁用组件的功能并将其置于禁用状态
`to`	字符串或对象		router-link属性：表示链接的目标路由。单击时，to属性的值将在内部传递到router.push（），因此该值可以是字符串或位置描述符对象
`append`	布尔型	`false`	router-link属性：设置附加属性总是将相对路径附加到当前路径
`replace`	布尔型	`false`	router-link属性：设置替换属性将在单击时调用“ router.replace（）”而不是“ router.push（）”，因此导航不会留下历史记录
`event`	字符串或数组	`'click'`	router-link属性：指定触发链接的事件。在大多数情况下，应将其保留为默认值
`active-class`	串		router-link属性：配置在链接处于活动状态时应用的活动CSS类。通常，您将需要将此设置为类名称“ active”
`exact`	布尔型	`false`	router-link属性：默认的活动类匹配行为是包含匹配。设置此道具将强制模式与路线完全匹配
`exact-active-class`	串		router-link属性：配置当链接处于完全匹配状态时应用的活动CSS类。通常，您将需要将此设置为类名称“ active”
`router-tag`	串	`'a'`	router-link属性：指定要呈现的标签，它仍将监听单击事件以进行导航。“ router-tag”转换为最终渲染的路由器链接上的标签prop。通常，您应该使用默认值
`no-prefetch`	布尔型	`false`	nuxt-link属性：为了提高Nuxt.js应用程序的响应速度，当链接将显示在视口中时，Nuxt.js将自动预取代码拆分页面。设置“不预取”将禁用特定链接的此功能
`tag`	串	`'span'`	指定要呈现的HTML标签，而不是默认标签
`variant`	串	`'secondary'`	将Bootstrap主题颜色变体之一应用于组件
`pill`	布尔型	`false`	设置为“ true”时，以药丸样式呈现徽章

<b-badge>支持生成<router-link>或<nuxt-link>组件（如果使用Nuxt.js）。有关路由器链接（或nuxt链接）特定道具的更多详细信息，请参阅路由器支持参考部分。

导入单个组件

可以通过以下命名的导出将单个组件导入到项目中：

零件	命名为出口	导入路径
`<b-badge>`	`BBadge`	`bootstrap-vue`

例：

import { BBadge } from 'bootstrap-vue'
Vue.component('b-badge', BBadge)

导入为Vue.js插件

该插件包括上面列出的所有单个组件。插件还包括任何组件别名。

命名为出口	导入路径
`BadgePlugin`	`bootstrap-vue`

例:

import { BadgePlugin } from 'bootstrap-vue'
Vue.use(BadgePlugin)