refactor(components): 优化复选框组件的样式和行为
- 修改选中状态下的 CheckIcon 渲染逻辑 - 增加 disabled 属性以控制图标样式 - 优化 Check 组件内部的逻辑和结构
This commit is contained in:
@@ -20,7 +20,13 @@ interface CheckBoxProps {
|
||||
|
||||
const CheckIcon = [
|
||||
() => <Icon icon="hugeicons:square" class="stroke-1" />,
|
||||
() => <Icon icon="hugeicons:checkmark-square-03" class="stroke-1 text-primary" />,
|
||||
(props) => (
|
||||
<Icon
|
||||
icon="hugeicons:checkmark-square-03"
|
||||
class="stroke-1"
|
||||
classList={{ 'text-neutral': props.disabled, 'text-primary': !props.disabled }}
|
||||
/>
|
||||
),
|
||||
];
|
||||
|
||||
const Check: ParentComponent<CheckBoxProps> = (props) => {
|
||||
@@ -53,7 +59,7 @@ const Check: ParentComponent<CheckBoxProps> = (props) => {
|
||||
class="flex flex-row items-center gap-1 cursor-pointer"
|
||||
classList={{ 'text-neutral': mProps.disabled }}
|
||||
onClick={handleClick}>
|
||||
<Dynamic component={CheckIcon[internalChecked() ? 1 : 0]} />
|
||||
<Dynamic component={CheckIcon[internalChecked() ? 1 : 0]} disabled={mProps.disabled} />
|
||||
<div>{mProps.children}</div>
|
||||
<Show when={isNotNil(mProps.name)}>
|
||||
<input type="hidden" name={mProps.name} value={internalChecked() ? 'true' : 'false'} />
|
||||
|
Reference in New Issue
Block a user