# navigation-bar

**Repository Path**: hihopeorg/navigation-bar

## Basic Information

- **Project Name**: navigation-bar
- **Description**: 自定义导航栏组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-10-26
- **Last Updated**: 2023-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# navigation-bar

## 简介
> navigation-bar是可自由配置显示back及home图标，支持自定义导航栏的库。

![gif](screenshot/operation.gif)

## 下载安装

```shell
npm install @ohos/navigation-bar --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

## 使用说明

1. 在config.json中配置不显示标题栏
```
   "metaData": {
     "customizeData": [
       {
         "name": "hwc-theme",
         "value": "androidhwext:style/Theme.Emui.Dark.NoActionBar"
       }
     ]
   }
```
2. 在hml文件中引入并使用

```
<element name="navBar" src="navigation_bar/src/main/js/common/components/navBar/navBar.hml"></element>
<div class="container">
    <navBar @event-type-home="homeClicked" @event-type-back="backClicked" go-home="true" go-back="true" title=''>
        <div class='lxy-nav-bar-search' slot="centerSlot" style="background-color: #f6f6f6;padding-left: 0px;margin-right: 10px;">
            <input class="lxy-nav-bar-search__input" type="text" enterkeytype="search" placeholder="搜索内容" headericon="/common/images/search.png">
            </input>
        </div>
    </navBar>
    <div class='main' style='height : 500px;'>
        <text style="width: 100%;text-align: center;font-size: 16px;">搜索页面</text>
    </div>
</div>
```
PS：详细使用请查看demo

## 接口说明
1. 返回上个页面`事件类型$emit('eventTypeBack')`
2. 返回主页面`$emit('eventTypeHome')`
3. 搜索`$emit('eventType')`

## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
````
|---- OHOS_APP_we-swiper
|     |---- entry  # 示例代码文件夹
|     |---- navigation_bar  # navigation_bar库文件夹
|           |---- src
|                 |---- main
|                       |---- js
|                             |---- common
|                                   |---- navBar
|                                         |---- navBar.css
|                                         |---- navBar.hml
|                                         |---- navBar.js
|     |---- README.md  # 安装使用方法
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/navigation-bar/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/navigation-bar/pulls) 。

## 开源协议
本项目基于 [MIT License](https://gitee.com/hihopeorg/navigation-bar/blob/master/LICENSE) ，请自由地享受和参与开源。