Navigation 导航(废弃)

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

安装方法

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

注意

Navigation已经废弃, 会在1.0版本中去除, 建议切换到Nav。

代码示例

选中状态位置

设置选中状态的方向，建议横向导航设置为top或bottom，纵向设置为left或right

Navigation 导航(废弃) - 图1

查看源码在线预览

  1. import { Navigation, Select } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. class App extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = {
  9.       activeDirection: "top",
  10.       type: "filling"
  11.     };
  12.   }
  14.   changePosition(value) {
  15.     this.setState({
  16.       activeDirection: value,
  17.       type: value === "top" || value === "bottom" ? "filling" : "normal"
  18.     });
  19.   }
  21.   render() {
  22.     return (
  23.       <div>
  24.         <Select
  25.           value={this.state.activeDirection}
  26.           onChange={::this.changePosition}
  27.           className="tab-select-demo"
  28.         >
  29.           <div value="left">left</div>
  30.           <div value="top">top</div>
  31.           <div value="bottom">bottom</div>
  32.           <div value="right">right</div>
  33.         </Select>
  35.         <Navigation
  36.           type={this.state.type}
  37.           activeDirection={this.state.activeDirection}
  38.         >
  39.           <Item itemid="1" text="Value Added Service" icon="service" />
  40.           <Item itemid="2" text="Training" icon="training" />
  41.           <Item itemid="3" text="Favorite" icon="favorite" />
  42.           <Item itemid="4" text="History" icon="history" />
  43.           <Item itemid="5" text="Attachment" icon="attachment" />
  44.         </Navigation>
  45.       </div>
  46.     );
  47.   }
  48. }
  49. ReactDOM.render(<App />, mountNode);

基本

最简单的用法.

Navigation 导航(废弃) - 图2

查看源码在线预览

  1. import { Navigation, Menu } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. let onMouseEnter = () => {
  6.   console.log("onMouseEnter");
  7. };
  9. let onMouseLeave = () => {
  10.   console.log("onMouseLeave");
  11. };
  13. let onClick = (itemid, item) => {
  14.   console.log("Click:" + item.props.text);
  15. };
  17. let onSelect = (itemid, item) => {
  18.   console.log("Select:" + item.props.text);
  19. };
  21. class App extends React.Component {
  22.   constructor(props) {
  23.     super(props);
  24.     this.state = {
  25.       trigger: "hover"
  26.     };
  27.   }
  29.   onToggleTrigger() {
  30.     this.setState({
  31.       trigger: this.state.trigger === "hover" ? "click" : "hover"
  32.     });
  33.   }
  35.   render() {
  36.     return (
  37.       <div>
  38.         <button
  39.           id="changeTriggerType"
  40.           onClick={this.onToggleTrigger.bind(this)}
  41.         >
  42.           点击切换trigger方式
  43.         </button>
  44.         <Navigation
  45.           onClick={onClick}
  46.           onSelect={onSelect}
  47.           onMouseEnter={onMouseEnter}
  48.           onMouseLeave={onMouseLeave}
  49.           trigger={this.state.trigger}
  50.         >
  51.           <Item itemid="1" text={<i>Value Added Service</i>}>
  52.             <Menu>
  53.               <Menu.Item key="1">Option 1</Menu.Item>
  54.               <Menu.Item disabled key="2">
  55.                 Option 2
  56.               </Menu.Item>
  57.               <Menu.Item key="3">Option 3</Menu.Item>
  58.               <Menu.Item key="4">Option 4</Menu.Item>
  59.             </Menu>
  60.           </Item>
  61.           <Item itemid="2" text="Training">
  62.             <Menu>
  63.               <Menu.Item key="1">Option 1</Menu.Item>
  64.               <Menu.Item disabled key="2">
  65.                 Option 2
  66.               </Menu.Item>
  67.               <Menu.Item key="3">Option 3</Menu.Item>
  68.               <Menu.Item key="4">Option 4</Menu.Item>
  69.             </Menu>
  70.           </Item>
  71.           <Item itemid="3" text="Favorite">
  72.             <Menu>
  73.               <Menu.Item key="1">Option 1</Menu.Item>
  74.               <Menu.Item disabled key="2">
  75.                 Option 2
  76.               </Menu.Item>
  77.               <Menu.Item key="3">Option 3</Menu.Item>
  78.               <Menu.Item key="4">Option 4</Menu.Item>
  79.             </Menu>
  80.           </Item>
  81.           <Item itemid="4" text="History">
  82.             <Menu>
  83.               <Menu.Item key="1">Option 1</Menu.Item>
  84.               <Menu.Item disabled key="2">
  85.                 Option 2
  86.               </Menu.Item>
  87.               <Menu.Item key="3">Option 3</Menu.Item>
  88.               <Menu.Item key="4">Option 4</Menu.Item>
  89.             </Menu>
  90.           </Item>
  91.           <Item itemid="5" text="Attachment">
  92.             <Menu>
  93.               <Menu.Item key="1">Option 1</Menu.Item>
  94.               <Menu.Item disabled key="2">
  95.                 Option 2
  96.               </Menu.Item>
  97.               <Menu.Item key="3">Option 3</Menu.Item>
  98.               <Menu.Item key="4">Option 4</Menu.Item>
  99.             </Menu>
  100.           </Item>
  101.           <Item itemid="6" text="electronics">
  102.             <Menu>
  103.               <Menu.Item key="1">Option 1</Menu.Item>
  104.               <Menu.Item disabled key="2">
  105.                 Option 2
  106.               </Menu.Item>
  107.               <Menu.Item key="3">Option 3</Menu.Item>
  108.               <Menu.Item key="4">Option 4</Menu.Item>
  109.             </Menu>
  110.           </Item>
  111.         </Navigation>
  112.       </div>
  113.     );
  114.   }
  115. }
  117. ReactDOM.render(<App />, mountNode);

