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