# NestedMenu 菜单

为页面和功能提供导航的菜单列表。更偏重于 `编辑器` 类型菜单。

注意与 `DropNav`、`Dropdown`、`Nav` 的区别。

```js
import { NestedMenu } from 'amos-framework';
```

## 案例演示

### 基本使用

`SubMenu` 通过设置 `overlayProps={{ visible: true }}` 或者 `defaultOpened={true}` 则可以默认设置是否初始打开子菜单。

---demo
```js
import { NestedMenu, Row, Col, Icon } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;

const Demo = () => (
  <Row gutter={10}>
    <Col span={4}>
      <NestedMenu bordered>
        <MenuItem icon="retweet" text="刷新" />
        <Divider />
        <MenuItem icon="export" text="导出为" active />
        <MenuItem icon="remove" text="删除" />
        <MenuItem icon="shuoming" text="帮助" />
        <MenuItem icon="collection" text="收藏" />
        <Divider />
        <MenuItem icon="link" text="天地图" href="https://map.tianditu.gov.cn/" />
        <MenuItem icon="link" text="高德地图" href="https://www.amap.com/" />
        <MenuItem icon="link" text="百度地图" href="https://map.baidu.com" target="_blank" />
      </NestedMenu>
    </Col>
    <Col span={4}>
      <NestedMenu bordered>
        <Divider title="edit" />
        <MenuItem icon="plus" text="new file" />
        <MenuItem icon="folderadd" text="new folder" />
        <MenuItem text="copy" />
        <MenuItem icon={<Icon icon="shezhi" />} text="setting" />
        <MenuItem disabled text="delete" />
        <SubMenu text="reference" collapse overlayProps={{ visible: true }}>
          <MenuItem text="setting" />
          <MenuItem text="user setting" />
          <MenuItem text="keymaps" />
          <MenuItem text="theme" />
        </SubMenu>
        <SubMenu text="goto" collapse defaultOpened>
          <MenuItem text="goto code" />
          <MenuItem text="goto next line" />
        </SubMenu>
        <Divider title="Appearence" />
        <SubMenu text="full screen">
          <MenuItem text="Zen Mode" />
          <MenuItem text="Zoom In" />
          <MenuItem text="Zoom Out" />
          <Divider title="bar" />
          <MenuItem text="Move Bar" />
          <SubMenu text="sub menu2">
            <MenuItem text="menu" />
            <SubMenu text="sub menu3">
              <MenuItem text="menu1" />
              <MenuItem text="menu2" />
            </SubMenu>
          </SubMenu>
        </SubMenu>
        <SubMenu icon="shezhi" disabled text="fav setting">
          <MenuItem icon="meho" text="setting1" />
          <MenuItem icon="frown" text="setting2" />
        </SubMenu>
        <MenuItem icon="map" text="Amap" />
      </NestedMenu>
    </Col>
  </Row>
)

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 基本使用 MenuGroup

通过 `MenuGroup` 实现子菜单。

---demo
```js
import { NestedMenu } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const MenuGroup = NestedMenu.MenuGroup;

const Demo = () => (
<div style={{ width: 200 }}>
  <NestedMenu bordered>
    <MenuItem icon="plus" text="new file" />
    <MenuItem disabled text="delete" />
    <MenuGroup text="reference">
      <MenuItem text="setting" />
      <MenuItem text="user setting" />
    </MenuGroup>
    <MenuGroup text="goto">
      <MenuItem text="goto code" />
      <MenuItem text="goto next line" />
    </MenuGroup>
    <MenuGroup text="full screen">
      <MenuItem text="Zoom In" />
      <MenuItem text="Zoom Out" />
      <MenuItem text="Move Bar" />
      <MenuGroup text="group menu2">
        <MenuItem text="menu" />
        <MenuGroup text="group menu3">
          <MenuItem text="menu1" />
          <MenuItem text="menu2" />
        </MenuGroup>
      </MenuGroup>
    </MenuGroup>
    <MenuGroup icon="shezhi" disabled text="fav setting">
      <MenuItem icon="meho" text="setting1" />
      <MenuItem icon="frown" text="setting2" />
    </MenuGroup>
    <MenuItem icon="map" text="Amap" />
  </NestedMenu>
</div>
)

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 下拉菜单

