Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add description for Radio #1064

Closed
wants to merge 3 commits into from
Closed

feat: add description for Radio #1064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
adbfb01
feat: add description for Radio
changlin2569 Jan 25, 2024
1f95e79
feat: RadioGroup compatibility option description
changlin2569 Jan 26, 2024
0a8fe86
fix: change description color
changlin2569 Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions compiled/alipay/demo/pages/Radio/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,10 @@
Radio
</radio>
</container>

<container title="选项说明">
<radio
description="{{ '选项说明选项说明选项说明选项说明选项说明选项说明选项说明选项说明' }}">
Radio
</radio>
</container>
6 changes: 6 additions & 0 deletions compiled/alipay/demo/pages/RadioGroup/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,9 @@
</view>
</ant-radio-group>
</ant-container>

<ant-container title="选项说明">
<ant-radio-group
options="{{ optionsWithDescription }}"
onChange="onChange" />
</ant-container>
5 changes: 5 additions & 0 deletions compiled/alipay/demo/pages/RadioGroup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ Page({
{ value: 'watermelon', label: '西瓜', disabled: true },
{ value: 'banana', label: '香蕉' },
],
optionsWithDescription: [
{ value: 'apple', label: '苹果', description: '每天一苹果，医生远离我' },
{ value: 'orange', label: '橘子', description: '橘子不是唯一的水果' },
{ value: 'banana', label: '香蕉', description: '香蕉香蕉 banana' },
]
},
onChange(value, e) {
console.log(value, e);
Expand Down
1 change: 1 addition & 0 deletions compiled/alipay/src/Radio/RadioGroup/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
value="{{ item.value }}"
disabled="{{ disabled || item.disabled }}"
color="{{ item.color || color }}"
description="{{ item.description }}"
onChange="onChange">
<slot
name="label"
Expand Down
1 change: 1 addition & 0 deletions compiled/alipay/src/Radio/RadioGroup/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface IRadioGroupProps extends IBaseProps {
value?: string;
disabled?: boolean;
color?: string;
description?: string;
}[];
}

