StyledMenu ICE 风格导航

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

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/styled-menu@1.0.6 -S

ICE 导航组件，为页面和功能提供导航的菜单列表。底层基于 rc-menu 并做了 ICE Design 的样式改造。

何时使用

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

  1. <StyledMenu>
  2.   <StyledMenu.Item>菜单项</StyledMenu.Item>
  3.   <StyledMenu.SubMenu title="子菜单">
  4.     <StyledMenu.Item>子菜单项</StyledMenu.Item>
  5.   </StyledMenu.SubMenu>
  6. </StyledMenu>

API

Menu props

参数说明类型默认值
theme主题颜色string: light darklight
color支持 Colorful ICE 配色string: blue, green, orange, red, roseo
mode菜单类型，现在支持垂直、水平、和内嵌模式三种string: vertical horizontal inlinevertical
selectedKeys当前选中的菜单项 key 数组string[]
defaultSelectedKeys初始选中的菜单项 key 数组string[]
openKeys当前展开的 SubMenu 菜单项 key 数组string[]
defaultOpenKeys初始展开的 SubMenu 菜单项 key 数组
onOpenChangeSubMenu 展开/关闭的回调Function(openKeys: string[])noop
onSelect被选中时调Function({ item, key, selectedKeys })无
onDeselect取消选中时调用，仅在 multiple 生效Function({ item, key, selectedKeys })-
onClick点击 menuitem 调用此函数，参数为 {item, key, keyPath}，在 MenuItem 上面设置 onClick 无效function-
style根节点样式object
inlineIndentinline 模式的菜单缩进宽度number24
multiple是否允许多选booleanfalse

More options in rc-menu

StyledMenu.Item props

参数说明类型默认值
disabled是否禁用booleanfalse
keyitem 的唯一标志string

StyledMenu.SubMenu props

参数说明类型默认值
disabled是否禁用booleanfalse
key唯一标志string
title子菜单项值string|ReactNode
children子菜单的菜单项Array<MenuItem|SubMenu>
onTitleClick点击子菜单标题Function({ eventKey, domEvent })

StyledMenu.ItemGroup props

参数说明类型默认值
title分组标题string|ReactNode
children分组的菜单项MenuItem[]

StyledMenu.Divider

菜单项分割线，只用在弹出菜单内。

代码示例

水平的顶部导航菜单

水平的顶部导航菜单。

StyledMenu ICE 风格导航 - 图1

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  4. import { Icon } from '@alifd/next';
  5. import StyledMenu, {
  6.   Item as MenuItem,
  7.   SubMenu,
  8.   ItemGroup as MenuItemGroup
  9. } from '@icedesign/styled-menu';
  11. class App extends Component {
  12.   constructor(props) {
  13.     super(props);
  14.     this.state = {
  15.       current: 'mail'
  16.     };
  17.   }
  19.   handleClick = e => {
  20.     console.log('刚刚点击的数据：', e);
  21.     this.setState({
  22.       current: e.key
  23.     });
  24.   };
  26.   render() {
  27.     return (
  28.       <StyledMenu
  29.         onClick={this.handleClick}
  30.         // selectedKeys 决定当前哪一项被选中
  31.         selectedKeys={[this.state.current]}
  32.         mode="horizontal"
  33.       >
  34.         <MenuItem key="mail">
  35.           <Icon type="upload" />导航一（默认选中状态）
  36.         </MenuItem>
  37.         <MenuItem key="linkicon">
  38.           <a target="_blank" href="https://www.taobao.com/">
  39.             <Icon type="email" />导航二（演示超链接外链）
  40.           </a>
  41.         </MenuItem>
  42.         <MenuItem key="app" disabled>
  43.           <Icon type="help" />导航三（禁用当前选项）
  44.         </MenuItem>
  45.         <SubMenu
  46.           key="SubMenu"
  47.           title={
  48.             <span>
  49.               <Icon type="account" />导航四（附带下拉菜单）
  50.             </span>
  51.           }
  52.         >
  53.           <MenuItemGroup title="下拉分组一">
  54.             <MenuItem key="setting:1">选项 1</MenuItem>
  55.             <MenuItem key="setting:2">选项 2</MenuItem>
  56.           </MenuItemGroup>
  57.           <MenuItemGroup title="下拉分组二">
  58.             <MenuItem key="setting:3">选项 3</MenuItem>
  59.             <MenuItem key="setting:4">选项 4</MenuItem>
  60.           </MenuItemGroup>
  61.         </SubMenu>
  62.       </StyledMenu>
  63.     );
  64.   }
  65. }
  67. ReactDOM.render(<App />, mountNode);

