Nav

导航元素,可以设置不同的状态进行路由跳转, 包括下拉导航菜单, 子菜单,导航元素等等

<div>
  <nly-nav>
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Another Link</nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
</div>

<!-- demo.name -->
<!-- nly-nav.vue -->

总览

nly-nav 是 flexbox 构建的,为不同的导航式样和类型提供了强大的布局基础, 且提供了许多不同式样,可以点击跳转或者嵌入表单

nly-nav 支持嵌套以下组件:

  • nly-nav-item 路由跳转元素

  • nly-nav-dropdown 下拉菜单

  • nly-nav-form 菜单表单

  • nly-nav-text 菜单文本

外观

nly-nav 支持 tabspills 两种外观。且都支持 active 激活状态

tabs

设置 prop tabs,使得 nav 变成 tabs

<div>
  <nly-nav tabs>
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Another Link</nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
</div>

<!-- tabs.name -->
<!-- nly-nav.vue -->

pills

设置 prop pills 使得 nav 变成 圆丸形状

<div>
  <nly-nav pills>
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Another Link</nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
</div>

<!-- pills.name -->
<!-- nly-nav.vue -->

小型导航

设置 prop small 使得导航变小

<div>
  <nly-nav small>
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Another Link</nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
</div>

<!-- small.name -->
<!-- nly-nav.vue -->

填充整个宽度

设置 prop filljustified 可以使得 nly-nav-item 填充整个 nav 宽度

fill

设置 prop fill 可以使得 nly-nva-item 按照比列 填充满整个水平空间

注意,虽然填充满整个水平空间,但并不是所有的 nly-nva-item 宽度都一样

<div>
  <nly-nav tabs fill>
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Link with a long name </nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
</div>

<!-- fill.name -->
<!-- nly-nav.vue -->

justified

设置 prop justified 可以使得 nly-nva-item 等宽 填充满整个水平空间

<div>
  <nly-nav tabs justified>
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Link with a long name </nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
</div>

<!-- justified.name -->
<!-- nly-nav.vue -->

水平对齐位置

设置 prop align 可以调整 nly-nav-item 的对齐位置。 可选: start,left,center,end,right

<div>
  <nly-nav tabs align="center">
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Link with a long name </nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>

  <nly-nav tabs align="start">
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Link with a long name </nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
  <nly-nav tabs align="end">
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Link with a long name </nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
  <nly-nav tabs align="right">
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-item>Link with a long name </nly-nav-item>
    <nly-nav-item disabled>Disabled</nly-nav-item>
  </nly-nav>
</div>

<!-- align.name -->
<!-- nly-nav.vue -->

垂直布局

设置 prop vertical 可以使得 nly-nav 为垂直布局, 在设置 vertical 的情况下设置 prop tabs-right,可以使得 nly-nav 右侧垂直布局式样

注意 只是 tabs 式样有差异

<nly-row>
  <nly-col xs="4">
    <nly-nav tabs vertical>
      <nly-nav-item active>Active</nly-nav-item>
      <nly-nav-item>Link</nly-nav-item>
      <nly-nav-item>Another Link</nly-nav-item>
      <nly-nav-item disabled>Disabled</nly-nav-item>
    </nly-nav>
  </nly-col>
  <nly-col xs="8" />
</nly-row>

<!-- vertical.name -->
<!-- nly-nav.vue -->
<nly-row>
  <nly-col xs="8" />
  <nly-col xs="4">
    <nly-nav tabs tabs-right vertical>
      <nly-nav-item active>Active</nly-nav-item>
      <nly-nav-item>Link</nly-nav-item>
      <nly-nav-item>Another Link</nly-nav-item>
      <nly-nav-item disabled>Disabled</nly-nav-item>
    </nly-nav>
  </nly-col>
</nly-row>

<!-- vertical.name -->
<!-- nly-nav.vue -->

下拉菜单

可以 添加 nly-nav-dropdown 组件来渲染下拉菜单

<div>
  <nly-nav pills>
    <nly-nav-item active>Active</nly-nav-item>
    <nly-nav-item>Link</nly-nav-item>
    <nly-nav-dropdown
      id="my-nav-dropdown"
      text="Dropdown"
      direction="right"
      dropdown-toggle
      dropdown-item
    >
      <nly-dropdown-item>One</nly-dropdown-item>
      <nly-dropdown-item>Two</nly-dropdown-item>
      <nly-dropdown-divider></nly-dropdown-divider>
      <nly-dropdown-item>Three</nly-dropdown-item>
    </nly-nav-dropdown>
  </nly-nav>
</div>
<!-- dropdown.name -->
<!-- nly-nav.vue -->

文本

使用 nly-nav-text 可以输入纯文本来代替 nly-nav-item

