HlsNavigationBar.md

# HlsNavigationBar

左侧导航栏

说明：前期仅封装了一些常用的属性

### 一般属性：

| 属性 | 类型 | 描述 |
| :--- | :--- | :--- |
| navigationBarTitle | String | 导航栏标题 |
| navigationBar | String | 标记为导航栏（true） |
| treeTitle | String | 导航栏父节点标题 |
| navigationBarId | String | 导航栏唯一标识 |
| navigatonBarClass | String | 导航栏通用标识 |
| barType | String | 导航栏类型（可以为tree或normal） |
| nodeLevel | String | 设置导航栏为父节点或者子节点 |

### 使用：

说明：目前系统遇到的是普通不分层的导航和分两层的导航，以下针对这两种使用说明

##### 1.hlsNavigationBar

说明：导航栏的标志标签，在这个标签内书写需要生成标签的内容

```html
 <h:hlsNavigationBar>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </hlsNavigationBar>
```

##### 2.barType

说明：bartype有两种类型：tree（分层），normal（不分层）

```html
<h:hlsNavigationBar barType="tree">
    <div></div>
</hlsNavigationBar>
```

##### 3.navigationBar

说明：加上此属性并设为“true”表示该块内容需要导航栏

```html
<h:hlsNavigationBar barType="tree">
    <div navigationBar="true"></div>
</hlsNavigationBar>
```

##### 4.navigationBarTitle

说明：在导航栏中显示标题（如果是分层的导航栏这个就作为子标题显示），如果不写则取标签中title，若都为空则自动根据位置系统命名为"x.第x模块" x是数字

```html
<h:hlsNavigationBar barType="tree">
    <div navigationBar="true" navigationBarTitle="标题1"></div>
</hlsNavigationBar>
```

##### 5.treeTitle

说明：作为分层导航栏的父标题，如果不写则取标签中的title，若都为空则系统自动命名为"x.第x模块" x是数字

```html
<h:hlsNavigationBar barType="tree">
    <div nodeLevl="parent" navigationBar="true" treeTitle="承租人注册信息"></div>
    <div navigationBar="true" navigationBarTitle="注册信息"></div>
</hlsNavigationBar>
```

##### 6.nodeLevel

说明：添加该属性并设置为“parent”则表示该标题作为父标题，不添加则为子标题

![](/assets/4108.png)

### 使用实例：

##### 1.分层实例

```html
<h:hlsNavigationBar barType="tree">
    <div nodeLevl="parent" navigationBar="true" treeTitle="基本信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="基本信息">
        //这里是内容
    </div>
    <div nodeLevl="parent" navigationBar="true" treeTitle="承租人注册信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="注册信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="历史沿革">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="股权结构">
        //这里是内容
    </div>
    <<h:hlsForm navigationBar="true" navigationBarTitle="经营情况">
        //这里是内容
    </hlsForm>
    <div navigationBar="true" navigationBarTitle="财务状况">
        //这里是内容
    </div>
    <div nodeLevl="parent" navigationBar="true" treeTitle="租赁交易分析">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="租赁报价方案">
        //这里是内容
    </div>
    <h:dataSource></dataSource>
    <h:hlsGridBox navigationBar="true" navigationBarTitle="租赁物信息"></hlsGridBox>
</hlsNavigationBar>
```

##### 效果图：![](/assets/import.png)2.不分层实例

```html
<h:hlsNavigationBar barType="tree">
    <div navigationBar="true" navigationBarTitle="基本信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="开票信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="地址信息">
        //这里是内容
    </div>
    <div navigationBar="true" navigationBarTitle="联系人信息">
        //这里是内容
    </div>
    <<h:hlsForm navigationBar="true" navigationBarTitle="关联方信息">
        //这里是内容
    </hlsForm>
    <h:dataSource></dataSource>
    <h:hlsGridBox navigationBar="true" navigationBarTitle="银行账户信息"></hlsGridBox>
</hlsNavigationBar>
```

效果图：

![](/assets/215412.png)