xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改Switch组件中记录disabled状态的属性。

Browse Source
This commit is contained in:
徐涛 2024-12-28 08:05:06 +08:00
parent 2491fe162f
commit daf56bf124
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Switch.module.css
View File

@ -4,7 +4,7 @@
align-items: center; align-items: center;
gap: 1em; gap: 1em;
cursor: pointer; cursor: pointer;
&[aria-disabled] { &[disabled] {
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -31,7 +31,7 @@
transform: translate(calc(var(--spacing) * 10 - 1px), 2px); transform: translate(calc(var(--spacing) * 10 - 1px), 2px);
} }
} }
[aria-disabled] & { [disabled] & {
--disabled-background: oklch( --disabled-background: oklch(
from var(--color-primary-disabled) calc(l * 0.5) calc(c * 0.5) h from var(--color-primary-disabled) calc(l * 0.5) calc(c * 0.5) h
); );

2
src/components/Switch.tsx
View File

@ -25,7 +25,7 @@ export function Switch({ checked = false, disabled = false, onChange }: SwitchPr
}, [checked]); }, [checked]);
return ( return (
<div className={styles.switch} aria-disabled={disabled}> <div className={styles.switch} disabled={disabled}>
<div <div
className={cx(styles.switch_handle, isChecked && styles.checked)} className={cx(styles.switch_handle, isChecked && styles.checked)}
onClick={handleSwitch}></div> onClick={handleSwitch}></div>