填充背景

注意：onMouseLeave、onMouseEnter，如果子元素有注册以上事件，注意兼容；

Navigation 导航(废弃) - 图3

查看源码在线预览

  1. import { Navigation, Menu } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. let onMouseEnter = () => {
  6.   console.log("onMouseEnter");
  7. };
  9. let onMouseLeave = () => {
  10.   console.log("onMouseLeave");
  11. };
  13. class CustomItem extends React.Component {
  14.   render() {
  15.     const { link } = this.props;
  17.     return <Item content={link} />;
  18.   }
  19. }
  21. ReactDOM.render(
  22.   <Navigation
  23.     onMouseEnter={onMouseEnter}
  24.     onMouseLeave={onMouseLeave}
  25.     type="filling"
  26.     trigger="hover"
  27.     activeDirection="left"
  28.     morePositionKey="3"
  29.     moreText="+ More"
  30.     onSelect={id => console.log(id)}
  31.   >
  32.     <div>
  33.       <Item text="TestInnerItem" />
  34.     </div>
  35.     <CustomItem link={<a href="#test">test</a>} />
  36.     <Item itemid="2" text="Training" icon="training" title="Training Long Long">
  37.       <Menu>
  38.         <Menu.Item key="11">OptionOptionOptionOptionOption 1</Menu.Item>
  39.         <Menu.Item disabled key="21">
  40.           Option 2
  41.         </Menu.Item>
  42.         <Menu.Item key="31">Option 3</Menu.Item>
  43.         <Menu.Item key="41">Option 4</Menu.Item>
  44.         <Menu.SubMenu key="411" label="xxx" mode="popup" triggerType="hover">
  45.           <Menu.Item key="xxx">Option2</Menu.Item>
  46.           <Menu.Item key="xxx2">Option3</Menu.Item>
  47.         </Menu.SubMenu>
  48.       </Menu>
  49.     </Item>
  50.     <Item itemid="3" text="Favorite" icon="favorite" selected="true">
  51.       <Menu>
  52.         <Menu.SubMenu label="xxx" key="popup1">
  53.           <Menu.Item disabled key="112">
  54.             abc
  55.           </Menu.Item>
  56.           <Menu.Item key="222">abc</Menu.Item>
  57.         </Menu.SubMenu>
  58.       </Menu>
  59.     </Item>
  60.     <Item itemid="4" text="History" icon="history">
  61.       <Menu>
  62.         <Menu.Item key="1">Option 1</Menu.Item>
  63.         <Menu.Item disabled key="2">
  64.           Option 2
  65.         </Menu.Item>
  66.         <Menu.Item key="3">Option 3</Menu.Item>
  67.         <Menu.Item key="4">Option 4</Menu.Item>
  68.       </Menu>
  69.     </Item>
  70.     <Item itemid="5" text="Attachment" icon="attachment">
  71.       <Menu>
  72.         <Menu.Item key="1">Option 1</Menu.Item>
  73.         <Menu.Item disabled key="2">
  74.           Option 2
  75.         </Menu.Item>
  76.         <Menu.Item key="3">Option 3</Menu.Item>
  77.         <Menu.Item key="4">Option 4</Menu.Item>
  78.       </Menu>
  79.     </Item>
  80.     <Item itemid="6" text="electronics" icon="Electronics">
  81.       <Menu>
  82.         <Menu.Item key="1">Option 1</Menu.Item>
  83.         <Menu.Item disabled key="2">
  84.           Option 2
  85.         </Menu.Item>
  86.         <Menu.Item key="3">Option 3</Menu.Item>
  87.         <Menu.Item key="4">Option 4</Menu.Item>
  88.       </Menu>
  89.     </Item>
  90.   </Navigation>,
  91.   mountNode
  92. );

