Dropdowns

下拉菜单,一个可以切换显示和隐藏下拉列表的组件。

总览

<nly-dropdown> (简写 <nly-dd> ) 是一个可以显示隐藏下拉列表的组件, 可以通过点击,悬浮,聚焦等操作对其显示和隐藏

<div>
  <nly-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <nly-dropdown-item>First Action</nly-dropdown-item>
    <nly-dropdown-item>Second Action</nly-dropdown-item>
    <nly-dropdown-item>Third Action</nly-dropdown-item>
    <nly-dropdown-divider></nly-dropdown-divider>
    <nly-dropdown-item active>Active action</nly-dropdown-item>
    <nly-dropdown-item disabled>Disabled action</nly-dropdown-item>
  </nly-dropdown>
</div>

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

Button content 插槽

可以用 text prop 或者 用 button-content 插槽 来代替 text prop 来设置下拉菜单的内容。 button-content 插槽允许使用 HTML 语言和 icon 等其他组件。

button-content 插槽 会覆盖 text prop

<div>
  <nly-dropdown text="Button text via Prop">
    <nly-dropdown-item href="#">An item</nly-dropdown-item>
    <nly-dropdown-item href="#">Another item</nly-dropdown-item>
  </nly-dropdown>

  <nly-dropdown>
    <template v-slot:button-content>
      Custom <strong>Content</strong> with <em>HTML</em> via Slot
    </template>
    <nly-dropdown-item href="#">An item</nly-dropdown-item>
    <nly-dropdown-item href="#">Another item</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- button-content.name -->
<!-- nly-dropdown-button-content.vue -->

定位

下拉菜单支持列表展示在各种位置,还支持列表自适应翻滚。

对齐

下拉菜单支持左右对齐,设置 right prop 为右对齐, 设置 left prop 为左对齐

<div>
  <nly-dropdown id="dropdown-left" text="左对齐" variant="primary" class="m-2">
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>

  <nly-dropdown
    id="dropdown-right"
    right
    text="右对齐"
    variant="primary"
    class="m-2"
  >
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- 左右对齐.name -->
<!-- nly-dropdown-right.vue -->

Dropup

下拉菜单默认是底部显示,设置 dropup prop,列表顶部显示。

<div>
  <nly-dropdown
    id="dropdown-dropup"
    dropup
    text="顶部显示"
    variant="primary"
    class="m-2"
  >
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- Dropup.name -->
<!-- nly-dropdown-dropup.vue -->

Drop right or left

可以设置 dropright prop 或者 dropleft prop 来使得列表出现在右侧或者左侧。

dropup 会覆盖 droprightdropleftdropright 会覆盖 dropleft

<div>
  <nly-dropdown
    id="dropdown-dropright"
    dropright
    text="右侧显示"
    variant="primary"
    class="m-2"
  >
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>

  <nly-dropdown
    id="dropdown-dropleft"
    dropleft
    text="左侧显示"
    variant="primary"
    class="m-2"
  >
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- 左右显示.name -->
<!-- nly-dropdown-dropright-dropleft.vue -->

自动翻滚

下拉菜单默认是自动翻滚的,即自适应上下左右距离来自动变换位置,如果需要关闭,请设置 no-flip prop。

offset

offset prop 用来设置列表和下拉菜单按钮的位置偏移量

  • 可以设置为正负数,整数右偏,负数左偏
  • 可以设置 css 中的写法作为偏移,此时应该是传入字符串 比如 0.3rem , 4px , 1.2em 等等
<div>
  <nly-dropdown
    id="dropdown-offset"
    offset="25"
    text="Offset Dropdown"
    class="m-2"
  >
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- offset.name -->
<!-- nly-dropdown-offset.vue -->

boundary 边界(容器)

可以设置下拉菜单列表出现的相对定位的容器

可选 'scrollParent', 'window', 'viewport', 或着自行指定的 dom。详情请参考 https://popper.js.org/"

Split button 模式

split 模式 会将下拉菜单按钮拆分为两个按钮,右侧按钮为一个具有 toggle icon 的按钮

<div>
  <nly-dropdown split text="Split Dropdown" class="m-2">
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here...</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- split.name -->
<!-- nly-dropdown-split.vue -->

spilt 模式下,左侧按钮默认 type 是 <button> ,支持 link 或者 <router-link> 。设置 split-href prop 或者 split-to prop 来实现对应功能

<div>
  <nly-dropdown split split-href="#foo/bar" text="Split Link" class="m-2">
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here...</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- split-link.name -->
<!-- nly-dropdown-split-link.vue -->

