Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
钟摆人-Puppet゜
ant-design-pro
提交
d8b0a9ec
A
ant-design-pro
项目概览
钟摆人-Puppet゜
/
ant-design-pro
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design-pro
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
d8b0a9ec
编写于
12月 28, 2017
作者:
D
ddcat1115
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix breadcrumb prop priority
上级
12d8b407
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
22 addition
and
20 deletion
+22
-20
src/components/PageHeader/index.js
src/components/PageHeader/index.js
+18
-18
src/components/PageHeader/index.md
src/components/PageHeader/index.md
+4
-2
未找到文件。
src/components/PageHeader/index.js
浏览文件 @
d8b0a9ec
...
...
@@ -64,7 +64,23 @@ export default class PageHeader extends PureComponent {
}
=
this
.
props
;
const
clsString
=
classNames
(
styles
.
pageHeader
,
className
);
let
breadcrumb
;
if
(
routes
&&
params
)
{
if
(
breadcrumbList
&&
breadcrumbList
.
length
)
{
breadcrumb
=
(
<
Breadcrumb
className
=
{
styles
.
breadcrumb
}
>
{
breadcrumbList
.
map
(
item
=>
(
<
Breadcrumb
.
Item
key
=
{
item
.
title
}
>
{
item
.
href
?
(
createElement
(
linkElement
,
{
[
linkElement
===
'
a
'
?
'
href
'
:
'
to
'
]:
item
.
href
,
},
item
.
title
)
)
:
item
.
title
}
<
/Breadcrumb.Item>
)
)
}
<
/Breadcrumb
>
);
}
else
if
(
routes
&&
params
)
{
breadcrumb
=
(
<
Breadcrumb
className
=
{
styles
.
breadcrumb
}
...
...
@@ -73,7 +89,7 @@ export default class PageHeader extends PureComponent {
itemRender
=
{
this
.
itemRender
}
/
>
);
}
else
if
(
location
&&
location
.
pathname
&&
(
!
breadcrumbList
)
)
{
}
else
if
(
location
&&
location
.
pathname
)
{
const
pathSnippets
=
location
.
pathname
.
split
(
'
/
'
).
filter
(
i
=>
i
);
const
extraBreadcrumbItems
=
pathSnippets
.
map
((
_
,
index
)
=>
{
const
url
=
`/
${
pathSnippets
.
slice
(
0
,
index
+
1
).
join
(
'
/
'
)}
`
;
...
...
@@ -101,22 +117,6 @@ export default class PageHeader extends PureComponent {
{
breadcrumbItems
}
<
/Breadcrumb
>
);
}
else
if
(
breadcrumbList
&&
breadcrumbList
.
length
)
{
breadcrumb
=
(
<
Breadcrumb
className
=
{
styles
.
breadcrumb
}
>
{
breadcrumbList
.
map
(
item
=>
(
<
Breadcrumb
.
Item
key
=
{
item
.
title
}
>
{
item
.
href
?
(
createElement
(
linkElement
,
{
[
linkElement
===
'
a
'
?
'
href
'
:
'
to
'
]:
item
.
href
,
},
item
.
title
)
)
:
item
.
title
}
<
/Breadcrumb.Item>
)
)
}
<
/Breadcrumb
>
);
}
else
{
breadcrumb
=
null
;
}
...
...
src/components/PageHeader/index.md
浏览文件 @
d8b0a9ec
...
...
@@ -18,12 +18,14 @@ order: 11
| action | 操作区,位于 title 行的行尾 | ReactNode | - |
| content | 内容区 | ReactNode | - |
| extraContent | 额外内容区,位于content的右侧 | ReactNode | - |
| breadcrumbList | 面包屑数据,配置了此属性时
`routes`
`params`
`location`
`breadcrumbNameMap`
无效 | array
<
{
title:
ReactNode
,
href
?
:
string
}
>
| - |
| routes | 面包屑相关属性,router 的路由栈信息 | object[] | - |
| params | 面包屑相关属性,路由的参数 | object | - |
| breadcrumbList | 面包屑数据,配置了
`routes`
`params`
时此属性无效 | array
<
{
title:
ReactNode
,
href
?
:
string
}
>
| - |
| location | 面包屑相关属性,当前的路由信息 | object | - |
| breadcrumbNameMap | 面包屑相关属性,路由的地址-名称映射表 | object | - |
| tabList | tab 标题列表 | array
<
{
key:
string
,
tab:
ReactNode
}
>
| - |
| tabActiveKey | 当前高亮的 tab 项 | string | - |
| onTabChange | 切换面板的回调 | (key) => void | - |
| linkElement | 定义链接的元素,默认为
`a`
,可传入 react-router 的 Link | string
\|
ReactElement | - |
> 面包屑的配置方式有
两种,一是结合 `react-router`,通过配置 `routes` 及 `params` 实现,类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router);二是直接配置 `breadcrumbList`。 你也可以将 `routes` 及 `params` 放到 context 中,`PageHeader`
组件会自动获取。
> 面包屑的配置方式有
三种,一是直接配置 `breadcrumbList`,二是结合 `react-router@2` `react-router@3`,配置 `routes` 及 `params` 实现,类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router),三是结合 `react-router@4`,配置 `location` `breadcrumbNameMap`,优先级依次递减,脚手架中使用最后一种。 对于后两种用法,你也可以将 `routes` `params` 及 `location` `breadcrumbNameMap` 放到 context 中,
组件会自动获取。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录