内嵌菜单

垂直菜单，子菜单内嵌在菜单区域。

StyledMenu ICE 风格导航 - 图2

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Icon } from '@alifd/next';
  4. import StyledMenu, {
  5.   Item as MenuItem,
  6.   SubMenu,
  7.   ItemGroup as MenuItemGroup
  8. } from '@icedesign/styled-menu';
  10. class Sider extends Component {
  11.   handleClick = e => {
  12.     console.log('click ', e);
  13.   };
  15.   render() {
  16.     return (
  17.       <StyledMenu
  18.         onClick={this.handleClick}
  19.         style={{ width: 240 }}
  20.         defaultSelectedKeys={['1']}
  21.         defaultOpenKeys={['sub1']}
  22.         mode="inline"
  23.       >
  24.         <SubMenu
  25.           key="sub1"
  26.           title={
  27.             <span>
  28.               <Icon type="box" />
  29.               <span>导航一</span>
  30.             </span>
  31.           }
  32.         >
  33.           <MenuItemGroup key="g1" title="Item 1">
  34.             <MenuItem key="1">Option 1</MenuItem>
  35.             <MenuItem key="2">Option 2</MenuItem>
  36.           </MenuItemGroup>
  37.           <MenuItemGroup key="g2" title="Item 2">
  38.             <MenuItem key="3">Option 3</MenuItem>
  39.             <MenuItem key="4">Option 4</MenuItem>
  40.           </MenuItemGroup>
  41.         </SubMenu>
  42.         <SubMenu
  43.           key="sub2"
  44.           title={
  45.             <span>
  46.               <Icon type="download" />
  47.               <span>导航二</span>
  48.             </span>
  49.           }
  50.         >
  51.           <MenuItem key="5">Option 5</MenuItem>
  52.           <MenuItem key="6">Option 6</MenuItem>
  53.           <SubMenu key="sub3" title="SubMenu">
  54.             <MenuItem key="7">Option 7</MenuItem>
  55.             <MenuItem key="8">Option 8</MenuItem>
  56.           </SubMenu>
  57.         </SubMenu>
  58.         <SubMenu
  59.           key="sub4"
  60.           title={
  61.             <span>
  62.               <Icon type="play" />
  63.               <span>导航三</span>
  64.             </span>
  65.           }
  66.         >
  67.           <MenuItem key="9">Option 9</MenuItem>
  68.           <MenuItem key="10">Option 10</MenuItem>
  69.           <MenuItem key="11">Option 11</MenuItem>
  70.           <MenuItem key="12">Option 12</MenuItem>
  71.         </SubMenu>
  72.       </StyledMenu>
  73.     );
  74.   }
  75. }
  77. ReactDOM.render(<Sider />, mountNode);

只展开当前父级菜单

点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。