Split button type

split 模式按钮默认类型为 'button' ,可以设置为 'button' , 'submit' and 'reset' 。如果设置了 split-tosplit-href 会覆盖 split-button-type

式样

下拉菜单支持设置不同式样

Size

下拉菜单支持设置大小,接受与 nly-button 组件同样的 size prop

size prop 可选 'sm' , 'md' (默认), or 'lg'

<div>
  <div>
    <nly-dropdown size="lg" text="Large" class="m-2">
      <nly-dropdown-item-button>Action</nly-dropdown-item-button>
      <nly-dropdown-item-button>Another action</nly-dropdown-item-button>
      <nly-dropdown-item-button>Something else here</nly-dropdown-item-button>
    </nly-dropdown>

    <nly-dropdown size="lg" split text="Large Split" class="m-2">
      <nly-dropdown-item-button>Action</nly-dropdown-item-button>
      <nly-dropdown-item-button>Another action</nly-dropdown-item-button>
      <nly-dropdown-item-button
        >Something else here...</nly-dropdown-item-button
      >
    </nly-dropdown>
  </div>
  <div>
    <nly-dropdown size="sm" text="Small" class="m-2">
      <nly-dropdown-item-button>Action</nly-dropdown-item-button>
      <nly-dropdown-item-button>Another action</nly-dropdown-item-button>
      <nly-dropdown-item-button
        >Something else here...</nly-dropdown-item-button
      >
    </nly-dropdown>

    <nly-dropdown size="sm" split text="Small Split" class="m-2">
      <nly-dropdown-item-button>Action</nly-dropdown-item-button>
      <nly-dropdown-item-button>Another action</nly-dropdown-item-button>
      <nly-dropdown-item-button
        >Something else here...</nly-dropdown-item-button
      >
    </nly-dropdown>
  </div>
</div>

<!-- size.name -->
<!-- nly-dropdown-sizes.vue -->

注意:

  • 改变按钮大小并不影响下拉列表大小

variant

下拉菜单可以设置不同背景色,默认为 secondary , 可选 success , primary , info , danger , link , outlinedark 等。

<div>
  <nly-dropdown text="Primary" variant="primary" class="m-2">
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>

  <nly-dropdown text="Success" variant="success" class="m-2">
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>

  <nly-dropdown text="Outline Danger" variant="outlineDanger" class="m-2">
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- variant.name -->
<!-- nly-dropdown-variants.vue -->

同时可以通过 toggle-class prop 来给按钮设置自定义背景色

Split 模式 variant

split 模式左侧按钮接收上述 variant 来设置背景色,右侧按钮可以通过 split-variant 来设置背景色

<div>
  <nly-dropdown
    split
    split-variant="outlinePrimary"
    variant="primary"
    text="Split Variant Dropdown"
    class="m-2"
  >
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here...</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- split-variant.name -->
<!-- nly-dropdown-split-variant.vue -->

Block level dropdowns

可以 block 来使得下拉菜单按钮填充整个父级元素

<div>
  <nly-dropdown text="Block Level Dropdown" block variant="primary" class="m-2">
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>

  <nly-dropdown
    text="Block Level Split Dropdown"
    block
    split
    split-variant="outlinePrimary"
    variant="primary"
    class="m-2"
  >
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here...</nly-dropdown-item>
  </nly-dropdown>
</div>

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

如果您需要下拉列表的宽度也与父级元素宽度一样,可以设置 menu-classw-100

<div>
  <nly-dropdown
    text="Block Level Dropdown Menu"
    block
    variant="primary"
    class="m-2"
    menu-class="w-100"
  >
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- block.name -->
<!-- nly-dropdown-block-menu.vue -->

下拉菜单子子组件 variant

部份下拉菜单的子组件支持 variant 来控制文字颜色。

no-caret

设置 no-carettrue 。可以隐藏下拉菜单按钮内容

<div>
  <nly-dropdown
    size="lg"
    variant="link"
    toggle-class="text-decoration-none"
    no-caret
  >
    <template v-slot:button-content>
      &#x1f50d;<span class="sr-only">Search</span>
    </template>
    <nly-dropdown-item href="#">Action</nly-dropdown-item>
    <nly-dropdown-item href="#">Another action</nly-dropdown-item>
    <nly-dropdown-item href="#">Something else here...</nly-dropdown-item>
  </nly-dropdown>
</div>

<!-- no-caret.name -->
<!-- nly-dropdown-hidden-caret.vue -->