图标型

最简单的用法。

Navigation 导航(废弃) - 图4

查看源码在线预览

  1. import { Navigation } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. let onClick = (itemid, item) => {
  6.   console.log("Click:" + item.props.icon);
  7. };
  9. let style = {
  10.   padding: "20px 0",
  11.   display: "block",
  12.   cursor: "pointer"
  13. };
  15. class Content extends React.Component {
  16.   constructor(props, context) {
  17.     super(props, context);
  19.     this.state = {
  20.       type: "icononly"
  21.     };
  22.   }
  24.   changeType() {
  25.     this.setState({
  26.       type: this.state.type === "icononly" ? "tree" : "icononly"
  27.     });
  28.   }
  30.   render() {
  31.     return (
  32.       <div>
  33.         <a style={style} id="spread" onClick={this.changeType.bind(this)}>
  34.           点我试试
  35.         </a>
  36.         <Navigation
  37.           type={this.state.type}
  38.           onClick={onClick}
  39.           style={{ maxWidth: "240px" }}
  40.         >
  41.           <Item
  42.             itemid="1"
  43.             text="Value Added Service"
  44.             icon="service"
  45.             link="#icon"
  46.             opened={true}
  47.           >
  48.             <Navigation>
  49.               <Item itemid="1-1-1" text="Apps2" icon="service" opened={true}>
  50.                 <Navigation>
  51.                   <Item itemid="1-1-1-1" text="Apps2" icon="service" />
  52.                   <Item itemid="1-1-1-2" text="Apps3" icon="service" />
  53.                 </Navigation>
  54.               </Item>
  55.               <Item itemid="1-1-2" text="Apps3" icon="service" />
  56.             </Navigation>
  57.           </Item>
  58.           <Item itemid="2" text="Training" icon="training" />
  59.           <Item itemid="3" text="Favorite" icon="favorite" />
  60.           <Item itemid="4" text="History" icon="history" />
  61.           <Item itemid="5" text="Attachment" icon="attachment" />
  62.           <Item itemid="6" text="Electronics" icon="electronics" />
  63.         </Navigation>
  64.       </div>
  65.     );
  66.   }
  67. }
  69. ReactDOM.render(<Content />, mountNode);

横向

注意：onMouseLeave、onMouseEnter，如果子元素有注册以上事件，注意兼容；

Navigation 导航(废弃) - 图5

查看源码在线预览

  1. import { Navigation } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. ReactDOM.render(
  6.   <Navigation type="line" activeDirection="left">
  7.     <Item
  8.       itemid="1"
  9.       key="1"
  10.       text="Value Added Service"
  11.       icon="service"
  12.       container={<span />}
  13.     />
  14.     <Item itemid="2" text="Training" icon="training" />
  15.     <Item itemid="3" text="Favorite" icon="favorite" />
  16.     <Item itemid="4" text="History" icon="history" />
  17.     <Item itemid="5" text="Attachment" icon="attachment" />
  18.     <Item itemid="6" text="Electronics" icon="electronics" />
  19.   </Navigation>,
  20.   mountNode
  21. );

Normal

Navigation 导航(废弃) - 图6