StyledMenu ICE 风格导航 - 图3

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Icon } from '@alifd/next';
  4. import StyledMenu, { Item as MenuItem, SubMenu } from '@icedesign/styled-menu';
  6. class Sider extends React.Component {
  7.   state = {
  8.     current: '1',
  9.     openKeys: []
  10.   };
  11.   handleClick = e => {
  12.     console.log('Clicked: ', e);
  13.     this.setState({ current: e.key });
  14.   };
  15.   onOpenChange = openKeys => {
  16.     const state = this.state;
  17.     const latestOpenKey = openKeys.find(
  18.       key => !(state.openKeys.indexOf(key) > -1)
  19.     );
  20.     const latestCloseKey = state.openKeys.find(
  21.       key => !(openKeys.indexOf(key) > -1)
  22.     );
  24.     let nextOpenKeys = [];
  25.     if (latestOpenKey) {
  26.       nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
  27.     }
  28.     if (latestCloseKey) {
  29.       nextOpenKeys = this.getAncestorKeys(latestCloseKey);
  30.     }
  31.     this.setState({ openKeys: nextOpenKeys });
  32.   };
  33.   getAncestorKeys = key => {
  34.     const map = {
  35.       sub3: ['sub2']
  36.     };
  37.     return map[key] || [];
  38.   };
  39.   render() {
  40.     return (
  41.       <StyledMenu
  42.         mode="inline"
  43.         openKeys={this.state.openKeys}
  44.         selectedKeys={[this.state.current]}
  45.         style={{ width: 240 }}
  46.         onOpenChange={this.onOpenChange}
  47.         onClick={this.handleClick}
  48.       >
  49.         <SubMenu
  50.           key="sub1"
  51.           title={
  52.             <span>
  53.               <Icon type="account" />
  54.               <span>Navigation One</span>
  55.             </span>
  56.           }
  57.         >
  58.           <MenuItem key="1">Option 1</MenuItem>
  59.           <MenuItem key="2">Option 2</MenuItem>
  60.           <MenuItem key="3">Option 3</MenuItem>
  61.           <MenuItem key="4">Option 4</MenuItem>
  62.         </SubMenu>
  63.         <SubMenu
  64.           key="sub2"
  65.           title={
  66.             <span>
  67.               <Icon type="upload" />
  68.               <span>Navigation Two</span>
  69.             </span>
  70.           }
  71.         >
  72.           <MenuItem key="5">Option 5</MenuItem>
  73.           <MenuItem key="6">Option 6</MenuItem>
  74.           <SubMenu key="sub3" title="SubMenu">
  75.             <MenuItem key="7">Option 7</MenuItem>
  76.             <MenuItem key="8">Option 8</MenuItem>
  77.           </SubMenu>
  78.         </SubMenu>
  79.         <SubMenu
  80.           key="sub4"
  81.           title={
  82.             <span>
  83.               <Icon type="help" />
  84.               <span>Navigation Three</span>
  85.             </span>
  86.           }
  87.         >
  88.           <MenuItem key="9">Option 9</MenuItem>
  89.           <MenuItem key="10">Option 10</MenuItem>
  90.           <MenuItem key="11">Option 11</MenuItem>
  91.           <MenuItem key="12">Option 12</MenuItem>
  92.         </SubMenu>
  93.       </StyledMenu>
  94.     );
  95.   }
  96. }
  98. ReactDOM.render(<Sider />, mountNode);

垂直菜单

子菜单是弹出的形式。

StyledMenu ICE 风格导航 - 图4

