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>
    );
  }
}

LICENSE