Nav 导航

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

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

开发指南

何时使用

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

可以替代原来的 Navigation 组件使用

注意事项

  • icononly 只适用垂直方向。

  • Nav所有事件都继承自Menu，请参考Menu的API。

API

导航

参数说明类型默认值
prefix样式前缀String'next-'
type导航类型可选值:'normal'(正常)'primary'(主要)'secondary'(次要)'text'(文字)'line'(线形)Enum'normal'
direction导航方向可选值:'hoz'(水平)'ver'(垂直)Enum'ver'
activeDirection设置组件选中状态的active边方向可选值:null(无)'top'(上)'bottom'(下)'left'(左)'right'(右)Enum-
popupAlignTree 展开时候右侧子item的对齐方式可选值:'follow', 'outside'Enum'follow'
triggerTypePopupItem触发方式可选值:'click', 'hover'Enum-
className自定义classString-
iconOnly控制icon是否展示Boolean-
hasTooltip是否有ToolTIps(仅在iconOnly=true时生效)Booleanfalse
hasArrow是否显示右侧的箭头(仅在iconOnly=true时生效)Booleantrue

Nav.Group

参数说明类型默认值
prefix样式前缀String'next-'

Nav.Item

参数说明类型默认值
prefix样式前缀String'next-'
icon自定义图标，可以使用Icon的type, 也可以使用组件<Icon type="your type"/>String/ReactNode-

Nav.PopupItem

参数说明类型默认值
prefix样式前缀String'next-'
icon自定义图标，可以使用Icon的type, 也可以使用组件<Icon type="your type"/>String/ReactNode-

Nav.SubNav

参数说明类型默认值
prefix样式前缀String'next-'
icon自定义图标，可以使用Icon的type, 也可以使用组件<Icon type="your type"/>String/ReactNode-

代码示例

选中状态

direction水平方向只支持top/bottom，垂直方向只支持left/right。activeDirection=top,bottom,left,right等待Menu支持

Nav 导航 - 图1

查看源码在线预览

  1. import { Nav, Select, Switch, Field } from "@icedesign/base";
  3. const { Item } = Nav;
  5. class App extends React.Component {
  6.   field = new Field(this);
  8.   render() {
  9.     const { init, getValue } = this.field;
  11.     return (
  12.       <div>
  13.         <div className="demo-ctl">
  14.           <Switch
  15.             checkedChildren="横"
  16.             unCheckedChildren="竖"
  17.             {...init("direction")}
  18.           />
  19.           <Select
  20.             placeholder="active 位置"
  21.             {...init("activeDirection", { initValue: "left" })}
  22.           >
  23.             <Option value="">无</Option>
  24.             <Option value="top">top</Option>
  25.             <Option value="bottom">bottom</Option>
  26.             <Option value="left">left</Option>
  27.             <Option value="right">right</Option>
  28.           </Select>
  29.         </div>
  30.         <br />
  32.         <Nav
  33.           style={{ width: getValue("direction") ? "100%" : "240px" }}
  34.           direction={getValue("direction") ? "hoz" : "ver"}
  35.           activeDirection={getValue("activeDirection")}
  36.           defaultSelectedKeys={["1"]}
  37.         >
  38.           <Item key="1" icon="service" hasSelectedIcon={false}>
  39.             Value Added Service
  40.           </Item>
  41.           <Item key="2" icon="training">
  42.             Training
  43.           </Item>
  44.           <Item key="3" icon="favorite">
  45.             Favorite
  46.           </Item>
  47.           <Item key="4" icon="history">
  48.             History
  49.           </Item>
  50.           <Item key="5" icon="attachment">
  51.             Attachment
  52.           </Item>
  53.           <Item key="6" icon="electronics">
  54.             Electronics
  55.           </Item>
  56.         </Nav>
  57.       </div>
  58.     );
  59.   }
  60. }
  62. ReactDOM.render(<App />, mountNode);
  1. .demo-ctl {
  2.   background-color: #f1f1f1;
  3.   padding: 10.0px;
  4.   color: #0a7ac3;
  5.   border-left: 4.0px solid #0d599a;
  6. }
  7. .demo-ctl .next-switch {
  8.   margin-right: 20px;
  9. }

