StyledMenu ICE 风格导航

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

何时使用

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

<StyledMenu>
  <StyledMenu.Item>菜单项</StyledMenu.Item>
  <StyledMenu.SubMenu title="子菜单">
    <StyledMenu.Item>子菜单项</StyledMenu.Item>
  </StyledMenu.SubMenu>
</StyledMenu>

API

Menu props

参数 说明 类型 默认值
theme 主题颜色 string: light dark light
color 支持 Colorful ICE 配色 string: blue, green, orange, red, roseo
mode 菜单类型，现在支持垂直、水平、和内嵌模式三种 string: vertical horizontal inline vertical
selectedKeys 当前选中的菜单项 key 数组 string[]
defaultSelectedKeys 初始选中的菜单项 key 数组 string[]
openKeys 当前展开的 SubMenu 菜单项 key 数组 string[]
defaultOpenKeys 初始展开的 SubMenu 菜单项 key 数组
onOpenChange SubMenu 展开/关闭的回调 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
inlineIndent inline 模式的菜单缩进宽度 number 24
multiple 是否允许多选 boolean false

More options in rc-menu

StyledMenu.Item props

参数 说明 类型 默认值
disabled 是否禁用 boolean false
key item 的唯一标志 string

StyledMenu.SubMenu props

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

StyledMenu.ItemGroup props

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

StyledMenu.Divider

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

DEMO 列表

水平的顶部导航菜单

水平的顶部导航菜单。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Icon } from '@alifd/next';
import StyledMenu, {
  Item as MenuItem,
  SubMenu,
  ItemGroup as MenuItemGroup
} from '@icedesign/styled-menu';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 'mail'
    };
  }

  handleClick = e => {
    console.log('刚刚点击的数据：', e);
    this.setState({
      current: e.key
    });
  };

  render() {
    return (
      <StyledMenu
        onClick={this.handleClick}
        // selectedKeys 决定当前哪一项被选中
        selectedKeys={[this.state.current]}
        mode="horizontal"
      >
        <MenuItem key="mail">
          <Icon type="upload" />导航一（默认选中状态）
        </MenuItem>
        <MenuItem key="linkicon">
          <a target="_blank" href="https://www.taobao.com/">
            <Icon type="email" />导航二（演示超链接外链）
          </a>
        </MenuItem>
        <MenuItem key="app" disabled>
          <Icon type="help" />导航三（禁用当前选项）
        </MenuItem>
        <SubMenu
          key="SubMenu"
          title={
            <span>
              <Icon type="account" />导航四（附带下拉菜单）
            </span>
          }
        >
          <MenuItemGroup title="下拉分组一">
            <MenuItem key="setting:1">选项 1</MenuItem>
            <MenuItem key="setting:2">选项 2</MenuItem>
          </MenuItemGroup>
          <MenuItemGroup title="下拉分组二">
            <MenuItem key="setting:3">选项 3</MenuItem>
            <MenuItem key="setting:4">选项 4</MenuItem>
          </MenuItemGroup>
        </SubMenu>
      </StyledMenu>
    );
  }
}

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

内嵌菜单

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

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

class Sider extends Component {
  handleClick = e => {
    console.log('click ', e);
  };

