# UNavbar 导航栏
- [示例](#示例)
- [基本用法](#基本用法)
- [选择控制](#选择控制)
- [与 Logo 结合](#与-logo-结合)
- [布局](#布局)
- [下拉菜单与选择](#下拉菜单与选择)
- [切换动画效果](#切换动画效果)
- [UNavbar API](#unavbar-api)
- [Props/Attrs](#propsattrs)
- [Slots](#slots)
- [Events](#events)
- [UNavbarItem API](#unavbaritem-api)
- [Props/Attrs](#propsattrs-2)
- [Events](#events-2)
- [UNavbarDivider API](#unavbardivider-api)
- [UNavbarDropdown API](#unavbardropdown-api)
- [Props/Attrs](#propsattrs-3)
- [UNavbarMenu API](#unavbarmenu-api)
- [UNavbarMenuGroup API](#unavbarmenugroup-api)
- [UNavbarMenuItem API](#unavbarmenuitem-api)
- [UNavbarMenuDivider API](#unavbarmenudivider-api)
- [UNavbarSelect API](#unavbarselect-api)
- [UNavbarSelectGroup API](#unavbarselectgroup-api)
- [UNavbarSelectItem API](#unavbarselectitem-api)
- [UNavbarSelectDivider API](#unavbarselectdivider-api)
**Navigation**
通常用于页面顶部的导航菜单，放置 Logo、导航链接、用户信息等。
## 示例
### 基本用法
下面展示了导航条的一些基本特性，如配置链接、添加分隔线、禁用选项等。
``` html
组件
概念
指令
配置
GitHub
```
### 选择控制
通过`router`属性开关来决定，导航条的选择项是直接与路由绑定，还是由`value`属性来控制。
#### 路由模式
默认为此种模式，即导航条的选择项通过`to`属性直接与路由绑定的，这样就不需要操作额外的变量。这种模式下每个``类似 VueRouter 的``。
``` html
组件
备案管理
帮助
GitHub
```
#### value 模式
将`router`属性设置为`false`时，导航条的选择项则由`value`属性来控制。类似于常用的``操作，`value`可以用`v-model`或`.sync`进行双向绑定。
``` html
组件
备案管理
帮助
GitHub
```
### 与 Logo 结合
``` html
ICP 备案系统
主体
备案管理
帮助
产品
价格
帮助
合作与生态
博客
备案
```
### 布局
#### 左右插槽
导航条内容有左中右三块区域。
通过`left`和`right`两个 slot，可以快速进行布局。
``` html
组件
概念
指令
```
#### 对齐方式
通过设置`alignment`属性，可以调整中部区域的对齐方式。
``` html
指南
概念
组件
指南
概念
组件
指南
概念
组件
```
### 下拉菜单与选择
使用``搭配``来实现下拉菜单，使用``来实现下拉选择。
``` html
组件
指令
Basic
Layout
Navigation
Navbar
Sidebar
Menu
请选择
中文
English
Français
Русский
```
### 切换动画效果
修改`animation`属性可以切换动画效果。
``` html
组件
概念
指令
配置
GitHub
组件
概念
指令
配置
GitHub
组件
概念
指令
配置
GitHub
组件
概念
指令
配置
GitHub
```
## UNavbar API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| router | boolean | | `true` | 是否根据 vue-router 来控制选择项 |
| value.sync, v-model | any | | | 当前选择的值 |
| field | string | | `'text'` | 显示文本字段 |
| readonly | boolean | | `false` | 是否只读 |
| disabled | boolean | | `false` | 是否禁用 |
### Slots
#### (default)
链接区域
#### left
左部区域，一般放置 logo 等
#### right
右部区域，一般放置用户个人信息等
### Events
#### @click
点击此项时触发，与原生 click 事件不同的是，它只会在非只读和禁用的情况下触发。
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | MouseEvent | 鼠标事件对象 |
| senderVM | Vue | 发送事件实例 |
#### @before-select
选择某一项前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 选择项的值 |
| $event.oldValue | any | 旧的值 |
| $event.item | object | 选择项相关对象 |
| $event.itemVM | NavbarItem | 选择项子组件 |
| $event.preventDefault | Function | 阻止选择流程 |
| senderVM | Vue | 发送事件实例 |
#### @input
选择某一项时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | any | 选择项的值 |
| senderVM | Vue | 发送事件实例 |
#### @select
选择某一项时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 改变后的值 |
| $event.oldValue | any | 旧的值 |
| $event.item | object | 选择项相关对象 |
| $event.oldItem | object | 旧的选择项相关对象 |
| $event.itemVM | UNavbarItem | 选择项子组件 |
| $event.oldVM | UNavbarItem | 旧的选择项子组件 |
| senderVM | Vue | 发送事件实例 |
#### @change
选择值改变时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 选择项的值 |
| $event.oldValue | any | 旧的值 |
| $event.item | object | 选择项相关对象 |
| $event.oldItem | object | 旧的选择项相关对象 |
| $event.itemVM | UNavbarItem | 选择项子组件 |
| $event.oldVM | UNavbarItem | 旧的选择项子组件 |
| senderVM | UNavbar | 发送事件实例 |
## UNavbarItem API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| text | string | | | 文本内容 |
| value | any | | | 此项的值 |
| icon | icon | | `''` | 图标 |
| disabled | boolean | | `false` | 禁用此项 |
| item | object | | | 相关对象。当选择此项时，抛出的事件会传递该对象，便于开发 |
| linkType | string | `[object Object]`
`[object Object]` | `'destination'` | 链接类型 |
| hrefAndTo | string | | | 链接地址 |
| target | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'_self'` | 链接跳转方式 |
| to | string, Location | | | 需要 vue-router，与``的`to`属性相同。可以是一个字符串或者是描述目标位置的对象。 |
| replace | boolean | | `false` | 需要 vue-router，与``的`replace`属性相同。如果为`true`，当点击时，会调用`router.replace()`而不是`router.push()`，于是导航后不会留下`history `记录。 |
| exact | boolean | | `false` | 需要 vue-router，与``的`exact`属性相同。是否与路由完全一致时才高亮显示。 |
### Events
#### @before-select
选择此项前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.value | any | 此项的值 |
| $event.item | object | 此项的相关对象 |
| $event.itemVM | UNavbarItem | 此组件 |
| $event.preventDefault | Function | 阻止选择流程 |
| senderVM | Vue | 发送事件实例 |
#### @before-navigate
使用 router 相关属性切换路由前触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.to | string, Location | `to`属性的值 |
| $event.replace | boolean | `replace`属性的值 |
| $event.exact | boolean | `exact`属性的值 |
| $event.preventDefault | Function | 阻止切换流程 |
| senderVM | Vue | 发送事件实例 |
#### @navigate
使用router相关属性切换路由时触发
| Param | Type | Description |
| ----- | ---- | ----------- |
| $event | object | 自定义事件对象 |
| $event.to | string, Location | `to`属性的值 |
| $event.replace | boolean | `replace`属性的值 |
| $event.exact | boolean | `exact`属性的值 |
| senderVM | Vue | 发送事件实例 |
## UNavbarDivider API
暂无
## UNavbarDropdown API
### Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| trigger | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'hover'` | 触发方式 |
| placement | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'bottom'` | 弹出方位 |
| disabled | boolean | | `false` | 是否禁用 |
## UNavbarMenu API
暂无
## UNavbarMenuGroup API
暂无
## UNavbarMenuItem API
暂无
## UNavbarMenuDivider API
暂无
## UNavbarSelect API
暂无
## UNavbarSelectGroup API
暂无
## UNavbarSelectItem API
暂无
## UNavbarSelectDivider API
暂无