Button

具有 NlyAdminlteVue 主题特征的按钮

总览

nly-button 组件因为有 3 种类型的背景色,所以默认是没有颜色的,按钮组件支持原生点击事件 接受所有 nly-link props, 会渲染成标签按钮, 用 role='button' 来实现按钮特征

<nly-button>默认</nly-button>
<nly-button variant="dark">dark</nly-button>
<nly-button variant="primary">primary</nly-button>
<nly-button variant="primary">
  <nly-icon
    icon="nlyfont nly-icon-sr-chuangxinfuwu-fill
-icon-outlet"
  />
</nly-button>
<nly-button variant="info">
  <nly-icon
    icon="nlyfont nly-icon-sr-chuangxinfuwu-fill
-icon-outlet"
  />
</nly-button>
<nly-button variant="outlineDanger">
  <nly-icon
    icon="nlyfont nly-icon-sr-chuangxinfuwu-fill
-icon-outlet"
  />
</nly-button>
<nly-button variant="success">
  <nly-icon
    icon="nlyfont nly-icon-sr-chuangxinfuwu-fill
-icon-outlet"
  />
</nly-button>
<nly-button variant="secondary">
  <nly-icon
    icon="nlyfont nly-icon-sr-chuangxinfuwu-fill
-icon-outlet"
  />
</nly-button>

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

variant

btn-* 类颜色,支持 adminlte3 的基础主题颜色,支持边框颜色

<div>
  <nly-button variant="default">default</nly-button>
  <nly-button variant="dark">dark</nly-button>
  <nly-button variant="light">light</nly-button>
  <nly-button variant="primary">primary</nly-button>
  <nly-button variant="secondary">secondary</nly-button>
  <nly-button variant="success">success</nly-button>
  <nly-button variant="info">info</nly-button>
  <nly-button variant="warning">warning</nly-button>
  <nly-button variant="danger">danger</nly-button>
</div>

<div class="mt-2">
  <nly-button variant="outlineDark">outlineDark</nly-button>
  <nly-button variant="outlineLight">outlineLight</nly-button>
  <nly-button variant="outlinePrimary">outlinePrimary</nly-button>
  <nly-button variant="outlineSecondary">outlineSecondary</nly-button>
  <nly-button variant="outlineSuccess">outlineSuccess</nly-button>
  <nly-button variant="outlineInfo">outlineInfo</nly-button>
  <nly-button variant="outlineWarning">outlineWarning</nly-button>
  <nly-button variant="outlineDanger">outlineDanger</nly-button>
</div>

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

bg-variant

bg-* 类颜色

<nly-button bg-variant="default">default</nly-button>
<nly-button bg-variant="dark">dark</nly-button>
<nly-button bg-variant="light">light</nly-button>
<nly-button bg-variant="primary">primary</nly-button>
<nly-button bg-variant="secondary">secondary</nly-button>
<nly-button bg-variant="success">success</nly-button>
<nly-button bg-variant="info">info</nly-button>
<nly-button bg-variant="warning">warning</nly-button>
<nly-button bg-variant="danger">danger</nly-button>
<nly-button bg-variant="lightblue">lightblue</nly-button>
<nly-button bg-variant="navy">navy</nly-button>
<nly-button bg-variant="olive">olive</nly-button>
<nly-button bg-variant="lime">lime</nly-button>
<nly-button bg-variant="fuchsia">fuchsia</nly-button>
<nly-button bg-variant="maroon">maroon</nly-button>
<nly-button bg-variant="blue">blue</nly-button>
<nly-button bg-variant="indigo">indigo</nly-button>
<nly-button bg-variant="purple">purple</nly-button>
<nly-button bg-variant="pink">pink</nly-button>
<nly-button bg-variant="red">red</nly-button>
<nly-button bg-variant="orange">orange</nly-button>
<nly-button bg-variant="yellow">yellow</nly-button>
<nly-button bg-variant="green">green</nly-button>
<nly-button bg-variant="teal">teal</nly-button>
<nly-button bg-variant="cyan">cyan</nly-button>
<nly-button bg-variant="white">white</nly-button>
<nly-button bg-variant="gray">gray</nly-button>
<nly-button bg-variant="graydark">graydark</nly-button>

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

