Nav 导航

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

注意事项

  • iconOnly 只适用垂直方向。

API。

API

Nav

继承自 Menu 的能力请查看 Menu 文档

参数说明类型默认值
children导航项和子导航ReactNode-
type导航类型可选值:'normal'(普通)'primary'(主要)'secondary'(次要)'line'(线形)Enum'normal'
direction导航布局可选值:'hoz'(水平)'ver'(垂直)Enum'ver'
hozAlign横向导航条 items 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效可选值:'left', 'right'Enum'left'
activeDirection设置组件选中状态的 active 边方向可选值:null(无)'top'(上)'bottom'(下)'left'(左)'right'(右)Enum当 direction 为 'hoz' 时，默认值为 'bottom'，当 direction 为 'ver' 时，默认值为 'left'
mode子导航打开的模式（水平导航只支持弹出）可选值:'inline', 'popup'Enum'inline'
triggerType子导航打开的触发方式可选值:'click', 'hover'Enum'click'
inlineIndent内联子导航缩进距离Number20
defaultOpenAll初始展开所有的子导航，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效Booleanfalse
openMode内联子导航的展开模式，同时可以展开一个同级子导航还是多个同级子导航，该属性仅在 mode 为 inline 时生效可选值:'single', 'multiple'Enum'multiple'
selectedKeys当前选中导航项的 key 值String/Array-
defaultSelectedKeys初始选中导航项的 key 值String/Array[]
onSelect选中或取消选中导航项触发的回调函数签名:Function(selectedKeys: Array, item: Object, extra: Object) => void参数:selectedKeys: {Array} 选中的所有导航项的 keyitem: {Object} 选中或取消选中的导航项extra: {Object} 额外参数extra.select: {Boolean} 是否是选中extra.key: {Array} 导航项的 keyextra.label: {Object} 导航项的文本extra.keyPath: {Array} 导航项 key 的路径Function-
popupAlign弹出子导航的对齐方式（水平导航只支持 follow ）可选值:'follow', 'outside'Enum'follow'
popupClassName弹出子导航的自定义类名String-
iconOnly是否只显示图标Boolean-
hasArrow是否显示右侧的箭头（仅在 iconOnly=true 时生效）Booleantrue
hasTooltip是否有 ToolTips （仅在 iconOnly=true 时生效）Booleanfalse
header自定义导航头部ReactNode-
footer自定义导航尾部ReactNode-
embeddable是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合<Nav style={{lineHeight: '100px'}}> 自定义高度Booleanfalse

Nav.Group

继承自 Menu.Group 的能力请查看 Menu.Group 文档

参数说明类型默认值
label标签内容ReactNode-
children导航项和子导航ReactNode-

Nav.Item

继承自 Menu.Item 的能力请查看 Menu.Item 文档

参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type，也可以使用组件 <Icon type="icon type" />String/ReactNode-
children导航内容ReactNode-

Nav.PopupItem

继承自 Menu.PopupItem 的能力请查看 Menu.PopupItem 文档

参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type, 也可以使用组件 <Icon type="icon type" />String/ReactNode-
label标签内容ReactNode-
children弹出内容ReactNode-

Nav.SubNav

继承自 Menu.SubMenu 的能力请查看 Menu.SubMenu 文档

参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type，也可以使用组件 <Icon type="your type" />String/ReactNode-
label标签内容ReactNode-
selectable是否可选Booleanfalse
children导航项和子导航ReactNode-

ARIA and KeyBoard

按键说明
Up Arrow导航到上一项
Down Arrow导航到下一项
Right Arrow打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项
Left Arrow关闭子菜单，导航到父级菜单；横向菜单条第一层，导航到左一项
Enter打开子菜单，导航到子菜单第一项
Esc关闭子菜单，导航到父级菜单

代码示例

基本

最简单的使用方式。

Nav 导航 - 图1

查看源码在线预览

  1. import { Nav } from '@alifd/next';
  4. const { Item, SubNav } = Nav;
  6. const header = <span className="fusion">FUSION</span>;
  7. const footer = <a className="login-in" href="javascript:;">Login in</a>;
  9. ReactDOM.render(
  10.     <Nav className="basic-nav" direction="hoz" type="primary" header={header} footer={footer} defaultSelectedKeys={['home']} triggerType="hover">
  11.         <Item key="home">Home</Item>
  12.         <SubNav label="Component" selectable>
  13.             <Item key="next">Next</Item>
  14.             <Item key="mext">Mext</Item>
  15.         </SubNav>
  16.         <Item key="document">Document</Item>
  17.     </Nav>
  18.     , mountNode);
  1. .basic-nav .fusion {
  2.     margin: 8px 20px;
  3.     width: 100px;
  4.     color: #FFFFFF;
  5.     font-size: 20px;
  6. }
  7. .basic-nav .login-in {
  8.     margin: 0 20px;
  9.     color: #FFFFFF;
  10. }
  11. .basic-nav .next-nav-item {
  12.     width: 120px;
  13. }

