@txdfe/at-nav

1.0.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @txdfe/at-nav

Weekly Downloads

16

Version

1.0.0

License

ISC

Unpacked Size

1.48 MB

Total Files

24

Last publish

Collaborators

  • jiangyuanzhi
  • zhzxang
  • purple-force
  • zuoqi
  • tod.zx
  • 2ehao
  • bowei.jbw
  • teamaxy
  • cyris
  • saviio