Skip to content

Commit

Permalink
fix: [Radio] 解决卡片式radio,设置定宽后,radio按钮被右侧文本挤压的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
liyuan-meng committed Nov 21, 2024
1 parent 054dbd1 commit 86381c2
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/components/complex-radio/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@
flex-direction: column;
align-items: flex-start;
font-size: 14px;
flex: 1;
}

.@{radio-prefix-cls}-wrapper {
Expand Down
48 changes: 48 additions & 0 deletions src/components/radio/complexDemos/customSize.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
order: 1 title: ComplexRadio desc: 默认样式
---

```jsx

/**
* title: 自定义宽高
* desc: 卡片宽度有最小值,如果业务方要求卡片宽度比最小宽度小,需要自行设置
*/
import React, { useState, useEffect } from 'react';
import { ComplexRadio, Radio, Button } from 'cloud-react';

export default function ComplexRadioDemo() {
const [value, setValue] = useState();
const radioList = [
{ label: '淘系用户复购', value: 'A', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '对私域中绑定了淘系账号的客户进行群发' },
{ label: '自定义人群', value: 'B', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '自定义筛选客户进行群发' },
{ label: '单选文字1', value: 'C', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案1' },
{ label: '单选文字2', value: 'D', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案2' },
{ label: '单选文字3', value: 'E', imgSrc: 'https://brand-guide.shuyun.com/IAM/52e939494f3b.png', content: '说明文案3' }
];

const onChange = (value) => {
console.log('AAAA', value);
setValue(value);
};

return (
<div>
<h5>自定义卡片宽高</h5>
<Radio.Group value={value} defaultValue={"E"} onChange={onChange} horizontal style={{ flexWrap: 'wrap' }}>
{radioList.map((item, index) => (
<ComplexRadio
style={{ width: 180, height: 100 }}
titleStyle={{ minWidth: 100 }}
title={item.label}
content="对私域中绑定了淘系账号的客户进行群发"
value={item.value}
type="card"
disabled={index > 2}
/>
))}
</Radio.Group>
</div>
);
}
```
7 changes: 6 additions & 1 deletion src/components/radio/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ group:

### API ComplexRadio

*ComplexRadio 支持 Radio 的基础属性*
*ComplexRadio 支持 Radio 的基础属性。*

*业务方自己设置 `卡片Radio` 的宽高时,会存在一些样式问题,这是历史原因,需要业务方自行调整,可查看 [自定义卡片式Radio宽高](https://cloud-react.shuyun.com/v1/cloud-react/data/radio#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8D%A1%E7%89%87%E5%BC%8F-radio-%E7%9A%84%E5%AE%BD%E9%AB%98)*

| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ----------------------- | ----------------- | ------ |
Expand Down Expand Up @@ -85,3 +87,6 @@ group:

### 卡片式 Radio
<embed src="@components/radio/complexDemos/card.md" />

### 自定义卡片式Radio宽高
<embed src="@components/radio/complexDemos/customSize.md" />

0 comments on commit 86381c2

Please sign in to comment.