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

按钮大小，可选 lg ， sm ， sx

<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 -->

link props

接收 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>`

函数式组件（Functional component）

<nly-button> 组件简写
<nly-button> props 参数
<nly-button> Events

组件简写

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

<nly-btn>

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

props 参数

props (Click to sort Ascending)	类型	默认值	描述
`href`	`String`		普通 url 地址
`rel`	`String`	`null`	设置 rel 属性
`target`	`String`	`'_self'`	link 的 target 属性，可选_blank，_self，_parent，_top，framename
`active`	`Boolean`	`false`	设置 true 处于激活状态
`disabled`	`Boolean`	`false`	禁用，设置true为禁用状态
`to`	`String` or `Object`		点击跳转的页面，可以是路由对象或者字符串，以router-link router.push()跳转
`append`	`Boolean`	`false`	router-link，需要使用 to 或者 href 这个 props，将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true，比如当前 http://localhost:8080/link，to='collapse'，则会跳转到 http://localhost:8080/link/collapse
`replace`	`Boolean`	`false`	router-link router.replace()跳转
`event`	`String` or `Array`	`'click'`	点击事件，尽量不要和to以及href同时使用，如果同时使用，点击事件和跳转会依次发生
`active-class`	`String`		激活状态css类名
`exact`	`Boolean`	`false`	router-link，设置true开启路由匹配模式
`exact-active-class`	`String`	`'active'`	exact为true的情况下，当路由匹配成功，会激活exactActiveClass。类似active-class，是一个自定义css类
`router-tag`	`String`	`'a'`	router-link 标签，通常建议不修改
`no-prefetch`	`Boolean`	`false`	nuxt-link
`block`	`Boolean`	`false`	让按钮填充整个父元素
`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`	`Boolean`	`false`	工具类按钮
`app`	`Boolean`	`false`	app类按钮
`tag`	`String`	`'button'`	标签
`pressed`	`Boolean`	`null`	使按钮具有激活状态
`is-navbar`	`Boolean`	`false`	放置到navbar form input group 中的表单按钮

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

Events

Event	Arguments	Description
`click`	原生点击事件	disabled为false时点击按钮触发事件

查看源码

`<nly-button-close>`

函数式组件（Functional component）

<nly-button-close> 组件简写
<nly-button-close> props 参数
<nly-button-close> Events

组件简写

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

<nly-btn-close>

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

props 参数

props	类型	默认值	描述
`content`	`String`	`'×'`	文本内容
`disabled`	`Boolean`	`false`	禁用，设置true为禁用状态
`aria-label`	`String`	`'Close'`	给元素设置 aria-label 属性
`text-variant`	`String`	`null`	文字颜色，可选 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

Event	Arguments	Description
`click`	原生点击事件	disabled为false时点击按钮触发事件

单个组件导入

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

组件	导出名称	导出路径
`<nly-button>`	`NlyButton`	`nly-adminlte-vue`
`<nly-button-close>`	`NlyButtonClose`	`nly-adminlte-vue`

例子

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

导出作为插件

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

导出名称	导出路径
`ButtonPlugin`	`nly-adminlte-vue`

例子

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