bg-gradient-variant

bg-gradient-* 类颜色,渐变色

<nly-button bg-gradient-variant="default">default</nly-button>
<nly-button bg-gradient-variant="dark">dark</nly-button>
<nly-button bg-gradient-variant="light">light</nly-button>
<nly-button bg-gradient-variant="primary">primary</nly-button>
<nly-button bg-gradient-variant="secondary">secondary</nly-button>
<nly-button bg-gradient-variant="success">success</nly-button>
<nly-button bg-gradient-variant="info">info</nly-button>
<nly-button bg-gradient-variant="warning">warning</nly-button>
<nly-button bg-gradient-variant="danger">danger</nly-button>
<nly-button bg-gradient-variant="lightblue">lightblue</nly-button>
<nly-button bg-gradient-variant="navy">navy</nly-button>
<nly-button bg-gradient-variant="olive">olive</nly-button>
<nly-button bg-gradient-variant="lime">lime</nly-button>
<nly-button bg-gradient-variant="fuchsia">fuchsia</nly-button>
<nly-button bg-gradient-variant="maroon">maroon</nly-button>
<nly-button bg-gradient-variant="blue">blue</nly-button>
<nly-button bg-gradient-variant="indigo">indigo</nly-button>
<nly-button bg-gradient-variant="purple">purple</nly-button>
<nly-button bg-gradient-variant="pink">pink</nly-button>
<nly-button bg-gradient-variant="red">red</nly-button>
<nly-button bg-gradient-variant="orange">orange</nly-button>
<nly-button bg-gradient-variant="yellow">yellow</nly-button>
<nly-button bg-gradient-variant="green">green</nly-button>
<nly-button bg-gradient-variant="teal">teal</nly-button>
<nly-button bg-gradient-variant="cyan">cyan</nly-button>
<nly-button bg-gradient-variant="white">white</nly-button>
<nly-button bg-gradient-variant="gray">gray</nly-button>
<nly-button bg-gradient-variant="graydark">graydark</nly-button>

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

size

按钮大小,可选 lgsmsx

<nly-button bg-gradient-variant="graydark" size="xs">graydark</nly-button>
<nly-button bg-gradient-variant="graydark" size="sm">graydark</nly-button>
<nly-button bg-gradient-variant="graydark" size="lg">graydark</nly-button>

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

block

使按钮填充整个父元素

<div>
  <nly-button bg-gradient-variant="graydark" block>block</nly-button>
</div>

<!-- block.name -->
<!-- nly-button.vue -->

click

点击事件,鼠标事件,原生事件

<template>
  <div>
    <nly-button variant="danger" @click="clickFunc">点击</nly-button>
    <nly-button variant="danger" @click="clickFunc" button-class="ml-2" disabled
      >点击</nly-button
    >
  </div>
</template>
<script>
  export default {
    methods: {
      clickFunc() {
        alert("Hello NlyadminlteVue");
      }
    }
  };
</script>

<!-- click.name -->
<!-- nly-button.vue -->

disabled

禁用按钮, 禁用状态无法点击,无法触发 click 事件

<nly-button bg-gradient-variant="graydark" disabled> disabled</nly-button>
<nly-button bg-gradient-variant="graydark"> diabled</nly-button>

<nly-button bg-gradient-variant="info" disabled> disabled</nly-button>
<nly-button bg-gradient-variant="info"> diabled</nly-button>

<!-- disabled.name-->
<!-- nly-button.vue -->

shape

按钮形状,方形,小圆角,大圆角

<nly-button bg-gradient-variant="graydark" shape="roundedFlat">
  roundedFlat</nly-button
>
<nly-button bg-gradient-variant="graydark" shape="roundedPill">
  roundedPill</nly-button
>
<nly-button bg-gradient-variant="graydark" shape="roundedCircle">
  Cir</nly-button
>
<nly-button bg-gradient-variant="info" shape="roundedLg"> roundedLg</nly-button>
<nly-button bg-gradient-variant="info" shape="roundedSm"> roundedSm</nly-button>