  render() {
    return (
      <StyledMenu
        onClick={this.handleClick}
        style={{ width: 240 }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
      >
        <SubMenu
          key="sub1"
          title={
            <span>
              <Icon type="box" />
              <span>导航一</span>
            </span>
          }
        >
          <MenuItemGroup key="g1" title="Item 1">
            <MenuItem key="1">Option 1</MenuItem>
            <MenuItem key="2">Option 2</MenuItem>
          </MenuItemGroup>
          <MenuItemGroup key="g2" title="Item 2">
            <MenuItem key="3">Option 3</MenuItem>
            <MenuItem key="4">Option 4</MenuItem>
          </MenuItemGroup>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={
            <span>
              <Icon type="download" />
              <span>导航二</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="play" />
              <span>导航三</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>
    );
  }
}

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

简单的用法

本 Demo 演示最基础的用法。

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

class App extends Component {
  state = {
    currentSelectedKey: '3'
  };

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

  render() {
    return (
      <div>
        <StyledMenu
          style={{ width: 200 }}
          onSelect={this.handleSelect}
          onClick={handleClick}
          mode="vertical"
          theme="dark"

          // mode="inline"
          // 选中的 key 跟下面 MenuItem 的 key 对应，支持多个，所以要求下面所有 MenuItem key 唯一
          // selectedKeys={['3']}
          // selectedKeys={['4-2-1']}
          // openKeys={['4', '4-2']}
          // openKeys={['4']}
        >
          <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>
            <MenuItem key="4-2-21">菜单</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>
        <hr />
        <StyledMenu
          mode="horizontal"
          // openKeys={['SubMenu']}
          // selectedKeys={['setting:2']}
          theme="dark"
        >
          <MenuItem key="mail">
            <Icon type="pin" />导航一（默认选中状态）
          </MenuItem>
          <MenuItem key="linkicon">
            <a target="_blank" href="https://www.taobao.com/">
              <Icon type="email" />导航二（演示超链接外链）
            </a>
          </MenuItem>
          <MenuItem key="app" disabled>
            <Icon type="form" />导航三（禁用当前选项）
          </MenuItem>
          <SubMenu
            key="SubMenu"
            title={
              <span>
                <Icon type="discount" />导航四（附带下拉菜单）
              </span>
            }
          >
            <MenuItemGroup title="下拉分组一">
              <MenuItem key="setting:1">选项 1</MenuItem>
              <MenuItem key="setting:2">选项 2</MenuItem>
            </MenuItemGroup>
            <MenuItemGroup title="下拉分组二">
              <MenuItem key="setting:3">选项 3</MenuItem>
              <MenuItem key="setting:4">选项 4</MenuItem>
            </MenuItemGroup>
          </SubMenu>
        </StyledMenu>
        <hr />
        <StyledMenu
          style={{ width: 60 }}
          // defaultOpenKeys={['sub2', 'sub3']}
          inlineCollapsed={true}
          theme="dark"
          mode="inline"
          // selectedKeys={['11']}
        >
          <StyledMenu.Item key="1">
            <Icon type="cart" />
            <span className="ice-menu-collapse-hide">Option 1</span>
          </StyledMenu.Item>
          <StyledMenu.Item key="2">
            <Icon type="help" />
            <span className="ice-menu-collapse-hide">Option 2</span>
          </StyledMenu.Item>
          <StyledMenu.Item key="3">
            <Icon type="box" />
            <span className="ice-menu-collapse-hide">Option 3</span>
          </StyledMenu.Item>
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="table" />
                <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="compass" />
                <span className="ice-menu-collapse-hide">Navigation Two</span>
              </span>
            }
          >
            <MenuItem key="9">Option 9</MenuItem>
            <MenuItem key="10">Option 10</MenuItem>
            <SubMenu key="sub3" title="SubMenu">
              <MenuItem key="11">Option 11</MenuItem>
              <MenuItem key="12">Option 12</MenuItem>
            </SubMenu>
          </SubMenu>
        </StyledMenu>
        <hr />
        <StyledMenu
          onClick={this.handleClick}
          style={{ width: 240 }}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
        >
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="box" />
                <span>Navigation One</span>
              </span>
            }
          >
            <MenuItemGroup key="g1" title="Item 1">
              <MenuItem key="1">Option 1</MenuItem>
              <MenuItem key="2">Option 2</MenuItem>
            </MenuItemGroup>
            <MenuItemGroup key="g2" title="Item 2">
              <MenuItem key="3">Option 3</MenuItem>
              <MenuItem key="4">Option 4</MenuItem>
            </MenuItemGroup>
          </SubMenu>
          <SubMenu
            key="sub2"
            title={
              <span>
                <Icon type="download" />
                <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="play" />
                <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>
    );
  }
}

function handleClick(info) {
  console.log('click ', info);
}

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

只展开当前父级菜单

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

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

class Sider extends React.Component {
  state = {
    current: '1',
    openKeys: []
  };
  handleClick = e => {
    console.log('Clicked: ', e);
    this.setState({ current: e.key });
  };
  onOpenChange = openKeys => {
    const state = this.state;
    const latestOpenKey = openKeys.find(
      key => !(state.openKeys.indexOf(key) > -1)
    );
    const latestCloseKey = state.openKeys.find(
      key => !(openKeys.indexOf(key) > -1)
    );

    let nextOpenKeys = [];
    if (latestOpenKey) {
      nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
    }
    if (latestCloseKey) {
      nextOpenKeys = this.getAncestorKeys(latestCloseKey);
    }
    this.setState({ openKeys: nextOpenKeys });
  };
  getAncestorKeys = key => {
    const map = {
      sub3: ['sub2']
    };
    return map[key] || [];
  };
  render() {
    return (
      <StyledMenu
        mode="inline"
        openKeys={this.state.openKeys}
        selectedKeys={[this.state.current]}
        style={{ width: 240 }}
        onOpenChange={this.onOpenChange}
        onClick={this.handleClick}
      >
        <SubMenu
          key="sub1"
          title={
            <span>
              <Icon type="account" />
              <span>Navigation One</span>
            </span>
          }
        >
          <MenuItem key="1">Option 1</MenuItem>
          <MenuItem key="2">Option 2</MenuItem>
          <MenuItem key="3">Option 3</MenuItem>
          <MenuItem key="4">Option 4</MenuItem>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={
            <span>
              <Icon type="upload" />
              <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="help" />
              <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>
    );
  }
}

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

垂直菜单

子菜单是弹出的形式。

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

function handleClick(e) {
  console.log('click', e);
}

ReactDOM.render(
  <StyledMenu onClick={handleClick} style={{ width: 240 }} mode="vertical">
    <SubMenu
      key="sub1"
      title={
        <span>
          <Icon type="security" />
          <span>Navigation One</span>
        </span>
      }
    >
      <MenuItemGroup title="Item 1">
        <MenuItem key="1">Option 1</MenuItem>
        <MenuItem key="2">Option 2</MenuItem>
      </MenuItemGroup>
      <MenuItemGroup title="Iteom 2">
        <MenuItem key="3">Option 3</MenuItem>
        <MenuItem key="4">Option 4</MenuItem>
      </MenuItemGroup>
    </SubMenu>
    <SubMenu
      key="sub2"
      title={
        <span>
          <Icon type="stop" />
          <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="office" />
          <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>,
  mountNode
);

主题

内建了多套主题，兜底的有两套 light|dark，默认 light。

theme 为主题配置，有浅色系（默认）和深色系两个配置 light|dark。

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);

切换菜单类型

展示动态切换模式。

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，并且对外框做一些宽度样式调整。

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);