基本

横向导航

Nav 导航 - 图2

查看源码在线预览

  1. import { Nav, Icon, Menu } from "@icedesign/base";
  3. const { Item, PopupItem } = Nav;
  5. ReactDOM.render(
  6.   <Nav direction="hoz" activeDirection="bottom">
  7.     <Item key="1" icon="service">
  8.       First
  9.     </Item>
  10.     <Item key="2">Training</Item>
  11.     <Item key="3" icon="favorite">
  12.       Favorite
  13.     </Item>
  14.     <Item key="4">
  15.       <a href="http://www.taobao.com" target="_blank">
  16.         <Icon type="attachment" />Taobao
  17.       </a>
  18.     </Item>
  19.     <PopupItem key="5" icon="history" label="History">
  20.       <Menu>
  21.         <Menu.Item key="51">Option 1</Menu.Item>
  22.         <Menu.Item key="52">Option 3</Menu.Item>
  23.         <Menu.Item disabled key="54">
  24.           Option 2
  25.         </Menu.Item>
  26.         <Menu.Item key="53">Option 4</Menu.Item>
  27.       </Menu>
  28.     </PopupItem>
  29.     <PopupItem key="6" icon="electronics" label="Sub Nav">
  30.       <Menu>
  31.         <Menu.Item key="61">Option 1</Menu.Item>
  32.         <Menu.Item key="62">Option 3</Menu.Item>
  33.         <Menu.Item key="63">Option 4</Menu.Item>
  34.         <Menu.PopupItem key="64" label="popup">
  35.           <Menu>
  36.             <Menu.Item key="640">Option 1</Menu.Item>
  37.             <Menu.Item key="641">Option 3</Menu.Item>
  38.             <Menu.Item key="642">Option 4</Menu.Item>
  39.           </Menu>
  40.         </Menu.PopupItem>
  41.       </Menu>
  42.     </PopupItem>
  43.   </Nav>,
  44.   mountNode
  45. );

分组

group

Nav 导航 - 图3

查看源码在线预览

  1. import { Nav } from "@icedesign/base";
  3. const { Item, Group } = Nav;
  5. ReactDOM.render(
  6.   <Nav style={{ width: 240 }}>
  7.     <Group label="Website List">
  8.       <Item key="1" icon="service">
  9.         Value Added Service
  10.       </Item>
  11.       <Item key="2" icon="training" disabled>
  12.         Training
  13.       </Item>
  14.       <Item key="3" icon="favorite">
  15.         Favorite
  16.       </Item>
  17.       <Item key="4" icon="history">
  18.         History
  19.       </Item>
  20.       <Item key="5" icon="attachment">
  21.         Attachment
  22.       </Item>
  23.       <Item key="6" icon="electronics">
  24.         Electronics
  25.       </Item>
  26.     </Group>
  27.   </Nav>,
  28.   mountNode
  29. );

图标

iconOnly切换图标

Nav 导航 - 图4

