mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
fix: Radio Group style with Badge (#21215)
* 💄 fix Radio Group style with Badge close #21213 * ✅ update snapshot
This commit is contained in:
parent
93e6454488
commit
7d47413afa
@ -1,5 +1,380 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/radio/demo/badge.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-solid"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-button-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Click Me
|
||||
</span>
|
||||
</label>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
title="1"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
|
||||
>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class="current"
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-button-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Not Me
|
||||
</span>
|
||||
</label>
|
||||
<sup
|
||||
class="ant-scroll-number ant-badge-count"
|
||||
data-show="true"
|
||||
title="2"
|
||||
>
|
||||
<span
|
||||
class="ant-scroll-number-only"
|
||||
style="transition:none;-ms-transform:translateY(-1200%);-webkit-transform:translateY(-1200%);transform:translateY(-1200%)"
|
||||
>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class="current"
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
0
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
1
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
2
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
3
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
4
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
5
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
6
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
7
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
8
|
||||
</p>
|
||||
<p
|
||||
class=""
|
||||
>
|
||||
9
|
||||
</p>
|
||||
</span>
|
||||
</sup>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/radio/demo/basic.md correctly 1`] = `
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
|
34
components/radio/demo/badge.md
Normal file
34
components/radio/demo/badge.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
order: 99
|
||||
debug: true
|
||||
title:
|
||||
zh-CN: Badge style
|
||||
en-US: 测试 Badge 的样式
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
测试 Badge 的样式。
|
||||
|
||||
## en-US
|
||||
|
||||
Test Badge style.
|
||||
|
||||
```jsx
|
||||
import { Radio, Badge } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Radio.Group buttonStyle="solid">
|
||||
<Badge count={1}>
|
||||
<Radio.Button value={1}>
|
||||
Click Me
|
||||
</Radio.Button>
|
||||
</Badge>
|
||||
<Badge count={2}>
|
||||
<Radio.Button value={2}>
|
||||
Not Me
|
||||
</Radio.Button>
|
||||
</Badge>
|
||||
</Radio.Group>
|
||||
, mountNode);
|
||||
```
|
@ -16,6 +16,14 @@
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-badge-count {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
> .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 一般状态
|
||||
@ -209,6 +217,7 @@ span.@{radio-prefix-cls} + * {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
|
Loading…
Reference in New Issue
Block a user