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时右侧显示的内容 |