与 `Popover` 组件组合使用，仅支持 1 级，或折叠 2 级菜单

---demo
```js
import { NestedMenu, Popover, Button, Row, Col } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;

const btnStl = {position: 'relative', width: 70 }
const content = (
  <NestedMenu>
    <MenuItem icon="retweet" text="刷新" />
    <Divider />
    <MenuItem icon="remove" text="删除" />
    <MenuItem icon="shuoming" text="帮助" />
    <MenuItem icon="collection" text="收藏" />
    <Divider />
    <MenuItem icon="link" text="天地图" href="https://map.tianditu.gov.cn/" />
  </NestedMenu>
);

const styles = {
  box: { width: '400px' },
  top: { textAlign: 'center' },
  left: {
    float: 'left',
    width: '70px'
  },
  right: {
    float: 'right',
    width: '70px'
  },
  bottom: {
    clear: 'both',
    textAlign: 'center'
  },
  btn: {
    margin: 0,
    marginTop: '0.8em'
  }
};

const Demo = () => (
  <div style={styles.box}>
    <div style={styles.top}>
      <Popover triggerMode="click" content={content} direction="up" align="left">
        <Button>上左</Button>
      </Popover>
      <Popover triggerMode="click" content={content} direction="up" align="middle">
        <Button>上中</Button>
      </Popover>
      <Popover triggerMode="click" content={content} direction="up" align="right">
        <Button>上右</Button>
      </Popover>
    </div>
    <div style={styles.left}>
      <Popover triggerMode="click" content={content} direction="left" align="top">
        <Button>左上</Button>
      </Popover>
      <Popover triggerMode="click" content={content} direction="left" align="middle">
        <Button style={styles.btn}>左中</Button>
      </Popover>
      <Popover triggerMode="click" content={content} direction="left" align="bottom">
        <Button style={styles.btn}>左下</Button>
      </Popover>
    </div>

    <div style={styles.right}>
      <Popover triggerMode="click" content={content} direction="right" align="top">
        <Button>右上</Button>
      </Popover>
      <Popover triggerMode="click" content={content} direction="right" align="middle">
        <Button style={styles.btn}>右中</Button>
      </Popover>
      <Popover triggerMode="click" content={content} direction="right" align="bottom">
        <Button style={styles.btn}>右下</Button>
      </Popover>
    </div>
    <div style={styles.bottom}>
      <Popover triggerMode="click" content={content} direction="down" align="left">
        <Button>下左</Button>
      </Popover>
      <Popover triggerMode="click" content={content} direction="down" align="middle">
        <Button>下中</Button>
      </Popover>
      <Popover triggerMode="click" content={content} direction="down" align="right">
        <Button>下右</Button>
      </Popover>
    </div>
  </div>
)
ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 菜单具备滚动条下拉菜单

主菜单具备滚动条时，需要将 submenu 的 `position` 改为 `static`，同时 `Trigger` 改为 `Portal` 模式。

---demo
```js
import { NestedMenu, Popover, Button } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;

const style = {
  height: 150,
  overflow: 'auto'
};

const subMenuProps = {
  nativeProps: { style: { position: 'static' } },
  overlayProps: { usePortal: true, triggerMode: 'click', className: 'my-submenu' }
};

