Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
786f5cd7
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
786f5cd7
编写于
9月 06, 2017
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
improve side current menu demo
上级
696b4252
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
12 addition
and
31 deletion
+12
-31
components/menu/demo/sider-current.md
components/menu/demo/sider-current.md
+12
-31
未找到文件。
components/menu/demo/sider-current.md
浏览文件 @
786f5cd7
...
...
@@ -9,56 +9,37 @@ title:
点击菜单,收起其他展开的所有菜单,保持菜单聚焦简洁。
> 该用法要求 antd@2.0+
## en-US
Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
> This demo is for antd@2.0+.
````
jsx
import
{
Menu
,
Icon
}
from
'
antd
'
;
const
SubMenu
=
Menu
.
SubMenu
;
class
Sider
extends
React
.
Component
{
// submenu keys of first level
rootSubmenuKeys
=
[
'
sub1
'
,
'
sub2
'
,
'
sub4
'
];
state
=
{
current
:
'
1
'
,
openKeys
:
[],
}
handleClick
=
(
e
)
=>
{
console
.
log
(
'
Clicked:
'
,
e
);
this
.
setState
({
current
:
e
.
key
});
}
openKeys
:
[
'
sub1
'
],
};
onOpenChange
=
(
openKeys
)
=>
{
const
state
=
this
.
state
;
const
latestOpenKey
=
openKeys
.
find
(
key
=>
!
(
state
.
openKeys
.
indexOf
(
key
)
>
-
1
));
const
latestCloseKey
=
state
.
openKeys
.
find
(
key
=>
!
(
openKeys
.
indexOf
(
key
)
>
-
1
)
);
let
nextOpenKeys
=
[];
if
(
latestOpenKey
)
{
nextOpenKeys
=
this
.
getAncestorKeys
(
latestOpenKey
).
concat
(
latestOpenKey
);
const
latestOpenKey
=
openKeys
.
find
(
key
=>
this
.
state
.
openKeys
.
indexOf
(
key
)
===
-
1
)
;
if
(
this
.
rootSubmenuKeys
.
indexOf
(
latestOpenKey
)
===
-
1
)
{
this
.
setState
({
openKeys
}
);
}
else
{
this
.
setState
({
openKeys
:
latestOpenKey
?
[
latestOpenKey
]
:
[],
}
);
}
if
(
latestCloseKey
)
{
nextOpenKeys
=
this
.
getAncestorKeys
(
latestCloseKey
);
}
this
.
setState
({
openKeys
:
nextOpenKeys
});
}
getAncestorKeys
=
(
key
)
=>
{
const
map
=
{
sub3
:
[
'
sub2
'
],
};
return
map
[
key
]
||
[];
}
render
()
{
return
(
<
Menu
mode
=
"inline"
openKeys
=
{
this
.
state
.
openKeys
}
selectedKeys
=
{
[
this
.
state
.
current
]
}
style
=
{
{
width
:
240
}
}
onOpenChange
=
{
this
.
onOpenChange
}
onClick
=
{
this
.
handleClick
}
style
=
{
{
width
:
240
}
}
>
<
SubMenu
key
=
"sub1"
title
=
{
<
span
><
Icon
type
=
"mail"
/><
span
>
Navigation One
</
span
></
span
>
}
>
<
Menu
.
Item
key
=
"1"
>
Option 1
</
Menu
.
Item
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录