查看源码在线预览

  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Icon } from '@alifd/next';
  4. import StyledMenu, {
  5.   Item as MenuItem,
  6.   SubMenu,
  7.   ItemGroup as MenuItemGroup
  8. } from '@icedesign/styled-menu';
  10. function handleClick(e) {
  11.   console.log('click', e);
  12. }
  14. ReactDOM.render(
  15.   <StyledMenu onClick={handleClick} style={{ width: 240 }} mode="vertical">
  16.     <SubMenu
  17.       key="sub1"
  18.       title={
  19.         <span>
  20.           <Icon type="security" />
  21.           <span>Navigation One</span>
  22.         </span>
  23.       }
  24.     >
  25.       <MenuItemGroup title="Item 1">
  26.         <MenuItem key="1">Option 1</MenuItem>
  27.         <MenuItem key="2">Option 2</MenuItem>
  28.       </MenuItemGroup>
  29.       <MenuItemGroup title="Iteom 2">
  30.         <MenuItem key="3">Option 3</MenuItem>
  31.         <MenuItem key="4">Option 4</MenuItem>
  32.       </MenuItemGroup>
  33.     </SubMenu>
  34.     <SubMenu
  35.       key="sub2"
  36.       title={
  37.         <span>
  38.           <Icon type="stop" />
  39.           <span>Navigation Two</span>
  40.         </span>
  41.       }
  42.     >
  43.       <MenuItem key="5">Option 5</MenuItem>
  44.       <MenuItem key="6">Option 6</MenuItem>
  45.       <SubMenu key="sub3" title="SubMenu">
  46.         <MenuItem key="7">Option 7</MenuItem>
  47.         <MenuItem key="8">Option 8</MenuItem>
  48.       </SubMenu>
  49.     </SubMenu>
  50.     <SubMenu
  51.       key="sub4"
  52.       title={
  53.         <span>
  54.           <Icon type="office" />
  55.           <span>Navigation Three</span>
  56.         </span>
  57.       }
  58.     >
  59.       <MenuItem key="9">Option 9</MenuItem>
  60.       <MenuItem key="10">Option 10</MenuItem>
  61.       <MenuItem key="11">Option 11</MenuItem>
  62.       <MenuItem key="12">Option 12</MenuItem>
  63.     </SubMenu>
  64.   </StyledMenu>,
  65.   mountNode
  66. );

主题

内建了多套主题，兜底的有两套 light|dark，默认 light。theme 为主题配置，有浅色系（默认）和深色系两个配置 light|dark。

StyledMenu ICE 风格导航 - 图5

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Icon, Switch, Select } from '@alifd/next';
import StyledMenu, {
  Item as MenuItem,
  SubMenu,
  Divider
} from '@icedesign/styled-menu';
const { Option } = Select;

class Sider extends Component {
  state = {
    theme: 'dark',
    current: '1'
  };

  changeTheme = value => {
    this.setState({
      theme: value ? 'dark' : 'light'
    });
  };

  handleClick = e => {
    this.setState({
      current: e.key
    });
  };