定制

Nav 提供了丰富的配置，可以进行个性化定制。

Nav 导航 - 图2

查看源码在线预览

  1. import { Nav, Radio } from '@alifd/next';
  4. const { Item, SubNav } = Nav;
  6. class App extends React.Component {
  7.     state = {
  8.         type: 'normal',
  9.         direction: 'hoz',
  10.         activeDirection: null,
  11.         triggerType: 'click'
  12.     }
  14.     setValue(name, value) {
  15.         this.setState({
  16.             [name]: value === '' ? null : value
  17.         });
  18.     }
  20.     setTriggerType(triggerType) {
  21.         this.setState({
  22.             triggerType
  23.         });
  24.     }
  26.     render() {
  27.         const { type, direction, activeDirection, triggerType } = this.state;
  29.         return (
  30.             <div>
  31.                 <div className="demo-ctl">
  32.                     <Radio.Group shape="button" size="medium" value={type} onChange={this.setValue.bind(this, 'type')}>
  33.                         <Radio value="normal">type="normal"</Radio>
  34.                         <Radio value="primary">type="primary"</Radio>
  35.                         <Radio value="secondary">type="secondary"</Radio>
  36.                         <Radio value="line">type="line"</Radio>
  37.                     </Radio.Group>
  38.                     <Radio.Group shape="button" size="medium" value={direction} onChange={this.setValue.bind(this, 'direction')}>
  39.                         <Radio value="hoz">direction="hoz"</Radio>
  40.                         <Radio value="ver">direction="ver"</Radio>
  41.                     </Radio.Group>
  42.                     <Radio.Group shape="button" size="medium" value={activeDirection === null ? '' : activeDirection} onChange={this.setValue.bind(this, 'activeDirection')}>
  43.                         <Radio value="">activeDirection=null</Radio>
  44.                         {direction === 'hoz' ? <Radio value="top">activeDirection="top"</Radio> : null}
  45.                         {direction === 'hoz' ? <Radio value="bottom">activeDirection="bottom"</Radio> : null}
  46.                         {direction === 'ver' ? <Radio value="left">activeDirection="left"</Radio> : null}
  47.                         {direction === 'ver' ? <Radio value="right">activeDirection="right"</Radio> : null}
  48.                     </Radio.Group>
  49.                     <Radio.Group shape="button" size="medium" value={triggerType} onChange={this.setTriggerType.bind(this)}>
  50.                         <Radio value="click">triggerType="click"</Radio>
  51.                         <Radio value="hover">triggerType="hover"</Radio>
  52.                     </Radio.Group>
  53.                 </div>
  54.                 <Nav className="custom-nav" type={type} direction={direction} activeDirection={activeDirection} triggerType={triggerType}>
  55.                     <Item>Item 1</Item>
  56.                     <Item>Item 2</Item>
  57.                     <SubNav label="Sub Nav">
  58.                         <Item>Item 3</Item>
  59.                         <Item>Item 4</Item>
  60.                         <SubNav label="Sub Nav">
  61.                             <Item>Item 5</Item>
  62.                             <Item>Item 6</Item>
  63.                         </SubNav>
  64.                     </SubNav>
  65.                     <Item icon="account">
  66.                         <a href="http://www.taobao.com" target="_blank">Taobao</a>
  67.                     </Item>
  68.                 </Nav>
  69.             </div>
  70.         );
  71.     }
  72. }
  74. ReactDOM.render(<App />, mountNode);
  1. .demo-ctl {
  2.     background-color: #F1F1F1;
  3.     border-left: 4px solid #0D599A;
  4.     color: #0A7AC3;
  5.     margin-bottom: 20px;
  6.     padding: 5px;
  7. }
  8. .demo-ctl .next-radio-group {
  9.     display: block;
  10.     margin: 5px;
  11. }
  12. .custom-nav.next-hoz .next-nav-item {
  13.     width: 100px;
  14. }
  15. .custom-nav.next-ver {
  16.     width: 200px;
  17. }

只显示图标

Nav 可设置 iconOnly 属性，只显示图标，以减少占用空间。

Nav 导航 - 图3