查看源码在线预览

  1. import { Nav, Switch, Field } from "@icedesign/base";
  3. const { Item, SubNav } = Nav;
  5. class App extends React.Component {
  6.   field = new Field(this);
  8.   render() {
  9.     const { init, getValue } = this.field;
  10.     return (
  11.       <div>
  12.         <Switch
  13.           {...init("iconOnly", { initValue: true, valueName: "checked" })}
  14.         />
  15.         <br />
  16.         <Nav
  17.           iconOnly={getValue("iconOnly")}
  18.           hasTooltip
  19.           style={{ display: "inline-block" }}
  20.         >
  21.           <Item key="1" icon="service">
  22.             Value Added Service
  23.           </Item>
  24.           <Item key="2" icon="training">
  25.             Training
  26.           </Item>
  27.           <Item key="3" icon="favorite">
  28.             Favorite
  29.           </Item>
  30.           <Item key="4" icon="history">
  31.             History
  32.           </Item>
  33.           <Item key="5" icon="attachment">
  34.             Attachment
  35.           </Item>
  36.           <Item key="6" icon="electronics">
  37.             Electronics
  38.           </Item>
  39.           <SubNav key="sub4" label=" Nav Three">
  40.             <Item key="9" icon="favorite">
  41.               Option 9
  42.             </Item>
  43.             <Item key="10" icon="favorite">
  44.               Option 10
  45.             </Item>
  46.             <Item key="11" icon="favorite">
  47.               Option 11
  48.             </Item>
  49.             <Item key="12" icon="favorite">
  50.               Option 12
  51.             </Item>
  52.           </SubNav>
  53.         </Nav>
  54.         <br />
  55.         无箭头(hover最后一个item)
  56.         <br />
  57.         <Nav
  58.           iconOnly={getValue("iconOnly")}
  59.           hasArrow={false}
  60.           hasTooltip
  61.           triggerType="hover"
  62.           style={{ display: "inline-block" }}
  63.         >
  64.           <Item key="1" icon="service">
  65.             Value Added Service
  66.           </Item>
  67.           <Item key="2" icon="training">
  68.             Training
  69.           </Item>
  70.           <Item key="3" icon="favorite">
  71.             Favorite
  72.           </Item>
  73.           <Item key="4" icon="history">
  74.             History
  75.           </Item>
  76.           <Item key="5" icon="attachment">
  77.             Attachment
  78.           </Item>
  79.           <SubNav mode="popup" key="sub4" icon="electronics" label="Nav Three">
  80.             <Item key="9" icon="favorite">
  81.               Option 9
  82.             </Item>
  83.             <Item key="10" icon="favorite">
  84.               Option 10
  85.             </Item>
  86.             <Item key="11" icon="favorite">
  87.               Option 11
  88.             </Item>
  89.             <Item key="12" icon="favorite">
  90.               Option 12
  91.             </Item>
  92.           </SubNav>
  93.         </Nav>
  94.       </div>
  95.     );
  96.   }
  97. }
  99. ReactDOM.render(<App />, mountNode);

自定义头尾

自定义导航头尾

Nav 导航 - 图5

查看源码在线预览

  1. import { Nav, Icon, Switch } from "@icedesign/base";
  3. const { Item } = Nav;
  5. class App extends React.Component {
  6.   state = { direction: "hoz" };
  8.   onChange(v) {
  9.     this.setState({
  10.       direction: v ? "hoz" : "ver"
  11.     });
  12.   }
  14.   render() {
  15.     return (
  16.       <div>
  17.         <Switch
  18.           checkedChildren="横"
  19.           unCheckedChildren="竖"
  20.           defaultChecked
  21.           onChange={this.onChange.bind(this)}
  22.         />
  23.         <br />
  24.         <br />
  26.         <div>
  27.           <Nav
  28.             direction={this.state.direction}
  29.             type="primary"
  30.             header={
  31.               <img
  32.                 style={{ margin: "0 10px" }}
  33.                 src="http://c.sg.ali-lazada.com/lazada/lib/0.0.1/image/lsc-logo.png"
  34.               />
  35.             }
  36.             footer={
  37.               <div style={{ margin: "0 10px", lineHeight: "44px" }}>
  38.                 <a href="javascript:;"> Login in</a>
  39.               </div>
  40.             }
  41.           >
  42.             <Item key="1" icon="service">
  43.               Value Added Service
  44.             </Item>
  45.             <Item key="2" icon="training">
  46.               Training
  47.             </Item>
  48.             <Item key="3" icon="favorite">
  49.               Favorite
  50.             </Item>
  51.             <Item key="4" icon="history">
  52.               History
  53.             </Item>
  54.             <Item key="5">
  55.               <a href="http://www.taobao.com" target="_blank">
  56.                 <Icon type="attachment" />Link
  57.               </a>
  58.             </Item>
  59.             <Item key="6" icon="electronics">
  60.               Electronics
  61.             </Item>
  62.           </Nav>
  63.         </div>
  64.       </div>
  65.     );
  66.   }
  67. }
  69. ReactDOM.render(<App />, mountNode);

