refactor(components): 优化 Radio 组件的禁用状态样式
- 修改了 Radio 组件的选中图标,在禁用状态下使用中性颜色 - 通过传递 disabled 属性来控制图标的颜色 - 优化了代码结构,提高了组件的可维护性
This commit is contained in:
@@ -20,7 +20,13 @@ interface RadioProps {
|
|||||||
|
|
||||||
const RadioIcon = [
|
const RadioIcon = [
|
||||||
() => <Icon icon="hugeicons:circle" class="stroke-1" />,
|
() => <Icon icon="hugeicons:circle" class="stroke-1" />,
|
||||||
() => <Icon icon="hugeicons:checkmark-circle-03" class="stroke-1 text-primary" />,
|
(props) => (
|
||||||
|
<Icon
|
||||||
|
icon="hugeicons:checkmark-circle-03"
|
||||||
|
class="stroke-1"
|
||||||
|
classList={{ 'text-primary': !props.disabled, 'text-neutral': props.disabled }}
|
||||||
|
/>
|
||||||
|
),
|
||||||
];
|
];
|
||||||
|
|
||||||
const Radio: ParentComponent<RadioProps> = (props) => {
|
const Radio: ParentComponent<RadioProps> = (props) => {
|
||||||
@@ -53,7 +59,7 @@ const Radio: ParentComponent<RadioProps> = (props) => {
|
|||||||
class="flex flex-row items-center gap-1 cursor-pointer"
|
class="flex flex-row items-center gap-1 cursor-pointer"
|
||||||
classList={{ 'text-neutral': mProps.disabled }}
|
classList={{ 'text-neutral': mProps.disabled }}
|
||||||
onClick={handleClick}>
|
onClick={handleClick}>
|
||||||
<Dynamic component={RadioIcon[internalChecked() ? 1 : 0]} />
|
<Dynamic component={RadioIcon[internalChecked() ? 1 : 0]} disabled={mProps.disabled} />
|
||||||
<div>{mProps.children}</div>
|
<div>{mProps.children}</div>
|
||||||
<Show when={isNotNil(mProps.name)}>
|
<Show when={isNotNil(mProps.name)}>
|
||||||
<input type="hidden" name={mProps.name} value={internalChecked() ? 'true' : 'false'} />
|
<input type="hidden" name={mProps.name} value={internalChecked() ? 'true' : 'false'} />
|
||||||
|
Reference in New Issue
Block a user