查看源码在线预览

  1. import { Nav, Radio } from '@alifd/next';
  4. const { Item, SubNav } = Nav;
  6. class App extends React.Component {
  7.     state = {
  8.         iconOnly: false,
  9.         hasTooltip: true,
  10.         hasArrow: true
  11.     }
  13.     setValue(name, value) {
  14.         this.setState({
  15.             [name]: value === 'true'
  16.         });
  17.     }
  19.     render() {
  20.         const { iconOnly, hasTooltip, hasArrow } = this.state;
  22.         return (
  23.             <div>
  24.                 <div className="demo-ctl">
  25.                     <Radio.Group shape="button" size="medium" value={iconOnly ? 'true' : 'false'} onChange={this.setValue.bind(this, 'iconOnly')}>
  26.                         <Radio value="true">iconOnly=true</Radio>
  27.                         <Radio value="false">iconOnly=false</Radio>
  28.                     </Radio.Group>
  29.                     {iconOnly ?
  30.                         <Radio.Group shape="button" size="medium" value={hasArrow ? 'true' : 'false'} onChange={this.setValue.bind(this, 'hasArrow')}>
  31.                             <Radio value="true">hasArrow=true</Radio>
  32.                             <Radio value="false">hasArrow=false</Radio>
  33.                         </Radio.Group> : null}
  34.                     {iconOnly ?
  35.                         <Radio.Group shape="button" size="medium" value={hasTooltip ? 'true' : 'false'} onChange={this.setValue.bind(this, 'hasTooltip')}>
  36.                             <Radio value="true">hasTooltip=true</Radio>
  37.                             <Radio value="false">hasTooltip=false</Radio>
  38.                         </Radio.Group> : null}
  39.                 </div>
  40.                 <Nav style={{ width: '200px' }} iconOnly={iconOnly} hasArrow={hasArrow} hasTooltip={hasTooltip}>
  41.                     <Item icon="account">Navigation One</Item>
  42.                     <Item icon="account">Navigation Two</Item>
  43.                     <Item icon="account">Navigation Three</Item>
  44.                     <Item icon="account">Navigation Four</Item>
  45.                     <Item icon="account">Navigation Five</Item>
  46.                     <SubNav icon="account" label="Sub Nav">
  47.                         <Item icon="account">Item 1</Item>
  48.                         <Item icon="account">Item 2</Item>
  49.                         <Item icon="account">Item 3</Item>
  50.                         <Item icon="account">Item 4</Item>
  51.                     </SubNav>
  52.                 </Nav>
  53.             </div>
  54.         );
  55.     }
  56. }
  58. ReactDOM.render(<App />, mountNode);
  1. .demo-ctl {
  2.     background-color: #F1F1F1;
  3.     border-left: 4px solid #0D599A;
  4.     color: #0A7AC3;
  5.     margin-bottom: 20px;
  6.     padding: 5px;
  7. }
  8. .demo-ctl .next-radio-group {
  9.     margin: 5px;
  10. }

分组

建议只在垂直布局中使用。

Nav 导航 - 图4

查看源码在线预览

  1. import { Nav } from '@alifd/next';
  3. const { Item, Group } = Nav;
  5. ReactDOM.render(
  6.     <Nav style={{ width: 240 }}>
  7.         <Group label="Group Label 1">
  8.             <Item icon="account">Navigation One</Item>
  9.             <Item icon="account">Navigation Two</Item>
  10.             <Item icon="account">Navigation Three</Item>
  11.         </Group>
  12.         <Group label="Group Label 2">
  13.             <Item icon="account">Navigation Four</Item>
  14.             <Item icon="account">Navigation Five</Item>
  15.             <Item icon="account">Navigation Six</Item>
  16.         </Group>
  17.     </Nav>, mountNode);

展开模式

当 Nav 的 mode="inline" 时，openMode 可控制同级内联子导航的展开数量。

Nav 导航 - 图5