弹出

outside: Nav顶端对齐。follow: Item顶端对齐当SubNav的mode=popup的时候，popAlign控制弹出菜单对齐方式

Nav 导航 - 图6

查看源码在线预览

  1. import { Nav, Icon } from "@icedesign/base";
  3. const { Item, SubNav } = Nav;
  5. ReactDOM.render(
  6.   <div>
  7.     <Nav style={{ width: 240 }} popupAlign="outside" defaultOpenKeys={["sub2"]}>
  8.       <SubNav
  9.         key="sub1"
  10.         mode="popup"
  11.         label={
  12.           <span>
  13.             <Icon type="service" size="small" />
  14.             <span> Nav One</span>
  15.           </span>
  16.         }
  17.       >
  18.         <Item key="1">Option 1</Item>
  19.         <Item key="2">Option 2</Item>
  20.         <Item key="3">Option 3</Item>
  21.         <Item key="4">Option 4</Item>
  22.       </SubNav>
  23.       <SubNav
  24.         key="sub2"
  25.         mode="popup"
  26.         label={
  27.           <span>
  28.             <Icon type="training" size="small" />
  29.             <span> Nav Two</span>
  30.           </span>
  31.         }
  32.       >
  33.         <Item key="5">Option 5</Item>
  34.         <Item key="6">Option 6</Item>
  35.       </SubNav>
  36.       <SubNav
  37.         key="sub3"
  38.         mode="popup"
  39.         label={
  40.           <span>
  41.             <Icon type="favorite" size="small" />
  42.             <span> Nav Three</span>
  43.           </span>
  44.         }
  45.       >
  46.         <Item key="9">Option 9</Item>
  47.         <Item key="10">Option 10</Item>
  48.         <Item key="11">Option 11</Item>
  49.         <Item key="12">Option 12</Item>
  50.       </SubNav>
  51.       <SubNav
  52.         key="sub4"
  53.         mode="popup"
  54.         label={
  55.           <span>
  56.             <Icon type="favorite" size="small" />
  57.             <span> Nav Three</span>
  58.           </span>
  59.         }
  60.       >
  61.         <Item key="21">Option 9</Item>
  62.         <Item key="22">Option 10</Item>
  63.         <Item key="23">Option 11</Item>
  64.         <Item key="24">Option 12</Item>
  65.       </SubNav>
  66.     </Nav>
  67.   </div>,
  68.   mountNode
  69. );

子菜单

单例、多例模式

Nav 导航 - 图7