  render() {
    return (
      <div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <span>设置色彩深度：</span>
          <Switch
            checked={this.state.theme === 'dark'}
            onChange={this.changeTheme}
            checkedChildren="Dark"
            unCheckedChildren="Light"
          />
        </div>

        <h2>horizontal 模式效果</h2>
        <StyledMenu
          theme={this.state.theme}
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="horizontal"
        >
          <SubMenu title={<span>附带子菜单</span>} key="1">
            <MenuItem key="1-1">
              <a href="http://taobao.com" target="_blank">
                外链
              </a>
            </MenuItem>
            <MenuItem key="1-2">0-2</MenuItem>
          </SubMenu>
          <MenuItem>
            <a href="http://taobao.com" target="_blank">
              外链无需分配 key
            </a>
          </MenuItem>
          <MenuItem key="3">普通菜单</MenuItem>
          <SubMenu title={<span>附带子菜单和分割线</span>} key="4">
            <MenuItem key="4-1">菜单</MenuItem>
            <Divider />
            <SubMenu key="4-2" title={<span>下级菜单</span>}>
              <MenuItem key="4-2-1">菜单</MenuItem>
              <SubMenu title={<span>下下级菜单</span>} key="4-2-2">
                <MenuItem key="4-2-2-1">菜单</MenuItem>
                <MenuItem key="4-2-2-2">菜单2</MenuItem>
              </SubMenu>
            </SubMenu>
          </SubMenu>
          <MenuItem disabled>禁用效果</MenuItem>
          <MenuItem key="4-3">普通菜单</MenuItem>
        </StyledMenu>

        <h2>vertical 模式效果</h2>
        <StyledMenu
          theme={this.state.theme}
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="vertical"
          style={{ width: 240 }}
          defaultOpenKeys={['sub1']}
        >
          <SubMenu title={<span>附带子菜单</span>} key="1">
            <MenuItem key="1-1">
              <a href="http://taobao.com" target="_blank">
                外链
              </a>
            </MenuItem>
            <MenuItem key="1-2">0-2</MenuItem>
          </SubMenu>
          <MenuItem>
            <a href="http://taobao.com" target="_blank">
              外链无需分配 key
            </a>
          </MenuItem>
          <MenuItem key="3">普通菜单</MenuItem>
          <SubMenu title={<span>附带子菜单和分割线</span>} key="4">
            <MenuItem key="4-1">菜单</MenuItem>
            <Divider />
            <SubMenu key="4-2" title={<span>下级菜单</span>}>
              <MenuItem key="4-2-1">菜单</MenuItem>
              <SubMenu title={<span>下下级菜单</span>} key="4-2-2">
                <MenuItem key="4-2-2-1">菜单</MenuItem>
                <MenuItem key="4-2-2-2">菜单2</MenuItem>
              </SubMenu>
            </SubMenu>
          </SubMenu>
          <MenuItem disabled>禁用效果</MenuItem>
          <MenuItem key="4-3">普通菜单</MenuItem>
        </StyledMenu>

        <h2>inline 模式效果</h2>
        <StyledMenu
          theme={this.state.theme}
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="inline"
          style={{ width: 240 }}
          defaultOpenKeys={['sub1']}
        >
          <SubMenu title={<span>附带子菜单</span>} key="1">
            <MenuItem key="1-1">
              <a href="http://taobao.com" target="_blank">
                外链
              </a>
            </MenuItem>
            <MenuItem key="1-2">0-2</MenuItem>
          </SubMenu>
          <MenuItem>
            <a href="http://taobao.com" target="_blank">
              外链无需分配 key
            </a>
          </MenuItem>
          <MenuItem key="3">普通菜单</MenuItem>
          <SubMenu title={<span>附带子菜单和分割线</span>} key="4">
            <MenuItem key="4-1">菜单</MenuItem>
            <Divider />
            <SubMenu key="4-2" title={<span>下级菜单</span>}>
              <MenuItem key="4-2-1">菜单</MenuItem>
              <SubMenu title={<span>下下级菜单</span>} key="4-2-2">
                <MenuItem key="4-2-2-1">菜单</MenuItem>
                <MenuItem key="4-2-2-2">菜单2</MenuItem>
              </SubMenu>
            </SubMenu>
          </SubMenu>
          <MenuItem disabled>禁用效果</MenuItem>
          <MenuItem key="4-3">普通菜单</MenuItem>
        </StyledMenu>
      </div>
    );
  }
}

ReactDOM.render(<Sider />, mountNode);

切换菜单类型

展示动态切换模式。

StyledMenu ICE 风格导航 - 图6

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Icon, Switch } from '@alifd/next';
import StyledMenu, {
  Item as MenuItem,
  SubMenu,
  ItemGroup as MenuItemGroup
} from '@icedesign/styled-menu';

class Sider extends Component {
  state = {
    mode: 'inline'
  };
  changeMode = value => {
    this.setState({
      mode: value ? 'vertical' : 'inline'
    });
  };
  render() {
    return (
      <div>
        <Switch onChange={this.changeMode} />
        <br />
        <br />
        <StyledMenu
          style={{ width: 240 }}
          defaultOpenKeys={['sub1']}
          mode={this.state.mode}
        >
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="filter" />
                <span>Navigation One</span>
              </span>
            }
          >
            <MenuItemGroup title="Item 1">
              <MenuItem key="1">Option 1</MenuItem>
              <MenuItem key="2">Option 2</MenuItem>
            </MenuItemGroup>
            <MenuItemGroup title="Item 2">
              <MenuItem key="3">Option 3</MenuItem>
              <MenuItem key="4">Option 4</MenuItem>
            </MenuItemGroup>
          </SubMenu>
          <SubMenu
            key="sub2"
            title={
              <span>
                <Icon type="pin" />
                <span>Navigation Two</span>
              </span>
            }
          >
            <MenuItem key="5">Option 5</MenuItem>
            <MenuItem key="6">Option 6</MenuItem>
            <SubMenu key="sub3" title="SubMenu">
              <MenuItem key="7">Option 7</MenuItem>
              <MenuItem key="8">Option 8</MenuItem>
            </SubMenu>
          </SubMenu>
          <SubMenu
            key="sub4"
            title={
              <span>
                <Icon type="history" />
                <span>Navigation Three</span>
              </span>
            }
          >
            <MenuItem key="9">Option 9</MenuItem>
            <MenuItem key="10">Option 10</MenuItem>
            <MenuItem key="11">Option 11</MenuItem>
            <MenuItem key="12">Option 12</MenuItem>
          </SubMenu>
        </StyledMenu>
      </div>
    );
  }
}

