树形菜单组件,支持横向和竖向。
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
来创建一个标签页菜单。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | SubMenu 的style |
|
children | node | 子节点 | |
onClick | function | 点击事件 | |
disabled | bool | false | 是否禁用 |
icon | string | 图标 | |
className | string | SubMenu 的class |
未在文档中说明的属性将会被自动加到根元素或form元素上。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
active | bool | 是否被选中 | |
disabled | bool | false | 是否禁用 |
style | object | 菜单元素的style |
|
children | node | 子节点 | |
onClick | function | 被点击时的回调函数 | |
value | any | 菜单元素的value |
|
icon | string | 菜单元素的图标 | |
className | string | 菜单元素的class |
未在文档中说明的属性将会被自动加到根元素或form元素上。