import React, {Component} from 'react';
import {Menu, SubMenu, MenuItem} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 *
 * Just get value by props `onClick`.
 *
 * @cn
 * 基础
 *
 * 使用`onClick`获取菜单的值。
 */
export default class ExampleBase extends Component {
  state = {
    value: ''
  }

  render() {
    return (
      <ExampleBlock
        en={
          <p>You selected <b className="sign">{this.state.value}</b></p>
        }
        cn={
          <p>你选择了<b className="sign">{this.state.value}</b></p>
        }
      >
        <Menu auto onClick={(e, value) => this.setState({value})} style={{width: 200}}>
          <SubMenu title="Group1">
            <MenuItem value="Activities">Activities</MenuItem>
            <MenuItem value="Games">Games</MenuItem>
            <MenuItem value="Characters">Characters</MenuItem>
          </SubMenu>
          <SubMenu title="Group2">
            <MenuItem value="Start">Start</MenuItem>
            <MenuItem value="End">End</MenuItem>
            <MenuItem value="In The Journey">In The Journey</MenuItem>
          </SubMenu>
        </Menu>
      </ExampleBlock>
    );
  }
}

使用onClick获取菜单的值。

import React, {Component} from 'react';
import {Menu, SubMenu, MenuItem} from 'hana-ui';

/**
 * @en
 * Nested
 *
 * A nested menu, `SubMenu` can be nested in a `SubMenu` component.
 *
 * @cn
 * 嵌套
 *
 * 一个嵌套的菜单，`SubMenu`之间可以相互嵌套。
 */
export default class ExampleBase extends Component {
  render() {
    return (
      <div>
        <Menu auto style={{width: 200}} type="linear">
          <SubMenu title="Group1" icon="yukibana-o">
            <MenuItem value="Activities" icon="hana">Activities</MenuItem>
            <MenuItem value="Games">Games</MenuItem>
            <MenuItem value="Characters">Characters</MenuItem>
            <SubMenu title="Nested1" active>
              <MenuItem value="Dreams">Dreams</MenuItem>
              <MenuItem value="Yume">Yume</MenuItem>
            </SubMenu>
            <SubMenu title="Nested2">
              <MenuItem value="Ako">Ako</MenuItem>
              <MenuItem value="Momo">Momo</MenuItem>
            </SubMenu>
          </SubMenu>
          <SubMenu title="Group2">
            <MenuItem value="Mission">Mission</MenuItem>
            <MenuItem value="Quest">Quest</MenuItem>
            <MenuItem value="Random">Random</MenuItem>
          </SubMenu>
        </Menu>
      </div>
    );
  }
}

一个嵌套的菜单，SubMenu之间可以相互嵌套。

import React, {Component} from 'react';
import {Menu, SubMenu, MenuItem} from 'hana-ui';

/**
 * @en
 * Disabled
 *
 * A nested menu with several disabled items.
 *
 * @cn
 * 禁用
 *
 * 一个有着部分被禁用元素的菜单。
 */
export default class ExampleBase extends Component {
  render() {
    return (
      <div>
        <Menu auto style={{width: 200}}>
          <SubMenu title="Group1" active>
            <MenuItem value="Activities">Activities</MenuItem>
            <MenuItem value="Games" disabled>Games</MenuItem>
            <MenuItem value="Characters">Characters</MenuItem>
            <SubMenu title="Nested1">
              <MenuItem value="Dreams">Dreams</MenuItem>
              <MenuItem value="Yume">Yume</MenuItem>
            </SubMenu>
            <SubMenu title="Nested2" disabled>
              <MenuItem value="Ako">Ako</MenuItem>
              <MenuItem value="Momo">Momo</MenuItem>
            </SubMenu>
          </SubMenu>
        </Menu>
      </div>
    );
  }
}

一个有着部分被禁用元素的菜单。

import React, {Component} from 'react';
import {Menu, MenuItem} from 'hana-ui';

/**
 * @en
 * Tab-like
 *
 * Using prop `horizonal` to make a tab-like menu.
 *
 * @cn
 * 标签页
 *
 * 使用属性`horizonal`来创建一个标签页菜单。
 */
export default class ExampleBase extends Component {

  render() {
    return (
      <div>
        <Menu auto horizonal value="Activities">
          <MenuItem value="Activities">Activities</MenuItem>
          <MenuItem value="Games">Games</MenuItem>
          <MenuItem value="Characters">Characters</MenuItem>
        </Menu>

        <div style={{margin: '15px 0'}} />

        <Menu auto horizonal type="linear" value="Activities">
          <MenuItem value="Activities">Activities</MenuItem>
          <MenuItem value="Games">Games</MenuItem>
          <MenuItem value="Characters">Characters</MenuItem>
        </Menu>
      </div>
    );
  }
}

使用属性horizonal来创建一个标签页菜单。