0.1.2 • Published 4 years ago
@stofe/sui-navigation v0.1.2
title: 使用文档
sui-navigation
一般用于站点左侧弹出导航, 可以通过单独安装组件或者组件库两种方式使用
组件使用方式
$ snpm install @stofe/sui-navigation --save
import Navigation from '@stofe/sui-navigation'组件库使用方式
$ snpm install @stofe/sui --save
import { Navigation } from '@stofe/sui'API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| dataSource | 菜单内容 | array | true | - |
| activeKey | 当前选中的节点的key，默认非受控 | string | false | - |
| footer | 导航栏底部，用于自定义底部内容 | node | false | noop |
| hasDing | 是否有固定锚点 | bool | false | false |
| dingMap | 固定锚点配置 | object | false | {} |
| onDing | 固定锚点点击事件 | func | false | noop |
| onItemClick | 菜单选中的方法 | func | func | noop |
| onClose | 导航关闭 | func | func | noop |
| iconRender | icon函数，默认使用，业务可以自定义函数 | func | func | noop |
示例
import { Drawer } from 'next'
import Navigation from '@stofe/sui-navigation'
const dataSource = [
{
"title": "财务中心",
"url": "/page/fin-center",
"icon": "caiwuzhongxin",
"children": [
{
"title": "报价管理",
"url": "/page/fin-center/quote",
"id": "133",
"disabled": false,
"index": 10
"children": [
{
"title": "报价资料",
"url": "/page/fin-center/quote/quote-info/list",
"id": "134",
"disabled": false,
"index": 30
}
],
}]
]
}
]
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false
};
}
onNavOpen = () => {
this.setState({ visible: true });
}
onNavClose = () => {
this.setState({ visible: false });
}
render() {
const { visible } = this.state;
return (
<div className="demo-container" data-title="DEMO">
<header>
<Icon type="toggle-right" size="large" onClick={this.onNavOpen} />
</header>
<Drawer
visible={visible}
width={440}
placement="left"
onClose={this.onNavClose}
className="demo-drawer"
bodyStyle={{
padding: 0,
height: '100%',
border: 'none'
}}
>
<Navigation
dataSource={dataSource}
/>
</Drawer>
</div>
);
}
}