rat-nav

组件介绍

安装

$ npm install rat-nav --save

引用

import Nav from 'rat-nav';

const { Item, SubNav } = Nav;

const header = <Text>RAT</Text>;
const footer = <Link>Login in</Link>;

render(
    <Nav header={header} footer={footer} defaultSelectedKeys={['home']} height={50} contentWidth={1000} style={{"background-color": "red"}} >
        <Item key="home">Home</Item>
        <SubNav label="Component" selectable>
            <Item key="next">Next</Item>
            <Item key="mext">Mext</Item>
            <SubNav label="Component" selectable>
                <Item key="next">Next</Item>
                <Item key="mext">Mext</Item>
            </SubNav>
        </SubNav>
        <Item key="document">Document</Item>
    </Nav>
), mountNode);

API

参数 | 说明 | 类型 | 默认值 | 是否必填 ----- | ----- | ------ | ------ |------ | visible | 是否显示弹层 | Boolean | false | 否 | target | 弹层定位的参照元素 | any | false | 否 | offset | 弹层相对于参照元素定位的微调 | Array | [0, 0] | 否 | hasMask | 是否显示遮罩 | Boolean | false | 否 | safeNode | 安全节点，当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组 | any | - | 否 | selectedKeys | 当前选中key | string/array | | 否 | defaultSelectedKeys| 默认选中key | string/array | | 否 | contentWidth | 中间内容宽度 | number | 1200 | 否 |