页面侧边栏,可放置于左/右侧
import React, {Component} from 'react';
import {Button, Sidebar, Menu, SubMenu, MenuItem} from 'hana-ui';
/**
* @en
* Base example
*
* Control sidebar show or hide
*
* @cn
* 基础用例
*
* 控制侧边栏显示状态
*/
export default class ExampleBase extends Component {
state = {
open: false,
openRight: false
}
toggleSidebar(key) {
this.setState({[key]: !this.state[key]});
}
render() {
return (
<div>
<Button style={{marginRight: 10}} onClick={() => this.toggleSidebar('open')}>
open Sidebar
</Button>
<Button onClick={() => this.toggleSidebar('openRight')}>
open Sidebar on the right
</Button>
<Sidebar open={this.state.open} style={{width: 200}}>
<Menu auto 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>
</Sidebar>
<Sidebar open={this.state.openRight} position={'right'} style={{width: 200}}>
<Menu auto type="linear">
<SubMenu title="Group2">
<MenuItem value="Mission">Mission</MenuItem>
<MenuItem value="Quest">Quest</MenuItem>
<MenuItem value="Random">Random</MenuItem>
</SubMenu>
</Menu>
</Sidebar>
</div>
);
}
}
控制侧边栏显示状态
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
style | object | 自定义组件样式 | |
className | string | 自定义组件class | |
position | enum: 'left' 'right' |
'left' | 设置组件展示位置,可选配置:'left','right'. 默认为'left' |
open | bool | true | 控制显示、隐藏组件 |
children | node | 设置组件的子组件 |
未在文档中说明的属性将会被自动加到根元素或form元素上。