查看源码在线预览

  1. import { Nav, Radio } from '@alifd/next';
  3. const { Item, SubNav } = Nav;
  5. class App extends React.Component {
  6.     state = {
  7.         openMode: 'single'
  8.     }
  10.     setValue(openMode) {
  11.         this.setState({
  12.             openMode
  13.         });
  14.     }
  16.     render() {
  17.         const { openMode } = this.state;
  19.         return (
  20.             <div>
  21.                 <div className="demo-ctl">
  22.                     <Radio.Group shape="button" size="medium" value={openMode} onChange={this.setValue.bind(this)}>
  23.                         <Radio value="single">openMode="single"</Radio>
  24.                         <Radio value="multiple">openMode="multiple"</Radio>
  25.                     </Radio.Group>
  26.                 </div>
  27.                 <Nav style={{ width: 240 }} openMode={openMode}>
  28.                     <SubNav label="Sub Nav 1">
  29.                         <Item>Item 1</Item>
  30.                     </SubNav>
  31.                     <SubNav label="Sub Nav 2">
  32.                         <Item>Item 1</Item>
  33.                         <Item>Item 2</Item>
  34.                         <SubNav label="Sub Nav 1">
  35.                             <Item>Item 1</Item>
  36.                             <Item>Item 2</Item>
  37.                         </SubNav>
  38.                         <SubNav label="Sub Nav 2">
  39.                             <Item>Item 1</Item>
  40.                             <Item>Item 2</Item>
  41.                         </SubNav>
  42.                     </SubNav>
  43.                     <SubNav label="Sub Nav 3">
  44.                         <Item>Item 1</Item>
  45.                         <Item>Item 2</Item>
  46.                         <Item>Item 3</Item>
  47.                         <SubNav label="Sub Nav 1">
  48.                             <Item>Item 1</Item>
  49.                             <Item>Item 2</Item>
  50.                             <Item>Item 3</Item>
  51.                         </SubNav>
  52.                         <SubNav label="Sub Nav 2">
  53.                             <Item>Item 1</Item>
  54.                             <Item>Item 2</Item>
  55.                             <Item>Item 3</Item>
  56.                         </SubNav>
  57.                         <SubNav label="Sub Nav 3">
  58.                             <Item>Item 1</Item>
  59.                             <Item>Item 2</Item>
  60.                             <Item>Item 3</Item>
  61.                         </SubNav>
  62.                     </SubNav>
  63.                     <Item>Item</Item>
  64.                 </Nav>
  65.             </div>);
  66.     }
  67. }
  69. ReactDOM.render(<App />, mountNode);
  1. .demo-ctl {
  2.     background-color: #F1F1F1;
  3.     border-left: 4px solid #0D599A;
  4.     color: #0A7AC3;
  5.     margin-bottom: 20px;
  6.     padding: 5px;
  7. }
  8. .demo-ctl .next-radio-group {
  9.     margin: 5px;
  10. }

对齐方式

当 Nav 的 mode="popup" 时，popAlign 可控制弹出子导航的对齐方式。

Nav 导航 - 图6

查看源码在线预览

  1. import { Nav, Radio } from '@alifd/next';
  3. const { Item, SubNav } = Nav;
  5. class App extends React.Component {
  6.     state = {
  7.         popupAlign: 'follow'
  8.     }
  10.     setValue(popupAlign) {
  11.         this.setState({
  12.             popupAlign
  13.         });
  14.     }
  16.     render() {
  17.         const { popupAlign } = this.state;
  19.         return (
  20.             <div>
  21.                 <div className="demo-ctl">
  22.                     <Radio.Group shape="button" size="medium" value={popupAlign} onChange={this.setValue.bind(this)}>
  23.                         <Radio value="follow">popupAlign="follow"</Radio>
  24.                         <Radio value="outside">popupAlign="outside"</Radio>
  25.                     </Radio.Group>
  26.                 </div>
  27.                 <Nav style={{ height: 400, width: 240 }} mode="popup" popupAlign={popupAlign} defaultOpenKeys={['sub-nav-2']}>
  28.                     <SubNav key="sub-nav-1"label="Sub Nav 1">
  29.                         <Item key="1">Item 1</Item>
  30.                     </SubNav>
  31.                     <SubNav key="sub-nav-2" label="Sub Nav 2">
  32.                         <Item key="1">Item 1</Item>
  33.                         <Item key="2">Item 2</Item>
  34.                     </SubNav>
  35.                     <SubNav key="sub-nav-3" label="Sub Nav 3">
  36.                         <Item key="1">Item 1</Item>
  37.                         <Item key="2">Item 2</Item>
  38.                         <Item key="3">Item 3</Item>
  39.                     </SubNav>
  40.                     <SubNav key="sub-nav-4" label="Sub Nav 4">
  41.                         <Item key="1">Item 1</Item>
  42.                         <Item key="2">Item 2</Item>
  43.                         <Item key="3">Item 3</Item>
  44.                         <Item key="4">Item 4</Item>
  45.                     </SubNav>
  46.                 </Nav>
  47.             </div>
  48.         );
  49.     }
  50. }
  52. ReactDOM.render(<App />, mountNode);
  1. .demo-ctl {
  2.     background-color: #F1F1F1;
  3.     border-left: 4px solid #0D599A;
  4.     color: #0A7AC3;
  5.     margin-bottom: 20px;
  6.     padding: 5px;
  7. }
  8. .demo-ctl .next-radio-group {
  9.     margin: 5px;
  10. }

相关区块

Nav 导航 - 图7

暂无相关区块