0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
-exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
`;
+exports[`renders ./antdv-demo/badge/demo/colors.md correctly 1`] = `
+
+
Presets:
+
+
pink
+
red
+
yellow
+
orange
+
cyan
+
green
+
blue
+
purple
+
geekblue
+
magenta
+
volcano
+
gold
+
lime
+
+
Custom:
+
#f50
#2db7f5
#87d068
#108ee9
+
+`;
-exports[`renders ./components/badge/demo/link.md correctly 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+exports[`renders ./antdv-demo/badge/demo/dot.md correctly 1`] = `
`;
-exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
99+`;
+exports[`renders ./antdv-demo/badge/demo/link.md correctly 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
-exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
99+ 10+ 999+`;
+exports[`renders ./antdv-demo/badge/demo/no-wrapper.md correctly 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
99+`;
-exports[`renders ./components/badge/demo/status.md correctly 1`] = `
Success
Error
Default
Processing
warning
`;
+exports[`renders ./antdv-demo/badge/demo/overflow.md correctly 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
99+ 10+ 999+`;
-exports[`renders ./components/badge/demo/title.md correctly 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+exports[`renders ./antdv-demo/badge/demo/status.md correctly 1`] = `
Success
Error
Default
Processing
warning
`;
+
+exports[`renders ./antdv-demo/badge/demo/title.md correctly 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap
index 63783d156..f2a04eda5 100644
--- a/components/badge/__tests__/__snapshots__/index.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/index.test.js.snap
@@ -4,16 +4,18 @@ exports[`Badge badge should support float number 1`] = `"3.5"`;
exports[`Badge badge should support float number 2`] = `
3.5`;
-exports[`Badge should be compatible with borderColor style 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+exports[`Badge render correct with negative number 1`] = `
-0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
-0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
-exports[`Badge should render when count is changed 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+exports[`Badge should be compatible with borderColor style 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
-exports[`Badge should render when count is changed 2`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+exports[`Badge should render when count is changed 1`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
-exports[`Badge should render when count is changed 3`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+exports[`Badge should render when count is changed 2`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
-exports[`Badge should render when count is changed 4`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+exports[`Badge should render when count is changed 3`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
-exports[`Badge should render when count is changed 5`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+exports[`Badge should render when count is changed 4`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
-exports[`Badge should support offset when count is a ReactNode 1`] = `
`;
+exports[`Badge should render when count is changed 5`] = `
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
`;
+
+exports[`Badge should support offset when count is a VueNode 1`] = `
head`;
diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js
index 8768a4e0f..ac1361d47 100644
--- a/components/badge/__tests__/index.test.js
+++ b/components/badge/__tests__/index.test.js
@@ -109,16 +109,32 @@ describe('Badge', () => {
});
// https://github.com/ant-design/ant-design/issues/13694
- it('should support offset when count is a ReactNode', () => {
+ it('should support offset when count is a VueNode', () => {
const wrapper = mount({
render() {
return (
} offset={[10, 20]}>
-
+
+ head
+
);
},
});
expect(wrapper.html()).toMatchSnapshot();
});
+ // https://github.com/ant-design/ant-design/issues/15799
+ it('render correct with negative number', () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+
+
+
+ );
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
});
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
deleted file mode 100644
index 4cba8e4dc..000000000
--- a/components/badge/demo/basic.md
+++ /dev/null
@@ -1,26 +0,0 @@
-
-#### 基本
-简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
-
-
-
-#### basic
-Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
-
-
-```tpl
-
-
-
-```
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
deleted file mode 100644
index 3160f5760..000000000
--- a/components/badge/demo/change.md
+++ /dev/null
@@ -1,57 +0,0 @@
-
-#### 动态
- 展示动态变化的效果。
-
-
-
-#### Dynamic
- The count will be animated as it changes.
-
-
-```tpl
-
-
-
-
-```
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
deleted file mode 100644
index c17164432..000000000
--- a/components/badge/demo/dot.md
+++ /dev/null
@@ -1,34 +0,0 @@
-
-#### 讨嫌的小红点
-没有具体的数字。
-
-
-
-#### Red badge
-This will simply display a red badge, without a specific count.
-If count equals 0, it won't display the dot.
-
-
-```tpl
-
-
-
-
-```
diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue
deleted file mode 100644
index 52d0151d1..000000000
--- a/components/badge/demo/index.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-
-
-
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
deleted file mode 100644
index 482ea70af..000000000
--- a/components/badge/demo/link.md
+++ /dev/null
@@ -1,19 +0,0 @@
-
-#### 可点击
- 用 a 标签进行包裹即可。
-
-
-
-#### Clickable
- The badge can be wrapped with `a` tag to make it linkable.
-
-
-```tpl
-
-
-
-
-
-
-
-```
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
deleted file mode 100644
index 76e5d4d85..000000000
--- a/components/badge/demo/no-wrapper.md
+++ /dev/null
@@ -1,23 +0,0 @@
-
-#### 独立使用
-不包裹任何元素即是独立使用，可自定样式展现。
-在右上角的 badge 则限定为红色。
-
-
-
-#### Standalone
-Used in standalone when children is empty.
-
-
-```tpl
-
-
-
-```
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
deleted file mode 100644
index 751f3c270..000000000
--- a/components/badge/demo/overflow.md
+++ /dev/null
@@ -1,28 +0,0 @@
-
-#### 封顶数字
-超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
-
-
-
-#### Overflow Count
-`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
-
-
-```tpl
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
deleted file mode 100644
index c74a6908e..000000000
--- a/components/badge/demo/status.md
+++ /dev/null
@@ -1,31 +0,0 @@
-
-#### 状态点
- 用于表示状态的小圆点。
-
-
-
-#### Status
- Standalone badge with status.
-
-
-```tpl
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md
deleted file mode 100644
index 03059af10..000000000
--- a/components/badge/demo/title.md
+++ /dev/null
@@ -1,31 +0,0 @@
-
-#### 自定义标题
- 设置鼠标放在状态点上时显示的文字
-
-
-
-#### Title
- The badge will display `title` when hovered over, instead of `count`.
-
-
-```tpl
-
-
-
-
-```
diff --git a/components/badge/index.en_US.md b/components/badge/index.en_US.md
index 2494012cd..72dc6f3c8 100644
--- a/components/badge/index.en_US.md
+++ b/components/badge/index.en_US.md
@@ -10,14 +10,15 @@
```
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| count | Number to show in badge | number\|string \| slot | |
-| dot | Whether to display a red dot instead of `count` | boolean | `false` |
-| offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - |
-| overflowCount | Max count to show | number | 99 |
-| showZero | Whether to show badge when `count` is zero | boolean | `false` |
-| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
-| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |
-| numberStyle | sets the display style of the status `dot` | object | '' |
-| title | Text to show when hovering over the badge | string | `count` |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| color | Customize Badge dot color | string | - | 1.5.0 |
+| count | Number to show in badge | number\|string \| slot | | |
+| dot | Whether to display a red dot instead of `count` | boolean | `false` | |
+| offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - | |
+| overflowCount | Max count to show | number | 99 | |
+| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
+| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
+| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | |
+| numberStyle | sets the display style of the status `dot` | object | '' | |
+| title | Text to show when hovering over the badge | string | `count` | |
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
deleted file mode 100644
index 10d20d80c..000000000
--- a/components/badge/index.zh-CN.md
+++ /dev/null
@@ -1,23 +0,0 @@
-## API
-
-```html
-
-
-
-```
-
-```html
-
-```
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot | |
-| dot | 不展示数字，只有一个小红点 | boolean | false |
-| offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - |
-| overflowCount | 展示封顶的数字值 | number | 99 |
-| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
-| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
-| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |
-| numberStyle | 设置状态点的样式 | object | '' |
-| title | 设置鼠标放在状态点上时显示的文字 | string | `count` |
diff --git a/components/badge/style/index.less b/components/badge/style/index.less
index 4f43ec1ba..4a1e2e0c9 100644
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@badge-prefix-cls: ~'@{ant-prefix}-badge';
@@ -6,6 +6,7 @@
.@{badge-prefix-cls} {
.reset-component;
+
position: relative;
display: inline-block;
color: unset;
@@ -94,6 +95,18 @@
&-warning {
background-color: @warning-color;
}
+
+ // mixin to iterate over colors and create CSS class for each one
+ .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
+ .make-color-classes(@i - 1);
+ @color: extract(@preset-colors, @i);
+ @darkColor: '@{color}-6';
+ &-@{color} {
+ background: @@darkColor;
+ }
+ }
+ .make-color-classes();
+
&-text {
margin-left: 8px;
color: @text-color;
@@ -113,7 +126,9 @@
}
&-not-a-wrapper {
- vertical-align: middle;
+ &:not(.@{badge-prefix-cls}-status) {
+ vertical-align: middle;
+ }
.@{ant-prefix}-scroll-number {
position: relative;
@@ -144,11 +159,15 @@
display: inline-block;
height: @badge-height;
transition: all 0.3s @ease-in-out;
- > p {
+ > p.@{number-prefix-cls}-only-unit {
height: @badge-height;
margin: 0;
}
}
+
+ &-symbol {
+ vertical-align: top;
+ }
}
@keyframes antZoomBadgeIn {
diff --git a/components/breadcrumb/Breadcrumb.jsx b/components/breadcrumb/Breadcrumb.jsx
index 1d970e010..6b17d93f3 100644
--- a/components/breadcrumb/Breadcrumb.jsx
+++ b/components/breadcrumb/Breadcrumb.jsx
@@ -4,10 +4,12 @@ import { filterEmpty, getComponentFromProp, getSlotOptions } from '../_util/prop
import warning from '../_util/warning';
import { ConfigConsumerProps } from '../config-provider';
import BreadcrumbItem from './BreadcrumbItem';
+import Menu from '../menu';
const Route = PropTypes.shape({
path: PropTypes.string,
breadcrumbName: PropTypes.string,
+ children: PropTypes.array,
}).loose;
const BreadcrumbProps = {
@@ -42,6 +44,62 @@ export default {
const name = getBreadcrumbName(route, params);
return isLastItem ?
{name} :
{name};
},
+ getPath(path, params) {
+ path = (path || '').replace(/^\//, '');
+ Object.keys(params).forEach(key => {
+ path = path.replace(`:${key}`, params[key]);
+ });
+ return path;
+ },
+
+ addChildPath(paths, childPath, params) {
+ const originalPaths = [...paths];
+ const path = this.getPath(childPath, params);
+ if (path) {
+ originalPaths.push(path);
+ }
+ return originalPaths;
+ },
+
+ genForRoutes({ routes = [], params = {}, separator, itemRender = defaultItemRender }) {
+ const paths = [];
+ return routes.map(route => {
+ const path = this.getPath(route.path, params);
+
+ if (path) {
+ paths.push(path);
+ }
+ // generated overlay by route.children
+ let overlay = null;
+ if (route.children && route.children.length) {
+ overlay = (
+
+ );
+ }
+
+ return (
+
+ {itemRender({ route, params, routes, paths, h: this.$createElement })}
+
+ );
+ });
+ },
},
render() {
let crumbs;
@@ -51,29 +109,22 @@ export default {
const children = filterEmpty($slots.default);
const separator = getComponentFromProp(this, 'separator');
+ const itemRender = this.itemRender || $scopedSlots.itemRender || this.defaultItemRender;
if (routes && routes.length > 0) {
- const paths = [];
- const itemRender = this.itemRender || $scopedSlots.itemRender || this.defaultItemRender;
- crumbs = routes.map(route => {
- route.path = route.path || '';
- let path = route.path.replace(/^\//, '');
- Object.keys(params).forEach(key => {
- path = path.replace(`:${key}`, params[key]);
- });
- if (path) {
- paths.push(path);
- }
- return (
-
- {itemRender({ route, params, routes, paths })}
-
- );
+ // generated by route
+ crumbs = this.genForRoutes({
+ routes,
+ params,
+ separator,
+ itemRender,
});
} else if (children.length) {
crumbs = children.map((element, index) => {
warning(
- getSlotOptions(element).__ANT_BREADCRUMB_ITEM,
- "Breadcrumb only accepts Breadcrumb.Item as it's children",
+ getSlotOptions(element).__ANT_BREADCRUMB_ITEM ||
+ getSlotOptions(element).__ANT_BREADCRUMB_SEPARATOR,
+ 'Breadcrumb',
+ "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
);
return cloneElement(element, {
props: { separator },
diff --git a/components/breadcrumb/BreadcrumbItem.jsx b/components/breadcrumb/BreadcrumbItem.jsx
index f90cb023e..bfebfb63c 100644
--- a/components/breadcrumb/BreadcrumbItem.jsx
+++ b/components/breadcrumb/BreadcrumbItem.jsx
@@ -1,6 +1,8 @@
import PropTypes from '../_util/vue-types';
import { hasProp, getComponentFromProp } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
+import DropDown from '../dropdown/dropdown';
+import Icon from '../icon';
export default {
name: 'ABreadcrumbItem',
@@ -8,16 +10,37 @@ export default {
props: {
prefixCls: PropTypes.string,
href: PropTypes.string,
- separator: PropTypes.any,
+ separator: PropTypes.any.def('/'),
+ overlay: PropTypes.any,
},
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
+ methods: {
+ /**
+ * if overlay is have
+ * Wrap a DropDown
+ */
+ renderBreadcrumbNode(breadcrumbItem, prefixCls) {
+ const overlay = getComponentFromProp(this, 'overlay');
+ if (overlay) {
+ return (
+
+
+ {breadcrumbItem}
+
+
+
+ );
+ }
+ return breadcrumbItem;
+ },
+ },
render() {
const { prefixCls: customizePrefixCls, $slots } = this;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
-
+ const separator = getComponentFromProp(this, 'separator');
const children = $slots.default;
let link;
if (hasProp(this, 'href')) {
@@ -25,13 +48,15 @@ export default {
} else {
link =
{children};
}
+ // wrap to dropDown
+ link = this.renderBreadcrumbNode(link, prefixCls);
if (children) {
return (
{link}
-
- {getComponentFromProp(this, 'separator') || '/'}
-
+ {separator && separator !== '' && (
+ {separator}
+ )}
);
}
diff --git a/components/breadcrumb/BreadcrumbSeparator.jsx b/components/breadcrumb/BreadcrumbSeparator.jsx
new file mode 100644
index 000000000..09f0b2c6f
--- /dev/null
+++ b/components/breadcrumb/BreadcrumbSeparator.jsx
@@ -0,0 +1,21 @@
+import { ConfigConsumerProps } from '../config-provider';
+import PropTypes from '../_util/vue-types';
+
+export default {
+ name: 'ABreadcrumbSeparator',
+ __ANT_BREADCRUMB_SEPARATOR: true,
+ props: {
+ prefixCls: PropTypes.string,
+ },
+ inject: {
+ configProvider: { default: () => ConfigConsumerProps },
+ },
+ render() {
+ const { prefixCls: customizePrefixCls, $slots } = this;
+ const getPrefixCls = this.configProvider.getPrefixCls;
+ const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
+
+ const children = $slots.default;
+ return
{children || '/'};
+ },
+};
diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.js b/components/breadcrumb/__tests__/Breadcrumb.test.js
index e247b57aa..fc6c07515 100644
--- a/components/breadcrumb/__tests__/Breadcrumb.test.js
+++ b/components/breadcrumb/__tests__/Breadcrumb.test.js
@@ -13,7 +13,7 @@ describe('Breadcrumb', () => {
});
// // https://github.com/airbnb/enzyme/issues/875
- it('warns on non-Breadcrumb.Item children', () => {
+ it('warns on non-Breadcrumb.Item and non-Breadcrumb.Separator children', () => {
mount({
render() {
return (
@@ -25,7 +25,7 @@ describe('Breadcrumb', () => {
});
expect(errorSpy.mock.calls).toHaveLength(1);
expect(errorSpy.mock.calls[0][0]).toMatch(
- "Breadcrumb only accepts Breadcrumb.Item as it's children",
+ "Warning: [antdv: Breadcrumb] Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
);
});
@@ -61,4 +61,50 @@ describe('Breadcrumb', () => {
});
expect(wrapper.html()).toMatchSnapshot();
});
+ it('should render a menu', () => {
+ const routes = [
+ {
+ path: 'index',
+ breadcrumbName: 'home',
+ },
+ {
+ path: 'first',
+ breadcrumbName: 'first',
+ children: [
+ {
+ path: '/general',
+ breadcrumbName: 'General',
+ },
+ {
+ path: '/layout',
+ breadcrumbName: 'Layout',
+ },
+ {
+ path: '/navigation',
+ breadcrumbName: 'Navigation',
+ },
+ ],
+ },
+ {
+ path: 'second',
+ breadcrumbName: 'second',
+ },
+ ];
+ const wrapper = mount(Breadcrumb, { propsData: { routes } });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('should support custom attribute', () => {
+ const wrapper = mount({
+ render() {
+ return (
+
+ xxx
+ yyy
+
+ );
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
});
diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
index faa3fc8b8..bf76d0d88 100644
--- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
@@ -6,3 +6,11 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
xxx/yyy/
`;
+
+exports[`Breadcrumb should render a menu 1`] = `
+
+`;
+
+exports[`Breadcrumb should support custom attribute 1`] = `
xxx/yyy/
`;
diff --git a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
index 60427dd32..087db5269 100644
--- a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
@@ -1,17 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
`;
+exports[`renders ./antdv-demo/breadcrumb/demo/basic.md correctly 1`] = `
`;
-exports[`renders ./components/breadcrumb/demo/router.md correctly 1`] = ``;
+exports[`renders ./antdv-demo/breadcrumb/demo/overlay.md correctly 1`] = `
+
+`;
-exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
+exports[`renders ./antdv-demo/breadcrumb/demo/separator.md correctly 1`] = `
`;
-exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
+exports[`renders ./antdv-demo/breadcrumb/demo/separator-indepent.md correctly 1`] = `
`;
+
+exports[`renders ./antdv-demo/breadcrumb/demo/withIcon.md correctly 1`] = `
diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md
deleted file mode 100644
index 03b56dc27..000000000
--- a/components/breadcrumb/demo/basic.md
+++ /dev/null
@@ -1,20 +0,0 @@
-
- #### 基本
- 最简单的用法
-
-
-
- #### Basic usage
- The simplest use
-
-
-```tpl
-
-
- Home
- Application Center
- Application List
- An Application
-
-
-```
diff --git a/components/breadcrumb/demo/index.vue b/components/breadcrumb/demo/index.vue
deleted file mode 100644
index 1ec3cf19d..000000000
--- a/components/breadcrumb/demo/index.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-
diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md
deleted file mode 100644
index 82a1ebe1b..000000000
--- a/components/breadcrumb/demo/router.md
+++ /dev/null
@@ -1,52 +0,0 @@
-
- #### vue-router
-和 `vue-router` 进行结合使用。
-
-
-
- #### Vue Router Integration
-Used together with `vue-router`
-
-
-```tpl
-
-
-
-
-
- {{route.breadcrumbName}}
-
-
- {{route.breadcrumbName}}
-
-
-
-
- {{$route.path}}
-
-
-```
diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md
deleted file mode 100644
index 1d7917857..000000000
--- a/components/breadcrumb/demo/separator.md
+++ /dev/null
@@ -1,30 +0,0 @@
-
- #### 分隔符
- 使用` separator=">" `可以自定义分隔符，或者使用slot="separator"自定义更复杂的分隔符
-
-
-
- #### Configuring the Separator
- The separator can be customized by setting the separator preperty: separator=">" or use
- slot="separator"
-
-
-```tpl
-
-
-
- Home
- Application Center
- Application List
- An Application
-
-
- >
- Home
- Application Center
- Application List
- An Application
-
-
-```
diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md
deleted file mode 100644
index fee1aea73..000000000
--- a/components/breadcrumb/demo/withIcon.md
+++ /dev/null
@@ -1,26 +0,0 @@
-
- #### 带有图标的
- 图标放在文字前面
-
-
-
- #### With an Icon
- The icon should be placed in front of the text
-
-
-```tpl
-
-
-
-
-
-
-
- Application List
-
-
- Application
-
-
-
-```
diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md
deleted file mode 100644
index c2ec6dd1c..000000000
--- a/components/breadcrumb/index.en-US.md
+++ /dev/null
@@ -1,49 +0,0 @@
-## API
-
-| Property | Description | Type | Optional | Default |
-| --- | --- | --- | --- | --- |
-| itemRender | Custom item renderer, slot="itemRender" and slot-scope="{route, params, routes, paths}" | ({route, params, routes, paths}) => vNode | | - |
-| params | Routing parameters | object | | - |
-| routes | The routing stack information of router | object\[] | | - |
-| separator | Custom separator | string\|slot | | `/` |
-
-### Use with browserHistory
-
-The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
-
-```html
-
-
-
-
- {{route.breadcrumbName}}
-
-
- {{route.breadcrumbName}}
-
-
-
-
-
-```
diff --git a/components/breadcrumb/index.js b/components/breadcrumb/index.js
index 4387b6959..f740b2def 100644
--- a/components/breadcrumb/index.js
+++ b/components/breadcrumb/index.js
@@ -1,14 +1,17 @@
import Breadcrumb from './Breadcrumb';
import BreadcrumbItem from './BreadcrumbItem';
+import BreadcrumbSeparator from './BreadcrumbSeparator';
import Base from '../base';
Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Separator = BreadcrumbSeparator;
/* istanbul ignore next */
Breadcrumb.install = function(Vue) {
Vue.use(Base);
Vue.component(Breadcrumb.name, Breadcrumb);
Vue.component(BreadcrumbItem.name, BreadcrumbItem);
+ Vue.component(BreadcrumbSeparator.name, BreadcrumbSeparator);
};
export default Breadcrumb;
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
deleted file mode 100644
index 9b0c49d92..000000000
--- a/components/breadcrumb/index.zh-CN.md
+++ /dev/null
@@ -1,49 +0,0 @@
-## API
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- |
-| itemRender | 自定义链接函数，和 vue-router 配置使用， 也可使用 slot="itemRender" 和 slot-scope="props" | ({route, params, routes, paths}) => vNode | | - |
-| params | 路由的参数 | object | | - |
-| routes | router 的路由栈信息 | object\[] | | - |
-| separator | 分隔符自定义 | string\|slot | | '/' |
-
-### 和 browserHistory 配合
-
-和 vue-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
-
-```html
-
-
-
-
- {{route.breadcrumbName}}
-
-
- {{route.breadcrumbName}}
-
-
-
-
-
-```
diff --git a/components/breadcrumb/style/index.js b/components/breadcrumb/style/index.js
index 3a3ab0de5..165d103fd 100644
--- a/components/breadcrumb/style/index.js
+++ b/components/breadcrumb/style/index.js
@@ -1,2 +1,5 @@
import '../../style/index.less';
import './index.less';
+
+import '../../menu/style';
+import '../../dropdown/style';
diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
index 30caa8344..2edaf549c 100644
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@@ -1,10 +1,11 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
.@{breadcrumb-prefix-cls} {
.reset-component;
+
color: @breadcrumb-base-color;
font-size: @breadcrumb-font-size;
@@ -22,6 +23,9 @@
& > span:last-child {
color: @breadcrumb-last-item-color;
+ a {
+ color: @breadcrumb-last-item-color;
+ }
}
& > span:last-child &-separator {
@@ -38,4 +42,10 @@
margin-left: 4px;
}
}
+
+ &-overlay-link {
+ > .@{iconfont-css-prefix} {
+ margin-left: 4px;
+ }
+ }
}
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
index ee4445e74..c925212da 100644
--- a/components/button/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -1,10 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders ./components/button/demo/basic.md correctly 1`] = `
`;
+exports[`renders ./antdv-demo/button/demo/basic.md correctly 1`] = `
`;
-exports[`renders ./components/button/demo/block.md correctly 1`] = `
`;
+exports[`renders ./antdv-demo/button/demo/block.md correctly 1`] = `
`;
-exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
+exports[`renders ./antdv-demo/button/demo/button-group.md correctly 1`] = `
`;
-exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
+exports[`renders ./antdv-demo/button/demo/disabled.md correctly 1`] = `
`;
-exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
`;
+exports[`renders ./antdv-demo/button/demo/ghost.md correctly 1`] = `
`;
-exports[`renders ./components/button/demo/icon.md correctly 1`] = `
+exports[`renders ./antdv-demo/button/demo/icon.md correctly 1`] = `
`;
-exports[`renders ./components/button/demo/loading.md correctly 1`] = `
+exports[`renders ./antdv-demo/button/demo/loading.md correctly 1`] = `
`;
-exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
+exports[`renders ./antdv-demo/button/demo/multiple.md correctly 1`] = `
`;
-exports[`renders ./components/button/demo/size.md correctly 1`] = `
+exports[`renders ./antdv-demo/button/demo/size.md correctly 1`] = `
-
@@ -1346,7 +1346,7 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `