mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
fix: badge offset in rtl (#24724)
* fix: badge offset in rtl * fix: update snap * add test * fix: offset * fix: snap
This commit is contained in:
xrkffgg
GitHub
parent
e361b30ded
commit
955fa520f1
@ -1497,6 +1497,179 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
/>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
style="right:-10px;margin-top:10px"
|
||||
title="5"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
|
||||
>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
|
||||
<div>
|
||||
<span
|
||||
|
||||
@ -762,6 +762,181 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Badge rtl render component should be rendered correctly in RTL direction 2`] = `
|
||||
<span
|
||||
class="ant-badge ant-badge-rtl"
|
||||
>
|
||||
<a
|
||||
class="head-example"
|
||||
href="#"
|
||||
>
|
||||
head
|
||||
</a>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
style="left:10px;margin-top:10px"
|
||||
title="5"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
|
||||
>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit current"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class="ant-scroll-number-only-unit"
|
||||
>
|
||||
9
|
||||
</p>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Badge should be compatible with borderColor style 1`] = `
|
||||
<span
|
||||
class="ant-badge ant-badge-not-a-wrapper"
|
||||
|
||||
@ -8,6 +8,13 @@ import rtlTest from '../../../tests/shared/rtlTest';
|
||||
describe('Badge', () => {
|
||||
mountTest(Badge);
|
||||
rtlTest(Badge);
|
||||
rtlTest(() => (
|
||||
<Badge count={5} offset={[10, 10]}>
|
||||
<a href="#" className="head-example">
|
||||
head
|
||||
</a>
|
||||
</Badge>
|
||||
));
|
||||
|
||||
beforeEach(() => {
|
||||
jest.useFakeTimers();
|
||||
|
||||
27
components/badge/demo/offset.md
Normal file
27
components/badge/demo/offset.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 自定义位置偏移
|
||||
en-US: Offset
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
|
||||
|
||||
## en-US
|
||||
|
||||
Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
|
||||
|
||||
```jsx
|
||||
import { Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Badge count={5} offset={[10, 10]}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -13,22 +13,12 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Badge count={5} />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | Customize Badge dot color | string | - | |
|
||||
| count | Number to show in badge | ReactNode | | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | `false` | |
|
||||
| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - | |
|
||||
| offset | set offset of the badge dot | `[number, number]` | - | |
|
||||
| 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` | `''` | |
|
||||
|
||||
@ -87,6 +87,15 @@ const Badge: React.FC<BadgeProps> = ({
|
||||
};
|
||||
|
||||
const getStyleWithOffset = () => {
|
||||
if (direction === 'rtl') {
|
||||
return offset
|
||||
? {
|
||||
left: parseInt(offset[0] as string, 10),
|
||||
marginTop: offset[1],
|
||||
...style,
|
||||
}
|
||||
: style;
|
||||
}
|
||||
return offset
|
||||
? {
|
||||
right: -parseInt(offset[0] as string, 10),
|
||||
|
||||
@ -14,22 +14,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
```
|
||||
|
||||
```jsx
|
||||
<Badge count={5} />
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| color | 自定义小圆点的颜色 | string | - | |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode | | |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | false | |
|
||||
| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - | |
|
||||
| offset | 设置状态点的位置偏移 | `[number, number]` | - | |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
|
||||
| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | '' | |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user