# sto-navigation

> 申通中后台导航栏

Latest version **1.1.3** (published 2019-11-20) · BSD license · 0 weekly downloads

## Install

```sh
npm install sto-navigation
pnpm add sto-navigation
yarn add sto-navigation
bun add sto-navigation
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2019-11-20 |
| First published | 2019-10-31 |
| Weekly downloads | 0 |
| License | BSD |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | caihuazhi |
| Maintainers | huarse |

## Links

- npm: https://www.npmjs.com/package/sto-navigation
- Repository: git@gitlab.alibaba-inc.com:berry/sto-navigation
- npm.io page: https://npm.io/package/sto-navigation

## Recent versions

- 1.1.3 (latest) — 2019-11-20
- 1.1.2 — 2019-11-04
- 1.1.1 — 2019-10-31
- 1.1.0 — 2019-10-31
- 1.0.0 — 2019-10-31
- 0.1.0 — 2019-10-31

## README

# sto-navigation

![version](https://img.shields.io/npm/v/sto-navigation)
![license](https://img.shields.io/npm/l/sto-navigation)
![downloads](https://img.shields.io/npm/dw/sto-navigation)
[![coffee](http://cp.alibaba.net/projects/5bdffc536613d9326abbf701/badge)](http://cp.alibaba.net/donates?id=5bdffc536613d9326abbf701)

## 快速使用

- `$ npm install sto-navigation --save`

```javascript
import Navigation from 'sto-navigation';

const dataSource = [
    { title: '首页', link: '#/home' },
    { title: '人员管理', link: '#/emp-manager', children: [
        { title: '绩效管理', link: '#/emp-manager/kpi' },
        { title: '薪资管理', link: '#/emp-manager/salary' },
    ]},
];

ReactDOM.render(
    <Navigation dataSource={dataSource} defaultActiveKey="#/emp-manager/salary" />,
    mountNode,
);
```

## API

| props            | desc                                  | type  | required | default    |
| ---------------- | ------------------------------------- | ----- | -------- | ---------- |
| dataSource       | 导航主配置                            | array | yes      | []         |
| defaultActiveKey | 初始化时默认选中的节点的 key，单选    | any   | no       | null       |
| activeKey        | 当前选中的节点的 key，单选            | any   | no       | --         |
| onItemClick      | 菜单选中的方法                        | func  | no       | noop       |
| quickSource      | 快捷入口配置                          | array | no       | --         |
| quickTitle       | 快捷入口标题，默认是 "快捷入口"       | node  | no       | '快捷入口' |
| onQuickClick     | 快捷入口点击事件                      | func  | no       | noop       |
| onExpandChange   | 导航栏展开/收起事件, 入参表示是否收起 | func  | no       | noop       |
| footer           | 导航栏底部，用于自定义底部内容        | node  | no       | null       |

### dataSource 数据格式

```javascript
export const dataSource = [{
    // 菜单名称
    title: 'AAAA',
    key: '1001', // [可选] 菜单项的唯一ID
    // 菜单点击链接，如果没有 key，link 也作为菜单唯一的 key
    link: '链接', 
    // 图标 class，默认取 @alifd/theme-sto 中的 Icon 组件的 type 值，
    //     如果是 .xxx.xx 则会渲染成 <i className={icon}"></i>
    //     如果是一个图片 URL，则会渲染成 <img src={icon} />
    icon: 'home', 
    // [可选] 菜单文字后的徽标，可以是 'orange'|'red'|'green' 或一个图片 URL
    badge: 'orange', 
    // [可选] 如果为 true，则降低菜单透明度
    hidden: false,
    // [可选] 如果为 true, 则不显示菜单 
    hidden: false,
    // [可选] 链接的 target 属性，默认是 _self
    target: '',
    children: [ // [可选] 子菜单列表
        // title, link, icon, badge, hidden, disabled 同父菜单
        { title: 'AAA', link: '#/aaaa' , icon: ''},
    ]
}];
```

### quickSource 数据格式

`quickSource` 的数据格式字段同 `dataSource`，但只取: `title`, `link`, `target` 字段

### 可定制的 SASS 变量

```scss
$navigation-bg-color: #525252 !default;
$navigation-text-color: #ffffff !default;
$navigation-text-size: 14px !default;
$navigation-item-hover: #464646 !default;
$navigation-width: 200px !default;
$navigation-item-height: 40px !default;
$navigation-submenu-width: $navigation-width - 40px !default;
$navigation-submenu-bg-color: #ffffff !default;
$navigation-submenu-text-color: #333333 !default;
$navigation-submenu-hover: #F4F4F4 !default;
$navigation-submenu-shadow: 1px 0 3px rgba(0,0,0,.1) !default;
```

## LICENSE

BSD License

---
_Source: https://npm.io/package/sto-navigation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._