const content = (
  <div style={style}>
    <NestedMenu>
      <MenuItem icon="retweet" text="刷新" />
      <Divider />
      <MenuItem icon="remove" text="删除" />
      <MenuItem icon="shuoming" text="帮助" />
      <MenuItem icon="collection" text="收藏" />
      <Divider />
      <MenuItem icon="link" text="天地图" href="https://map.tianditu.gov.cn/" />
      <SubMenu text="切换组" {...subMenuProps}>
        <MenuItem text="组1" />
        <MenuItem text="组2" />
        <MenuItem text="组3" />
      </SubMenu>
      <SubMenu icon="api" text="调试" {...subMenuProps}>
        <MenuItem text="启动调试" />
        <MenuItem text="停止调试" />
        <Divider title="执行" />
        <MenuItem text="单步执行" />
        <MenuItem text="单步跳过" />
        <MenuItem text="继续" />
        <SubMenu text="新建断点" {...subMenuProps}>
          <MenuItem text="条件断点" />
          <MenuItem text="普通断点" />
          <MenuItem text="记录点" />
        </SubMenu>
      </SubMenu>
    </NestedMenu>
  </div>
);

const btnStyle = {
    margin: 0,
    marginTop: '0.8em'
  };

// 此处设置 pop style z-index 为 999，主要是为了使其值低于 `SubMenu` 的 z-index 值
const Demo = () => (
  <Popover style={{ zIndex: 999 }} contentWrapStyle={{ padding: '10px 0px' }} triggerMode="click" content={content} direction="down" align="left">
    <Button style={btnStyle}>菜单</Button>
  </Popover>
)
ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 内嵌菜单

右边的菜单，采用 filled 模式

---demo
```js
import { NestedMenu, Row, Col } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;

const Demo = () => (
  <Row gutter={10}>
    <Col span={4}>
      <NestedMenu bordered style={{ maxWidth: 200 }}>
        <MenuItem icon="logout" disabled text="返回" />
        <SubMenu text="切换组" disabled collapse>
          <MenuItem text="组1" />
          <MenuItem text="组2" />
          <MenuItem text="组3" />
        </SubMenu>
        <Divider title="运行" />
        <SubMenu icon="api" text="调试" collapse>
          <MenuItem text="启动调试" />
          <MenuItem text="停止调试" />
          <Divider title="执行" />
          <MenuItem text="单步执行" />
          <MenuItem text="单步跳过" />
          <MenuItem text="继续" />
          <SubMenu text="新建断点" collapse>
            <MenuItem text="条件断点" />
            <MenuItem text="普通断点" />
            <MenuItem text="记录点" />
          </SubMenu>
        </SubMenu>
        <MenuItem disabled text="启用所有调试" />
        <MenuItem text="关闭" />
      </NestedMenu>
    </Col>
    <Col span={4}>
      <NestedMenu filled bordered style={{ maxWidth: 200 }}>
        <Divider title="运行" />
        <SubMenu icon="api" text="调试" collapse style={{ width: 160 }}>
          <MenuItem text="启动调试" />
          <MenuItem text="停止调试" />
          <Divider title="执行" />
          <MenuItem text="单步执行" />
          <MenuItem text="单步跳过" />
          <MenuItem text="继续" />
          <SubMenu text="新建断点" collapse>
            <MenuItem text="条件断点" />
            <MenuItem text="普通断点" />
            <MenuItem text="记录点" />
          </SubMenu>
        </SubMenu>
        <MenuItem disabled text="启用所有调试" />
        <MenuItem text="关闭" />
      </NestedMenu>
    </Col>
  </Row>
)
ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 水平菜单

注意，水平模式菜单，在一级菜单禁止设置 `collapse`

---demo
```js
import { NestedMenu, Row, Col } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;

const level1 = {
  placement: 'bottomLeft'
};