注意:

  • no-caretsplit 模式无效.

Lazy dropdown

设置 lazy 为 true,则渲染为懒加载模式的下拉菜单

子组件

Sub-component Description Aliases
<nly-dropdown-item> items 支持 click 事件, link 路由, 和 <router-link> 。 默认渲染为 <a> 标签 <nly-dd-item>
<nly-dropdown-item-button> 可以代替 <nly-dropdown-item> 渲染为 <button> 元素。 <nly-dropdown-item-btn> , <nly-dd-item-button> , <nly-dd-item-btn>
<nly-dropdown-divider> 分割线 <nly-dd-divider>
<nly-dropdown-text> 文字内容 <nly-dd-text>
<nly-dropdown-form> 下拉菜单中渲染一个表单 <nly-dd-form>
<nly-dropdown-group> 可以渲染一个下拉菜单组,配合 <nly-dropdown-header> 效果更好 <nly-dd-group>
<nly-dropdown-header> 下拉菜单 header。 <nly-dd-header>
<nly-dropdown-footer> 下拉菜单 footer。 <nly-dd-footer>

注意:

  • 不支持嵌套子菜单

<nly-dropdown-item>

<nly-dropdown-item> 是用来创建一个 link 菜单的,可以使用 href prop 和 the to prop 来实现路由跳转。如果不传入,则获渲染成 href=# ,且阻止跳转。默认渲染成 <a> 标签。

设置 disabled 会禁用 <nly-dropdown-item>

<nly-dropdown-item-button>

<nly-dropdown-item-button> 可以用了来代替 <nly-dropdown-item> ,渲染为 <button> 元素。且不支持 hrefto props。

设置 disabled 会禁用 <nly-dropdown-item-button>

<div>
  <nly-dropdown
    id="dropdown-buttons"
    text="Dropdown using buttons as menu items"
    class="m-2"
  >
    <nly-dropdown-item-button>I'm a button</nly-dropdown-item-button>
    <nly-dropdown-item-button active
      >I'm a active button</nly-dropdown-item-button
    >
    <nly-dropdown-item-button disabled
      >I'm a button, but disabled!</nly-dropdown-item-button
    >
    <nly-dropdown-item-button
      >I don't look like a button, but I am!</nly-dropdown-item-button
    >
  </nly-dropdown>
</div>

<!-- nly-dropdown-item-buttons.vue -->

<nly-dropdown-item-divider>

<nly-dropdown-divider> 是分割线

<div>
  <nly-dropdown id="dropdown-divider" text="Dropdown with divider" class="m-2">
    <nly-dropdown-item-button>First item</nly-dropdown-item-button>
    <nly-dropdown-item-button>Second item</nly-dropdown-item-button>
    <nly-dropdown-divider></nly-dropdown-divider>
    <nly-dropdown-item-button>Separated Item</nly-dropdown-item-button>
  </nly-dropdown>
</div>

<!-- nly-dropdown-item-divider.vue -->

<nly-dropdown-text>

<nly-dropdown-text> 可以用来代替 <nly-dropdown-item> 显示对应文字内容, 可能需要设置 style 来控制下拉列表的宽度。

<div>
  <nly-dropdown id="dropdown-text" text="Dropdown with text" class="m-2">
    <nly-dropdown-text style="width: 240px;">
      Some example text that's free-flowing within the dropdown menu.
    </nly-dropdown-text>
    <nly-dropdown-text>And this is more example text.</nly-dropdown-text>
    <nly-dropdown-divider></nly-dropdown-divider>
    <nly-dropdown-item-button>First item</nly-dropdown-item-button>
    <nly-dropdown-item-button>Second Item</nly-dropdown-item-button>
  </nly-dropdown>
</div>

<!-- nly-dropdown-text.vue -->

默认情况下, <nly-dropdown-text> 会渲染成 <p> 标签,可以通过 tag 来设置对应标签。

默认情况下, <nly-dropdown-text> 的宽度会跟 <nly-dropdown-item> 宽度一样,可能需要设置 style 来控制下拉列表的宽度。

<nly-dropdown-item-group>

