diff --git a/components/breadcrumb/demo/slash.md b/components/breadcrumb/demo/slash.md
new file mode 100644
index 0000000000..0221b4b7ab
--- /dev/null
+++ b/components/breadcrumb/demo/slash.md
@@ -0,0 +1,20 @@
+# 分隔符
+
+- order: 3
+
+使用 `slash=">"` 可以自定义分隔符。
+
+---
+
+````jsx
+import { Breadcrumb } from 'antd';
+
+ReactDOM.render(
+
+ 首页
+ 应用中心
+ 应用列表
+ 某应用
+
+, document.getElementById('components-breadcrumb-demo-slash'));
+````
diff --git a/components/breadcrumb/index.jsx b/components/breadcrumb/index.jsx
index 546b39b5e8..23ce805a36 100644
--- a/components/breadcrumb/index.jsx
+++ b/components/breadcrumb/index.jsx
@@ -1,52 +1,79 @@
-import React from 'react';
+import React, { cloneElement } from 'react';
-let prefixCls = 'ant-breadcrumb';
-
-let BreadcrumbItem = React.createClass({
+const BreadcrumbItem = React.createClass({
+ getDefaultProps() {
+ return {
+ prefixCls: 'ant-breadcrumb',
+ slash: '/',
+ };
+ },
propTypes: {
- href: React.PropTypes.string
+ prefixCls: React.PropTypes.string,
+ slash: React.PropTypes.oneOfType([
+ React.PropTypes.string,
+ React.PropTypes.element,
+ ]),
+ href: React.PropTypes.string,
},
render() {
- let link = {this.props.children};
- let slash = /;
+ const { prefixCls, slash, children } = this.props;
+ let link = {children};
if (typeof this.props.href === 'undefined') {
- link = {this.props.children};
+ link = {children};
}
- return {link}{slash};
+ return
+ {link}
+ {slash}
+ ;
}
});
-let Breadcrumb = React.createClass({
+const Breadcrumb = React.createClass({
+ getDefaultProps() {
+ return {
+ prefixCls: 'ant-breadcrumb',
+ slash: '/',
+ };
+ },
propTypes: {
+ prefixCls: React.PropTypes.string,
+ slash: React.PropTypes.oneOfType([
+ React.PropTypes.string,
+ React.PropTypes.element,
+ ]),
router: React.PropTypes.object,
routes: React.PropTypes.array,
params: React.PropTypes.object
},
render() {
let crumbs;
- let ReactRouter = this.props.router;
- let routes = this.props.routes;
- let params = this.props.params;
+ const { slash, prefixCls, router, routes, params, children } = this.props;
+ const ReactRouter = router;
if (routes && routes.length > 0 && ReactRouter) {
let Link = ReactRouter.Link;
crumbs = routes.map(function(route, i) {
if (!route.breadcrumbName) {
return null;
}
- let name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
+ const name = route.breadcrumbName.replace(/\:(.*)/g, function(replacement, key) {
return params[key] || replacement;
});
let link;
- let path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
+ const path = route.path.indexOf('/') === 0 ? route.path : ('/' + route.path);
if (i === routes.length - 1) {
link = {name};
} else {
link = {name};
}
- return {link};
+ return {link};
});
} else {
- crumbs = this.props.children;
+ crumbs = React.Children.map(children, (element, index) => {
+ return cloneElement(element, {
+ slash,
+ key: index,
+ });
+ });
}
return (
diff --git a/components/breadcrumb/index.md b/components/breadcrumb/index.md
index e9956ead30..24f722905d 100644
--- a/components/breadcrumb/index.md
+++ b/components/breadcrumb/index.md
@@ -27,11 +27,12 @@
### Breadcrumb
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-|-----------|------------------------------------------|------------|---------|--------|
-| router | 可传入 react-router 的实例 | Object | | - |
-| routes | router 的路由栈信息 | Array | | - |
-| params | 路由的参数 | Object | | - |
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|-----------|-----------------------------------|-------------------|---------|--------|
+| router | 可传入 react-router 的实例 | Object | | - |
+| routes | router 的路由栈信息 | Array | | - |
+| params | 路由的参数 | Object | | - |
+| slash | 分隔符自定义 | String or Element | | '/' |
### Breadcrumb.Item