@txdfe/at-nav

at-nav

---

简介

Teambition 导航

使用示例

import Nav from '@txdfe/at-nav';

const { Item } = Nav;

class Demo extends React.Component {
  render() {
    return (
      <Nav maxCount={4}>
        <Item icon="dingding" label="菜单项一" key="a" />
        <Item icon="zhihu" label={<a href="//www.taobao.com">菜单二</a>} key="b" />
        <Item icon="wechat" label="菜单项三" key="c" />
        <Item icon="teambition" label="菜单项四" key="d" />
        <Item icon="evernote" label="菜单项五" key="e" />
        <Item icon="github" label="菜单项六" key="f" />
      </Nav>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

API

Nav

参数	类型	可选值	默认值	是否必填	说明
className	String	无	无	否	设置额外的className
style	Object	无	无	否	设置额外的样式
maxCount	Number	无	5	否	显示的主导航项数，多余的会被收起。只在子元素为Nav.Item时有效
defaultSelectedKey	String	无	无	否	默认选中的key，非受控
selectedKey	String	无	无	否	选中的key，受控
onSelect	Function	无	(selectedKey) => {}	否	选中某项的回调
defaultExpandedKeys	String[]	无	无	否	默认展开带子导航项的主导航的key数组，非受控
expandedKeys	String[]	无	无	否	展开的key，受控
onExpand	Function	无	(expandedKeys) => {}	否	展开带子导航项的主导航回调

Nav.Group

参数	类型	可选值	默认值	是否必填	说明
label	ReactNode	无	无	是	显示的组标题
maxCount	Number	无	5	否	组内默认显示的主导航数，多余的会被隐藏

Nav.Item

参数	类型	可选值	默认值	是否必填	说明
key	String	无	无	否	唯一标记
icon	String	ReactNode	所有@txdfe/at提供的icon类型或者<Icon type='xxx'>	是	设置图标
label	ReactNode	无	无	是	显示的标题
extra	ReactNode	无	无	否	默认在右侧显示的内容
hoverExtra	String	无	无	否	hover时右侧显示的内容

Nav.SubItem

参数	类型	可选值	默认值	是否必填	说明
key	String	无	无	否	唯一标记
label	ReactNode	无	无	是	显示的标题
extra	ReactNode	无	无	否	默认在右侧显示的内容
hoverExtra	String	无	无	否	hover时右侧显示的内容