const Demo = () => (
  <NestedMenu bordered horizontal>
    <MenuItem icon="logout" disabled text="返回" />
    <SubMenu text="切换组" disabled overlayProps={level1}>
      <MenuItem text="组1" />
      <MenuItem text="组2" />
      <MenuItem text="组3" />
    </SubMenu>
    <SubMenu overlayProps={level1} icon="api" text="调试">
      <MenuItem text="启动调试" />
      <MenuItem text="停止调试" />
      <Divider title="执行" />
      <SubMenu text="按步执行">
        <MenuItem text="单步执行" />
        <MenuItem text="单步跳过" />
      </SubMenu>
      <MenuItem text="继续" />
      <SubMenu text="新建断点" collapse>
        <MenuItem text="条件断点" />
        <MenuItem text="普通断点" />
        <MenuItem text="记录点" />
      </SubMenu>
      <MenuItem text="很长很长很长很长很长很长的菜单文字" />
    </SubMenu>
    <MenuItem disabled text="启用所有调试" />
    <MenuItem text="关闭" />
  </NestedMenu>
)
ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 主题

内建了两套主题 `light`、`dark`，默认 `light`。

---demo
```js
import { NestedMenu, Row, Col, Switch } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: 'dark'
    }
  }
  render() {
    const { theme } = this.state;
    return (
      <div>
        <Row gutter={10}>
          <Col style={{ paddingBottom: 5 }}>
            <Switch
              onOff={theme === 'dark'}
              style={{ marginRight: 10 }}
              onChange={(onOff) => {
                this.setState({ theme: onOff ? 'dark' : 'light' });
              }}
            />
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={4}>
            <NestedMenu theme={this.state.theme} bordered style={{ maxWidth: 200 }}>
              <MenuItem icon="logout" disabled text="返回" />
              <SubMenu text="切换组" disabled collapse>
                <MenuItem text="组1" />
                <MenuItem text="组2" />
                <MenuItem text="组3" />
              </SubMenu>
              <Divider title="运行" />
              <SubMenu icon="api" text="调试" collapse>
                <MenuItem text="启动调试" />
                <MenuItem text="停止调试" />
                <Divider title="执行" />
                <MenuItem text="单步执行" />
                <MenuItem text="单步跳过" />
                <MenuItem text="继续" />
                <SubMenu text="新建断点" collapse>
                  <MenuItem text="条件断点" />
                  <MenuItem text="普通断点" />
                  <MenuItem text="记录点" />
                </SubMenu>
              </SubMenu>
              <MenuItem disabled text="启用所有调试" />
              <MenuItem text="关闭" />
            </NestedMenu>
          </Col>
        </Row>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend


### 自定义颜色

通过传入不同的颜色，改变菜单效果。

---demo
```js
import { NestedMenu, Row, Col, InputColor } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;
const loadColor = NestedMenu.loadColor;