<div>
  <nly-dropdown id="dropdown-grouped" text="Dropdown with group" class="m-2">
    <nly-dropdown-item-button>
      Non-grouped Item
    </nly-dropdown-item-button>
    <nly-dropdown-divider></nly-dropdown-divider>
    <nly-dropdown-group id="dropdown-group-1" header="Group 1">
      <nly-dropdown-item-button>First Grouped item</nly-dropdown-item-button>
      <nly-dropdown-item-button>Second Grouped Item</nly-dropdown-item-button>
    </nly-dropdown-group>
    <nly-dropdown-group id="dropdown-group-2" header="Group 2">
      <nly-dropdown-item-button>First Grouped item</nly-dropdown-item-button>
      <nly-dropdown-item-button>Second Grouped Item</nly-dropdown-item-button>
    </nly-dropdown-group>
    <nly-dropdown-divider></nly-dropdown-divider>
    <nly-dropdown-item-button>
      Another Non-grouped Item
    </nly-dropdown-item-button>
  </nly-dropdown>
</div>

<!-- nly-dropdown-item-group.vue -->

<nly-dropdown-item-header>

<div>
  <nly-dropdown id="dropdown-header" text="Dropdown with header" class="m-2">
    <nly-dropdown-header id="dropdown-header-label">
      Dropdown header
    </nly-dropdown-header>
    <nly-dropdown-item-button aria-describedby="dropdown-header-label">
      First item
    </nly-dropdown-item-button>
    <nly-dropdown-item-button aria-describedby="dropdown-header-label">
      Second Item
    </nly-dropdown-item-button>
  </nly-dropdown>
</div>

<!-- nly-dropdown-item-header.vue -->
<div>
  <nly-dropdown id="dropdown-footer" text="Dropdown with footer" class="m-2">
    <nly-dropdown-item-button aria-describedby="dropdown-footer-label">
      First item
    </nly-dropdown-item-button>
    <nly-dropdown-item-button aria-describedby="dropdown-footer-label">
      Second Item
    </nly-dropdown-item-button>

    <nly-dropdown-footer id="dropdown-footer-label">
      Dropdown footer
    </nly-dropdown-footer>
  </nly-dropdown>
</div>

<!-- nly-dropdown-item-footer.vue -->

Closing the menu via form interaction

点击 <nly-dropdown-form> 中的元素不会关闭下拉菜单. 如果需要关闭下拉菜单,请绑定事件来调用hide() 方法。

Listening to dropdown changes via $root events

监听下拉菜单展开状态

export default {
  mounted() {
    this.$root.$on('nlya::dropdown::show', (nlyEvent) => {
      console.log('Dropdown is about to be shown', nlyEvent)
    })
  },
}

点击 Events 查看完整事件

组件参数

<nly-dropdown>

组件简写

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

  • <nly-dd>

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

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
disabled
Booleanfalse禁用,设置true为禁用状态
dropup
Booleanfalse设置为true,下拉菜单出现在按钮上方
dropright
Booleanfalse设置为true,下拉菜单出现在按钮右侧
dropleft
Booleanfalse设置为true,下拉菜单出现在按钮左侧
right
Booleanfalse设置为true,下拉菜单右侧对齐
offset
Number or String0下拉菜单位置偏移像素
no-flip
Booleanfalse设置为true,禁止下拉菜单自动调整方向
popper-opts
Any接收其他Popper.js配置,详情请参考 https://popper.js.org/
boundary
String or 'scrollParent'设置下拉菜单列表出现的容器, 可选 'scrollParent', 'window', 'viewport', 或着自行指定的dom。详情请参考 https://popper.js.org/
text
String''下拉菜单按钮文字内容
html
String下拉菜单按钮中嵌入html,请谨慎使用
size
设置
Stringnull下拉菜单大小, 可选 'sm', 'md' (默认), or 'lg'
variant
String'secondary'主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark
block
v0.4.4+
Booleanfalse下拉按钮填充满整个父元素
menu-class
String or Array or Objectmenu自定义css
toggle-tag
String'button'使用prop html时的标签,请谨慎使用
toggle-text
设置
String'Nly Toggle Dropdown'设置 ARIA label (sr-only) 文字, 只有split为true时生效
toggle-class
String or Array or Object下拉按钮自定义css
no-caret
Booleanfalse隐藏下拉按钮的图标
split
Booleanfalse设置true为split模式, 按钮跟图标会分开
split-href
String使用split模式时,设置路由跳转类型为href
split-to
String or Object使用split模式时,设置路由跳转类型为to
split-variant
设置
Stringnull使用split模式时,按钮颜色,可选同variant
split-class
v0.4.4+
String or Array or Object使用split模式时,按钮自定义css
split-button-type
String'button'使用split模式时,按钮类型, 可选 'button', 'submit', 'reset'
lazy
Booleanfalse设置true,懒加载,只有点击之后,才会生成dom
role
String'menu'role属性

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

Slots

