简体中文

菜单

树形菜单组件,支持横向和竖向。

基础
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获取菜单的值。

你选择了

Group1
Group2
嵌套
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之间可以相互嵌套。

Group1
Group2
禁用
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>
    );
  }
}

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

Group1
Activities
Games
Characters
Nested1
Nested2
标签页
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来创建一个标签页菜单。

Activities
Games
Characters
Activities
Games
Characters

属性说明

属性名 类型 默认值 说明
value any 菜单的当前值
style object 菜单的style
children node 子节点
onClick function 点击时的回调函数
auto bool false 是否为自控模式
disabled bool false 是否禁用
horizonal bool false 菜单是否水平
type enum:
 'default'
 'linear'
'default' 菜单的类别(默认或线性)
className string 菜单的class

未在文档中说明的属性将会被自动加到根元素或form元素上。

属性说明

属性名 类型 默认值 说明
title string SubMenu的标题
active bool 是否被选中
style object SubMenustyle
children node 子节点
onClick function 点击事件
disabled bool false 是否禁用
icon string 图标
className string SubMenuclass

未在文档中说明的属性将会被自动加到根元素或form元素上。

属性说明

属性名 类型 默认值 说明
active bool 是否被选中
disabled bool false 是否禁用
style object 菜单元素的style
children node 子节点
onClick function 被点击时的回调函数
value any 菜单元素的value
icon string 菜单元素的图标
className string 菜单元素的class

未在文档中说明的属性将会被自动加到根元素或form元素上。