提交 issue修改本页

Badge

一个对正文进行补充的小标签。

总览

nly-badge 组件在一般情况下，大小由父元素或者以上的元素决定的。

<h1>
  <nly-badge variant="info">info</nly-badge>
</h1>
<h2>
  <nly-badge variant="info">info</nly-badge>
</h2>
<h3>
  <nly-badge variant="info">info</nly-badge>
</h3>
<h4>
  <nly-badge variant="info">info</nly-badge>
</h4>

<!-- 总览.name -->
<!-- nly-badge.vue -->

size

nly-badge 提供了一个设置 badge 大小的 props size

请注意这时候可能会由于与文本内容或者同级元素的 font-size 和 line-height 不同而导致并不会对齐显示

<nly-badge bg-variant="primary" size="xs">
  xs
</nly-badge>

<nly-badge bg-variant="primary" size="sm">
  sm
</nly-badge>

<nly-badge bg-variant="primary" size="md">
  md
</nly-badge>

<nly-badge bg-variant="primary" size="lg">
  lg
</nly-badge>

<nly-badge bg-variant="primary" size="xl">
  xl
</nly-badge>

<!-- size.name -->
<!-- nly-badge.vue -->

pill

默认 badge 是小圆角形，设置 pill 之后，变成大圆角

<nly-badge bg-variant="primary" pill size="xs">
  xs
</nly-badge>

<nly-badge bg-variant="primary" pill size="sm">
  sm
</nly-badge>

<nly-badge bg-variant="primary" pill size="md">
  md
</nly-badge>

<nly-badge bg-variant="primary" pill size="lg">
  lg
</nly-badge>

<nly-badge bg-variant="primary" pill size="xl">
  xl
</nly-badge>

<!-- pill.name -->
<!-- nly-badge.vue -->

tag

可以给 badge 设置 tag 标签。

<nly-badge bg-variant="primary" tag="a">
  a
</nly-badge>

<nly-badge bg-variant="primary" tag="div">
  div
</nly-badge>

<nly-badge bg-variant="primary" tag="button" badge-class="btn">
  button
</nly-badge>

<!-- tag.name -->
<!-- nly-badge.vue -->

variant

badge-* 类颜色，默认无颜色， badge-* 类支持外边框， 可以设置 prop outline 类渲染外边框， prop dashed 渲染虚线外边框

默认颜色

<nly-badge variant="primary">
  primary
</nly-badge>

<nly-badge variant="secondary">
  secondary
</nly-badge>

<nly-badge variant="success">
  success
</nly-badge>

<nly-badge variant="info">
  info
</nly-badge>

<nly-badge variant="warning">
  warning
</nly-badge>

<nly-badge variant="danger">
  danger
</nly-badge>

<nly-badge variant="dark">
  dark
</nly-badge>

<nly-badge variant="light">
  light
</nly-badge>

<!-- variant.name -->
<!-- nly-badge.vue -->

outline

设置 prop outline 为实线边框式样

<nly-badge variant="primary" outline>
  primary
</nly-badge>

<nly-badge variant="secondary" outline>
  secondary
</nly-badge>

<nly-badge variant="success" outline>
  success
</nly-badge>

<nly-badge variant="info" outline>
  info
</nly-badge>

<nly-badge variant="warning" outline>
  warning
</nly-badge>

<nly-badge variant="danger" outline>
  danger
</nly-badge>

<nly-badge variant="dark" outline>
  dark
</nly-badge>

<nly-badge variant="light" outline>
  light
</nly-badge>

<!-- variant.name -->
<!-- nly-badge.vue -->

dashed

在设置 outline 为 true 的情况下，可以设置 dashed 为 true 来渲染成虚线边框

<nly-badge variant="primary" outline dashed pill>
  primary
</nly-badge>

<nly-badge variant="secondary" outline dashed>
  secondary
</nly-badge>

<nly-badge variant="success" outline dashed>
  success
</nly-badge>

<nly-badge variant="info" outline dashed>
  info
</nly-badge>

<nly-badge variant="warning" outline dashed>
  warning
</nly-badge>

<nly-badge variant="danger" outline dashed>
  danger
</nly-badge>

<nly-badge variant="dark" outline dashed>
  dark
</nly-badge>

<nly-badge variant="light" outline dashed>
  light
</nly-badge>

<!-- variant.name -->
<!-- nly-badge.vue -->

bg-variant

bg-* 类背景色

<nly-badge bg-variant="light">
  light
</nly-badge>

<nly-badge bg-variant="dark">
  dark
</nly-badge>

<nly-badge bg-variant="primary">
  primary
