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
支持 tabs
和 pills
两种外观。且都支持 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 fill
和 justified
可以使得 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 | Boolean | false | 按比列填充整个nav,但不是等宽 |
justified | Boolean | false | 等宽填充整个nav |
align | String | null | nly-nav-item位置,可选 start,left,center,end,right |
tabs | Boolean | false | nav tab形状,会添加class='nav-tabs' |
tabs-right | Boolean | false | 选项卡形状,vertical, tabs 为true的情况下生效,nav右侧形状 |
pills | Boolean | false | nav圆角按钮形状 |
vertical | Boolean | false | 垂直布局 |
small | Boolean | false | 小字体 |
card-header | Boolean | false | 放在卡片中时,可以设置为true,就会变成卡片头部 |
props 参数
props (Click to sort Ascending) | 类型 | 默认值 | 描述 |
---|---|---|---|
nav-item | Boolean | true | 默认true,会有class='nav-item',设置为false则没有class='nav-item' |
dropdown-item | Boolean | false | 默认false,中间封装的nly-link会有class='nav-link,设置为true,则会变成class='dropdown-item', 设置true可以作为下拉菜单中嵌套元素 |
href | String | null | 普通 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 | null | 点击跳转的页面, 可以是路由对象或者字符串,以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 |
link-attrs | Object | 自定义封装在nly-nav-item中的nly-link的attrs | |
link-classes | String or Object or Array | null | 自定义自定义封装在nly-nav-item中的nly-link的css式样 |
<nly-nav-item>
会生成支持
<router-link>
或者
<nuxt-link>
的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt
link) 支持的 props, 请跳转
Router support
文档
props 参数
props (Click to sort Ascending) | 类型 | 默认值 | 描述 |
---|---|---|---|
item-tag | String | 'li' | 下拉菜单标签 |
nav-item | Boolean | true | 默认li标签有一个class='nav-item',设置为false则没有,默认以nav-item式样呈现下拉菜单。nav-item作用于li标签。 默认是作为 nav-item元素 |
hover | Boolean | false | 鼠标悬浮显示下拉菜单内容,hover作用于li标签,会覆盖所有子菜单hover,这时候会使得所有子菜单包括nav-dropdown本身都会成为鼠标悬浮显示菜单 |
submenu | Boolean | false | 默认不是子菜单,设置为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 | Boolean | false | 禁用菜单,disabled作用于a标签 |
popup | Boolean | false | aria-haspopup,popup作用于a标签 |
nav-link | Boolean | true | 是否为a标签添加 class='nav-link' 式样 |
dropdown-toggle | Boolean | false | 是否带下拉菜单图标 |
id | String | 设置id | |
link-class | String | 自定义a标签css式样,link-class作用于a标签 | |
link-tag | String | 'a' | 自定义下拉菜单按钮标签,默认a |
dropdown-item | Boolean | false | 默认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 | 文本内容 |
单个组件导入
你可以从下表给出的导出路径和导出名称导入单个组件包
组件 | 导出名称 | 导出路径 |
---|---|---|
<nly-nav> | NlyNav | nly-adminlte-vue |
<nly-nav-item> | NlyNavItem | nly-adminlte-vue |
<nly-nav-dropdown> | NlyNavDropdown | nly-adminlte-vue |
<nly-nav-text> | NlyNavText | nly-adminlte-vue |
<nly-nav-form> | NlyNavForm | nly-adminlte-vue |
例子
import { NlyNav } from 'nly-adminlte-vue' Vue.component('nly-nav', NlyNav)
导出作为插件
导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.
导出名称 | 导出路径 |
---|---|
NavPlugin | nly-adminlte-vue |
例子
import { NavPlugin } from 'nly-adminlte-vue' Vue.use(NavPlugin)