mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 19:42:54 +08:00
add Breadcrumb.Separator
This commit is contained in:
parent
81d8eb8afe
commit
4a8affe0e0
@ -55,7 +55,9 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
|
|||||||
return (
|
return (
|
||||||
<span>
|
<span>
|
||||||
{link}
|
{link}
|
||||||
<span className={`${prefixCls}-separator`}>{separator}</span>
|
{separator && separator !== '' && (
|
||||||
|
<span className={`${prefixCls}-separator`}>{separator}</span>
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
28
components/breadcrumb/BreadcrumbSeparator.tsx
Normal file
28
components/breadcrumb/BreadcrumbSeparator.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import * as PropTypes from 'prop-types';
|
||||||
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||||
|
|
||||||
|
export interface BreadcrumbProps {
|
||||||
|
separator?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class BreadcrumbSeparator extends React.Component<BreadcrumbProps, any> {
|
||||||
|
static defaultProps = {
|
||||||
|
defaultSeparator: '/',
|
||||||
|
};
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
defaultSeparator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||||
|
};
|
||||||
|
|
||||||
|
renderSeparator = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||||
|
const { children, defaultSeparator } = this.props;
|
||||||
|
const prefixCls = getPrefixCls('breadcrumb');
|
||||||
|
|
||||||
|
return <span className={`${prefixCls}-separator`}>{children || defaultSeparator}</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return <ConfigConsumer>{this.renderSeparator}</ConfigConsumer>;
|
||||||
|
}
|
||||||
|
}
|
31
components/breadcrumb/demo/separator-1.md
Normal file
31
components/breadcrumb/demo/separator-1.md
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
order: 6
|
||||||
|
title:
|
||||||
|
zh-CN: 分隔符
|
||||||
|
en-US: Configuring the Separator
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
使用 `Breadcrumb.Separator` 可以自定义分隔符。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
The separator can be customized by setting the separator property: `Breadcrumb.Separator`
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Breadcrumb } from 'antd';
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Breadcrumb separator="">
|
||||||
|
<Breadcrumb.Item>location</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Separator>:</Breadcrumb.Separator>
|
||||||
|
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Separator />
|
||||||
|
<Breadcrumb.Item href="">Application List</Breadcrumb.Item>
|
||||||
|
<Breadcrumb.Separator />
|
||||||
|
<Breadcrumb.Item>An Application</Breadcrumb.Item>
|
||||||
|
</Breadcrumb>,
|
||||||
|
mountNode,
|
||||||
|
);
|
||||||
|
```
|
@ -1,8 +1,10 @@
|
|||||||
import Breadcrumb from './Breadcrumb';
|
import Breadcrumb from './Breadcrumb';
|
||||||
import BreadcrumbItem from './BreadcrumbItem';
|
import BreadcrumbItem from './BreadcrumbItem';
|
||||||
|
import BreadcrumbSeparator from './BreadcrumbSeparator';
|
||||||
|
|
||||||
export { BreadcrumbProps } from './Breadcrumb';
|
export { BreadcrumbProps } from './Breadcrumb';
|
||||||
export { BreadcrumbItemProps } from './BreadcrumbItem';
|
export { BreadcrumbItemProps } from './BreadcrumbItem';
|
||||||
|
|
||||||
Breadcrumb.Item = BreadcrumbItem;
|
Breadcrumb.Item = BreadcrumbItem;
|
||||||
|
Breadcrumb.Separator = BreadcrumbSeparator;
|
||||||
export default Breadcrumb;
|
export default Breadcrumb;
|
||||||
|
Loading…
Reference in New Issue
Block a user