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

/@txdfe/at-nav/

    Package Sidebar

    Install

    npm i @txdfe/at-nav

    Weekly Downloads

    7

    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