偏右
8 years ago
committed by
GitHub
GitHub
14 changed files with 485 additions and 116 deletions
@ -0,0 +1,22 @@ |
|||
import React from 'react'; |
|||
import { Item } from 'rc-menu'; |
|||
import PropTypes from 'prop-types'; |
|||
import Tooltip from '../tooltip'; |
|||
|
|||
const MenuItem: any = (props, { inlineCollapsed }) => { |
|||
return ( |
|||
<Tooltip |
|||
title={inlineCollapsed && props.level === 1 ? props.children : ''} |
|||
placement="right" |
|||
overlayClassName={`${props.rootPrefixCls}-inline-collapsed-tooltip`} |
|||
> |
|||
<Item {...props} /> |
|||
</Tooltip> |
|||
); |
|||
}; |
|||
|
|||
MenuItem.contextTypes = { |
|||
inlineCollapsed: PropTypes.bool, |
|||
}; |
|||
|
|||
export default MenuItem; |
|||
@ -0,0 +1,75 @@ |
|||
--- |
|||
order: 2 |
|||
title: |
|||
zh-CN: 缩起内嵌菜单 |
|||
en-US: Collapsed inline menu |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
内嵌菜单可以被缩起/展开。 |
|||
|
|||
## en-US |
|||
|
|||
Inline menu could be collapsed. |
|||
|
|||
````jsx |
|||
import { Menu, Icon, Button } from 'antd'; |
|||
const SubMenu = Menu.SubMenu; |
|||
|
|||
class App extends React.Component { |
|||
state = { |
|||
collapsed: false, |
|||
} |
|||
toggleCollapsed = () => { |
|||
this.setState({ |
|||
collapsed: !this.state.collapsed, |
|||
}); |
|||
} |
|||
render() { |
|||
return ( |
|||
<div style={{ width: 240 }}> |
|||
<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}> |
|||
<Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} /> |
|||
</Button> |
|||
<Menu |
|||
defaultSelectedKeys={['1']} |
|||
defaultOpenKeys={['sub1']} |
|||
mode="inline" |
|||
theme="dark" |
|||
inlineCollapsed={this.state.collapsed} |
|||
> |
|||
<Menu.Item key="1"> |
|||
<Icon type="pie-chart" /> |
|||
<span>Option 1</span> |
|||
</Menu.Item> |
|||
<Menu.Item key="2"> |
|||
<Icon type="desktop" /> |
|||
<span>Option 2</span> |
|||
</Menu.Item> |
|||
<Menu.Item key="3"> |
|||
<Icon type="inbox" /> |
|||
<span>Option 3</span> |
|||
</Menu.Item> |
|||
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}> |
|||
<Menu.Item key="5">Option 5</Menu.Item> |
|||
<Menu.Item key="6">Option 6</Menu.Item> |
|||
<Menu.Item key="7">Option 7</Menu.Item> |
|||
<Menu.Item key="8">Option 8</Menu.Item> |
|||
</SubMenu> |
|||
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}> |
|||
<Menu.Item key="9">Option 9</Menu.Item> |
|||
<Menu.Item key="10">Option 10</Menu.Item> |
|||
<SubMenu key="sub3" title="Submenu"> |
|||
<Menu.Item key="11">Option 11</Menu.Item> |
|||
<Menu.Item key="12">Option 12</Menu.Item> |
|||
</SubMenu> |
|||
</SubMenu> |
|||
</Menu> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
ReactDOM.render(<App />, mountNode); |
|||
```` |
|||
@ -1,2 +1,5 @@ |
|||
import '../../style/index.less'; |
|||
import './index.less'; |
|||
|
|||
// style dependencies
|
|||
import '../../tooltip/style'; |
|||
|
|||
Loading…
Reference in new issue