查看源码在线预览

  1. import { Navigation } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. ReactDOM.render(
  6.   <Navigation
  7.     type="normal"
  8.     title="Website List"
  9.     style={{ maxWidth: "240px" }}
  10.     activeDirection="left"
  11.   >
  12.     <Item itemid="1" text="Value Added Service" icon="service" />
  13.     <Item
  14.       itemid="2"
  15.       text="Training"
  16.       icon="training"
  17.       link="http://taobao.com"
  18.       target="_blank"
  19.       selectedStyle={false}
  20.     />
  21.     <Item itemid="3" text="Favorite" icon="favorite" />
  22.     <Item itemid="4" text="History" icon="history" />
  23.     <Item itemid="5" text="Attachment" icon="attachment" />
  24.     <Item itemid="6" text="Electronics" icon="electronics" />
  25.   </Navigation>,
  26.   mountNode
  27. );

横向

注意：onMouseLeave、onMouseEnter，如果子元素有注册以上事件，注意兼容；

Navigation 导航(废弃) - 图7

查看源码在线预览

  1. import { Navigation } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. let onMouseEnter = () => {
  6.   console.log("onMouseEnter");
  7. };
  9. let onMouseLeave = () => {
  10.   console.log("onMouseLeave");
  11. };
  13. let menus = [
  14.   { key: "1", text: "下单", icon: "service" },
  15.   {
  16.     key: "2",
  17.     text: "购物车",
  18.     icon: "service",
  19.     children: [
  20.       {
  21.         key: "2-1",
  22.         text: "下单2",
  23.         icon: "service",
  24.         children: [{ key: "2-1-1", text: "下单", icon: "service" }]
  25.       }
  26.     ]
  27.   },
  28.   {
  29.     key: "3",
  30.     text: "订单",
  31.     icon: "service",
  32.     children: (
  33.       <Navigation>
  34.         <Item text="子订单" />
  35.       </Navigation>
  36.     )
  37.   }
  38. ];
  40. class App extends React.Component {
  41.   constructor() {
  42.     super();
  44.     this.state = {
  45.       current: []
  46.     };
  47.   }
  49.   onChange(e) {
  50.     let value = e.target.value;
  52.     this.setState({
  53.       current: value.split(",")
  54.     });
  55.   }
  57.   render() {
  58.     let render = menus => {
  59.       return menus.map((m, i) => (
  60.         <Item
  61.           key={m.key || i}
  62.           opened={this.state.current.indexOf(m.key) > -1}
  63.           text={m.text}
  64.           icon={m.icon}
  65.         >
  66.           {"length" in (m.children || {}) ? (
  67.             <Navigation>{render(m.children)}</Navigation>
  68.           ) : (
  69.             m.children
  70.           )}
  71.         </Item>
  72.       ));
  73.     };
  75.     let renderItem = render(menus);
  77.     console.log(renderItem);
  79.     return (
  80.       <div>
  81.         <div style={{ padding: "10px" }}>
  82.           <label>输入切换key/itemid(多个用半角,隔开):</label>
  83.           <input
  84.             id="myInput"
  85.             value={this.state.value}
  86.             onChange={this.onChange.bind(this)}
  87.           />
  88.         </div>
  89.         <Navigation
  90.           type="tree"
  91.           trigger="hover"
  92.           onMouseEnter={onMouseEnter}
  93.           onMouseLeave={onMouseLeave}
  94.         >
  95.           {renderItem}
  96.         </Navigation>
  97.       </div>
  98.     );
  99.   }
  100. }
  102. ReactDOM.render(<App />, mountNode);

横向

注意：onMouseLeave、onMouseEnter，如果子元素有注册以上事件，注意兼容；

Navigation 导航(废弃) - 图8