Slot NameScopedDescription
button-content No用来设置按钮内容,替换掉text等,可以插入其他组件
default 下拉菜单默认插槽

Events

EventArgumentsDescription
show
  1. nlyEvt - NlyEvent 对象. 可调用 nlyEvt.preventDefault() 停止展示.
在下拉菜单显示之前emit事件,可回调
shown 在下拉菜单显示之后emit事件
hide
  1. nlyEvt - NlyEvent 对象. 可调用 nlyEvt.preventDefault() 停止隐藏.
在下拉菜单隐藏之前emit事件,可回调
hidden 在下拉菜单隐藏之后emit事件.
toggle 下拉按钮点击时emit事件
click
  1. event - 原生事件
split模式时, 下拉按钮点击emit事件
nlya::dropdown::show
  1. nlyEvt - NlyEvent对象, 调用 nltEvt.preventDefault() 阻止显示
在下拉菜单显示之前emit到root事件,可回调
nlya::dropdown::hide
  1. nlyEvt - NlyEvent对象, 调用 nltEvt.preventDefault() 阻止隐藏
在下拉菜单隐藏之前emit到root事件,可回调

<nly-dropdown-item>

组件简写

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

  • <nly-dd-item>

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

props 参数

props (Click to sort Ascending)类型默认值描述
href
Stringnull普通 url 地址
rel
Stringnull设置 rel 属性
target
String'_self'link 的 target 属性,可选_blank,_self,_parent,_top,framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用,设置true为禁用状态
to
String or Objectnull点击跳转的页面, 可以是路由对象或者字符串,以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
link-class
v0.4.4+
String or Array or Objectnulllink元素自定义css
variant
Stringnull主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark

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

Events

EventArgumentsDescription
click
  1. 原生事件
点击emit事件

<nly-dropdown-item-button>

组件简写

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

  • <nly-dropdown-item-btn>
  • <nly-dd-item-button>
  • <nly-dd-item-btn>

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

props 参数

props类型默认值描述
active
Booleanfalse设置 true 处于激活状态
active-class
String'active'激活状态css类名
button-class
v0.4.4+
String or Array or Object按钮元素自定义css
disabled
Booleanfalse禁用,设置true为禁用状态
variant
String主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark

Events

EventArgumentsDescription
click
  1. 原生事件
点击emit事件

组件简写

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

  • <nly-dd-divider>

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

props 参数

props类型默认值描述
tag
String'hr'标签

组件简写

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

  • <nly-dd-form>

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

props 参数

props类型默认值描述
id
Stringnull设置id
inline
Booleanfalse设置true,表单都布局为一行
novalidate
Booleanfalse设置true,自带验证失效
validated
Booleanfalse设置true,开启自带验证
role
String'form'role属性
disabled
Booleanfalse禁用,设置true为禁用状态
form-class
v0.4.4+
String or Object or Array自定义css

组件简写

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

  • <nly-dd-text>

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

props 参数

props类型默认值描述
tag
String'p'标签
variant
String主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark

组件简写

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

  • <nly-dd-group>

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

props 参数

props类型默认值描述
id
String设置id
header
Stringheader主体内容
header-tag
String'header'header标签
header-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
header-classes
String or Array or Objectheader自定义css
aria-describedby
String'aria-describedby' 属性

Slots

Slot NameDescription
header header插槽内容

组件简写

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

  • <nly-dd-header>

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

props 参数

props类型默认值描述
id
String设置id
tag
String'header'标签
variant
String主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark

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

  • <nly-dd-footer>

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

props类型默认值描述
id
String设置id
tag
String'header'标签
variant
String主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark

单个组件导入

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

组件导出名称导出路径
<nly-dropdown>NlyDropdownnly-adminlte-vue
<nly-dropdown-item>NlyDropdownItemnly-adminlte-vue
<nly-dropdown-item-button>NlyDropdownItemButtonnly-adminlte-vue
<nly-dropdown-divider>NlyDropdownDividernly-adminlte-vue
<nly-dropdown-form>NlyDropdownFormnly-adminlte-vue
<nly-dropdown-text>NlyDropdownTextnly-adminlte-vue
<nly-dropdown-group>NlyDropdownGroupnly-adminlte-vue
<nly-dropdown-header>NlyDropdownHeadernly-adminlte-vue
<nly-dropdown-footer>NlyDropdownFooternly-adminlte-vue

例子

import { NlyDropdown } from 'nly-adminlte-vue'
Vue.component('nly-dropdown', NlyDropdown)

导出作为插件

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

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

例子

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