Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
f786f607
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
f786f607
编写于
2月 03, 2017
作者:
偏
偏右
提交者:
GitHub
2月 03, 2017
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fix misplace Badge when browser zoom above 100% (#4749)
close #4747 #4290 #4176
上级
24b1e191
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
48 addition
and
49 deletion
+48
-49
CHANGELOG.en-US.md
CHANGELOG.en-US.md
+1
-0
CHANGELOG.zh-CN.md
CHANGELOG.zh-CN.md
+1
-0
components/badge/ScrollNumber.tsx
components/badge/ScrollNumber.tsx
+8
-6
components/badge/__tests__/__snapshots__/demo.test.js.snap
components/badge/__tests__/__snapshots__/demo.test.js.snap
+20
-33
components/badge/demo/no-wrapper.md
components/badge/demo/no-wrapper.md
+1
-1
components/badge/style/index.less
components/badge/style/index.less
+12
-9
components/style/themes/default.less
components/style/themes/default.less
+5
-0
未找到文件。
CHANGELOG.en-US.md
浏览文件 @
f786f607
...
...
@@ -40,6 +40,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
*
Added
`treeDefaultExpandedKeys`
property.
[
#43@rc-tree-select
](
https://github.com/react-component/tree-select/pull/43
)
*
Fixed an overflow-wrap issue.
[
#42@rc-tree-select
](
https://github.com/react-component/tree-select/pull/42
)
*
Added less variables:
`@border-style-base`
`@border-width-base`
`@btn-danger-color`
`@btn-danger-bg`
and etc.
*
Fixed Badge misplace issue when browser zoom above 100%.
[
#4747
](
https://github.com/ant-design/ant-design/issues/4747
)
[
#4290
]
(https://github.com/ant-design/ant-design/issues/4290)
## 2.6.4
...
...
CHANGELOG.zh-CN.md
浏览文件 @
f786f607
...
...
@@ -41,6 +41,7 @@ timeline: true
*
新增
`treeDefaultExpandedKeys`
属性。
[
#43@rc-tree-select
](
https://github.com/react-component/tree-select/pull/43
)
*
修复了文字溢出换行问题。
[
#42@rc-tree-select
](
https://github.com/react-component/tree-select/pull/42
)
*
新增 less 变量:
`@border-style-base`
`@border-width-base`
`@btn-danger-color`
`@btn-danger-bg`
等。
*
修复了 Badge 在页面放大时错位的问题。
[
#4747
](
https://github.com/ant-design/ant-design/issues/4747
)
[
#4290
]
(https://github.com/ant-design/ant-design/issues/4290)
## 2.6.4
...
...
components/badge/ScrollNumber.tsx
浏览文件 @
f786f607
...
...
@@ -19,7 +19,6 @@ export interface ScrollNumberProps {
count
?:
string
|
number
;
component
?:
string
;
onAnimated
?:
Function
;
height
?:
number
;
style
?:
React
.
CSSProperties
;
}
...
...
@@ -29,7 +28,6 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
count
:
null
,
onAnimated
()
{
},
height
:
18
,
};
lastCount
:
any
;
...
...
@@ -105,16 +103,14 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
renderCurrentNumber
(
num
,
i
)
{
const
position
=
this
.
getPositionByNum
(
num
,
i
);
const
height
=
this
.
props
.
height
;
const
removeTransition
=
this
.
state
.
animateStarted
||
(
getNumberArray
(
this
.
lastCount
)[
i
]
===
undefined
);
return
createElement
(
'
span
'
,
{
className
:
`
${
this
.
props
.
prefixCls
}
-only`
,
style
:
{
transition
:
removeTransition
&&
'
none
'
,
WebkitTransform
:
`translateY(
${
-
position
*
height
}
px)`
,
transform
:
`translateY(
${
-
position
*
height
}
px)`
,
height
,
WebkitTransform
:
`translateY(
${
-
position
*
100
}
%)`
,
transform
:
`translateY(
${
-
position
*
100
}
%)`
,
},
key
:
i
,
},
this
.
renderNumberList
(
position
));
...
...
@@ -139,6 +135,12 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
]),
{
className
:
`
${
this
.
props
.
prefixCls
}
${
this
.
props
.
className
}
`
,
});
// allow specify the border
// mock border-color by box-shadow for compatible with old usage:
// <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
if
(
props
.
style
&&
props
.
style
.
borderColor
)
{
props
.
style
.
boxShadow
=
`0 0 0 1px
${
props
.
style
.
borderColor
}
`
;
}
return
createElement
(
this
.
props
.
component
||
'
sup
'
,
props
,
...
...
components/badge/__tests__/__snapshots__/demo.test.js.snap
浏览文件 @
f786f607
...
...
@@ -7,11 +7,10 @@ exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-
270px);transform:translateY(-270px);height:18px
;">
style="transition:none;-webkit-transform:translateY(-
1500%);transform:translateY(-1500%)
;">
<p
class="">
0
...
...
@@ -148,11 +147,10 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-
270px);transform:translateY(-270px);height:18px
;">
style="transition:none;-webkit-transform:translateY(-
1500%);transform:translateY(-1500%)
;">
<p
class="">
0
...
...
@@ -301,8 +299,7 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
data-show="true" />
</span>
<span
class="ant-switch"
...
...
@@ -322,8 +319,7 @@ exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
class="anticon anticon-notification" />
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
data-show="true" />
</span>
<span
class="ant-badge">
...
...
@@ -333,8 +329,7 @@ exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
</a>
<sup
class="ant-scroll-number ant-badge-dot"
data-show="true"
height="18" />
data-show="true" />
</span>
</div>
`;
...
...
@@ -349,11 +344,10 @@ exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
class="head-example" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-
270px);transform:translateY(-270px);height:18px
;">
style="transition:none;-webkit-transform:translateY(-
1500%);transform:translateY(-1500%)
;">
<p
class="">
0
...
...
@@ -487,11 +481,10 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
title="25">
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-
216px);transform:translateY(-216px);height:18px
;">
style="transition:none;-webkit-transform:translateY(-
1200%);transform:translateY(-1200%)
;">
<p
class="">
0
...
...
@@ -615,7 +608,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-
270px);transform:translateY(-270px);height:18px
;">
style="transition:none;-webkit-transform:translateY(-
1500%);transform:translateY(-1500%)
;">
<p
class="">
0
...
...
@@ -745,11 +738,10 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18"
style="background-color:#fff;color:#999;border-color:#d9d9d9;">
style="background-color:#fff;color:#999;box-shadow:0 0 0 1px #d9d9d9 inset;">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-
252px);transform:translateY(-252px);height:18px
;">
style="transition:none;-webkit-transform:translateY(-
1400%);transform:translateY(-1400%)
;">
<p
class="">
0
...
...
@@ -879,7 +871,6 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18"
style="background-color:#87d068;">
99+
</sup>
...
...
@@ -897,11 +888,10 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-
342px);transform:translateY(-342px);height:18px
;">
style="transition:none;-webkit-transform:translateY(-
1900%);transform:translateY(-1900%)
;">
<p
class="">
0
...
...
@@ -1025,7 +1015,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
</span>
<span
class="ant-scroll-number-only"
style="transition:none;-webkit-transform:translateY(-
342px);transform:translateY(-342px);height:18px
;">
style="transition:none;-webkit-transform:translateY(-
1900%);transform:translateY(-1900%)
;">
<p
class="">
0
...
...
@@ -1157,8 +1147,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
99+
</sup>
</span>
...
...
@@ -1170,8 +1159,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
10+
</sup>
</span>
...
...
@@ -1183,8 +1171,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
href="#" />
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
height="18">
data-show="true">
999+
</sup>
</span>
...
...
components/badge/demo/no-wrapper.md
浏览文件 @
f786f607
...
...
@@ -20,7 +20,7 @@ import { Badge } from 'antd';
ReactDOM.render(<div>
<Badge count={25} />
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', bo
rderColor: '#d9d9d9
' }} />
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', bo
xShadow: '0 0 0 1px #d9d9d9 inset
' }} />
<Badge count={109} style={{ backgroundColor: '#87d068' }} />
</div>, mountNode);
````
components/badge/style/index.less
浏览文件 @
f786f607
...
...
@@ -12,14 +12,13 @@
&-count {
position: absolute;
transform: translateX(-50%);
top: -
10px
;
height:
20px
;
border-radius:
10px
;
min-width:
20px
;
top: -
@badge-height / 2
;
height:
@badge-height
;
border-radius:
@badge-height / 2
;
min-width:
@badge-height
;
background: @highlight-color;
border: @border-width-base @border-style-base transparent;
color: #fff;
line-height:
18px
;
line-height:
@badge-height
;
text-align: center;
padding: 0 6px;
font-size: @font-size-base;
...
...
@@ -37,9 +36,9 @@
position: absolute;
transform: translateX(-50%);
transform-origin: 0px center;
top: -
4px
;
height:
8px
;
width:
8px
;
top: -
@badge-dot-size / 2
;
height:
@badge-dot-size
;
width:
@badge-dot-size
;
border-radius: 100%;
background: @highlight-color;
z-index: 10;
...
...
@@ -113,6 +112,10 @@
&-only {
display: inline-block;
transition: transform .3s @ease-in-out;
height: @badge-height;
> p {
height: @badge-height;
}
}
// for IE8/9 display
&.not-support-css-animation &-only {
...
...
components/style/themes/default.less
浏览文件 @
f786f607
...
...
@@ -246,3 +246,8 @@
@carousel-dot-width: 16px;
@carousel-dot-height: 3px;
@carousel-dot-active-width: 24px;
// Badge
// ---
@badge-height: 20px;
@badge-dot-size: 8px;
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录