查看源码在线预览

  1. import { Navigation, Menu } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. let onMouseEnter = () => {
  6.   console.log("onMouseEnter");
  7. };
  9. let onMouseLeave = () => {
  10.   console.log("onMouseLeave");
  11. };
  13. let menus = [
  14.   { key: "1", text: "Value", icon: "service" },
  15.   { key: "2", text: "Value", icon: "service" },
  16.   {
  17.     key: "3",
  18.     text: "Value",
  19.     icon: "service",
  20.     children: (
  21.       <Menu>
  22.         <Menu.Item key="1">Option 1</Menu.Item>
  23.         <Menu.Item key="2">Option 2</Menu.Item>
  24.         <Menu.Item key="3">Option 3</Menu.Item>
  25.         <Menu.Item key="4">Option 4</Menu.Item>
  26.         <Menu.SubMenu key="41" label="xxx" mode="popup" triggerType="hover">
  27.           <Menu.Item key="5">Option 5</Menu.Item>
  28.         </Menu.SubMenu>
  29.       </Menu>
  30.     )
  31.   }
  32. ];
  34. class App extends React.Component {
  35.   constructor() {
  36.     super();
  38.     this.state = {
  39.       current: null
  40.     };
  41.   }
  43.   onChange(e) {
  44.     let value = e.target.value;
  46.     this.setState({
  47.       current: value.trim()
  48.     });
  49.   }
  51.   render() {
  52.     let renderItem = menus.map(m => {
  53.       return (
  54.         <Item
  55.           key={m.key}
  56.           text={m.text}
  57.           icon={m.icon}
  58.           selected={m.key === this.state.current}
  59.         >
  60.           {m.children}
  61.         </Item>
  62.       );
  63.     });
  65.     return (
  66.       <div>
  67.         <div style={{ padding: "10px" }}>
  68.           <label>输入切换key/itemid:</label>
  69.           <input
  70.             id="selectInput"
  71.             value={this.state.value}
  72.             onChange={this.onChange.bind(this)}
  73.           />
  74.         </div>
  75.         <Navigation
  76.           type="filling"
  77.           trigger="hover"
  78.           selectedKey={this.state.current}
  79.           onMouseEnter={onMouseEnter}
  80.           onMouseLeave={onMouseLeave}
  81.         >
  82.           {renderItem}
  83.         </Navigation>
  84.       </div>
  85.     );
  86.   }
  87. }
  89. ReactDOM.render(<App />, mountNode);

Slip

Navigation 导航(废弃) - 图9

查看源码在线预览

  1. import { Navigation } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. let timer, result, onSelect;
  7. onSelect = (id, item, nav) => {
  8.   //模拟异步
  9.   if (item.props.children) {
  10.     return clearTimeout(timer);
  11.   }
  13.   if (result) {
  14.     return nav.setContent(result);
  15.   }
  17.   nav.setContent(<div>请稍后</div>);
  19.   timer = setTimeout(() => {
  20.     nav.setContent((result = <div>加载完毕</div>));
  21.   }, 1000);
  22. };
  24. ReactDOM.render(
  25.   <Navigation
  26.     type="slip"
  27.     onSelect={onSelect}
  28.     style={{ maxWidth: "240px" }}
  29.     title="Web Sites"
  30.     container={<div className="custom-container" />}
  31.   >
  32.     <Item
  33.       itemid="1"
  34.       text="Value Added Service"
  35.       icon="service"
  36.       link="http://www.taobao.com"
  37.       target="_blank"
  38.     />
  39.     <Item key="2" text="Training" icon="training">
  40.       <i>Training</i>
  41.     </Item>
  42.     <Item itemid="3" text="Favorite" icon="favorite">
  43.       <div>Favorite</div>
  44.     </Item>
  45.     <Item itemid="4" text="History" icon="history">
  46.       <div>History</div>
  47.     </Item>
  48.     <Item itemid="5" text="Attachment" icon="attachment">
  49.       <div>Attachment</div>
  50.     </Item>
  51.     <Item itemid="6" text="Electronics" icon="electronics">
  52.       <div>Electronics</div>
  53.     </Item>
  54.   </Navigation>,
  55.   mountNode
  56. );

Text

注意：onMouseLeave、onMouseEnter，如果子元素有注册以上事件，注意兼容；

Navigation 导航(废弃) - 图10