ReactDOM.render(<Sider />, mountNode);

收缩模式

演示收缩模式效果。每个 MenuItem 中要收缩的元素，必须附带 ice-menu-collapse-hide 这个 className，并且对外框做一些宽度样式调整。

StyledMenu ICE 风格导航 - 图7

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Icon, Button } from '@alifd/next';
import StyledMenu, {
  Item as MenuItem,
  SubMenu,
  ItemGroup as MenuItemGroup
} from '@icedesign/styled-menu';

class Sider extends Component {
  constructor(props) {
    super(props);

    this.state = {
      collapse: true,
      currentSelectedKey: ''
    };
  }

  toggleCollapse = () => {
    this.setState({
      collapse: !this.state.collapse
    });
  };

  handleSelect = info => {
    console.log(info);
    this.setState({
      currentSelectedKey: info.key
    });
  };

  render() {
    return (
      <div>
        <Button
          style={{ width: 60, marginBottom: 10 }}
          onClick={this.toggleCollapse}
        >
          <Icon type={this.state.collapse ? 'arrow-right' : 'arrow-left'} />
        </Button>
        <StyledMenu
          style={{ width: this.state.collapse ? 60 : 240 }}
          // defaultOpenKeys={['sub1']}
          inlineCollapsed={this.state.collapse}
          theme="dark"
          mode="inline"
          onSelect={this.handleSelect}
          selectedKeys={[this.state.currentSelectedKey]}
        >
          <StyledMenu.Item key="1">
            <Icon type="account" />
            <span className="ice-menu-collapse-hide">Option 1</span>
          </StyledMenu.Item>
          <StyledMenu.Item key="2">
            <Icon type="email" />
            <span className="ice-menu-collapse-hide">Option 2</span>
          </StyledMenu.Item>
          <StyledMenu.Item key="3">
            <Icon type="set" />
            <span className="ice-menu-collapse-hide">Option 3</span>
          </StyledMenu.Item>
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="upload" />
                <span className="ice-menu-collapse-hide">Navigation One</span>
              </span>
            }
          >
            <StyledMenu.Item key="5">Option 5</StyledMenu.Item>
            <StyledMenu.Item key="6">Option 6</StyledMenu.Item>
            <StyledMenu.Item key="7">Option 7</StyledMenu.Item>
            <StyledMenu.Item key="8">Option 8</StyledMenu.Item>
          </SubMenu>
          <SubMenu
            key="sub2"
            title={
              <span>
                <Icon type="refresh" />
                <span className="ice-menu-collapse-hide">Navigation Two</span>
              </span>
            }
          >
            <StyledMenu.Item key="9">Option 9</StyledMenu.Item>
            <StyledMenu.Item key="10">Option 10</StyledMenu.Item>
            <SubMenu key="sub3" title="SubMenu">
              <StyledMenu.Item key="11">Option 11</StyledMenu.Item>
              <StyledMenu.Item key="12">Option 12</StyledMenu.Item>
            </SubMenu>
          </SubMenu>
        </StyledMenu>
      </div>
    );
  }
}

ReactDOM.render(<Sider />, mountNode);

相关区块

StyledMenu ICE 风格导航 - 图8

暂无相关区块