<!-- shap.name -->
<!-- nly-button.vue -->

tool

工具类按钮,一般建议用在 nly-card-header 组件中的 nly-card-tool 组件中

<nly-button tool> tool</nly-button>

<nly-card header-variant="pink" header-outline>
  <nly-card-header>
    <nly-card-tool>
      <nly-button tool> tool</nly-button>
    </nly-card-tool>
  </nly-card-header>
</nly-card>

<!-- tool.name -->
<!-- nly-button.vue -->

app

app 类按钮

<nly-button app variant="danger">
  <nly-icon
    icon="nlyfont nly-icon-sr-chuangxinfuwu-fill
-icon-breadcrumb-fill"
  />
</nly-button>

<!-- app.name -->
<!-- nly-button.vue -->

接收 nly-link 组件参数,会变成 a 标签按钮

<nly-button variant="danger"> Button</nly-button>
<nly-button variant="danger" to="/">Link to</nly-button>
<nly-button variant="danger" href="#">Link href</nly-button>

<!-- link props.name -->
<!-- nly-button.vue -->

组件参数

组件简写

<nly-button> 组件可以用以下简写

  • <nly-btn>

注意: 组件简写只有在导出为插件的时候才可以用

props 参数

props (Click to sort Ascending)类型默认值描述
href
String普通 url 地址
rel
Stringnull设置 rel 属性
target
String'_self'link 的 target 属性,可选_blank,_self,_parent,_top,framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用,设置true为禁用状态
to
String or Object点击跳转的页面, 可以是路由对象或者字符串,以router-link router.push()跳转
append
Booleanfalserouter-link,需要使用 to 或者 href 这个 props,将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true,比如当前 http://localhost:8080/link,to='collapse',则会跳转到 http://localhost:8080/link/collapse
replace
Booleanfalserouter-link router.replace()跳转
event
String or Array'click'点击事件,尽量不要和to以及href同时使用,如果同时使用,点击事件和跳转会依次发生
active-class
String激活状态css类名
exact
Booleanfalserouter-link,设置true开启路由匹配模式
exact-active-class
String'active'exact为true的情况下,当路由匹配成功,会激活exactActiveClass。类似active-class,是一个自定义css类
router-tag
String'a'router-link 标签,通常建议不修改
no-prefetch
Booleanfalsenuxt-link
block
Booleanfalse让按钮填充整个父元素
variant
String'default'btn类颜色,可选 dark,light,default,primary,secondary,success,info,danger,warning,outlineDark,outlineLight,outlinePrimary,outlineSecondary,outlineSuccess,outlineInfo,outlineDanger,outlineWarning
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
size
String按钮大小,可选lg,sm,sx
type
String'button'按钮类型,可选button,submit
shape
String按钮形状,可选roundedFlat,roundedPill,roundedCircle,roundedLg,roundedSm
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
button-class
String自定义css式样
tool
Booleanfalse工具类按钮
app
Booleanfalseapp类按钮
tag
String'button'标签
pressed
Booleannull使按钮具有激活状态
is-navbar
Booleanfalse放置到navbar form input group 中的表单按钮

<nly-button> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

Events

EventArgumentsDescription
click
  1. 原生点击事件
disabled为false时点击按钮触发事件

组件简写

<nly-button-close> 组件可以用以下简写

  • <nly-btn-close>

注意: 组件简写只有在导出为插件的时候才可以用

props 参数

props类型默认值描述
content
String'&times;'文本内容
disabled
Booleanfalse禁用,设置true为禁用状态
aria-label
String'Close'给元素设置 aria-label 属性
text-variant
Stringnull文字颜色,可选 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

Events

EventArgumentsDescription
click
  1. 原生点击事件
disabled为false时点击按钮触发事件

单个组件导入

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

组件导出名称导出路径
<nly-button>NlyButtonnly-adminlte-vue
<nly-button-close>NlyButtonClosenly-adminlte-vue

例子

import { NlyButton } from 'nly-adminlte-vue'
Vue.component('nly-button', NlyButton)

导出作为插件

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

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

例子

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