查看源码在线预览

  1. import { Navigation, Menu } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. let onMouseEnter = () => {
  6.   console.log("onMouseEnter");
  7. };
  9. let onMouseLeave = () => {
  10.   console.log("onMouseLeave");
  11. };
  13. ReactDOM.render(
  14.   <Navigation
  15.     type="text"
  16.     onMouseEnter={onMouseEnter}
  17.     onMouseLeave={onMouseLeave}
  18.     trigger="hover"
  19.     cententAlign="left"
  20.     activeDirection="bottom"
  21.     morePositionKey="5"
  22.     moreText="+ More"
  23.   >
  24.     <Item itemid="1" text="淘宝，淘你喜欢" icon="folder" />
  25.     <Item itemid="2" text="天猫，正品选择" icon="account" />
  26.     <Item itemid="3" text="菜单一" icon="cart" menuAlign="left" />
  27.     <Item
  28.       link="http://www.baidu.com"
  29.       target="_blank"
  30.       itemid="4"
  31.       text="菜单一"
  32.       icon="cart"
  33.       menuAlign="left"
  34.     />
  35.     <Item itemid="5" text="菜单一" icon="cart" menuAlign="left" />
  36.     <Item itemid="6" text="菜单一" icon="cart" menuAlign="left" />
  37.   </Navigation>,
  38.   mountNode
  39. );

树型

最简单的用法。

Navigation 导航(废弃) - 图11

查看源码在线预览

  1. import { Navigation } from "@icedesign/base";
  3. const { Item } = Navigation;
  5. class App extends React.Component {
  6.   constructor() {
  7.     super();
  9.     this.state = {
  10.       selectedKey: "3"
  11.     };
  12.   }
  14.   onSelect(id, itemid) {
  15.     this.setState({
  16.       selectedKey: id
  17.     });
  18.   }
  20.   onUnFold(id, item, tree, e) {
  21.     console.log("UnFold");
  22.   }
  24.   render() {
  25.     return (
  26.       <Navigation
  27.         onSelect={this.onSelect.bind(this)}
  28.         selectedKey={this.state.selectedKey}
  29.         onUnFold={this.onUnFold.bind(this)}
  30.         style={{ maxWidth: "240px" }}
  31.         type="tree"
  32.         title="Web Sites"
  33.         accordion={true}
  34.         activeDirection="left"
  35.         branchPadding="20"
  36.       >
  37.         <Item
  38.           itemid="1"
  39.           text="Value Added Service"
  40.           icon="service"
  41.           opened={false}
  42.           hasLeaf={false}
  43.         >
  44.           <Navigation>
  45.             <Item itemid="1-1" text="Apps-One" icon="service" opened={true}>
  46.               <Navigation>
  47.                 <Item itemid="1-1-1" text="Apps-One-One" icon="service" />
  48.                 <Item itemid="1-1-2" text="Apps-one-Two" icon="service" />
  49.               </Navigation>
  50.             </Item>
  51.             <Item itemid="1-2" text="Apps-Two" icon="service">
  52.               <Navigation>
  53.                 <Item itemid="1-2-1" text="Apps2" icon="service" />
  54.                 <Item itemid="1-2-2" text="Apps3" icon="service" />
  55.               </Navigation>
  56.             </Item>
  57.             <Item itemid="1-3" text="Apps-Three" icon="service" />
  58.           </Navigation>
  59.         </Item>
  60.         <Item itemid="2" text="Training" icon="training">
  61.           <Navigation>
  62.             <Item itemid="2-1" text="Apps1" icon="service" opened={false}>
  63.               <Navigation>
  64.                 <Item itemid="2-1-1" text="Apps2" icon="service" />
  65.                 <Item itemid="2-1-2" text="Apps3" icon="service" />
  66.               </Navigation>
  67.             </Item>
  68.             <Item itemid="2-2" text="Apps2" icon="service">
  69.               <Navigation>
  70.                 <Item itemid="2-2-1" text="Apps2" icon="service" />
  71.                 <Item itemid="2-2-2" text="Apps3" icon="service" />
  72.               </Navigation>
  73.             </Item>
  74.             <Item itemid="2-3" text="Apps3" icon="service" />
  75.           </Navigation>
  76.         </Item>
  77.         <Item itemid="3" text="Favorite" icon="favorite" />
  78.         <Item itemid="4" text="History" icon="history" />
  79.         <Item
  80.           itemid="5"
  81.           text="有链接"
  82.           icon="attachment"
  83.           link="https://www.taobao.com"
  84.           target="_blank"
  85.         />
  86.         <Item itemid="6" text="Electronics" icon="electronics" />
  87.       </Navigation>
  88.     );
  89.   }
  90. }
  92. ReactDOM.render(<App />, mountNode);

相关区块

Navigation 导航(废弃) - 图12

暂无相关区块