查看源码在线预览

  1. import { Nav, Icon, Switch } from "@icedesign/base";
  3. const { Item, SubNav } = Nav;
  5. class App extends React.Component {
  6.   state = {
  7.     openmode: "single"
  8.   };
  10.   onChange(v) {
  11.     this.setState({
  12.       openmode: v ? "multiple" : "single"
  13.     });
  14.   }
  16.   render() {
  17.     return (
  18.       <div>
  19.         <Switch
  20.           checkedChildren="多"
  21.           unCheckedChildren="单"
  22.           onChange={this.onChange.bind(this)}
  23.         />
  24.         <br />
  25.         <br />
  26.         <Nav
  27.           style={{ width: 240 }}
  28.           direction="ver"
  29.           openMode={this.state.openmode}
  30.         >
  31.           <SubNav
  32.             key="sub1"
  33.             label={
  34.               <span>
  35.                 <Icon type="service" size="small" />
  36.                 <span>Nav One</span>
  37.               </span>
  38.             }
  39.           >
  40.             <Item key="1">Option 1</Item>
  41.             <Item key="2">Option 2</Item>
  42.             <Item key="3">Option 3</Item>
  43.             <Item key="4">Option 4</Item>
  44.           </SubNav>
  45.           <SubNav
  46.             key="sub2"
  47.             label={
  48.               <span>
  49.                 <Icon type="training" size="small" />
  50.                 <a href="javascript:;">Nav Two</a>
  51.               </span>
  52.             }
  53.           >
  54.             <Item key="5">Option 5</Item>
  55.             <Item key="6">Option 6</Item>
  56.             <SubNav key="sub3" label="Submenu">
  57.               <Item key="7">
  58.                 <a href="javascript:;">Option 7</a>
  59.               </Item>
  60.               <Item key="8">Option 8</Item>
  61.             </SubNav>
  62.           </SubNav>
  63.           <SubNav
  64.             key="sub4"
  65.             label={
  66.               <span>
  67.                 <Icon type="favorite" size="small" />
  68.                 <span> Nav Three</span>
  69.               </span>
  70.             }
  71.           >
  72.             <Item key="9">Option 9</Item>
  73.             <Item key="10">Option 10</Item>
  74.             <Item key="11">Option 11</Item>
  75.             <Item key="12">Option 12</Item>
  76.           </SubNav>
  77.           <Item key="13">Option 13</Item>
  78.         </Nav>
  79.       </div>
  80.     );
  81.   }
  82. }
  84. ReactDOM.render(<App />, mountNode);

类别

type控制类别切换

Nav 导航 - 图8

查看源码在线预览

  1. import { Nav, Switch } from "@icedesign/base";
  3. const { Item } = Nav;
  5. function renderNav(type, direction) {
  6.   return (
  7.     <div className={`demo-${direction}`}>
  8.       <h2>{type}</h2>
  9.       <Nav type={type} direction={direction}>
  10.         <Item key="1" icon="service">
  11.           Value Added Service
  12.         </Item>
  13.         <Item key="2" icon="training">
  14.           Training
  15.         </Item>
  16.         <Item key="3" icon="favorite">
  17.           Favorite
  18.         </Item>
  19.         <Item key="4" icon="history">
  20.           History
  21.         </Item>
  22.         <Item key="5" icon="attachment">
  23.           Attachment
  24.         </Item>
  25.         <Item key="6" icon="electronics">
  26.           Electronics
  27.         </Item>
  28.       </Nav>
  29.     </div>
  30.   );
  31. }
  33. class App extends React.Component {
  34.   state = { direction: "hoz" };
  36.   onChange(v) {
  37.     this.setState({
  38.       direction: v ? "hoz" : "ver"
  39.     });
  40.   }
  42.   render() {
  43.     return (
  44.       <div>
  45.         <Switch
  46.           checkedChildren="横"
  47.           unCheckedChildren="竖"
  48.           defaultChecked
  49.           onChange={this.onChange.bind(this)}
  50.         />
  51.         <br />
  53.         <div style={{ display: "inline-block" }}>
  54.           {renderNav("primary", this.state.direction)}
  55.           {renderNav("secondary", this.state.direction)}
  56.           {renderNav("normal", this.state.direction)}
  57.           {renderNav("line", this.state.direction)}
  58.           {renderNav("text", this.state.direction)}
  59.         </div>
  60.       </div>
  61.     );
  62.   }
  63. }
  65. ReactDOM.render(<App />, mountNode);
  1. .demo-hoz {
  2.     width: 100%;
  3. }
  4. .demo-ver {
  5.     width: 200px;
  6.     display: inline-block;
  7.     float: left;
  8. }
  9. .demo-ver .next-nav{
  10.     margin-left: 5px;
  11. }

相关区块

Nav 导航 - 图9

暂无相关区块