Expand Down
5 changes: 5 additions & 0 deletions compiled/alipay/src/Radio/index.axml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,8 @@
</view>
</view>
</label>
<view
a:if="{{ description }}"
class="ant-radio-item-desc {{ disabled ? 'ant-radio-item-disabled' : '' }}">
{{ description }}
</view>
5 changes: 5 additions & 0 deletions compiled/alipay/src/Radio/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,11 @@
}
}
}
&-desc {
margin-left: @radio-size + 10 * @rpx;
color: @COLOR_TEXT_ASSIST;
font-size: @font-size-subcontent;
}
&-disabled {
opacity: @opacity-disabled;
}
Expand Down
5 changes: 3 additions & 2 deletions compiled/alipay/src/Radio/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ toc: 'content'
| defaultChecked | 是否选中 | boolean | false |
| style | 样式| string | - |
| value | checkbox 携带的 value 值 | string | - |
| onChange | 选中状态改变，触发回调 | (checked: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| value | checkbox 携带的 value 值 | string | - |
| description | Radio 选项说明 | string | - |


### RadioGroup
Expand All @@ -47,7 +48,7 @@ toc: 'content'
| disabled | 是否禁用 | boolean | false |
| defaultValue | 初始值 | string | - |
| label | label区插槽，接收value（当前项可选项item）、index（索引） | slot | - |
| options | 指定可选项 | `{label?: string; value?: string; disabled?: boolean;}[]` | - |
| options | 指定可选项 | `{label?: string; value?: string; disabled?: boolean; description?: string;}[]` | - |
| position | 布局，可选`horizontal` `vertical` | string | `vertical` |
| style | 样式 | string | - |
| value | radio group 里选中的值 | string | - |
Expand Down
1 change: 1 addition & 0 deletions compiled/alipay/src/Radio/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface IRadioProps extends IBaseProps {
checked?: boolean;
disabled?: boolean;
onChange?: (checked: boolean, e: any) => void;
description?: string;
}

export const RadioDefaultProps: Partial<IRadioProps> = {};
2 changes: 1 addition & 1 deletion compiled/alipay/src/Radio/variable.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,4 @@
@radio-background-color: @COLOR_BRAND1;

/* color | disabled状态背景色 */
@radio-disabled-background: @COLOR_GREY_CARD;
@radio-disabled-background: @COLOR_GREY_CARD;
7 changes: 7 additions & 0 deletions compiled/wechat/demo/pages/Radio/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,10 @@
Radio
</radio>
</container>

<container title="选项说明">
<radio
description="{{ '选项说明选项说明选项说明选项说明选项说明选项说明选项说明选项说明' }}">
Radio
</radio>
</container>
5 changes: 5 additions & 0 deletions compiled/wechat/demo/pages/RadioGroup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ Page({
{ value: 'watermelon', label: '西瓜', disabled: true },
{ value: 'banana', label: '香蕉' },
],
optionsWithDescription: [
{ value: 'apple', label: '苹果', description: '每天一苹果，医生远离我' },
{ value: 'orange', label: '橘子', description: '橘子不是唯一的水果' },
{ value: 'banana', label: '香蕉', description: '香蕉香蕉 banana' },
]
},
onChange: function (value, e) {
console.log(value, e);
Expand Down
6 changes: 6 additions & 0 deletions compiled/wechat/demo/pages/RadioGroup/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,9 @@
options="{{ options }}"
bind:change="handleChange" />
</ant-container>

<ant-container title="选项说明">
<ant-radio-group
options="{{ optionsWithDescription }}"
bind:change="onChange" />
</ant-container>
1 change: 1 addition & 0 deletions compiled/wechat/src/Radio/RadioGroup/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
value="{{ item.value }}"
disabled="{{ disabled || item.disabled }}"
color="{{ item.color || color }}"
description="{{ item.description }}"
bind:change="onChange">
<view class="ant-radio-group-item-label-default">
{{ item.label }}
Expand Down
5 changes: 3 additions & 2 deletions compiled/wechat/src/Radio/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ toc: 'content'
| defaultChecked | 是否选中 | boolean | false |
| style | 样式| string | - |
| value | checkbox 携带的 value 值 | string | - |
| onChange | 选中状态改变，触发回调 | (checked: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| value | checkbox 携带的 value 值 | string | - |
| description | Radio 选项说明 | string | - |


### RadioGroup
Expand All @@ -47,7 +48,7 @@ toc: 'content'
| disabled | 是否禁用 | boolean | false |
| defaultValue | 初始值 | string | - |
| label | label区插槽，接收value（当前项可选项item）、index（索引） | slot | - |
| options | 指定可选项 | `{label?: string; value?: string; disabled?: boolean;}[]` | - |
| options | 指定可选项 | `{label?: string; value?: string; disabled?: boolean; description?: string;}[]` | - |
| position | 布局，可选`horizontal` `vertical` | string | `vertical` |
| style | 样式 | string | - |
| value | radio group 里选中的值 | string | - |
Expand Down
5 changes: 5 additions & 0 deletions compiled/wechat/src/Radio/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,8 @@
</view>
</view>
</label>
<view
wx:if="{{ description }}"
class="ant-radio-item-desc {{ disabled ? 'ant-radio-item-disabled' : '' }}">
{{ description }}
</view>
5 changes: 5 additions & 0 deletions compiled/wechat/src/Radio/index.wxss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@
color: #cccccc;
font-size: 14px;
}
.ant-radio-item-desc {
margin-left: 27px;
color: #999999;
font-size: 12px;
}
.ant-radio-item-disabled {
opacity: 0.4;
}
6 changes: 6 additions & 0 deletions demo/pages/Radio/index.axml.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,11 @@ export default ({ checked }) => (
Radio
</Radio>
</Container>

<Container title="选项说明">
<Radio description="{{ '选项说明选项说明选项说明选项说明选项说明选项说明选项说明选项说明' }}">
Radio
</Radio>
</Container>
</Component>
);
6 changes: 5 additions & 1 deletion demo/pages/RadioGroup/index.axml.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Page, View } from 'tsxml';
import AntRadioGroup from '../../../src/Radio/RadioGroup/index.axml';
import AntContainer from '../../../src/Container/index.axml';

export default ({ item, options, optionsWithDisabled, value }) => (
export default ({ item, options, optionsWithDisabled, value, optionsWithDescription }) => (
<Page>
<AntContainer title="基础用法">
<AntRadioGroup options={options} onChange="onChange" />
Expand Down Expand Up @@ -42,5 +42,9 @@ export default ({ item, options, optionsWithDisabled, value }) => (
</AntRadioGroup>
</AntContainer>
{/* #endif */}

<AntContainer title="选项说明">
<AntRadioGroup options={optionsWithDescription} onChange="onChange" />
</AntContainer>
</Page>
);
5 changes: 5 additions & 0 deletions demo/pages/RadioGroup/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ Page({
{ value: 'watermelon', label: '西瓜', disabled: true },
{ value: 'banana', label: '香蕉' },
],
optionsWithDescription: [
{ value: 'apple', label: '苹果', description: '每天一苹果，医生远离我' },
{ value: 'orange', label: '橘子', description: '橘子不是唯一的水果' },
{ value: 'banana', label: '香蕉', description: '香蕉香蕉 banana' },
]
},
onChange(value, e) {
console.log(value, e);
Expand Down
1 change: 1 addition & 0 deletions src/Radio/RadioGroup/index.axml.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default (
value={item.value}
disabled={disabled || item.disabled}
color={item.color || color}
description={item.description}
onChange="onChange"
>
{/* #if ALIPAY */}
Expand Down
1 change: 1 addition & 0 deletions src/Radio/RadioGroup/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface IRadioGroupProps extends IBaseProps {
value?: string;
disabled?: boolean;
color?: string;
description?: string;
}[];
}

Expand Down
18 changes: 17 additions & 1 deletion src/Radio/index.axml.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,14 @@ import componentUtils from './index.sjs';
import AntIcon from '../Icon/index.axml';

export default (
{ className, style, disabled, value, color }: TSXMLProps<IRadioProps>,
{
className,
style,
disabled,
value,
color,
description,
}: TSXMLProps<IRadioProps>,
{ mixin }: InternalData
) => (
<Component>
Expand Down Expand Up @@ -65,5 +72,14 @@ export default (
</View>
</View>
</Label>
{description && (
<View
class={`ant-radio-item-desc ${
disabled ? 'ant-radio-item-disabled' : ''
}`}
>
{description}
</View>
)}
</Component>
);
5 changes: 5 additions & 0 deletions src/Radio/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,11 @@
}
}
}
&-desc {
margin-left: @radio-size + 10 * @rpx;
color: @COLOR_TEXT_ASSIST;
font-size: @font-size-subcontent;
}
&-disabled {
opacity: @opacity-disabled;
}
Expand Down
5 changes: 3 additions & 2 deletions src/Radio/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ toc: 'content'
| defaultChecked | 是否选中 | boolean | false |
| style | 样式| string | - |
| value | checkbox 携带的 value 值 | string | - |
| onChange | 选中状态改变，触发回调 | (checked: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| value | checkbox 携带的 value 值 | string | - |
| description | Radio 选项说明 | string | - |


### RadioGroup
Expand All @@ -47,7 +48,7 @@ toc: 'content'
| disabled | 是否禁用 | boolean | false |
| defaultValue | 初始值 | string | - |
| label | label区插槽，接收value（当前项可选项item）、index（索引） | slot | - |
| options | 指定可选项 | `{label?: string; value?: string; disabled?: boolean;}[]` | - |
| options | 指定可选项 | `{label?: string; value?: string; disabled?: boolean; description?: string;}[]` | - |
| position | 布局，可选`horizontal` `vertical` | string | `vertical` |
| style | 样式 | string | - |
| value | radio group 里选中的值 | string | - |
Expand Down
1 change: 1 addition & 0 deletions src/Radio/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface IRadioProps extends IBaseProps {
checked?: boolean;
disabled?: boolean;
onChange?: (checked: boolean, e: any) => void;
description?: string;
}

export const RadioDefaultProps: Partial<IRadioProps> = {};
2 changes: 1 addition & 1 deletion src/Radio/variable.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,4 @@
@radio-background-color: @COLOR_BRAND1;

/* color | disabled状态背景色 */
@radio-disabled-background: @COLOR_GREY_CARD;
@radio-disabled-background: @COLOR_GREY_CARD;