<div>
  <div>
    <nly-nav>
      <nly-nav-item href="#1">Link 1</nly-nav-item>
      <nly-nav-item href="#2">Link 2</nly-nav-item>
      <nly-nav-text>Plain text</nly-nav-text>
    </nly-nav>
  </div>
</div>
<!-- dropdown.name -->
<!-- nly-nav.vue -->

组件参数

props 参数

props (Click to sort Ascending)类型默认值描述
tag
String'ul'标签
fill
Booleanfalse按比列填充整个nav,但不是等宽
justified
Booleanfalse等宽填充整个nav
align
Stringnullnly-nav-item位置,可选 start,left,center,end,right
tabs
Booleanfalsenav tab形状,会添加class='nav-tabs'
tabs-right
Booleanfalse 选项卡形状,vertical, tabs 为true的情况下生效,nav右侧形状
pills
Booleanfalsenav圆角按钮形状
vertical
Booleanfalse垂直布局
small
Booleanfalse小字体
card-header
Booleanfalse放在卡片中时,可以设置为true,就会变成卡片头部

props 参数

props (Click to sort Ascending)类型默认值描述
nav-item
Booleantrue默认true,会有class='nav-item',设置为false则没有class='nav-item'
dropdown-item
Booleanfalse默认false,中间封装的nly-link会有class='nav-link,设置为true,则会变成class='dropdown-item', 设置true可以作为下拉菜单中嵌套元素
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-attrs
Object自定义封装在nly-nav-item中的nly-link的attrs
link-classes
String or Object or Arraynull自定义自定义封装在nly-nav-item中的nly-link的css式样

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

<nly-nav-dropdown>

props 参数

props (Click to sort Ascending)类型默认值描述
item-tag
String'li'下拉菜单标签
nav-item
Booleantrue默认li标签有一个class='nav-item',设置为false则没有,默认以nav-item式样呈现下拉菜单。nav-item作用于li标签。 默认是作为 nav-item元素
hover
Booleanfalse鼠标悬浮显示下拉菜单内容,hover作用于li标签,会覆盖所有子菜单hover,这时候会使得所有子菜单包括nav-dropdown本身都会成为鼠标悬浮显示菜单
submenu
Booleanfalse 默认不是子菜单,设置为true就是子菜单。可以作为下拉菜单的二级三级四级等菜单。submenu作用于li标签
direction
String'down'下拉菜单位置,可选down,left,right,up,none,选择none时li标签没有class='drop*'这个式样,当作为子菜单的时候,即submenu为true的时候,可以选择none(非必须,也可以选择down,left,right,up),子菜单会居右下显示。选择其他li标签会有class='drop*',direction作用于li标签
item-class
String自定义li标签css式样,item-class作用于li标签
disabled
Booleanfalse禁用菜单,disabled作用于a标签
popup
Booleanfalsearia-haspopup,popup作用于a标签
nav-link
Booleantrue是否为a标签添加 class='nav-link' 式样
dropdown-toggle
Booleanfalse是否带下拉菜单图标
id
String设置id
link-class
String自定义a标签css式样,link-class作用于a标签
link-tag
String'a'自定义下拉菜单按钮标签,默认a
dropdown-item
Booleanfalse默认a标签没有class='dropdown-item',设置为true则有class='dropdown-item',设置true,可以用作带有子菜单的二级菜单内的元素。dropdown-item作用于a标签
menu-tag
String'ul'下拉菜单内容标签,默认ul
menu-class
String自定义css式样,作用于ul标签,可以设置border-0去掉边框
size
String菜单大小,可选md,lg,xl,作用于ul标签
menu-direction
String'left'下拉菜单位置,只有direction为up或者down的时候有效,可选right。left,作用于ul标签
shadow
String'shadow'菜单阴影,可选shadow,sm,lg,none,作用于ul标签
text
String文本内容

Slots

Slot NameDescription
menucontent 下拉菜单嵌套元素插槽
linkcontent 下拉菜单按钮插槽

props 参数

props类型默认值描述
id
Stringnull设置id
novalidate
Booleanfalse
validated
Booleanfalse校验, 设置 true, 会渲染 class='was-validated' 到 warpper 元素上
role
String'form'role属性
form-class
String or Array or Objectnull

单个组件导入

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

组件导出名称导出路径
<nly-nav>NlyNavnly-adminlte-vue
<nly-nav-item>NlyNavItemnly-adminlte-vue
<nly-nav-dropdown>NlyNavDropdownnly-adminlte-vue
<nly-nav-text>NlyNavTextnly-adminlte-vue
<nly-nav-form>NlyNavFormnly-adminlte-vue

例子

import { NlyNav } from 'nly-adminlte-vue'
Vue.component('nly-nav', NlyNav)

导出作为插件

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

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

例子

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