BootstrapVue Badge 徽章

Badge徽章基础用法

BootstrapVue Badge徽章可以用在标签、计数、需要重点提示的内容,文字大小和父元素大小一样。

例子

<template>
  <div>
  <h1>标题示列 <b-badge variant="primary">New</b-badge></h1>
  <h2>标题示列 <b-badge variant="secondary">New</b-badge></h2>
  <h3>标题示列 <b-badge variant="success">New</b-badge></h3>
  <h4>标题示列 <b-badge variant="danger">New</b-badge></h4>
  <h5>标题示列 <b-badge variant="warning">New</b-badge></h5>
  <h6>标题示列 <b-badge variant="info">New</b-badge></h6>
  </div>
</template>

Badge徽章融入其他组件

Badge徽章可以作为按钮或链接的一部分

例子

<b-button variant="primary">
   新的消息 <b-badge variant="light">4</b-badge>
</b-button>

variant属性设置主题变量

例子

<template>
  <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="dark">Dark</b-badge>
  <b-badge variant="light">Light</b-badge>
  <b-badge variant="warning">Warning</b-badge>
  <b-badge variant="info">Info</b-badge>
  </div>
</template>

Pill badge胶囊徽章

Pill badges胶囊徽章,有更圆润的角和更大的内间距

例子

<template>
  <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="dark">Dark</b-badge>
  <b-badge pill variant="light">Light</b-badge>
  <b-badge pill variant="warning">Warning</b-badge>
  <b-badge pill variant="info">Info</b-badge>
  </div>
</template>

Actionable badge可操作徽章

可以设置href、to属性将badge变成可操作徽章

例子

<template>
  <div>
  <b-badge href="#" variant="primary">Primary</b-badge>
  <b-badge href="http://www.itxst.com" variant="secondary">Secondary</b-badge>
  <b-badge href="http://www.itxst.com" target="_blank" variant="success">Success</b-badge>
  <b-badge to="router-link" variant="danger">Danger</b-badge>
  <b-badge to="router-link" target="_blank" variant="dark">Dark</b-badge>
  <b-badge to="router-link" :append="true" variant="light">Light</b-badge>
  <b-badge to="router-link" :replace="true" variant="warning">Warning</b-badge>
  <b-badge to="#" variant="info">Info</b-badge>
  </div>
</template>

属性列表

属性名称类型说明
tagString渲染后的标签默认span
variantString主题primary, success, warning, info, and danger
pillBoolean是否显示胶囊状默认false
hrefString将组件渲染为链接,如href="http://www.itxst.com"
relString将组件渲染为链接时 a标签的rel属性
targetString将组件渲染为链接时 a标签的target属性
disabledBoolean是否禁用,默认为false
toString or Objectvue路由相关,<router-link> 的to属性
appendBooleanvue路由相关,<router-link> 的append属性
replaceBooleanvue路由相关,<router-link> 的replace属性
active-classStringvue路由相关,当前路径的样式
exactBoolean<router-link> prop: The default active class matching
behavior is inclusive match. Setting this prop forces the
mode to exactly match the route
exact-active-classString<router-link> prop: Configure the active CSS class applied
when the link is active with exact match. Typically you will
want to set this to class name 'active'
prefetchBoolean<nuxt-link> prop: To improve the responsiveness of your
Nuxt.js applications, when the link will be displayed within
the viewport, Nuxt.js will automatically prefetch the code
splitted page. Setting 'prefetch' to 'true' or 'false' will
overwrite the default value of 'router.prefetchLinks'
no-prefetchBoolean<nuxt-link> prop: To improve the responsiveness
of your Nuxt.js applications, when the link will be displayed
within the viewport, Nuxt.js will automatically prefetch
the code splitted page. Setting 'no-prefetch' will disabled
this feature for the specific link
router-component-nameString<b-link> prop: BootstrapVue auto detects between
`<router-link>` and `<nuxt-link>`. In cases where you
want to use a 3rd party link component based on
`<router-link>`, set this prop to the component name
. e.g. set it to 'g-link' if you are using Gridsome
(note only `<router-link>` specific props are passed to
the component)
aria-labelString无障碍阅读的内容

单独导入Badge徽章组件

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

Badge注册为Vue.js插件

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