const toRGBAColor = InputColor.toRGBAColor;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'white'
    }
  }

  onChange = value => {
    this.setState({ color: value }, () => {
      // 颜色改变时，应用颜色，外部使用时，传入 color，必须在 componentDidMount 中执行该方法。
      loadColor(toRGBAColor(value), 'my-nestedmenu-color', true);
    });
  }

  render() {
    const { color } = this.state;
    return (
      <div>
        <Row gutter={10}>
          <Col span={5} style={{ paddingBottom: 5 }}>
            <InputColor value={color} onChange={this.onChange} />
          </Col>
          <Col span={4}>
            <NestedMenu color={toRGBAColor(color)} bordered style={{ maxWidth: 200 }}>
              <MenuItem icon="logout" disabled text="返回" />
              <SubMenu text="切换组" disabled collapse>
                <MenuItem text="组1" />
                <MenuItem text="组2" />
                <MenuItem text="组3" />
              </SubMenu>
              <Divider title="运行" />
              <SubMenu icon="api" text="调试" collapse>
                <MenuItem text="启动调试" />
                <MenuItem text="停止调试" />
                <Divider title="执行" />
                <MenuItem text="单步执行" />
                <MenuItem text="单步跳过" />
                <MenuItem text="继续" />
                <SubMenu text="新建断点" collapse>
                  <MenuItem text="条件断点" />
                  <MenuItem text="普通断点" />
                  <MenuItem text="记录点" />
                </SubMenu>
              </SubMenu>
              <MenuItem disabled text="启用所有调试" />
              <MenuItem text="关闭" />
            </NestedMenu>
          </Col>
        </Row>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend


### 子菜单禁用动画

子菜单显示时，可禁用动画。仅支持普通模式和水平菜单。如果子菜单设置 `collapse=true` 则禁用动画不起效

---demo
```js
import { NestedMenu, Row, Col } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;

const Demo = () => (
  <NestedMenu bordered>
    <MenuItem icon="logout" disabled text="返回" />
    <SubMenu text="切换组" collapse disabledAnimate>
      <MenuItem text="组1" />
      <MenuItem text="组2" />
      <MenuItem text="组3" />
    </SubMenu>
    <Divider title="运行" />
    <SubMenu icon="api" text="调试" disabledAnimate>
      <MenuItem text="启动调试" />
      <MenuItem text="停止调试" />
      <Divider title="执行" />
      <MenuItem text="单步执行" />
      <MenuItem text="单步跳过" />
      <MenuItem text="继续" />
      <SubMenu text="新建断点" disabledAnimate>
        <MenuItem text="条件断点" />
        <MenuItem text="普通断点" />
        <MenuItem text="记录点" />
      </SubMenu>
    </SubMenu>
    <MenuItem disabled text="启用所有调试" />
    <MenuItem text="关闭" />
  </NestedMenu>
);

// 水平菜单一级菜单包含 submen 时，需要自行设置 Trigger 的对齐方式。
const level1 = {
  placement: 'bottomLeft'
};

// 水平菜单
const HDemo = () => (
  <NestedMenu bordered horizontal>
    <MenuItem icon="logout" disabled text="返回" />
    <SubMenu text="切换组" disabledAnimate overlayProps={level1}>
      <MenuItem text="组1" />
      <MenuItem text="组2" />
      <MenuItem text="组3" />
    </SubMenu>
    <SubMenu icon="api" text="调试" disabledAnimate overlayProps={level1}>
      <MenuItem text="启动调试" />
      <MenuItem text="停止调试" />
      <Divider title="执行" />
      <MenuItem text="单步执行" />
      <MenuItem text="单步跳过" />
      <MenuItem text="继续" />
      <SubMenu text="新建断点" disabledAnimate>
        <MenuItem text="条件断点" />
        <MenuItem text="普通断点" />
        <MenuItem text="记录点" />
      </SubMenu>
    </SubMenu>
    <MenuItem disabled text="启用所有调试" />
    <MenuItem text="关闭" />
  </NestedMenu>
);

ReactDOM.render((
  <div>
    <Row gutter={8}>
      <Col span={6}>
        <Demo />
      </Col>
      <Col span={18}>
        <HDemo />
      </Col>
    </Row>
  </div>
), _react_runner_);
```
---demoend

### 菜单数据

采用数据生成菜单，包含点击事件操作、展示等。

---demo
```js
import { NestedMenu, Row, Col, Switch } from 'amos-framework';

const MenuItem = NestedMenu.Item;
const Divider = NestedMenu.Divider;
const SubMenu = NestedMenu.SubMenu;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: 'light',
      menus: [
        { key: '1', icon: 'delete', label: '帮助' },
        {
          icon: 'meho',
          label: '欢迎',
          collapse: false,
          children: [
            { key: '1-1', label: '欢迎使用' },
            { key: '1-2', icon: 'carryout', disabled: true, label: '文档' },
            { key: '1-3', label: '发行说明' },
          ]
        },
        { divider: true },
        { key: '2', icon: 'warning', label: '隐私声明' },
        {
          icon: 'eye',
          label: '外观',
          collapse: true,
          children: [
            { key: '2-1', label: '全屏' },
            { key: '2-2', label: '禅模式' },
            { key: '2-3', icon: 'eye', label: '显示', divider: true },
            {
              icon: 'shezhi',
              label: '菜单显示',
              collapse: true,
              children: [
                { key: '2-3-1', label: '显示侧栏' },
                { key: '2-3-2', label: '显示状态栏' },
                { key: '2-3-3', label: '显示活动栏' },
              ],
            },
          ]
        },
        {
          icon: 'can-p',
          label: '可跳转父菜单',
          href: 'https://www.baidu.com/',
          // 点击父节点时，也进行跳转
          canTo: true,
          collapse: true,
          children: [
            { key: 'can-p-1', label: '菜单1' },
            { key: 'can-p-2', label: '菜单2' },
          ]
        },
        { key: '3', icon: 'link', href: 'https://www.baidu.com/', label: '外部链接' }
      ],
      active: '1',
    }
  }

  onClickItem = (key) => {
    this.setState({ active: key });
  }

  subMenuClick = (item, e) => {
    console.log('submenu click', e);
    if (location.pathname !== item.href){
      // 执行跳转
    } else {
      // do nothing
    }
  }

  renderMenu(menus, k) {
    const { active } = this.state;
    const items = [];
    return menus.map((item, key) => {
      if (item.children) {
        const props = {
          icon: item.icon,
          text: item.label,
          collapse: item.collapse,
          autoSelectedParent: true
        };

        if (item.canTo){
          props.onClick = (e) => this.subMenuClick(item, e);
        }

        return (
          <SubMenu key={key} {...props}>
            {this.renderMenu(item.children, `${k}${key}`)}
          </SubMenu>
        );
      } else if (item.divider) {
        return <Divider key={`${k}${key}`} title={item.label} />;
      } else if (item.href) {
        return (
          <MenuItem
            href={item.href}
            icon={item.icon}
            text={item.label}
            key={`${k}${key}`}
          />
        );
      }
      return (
        <MenuItem
          onClick={() => this.onClickItem(item.key)}
          active={active === item.key}
          key={`${k}${key}`}
          icon={item.icon}
          text={item.label}
        />
      );
    });
  }

  render() {
    return (
      <div>
        <Row gutter={10}>
          <Col span={4} style={{ paddingBottom: 5 }}>
            <Switch
              onOff={this.state.theme === 'dark'}
              style={{ marginRight: 10 }}
              onChange={(onOff) => {
                this.setState({ theme: onOff ? 'dark' : 'light' });
              }}
            />
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={4}>
            <NestedMenu inlineIndent={13} theme={this.state.theme} bordered style={{ maxWidth: 200 }}>
              {this.renderMenu(this.state.menus, 'k')}
            </NestedMenu>
          </Col>
        </Row>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

> 通过给 `SubMenu` 设置 `autoSelectedParent`，实现在子菜单选中时，自动选中父菜单。

## props

### NestedMenu

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| className | String | - | 自定义样式名 |
| style | Object | - | html 元素内联自定义样式 |
| inlineIndent | Number | `10` | 子菜单缩进宽度 |
| theme | Enum{`light`, `dark`} | - | 主题颜色 |
| bordered | Boolean | `false` | 是否有边框 |


### NestedMenu.Item

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| icon | `ReactNode or String` | - | 菜单图标 [`<Icon />`](#/framework/icon) 的 `icon` 属性，如果为 string 类型，默认采用 `InnerIcon` |
| iconPrefix | String | `aficon` | 自定义菜单前缀，如 `amosicon` |
| text | ReactNode | - | 菜单标题内容 |
| addonAfter | ReactNode | - | 菜单标题后面插入内容 |
| tagName | String | `a` | 设置子节点标签名，默认 `<a />` 标签 |
| active | Boolean | `false` | 激活选中状态 |
| disabled | Boolean | `false` | 禁用状态 |
| nativeProps | Object | - | 根节点 html 元素支持的 props |

> 注意：如果传入了 `href` 且采用默认的 `tagName=a` 进行路由跳转时，如果整屏出现刷新，此时只需要改为如下方式：

* `href={...}` 改为 `to={...}`
* `tagName`: `tagName={Link}`

> `Link` 中，不要出现 `target='_self'`，否则，也会出现整屏刷新的问题。

```js
import { NestedMenu } from 'amos-framework';
// 此处采用 amos-react-router
import { Link } from 'amos-react-router';

const Demo = () => {
  return (
    <NestedMenu style={{ maxWidth: 200 }}>
      <NestedMenu.Item tagName={Link} to="/home" icon="refresh" text="跳转首页" />
      <NestedMenu.Item tagName={Link} to={{ pathname: '/home', state: { token: 'xxx' } }} icon="refresh" text="跳转首页" />
      <NestedMenu.Item icon="map" text="百度地图" href="https://map.baidu.com" target="_blank" />
    </NestedMenu>
  )
}
```

### NestedMenu.SubMenu

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| icon | String | - | 菜单图标 [`<Icon />`](#/framework/icon) 的 `icon` 属性，如果为 string 类型，默认采用 `InnerIcon` |
| iconPrefix | String | `aficon` | 自定义菜单前缀，如 `amosicon` |
| text | ReactNode | - | 菜单标题内容 |
| tagName | `String or ReactElement` | `a` | 设置子节点标签名，默认 `<a />` 标签 |
| active | Boolean | `false` | 激活选中状态 |
| disabled | Boolean | `false` | 禁用状态 |
| hideAddonAfter | Boolean | `false` | 隐藏含有子菜单时右侧的 icon 图标 |
| collapse | Boolean | `false` | 默认子菜单是 `Trigger` 的弹出层，通过设置 `collapse={true}` 变为折叠菜单  |
| overlayProps | Object | - | 对象将传递到 `Trigger` 组件，修改部分参数，相关参数参考 [`Trigger`](#/framework/overlay#Trigger) |
| nativeProps | Object | - | 根节点 html 元素支持的 props |
| disabledAnimate | Boolean | - | 是否禁用子菜单显示时的动画。如果设置为 true，则 Trigger 将采用无动画的方式。仅当菜单非 collapse 模式才需要禁用动画，即 `collapse=true` 时不起效。 |

其它参数可根据 `tagName` 来设置，默认 `<a />` 标签时，可设置 `href="https://wwww.baidu.com"` 或者 `target="_blank"` 等参数，你可以设置 [react-router-dom](https://github.com/ReactTraining/react-router) 路由 `<Link>`，例如：

> submenu 节点，新增 `data-subvisible` 属性，可以通过 `data-subvisible='true'` or `data-subvisible='false'` 来判断是否打开

```js
import { NestedMenu } from 'amos-framework';
// 此处采用 amos-react-router
import { Link } from 'amos-react-router';

const Demo = () => {
  return (
    <NestedMenu style={{ maxWidth: 200 }}>
      <NestedMenu.Item tagName={Link} to="/home" icon="refresh" text="跳转首页" />
      <NestedMenu.Item icon="map" text="百度地图" href="https://map.baidu.com" target="_blank" />
    </NestedMenu>
  )
}
```

### NestedMenu.Divider

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| className | String | - | 自定义样式名 |
| style | Object | - | html 元素内联自定义样式 |
| title | String | - | 标题 |

## 扩展

如果需要自定义设置各级菜单样式，可以通过属性选择器，灵活设置。

```scss
// menu 节点，ul 相当于根节点
ul[data-menu="menu"] {
 ...
}

// 具有子菜单的节点
li[data-menu="subitem"] {
 ...
}

// 菜单分割线
li[data-menu="divider"] {
 ...
}

// 叶子节点菜单
li[data-menu="leafmenu"] {
 ...
}
```