</nly-badge>

<nly-badge bg-variant="secondary">
  secondary
</nly-badge>

<nly-badge bg-variant="success">
  success
</nly-badge>

<nly-badge bg-variant="info">
  info
</nly-badge>

<nly-badge bg-variant="warning">
  warning
</nly-badge>

<nly-badge bg-variant="danger">
  danger
</nly-badge>

<nly-badge bg-variant="lightblue">
  lightblue
</nly-badge>

<nly-badge bg-variant="navy">
  navy
</nly-badge>

<nly-badge bg-variant="olive">
  olive
</nly-badge>

<nly-badge bg-variant="lime">
  lime
</nly-badge>

<nly-badge bg-variant="fuchsia">
  fuchsia
</nly-badge>

<nly-badge bg-variant="maroon">
  maroon
</nly-badge>

<nly-badge bg-variant="blue">
  blue
</nly-badge>

<nly-badge bg-variant="indigo">
  indigo
</nly-badge>

<nly-badge bg-variant="purple">
  purple
</nly-badge>

<nly-badge bg-variant="pink">
  pink
</nly-badge>

<nly-badge bg-variant="red">
  red
</nly-badge>

<nly-badge bg-variant="orange">
  orange
</nly-badge>

<nly-badge bg-variant="yellow">
  yellow
</nly-badge>

<nly-badge bg-variant="green">
  green
</nly-badge>

<nly-badge bg-variant="teal">
  teal
</nly-badge>

<nly-badge bg-variant="cyan">
  cyan
</nly-badge>

<nly-badge bg-variant="white">
  white
</nly-badge>

<nly-badge bg-variant="gray">
  gray
</nly-badge>

<nly-badge bg-variant="graydark">
  graydark
</nly-badge>

<!-- bg-variant.name -->
<!-- nly-badge.vue -->

bg-gradient-variant

bg-gradient-* 渐变色背景色

<nly-badge size="xl" bg-gradient-variant="light">
  light
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="dark">
  dark
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="primary">
  primary
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="secondary">
  secondary
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="success">
  success
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="info">
  info
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="warning">
  warning
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="danger">
  danger
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="lightblue">
  lightblue
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="navy">
  navy
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="olive">
  olive
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="lime">
  lime
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="fuchsia">
  fuchsia
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="maroon">
  maroon
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="blue">
  blue
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="indigo">
  indigo
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="purple">
  purple
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="pink">
  pink
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="red">
  red
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="orange">
  orange
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="yellow">
  yellow
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="green">
  green
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="teal">
  teal
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="cyan">
  cyan
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="white">
  white
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="gray">
  gray
</nly-badge>

<nly-badge size="xl" bg-gradient-variant="graydark">
  graydark
</nly-badge>

<!-- bg-gradient-variant.name -->
<!-- nly-badge.vue -->

组件参数

查看源码

<nly-badge>

函数式组件（Functional component）

props 参数

props类型默认值描述
size
设置 		String大小， 大小， 可选 xs， sm， md， lg， xl， 会强制覆盖父元素以上设置的大小
variant
Stringbadge 类颜色. 可选 dark， light， primary， secondary， success， info， warning， danger， light， dark
bg-variant
String背景色， 可选背景色， 默认无背景. 可选 primary， secondary， success， info， warning， danger， light， dark， lightblue， navy， olive， lime， fuchsia， maroon， blue， indigo， purple， pink， red， orange， yellow， green， teal， cyan， white， gray， graydark， 可能会覆盖 variant props
bg-gradient-variant
String渐变背景色， 默认无背景. 可选 primary， secondary， success， info， warning， danger， light， dark， lightblue， navy， olive， lime， fuchsia， maroon， blue， indigo， purple， pink， red， orange， yellow， green， teal， cyan， white， gray， graydark， 会覆盖 variant props
badge-class
String自定义 css 式样，如果需要放在 navbar 中，可以传入 navbar-badge，这样会让 badge 变成右上角小图标，在一般情况下不会挡住 navbar-item
tag
String'span'标签，默认span
pill
Booleanfalse形状，默认小圆角，设置为 true，大圆角型
dashed
v0.7.4+ 		Booleanfalse设置外边框为虚线式样
outline
v0.7.4+ 		Booleanfalse设置为 true 为外边框式样， 默认实线，可以设置 prop dashed 调整为虚线。只支持颜色为 `variant` 设置的

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-badge>NlyBadgenly-adminlte-vue

例子

import { NlyBadge } from 'nly-adminlte-vue'
Vue.component('nly-badge', NlyBadge)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
BadgePluginnly-adminlte-vue

例子

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