feat(ui): Toggle 组件添加 disabled 属性支持
- 添加 disabled 属性用于禁用开关 - 禁用状态下显示半透明效果和禁止光标
This commit is contained in:
parent
2d243a9f40
commit
e161da75c7
@ -6,18 +6,21 @@ interface ToggleProps {
|
|||||||
checked: boolean;
|
checked: boolean;
|
||||||
onChange: (checked: boolean) => void;
|
onChange: (checked: boolean) => void;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
disabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Toggle({ checked, onChange, className }: ToggleProps) {
|
export function Toggle({ checked, onChange, className, disabled }: ToggleProps) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
role="switch"
|
role="switch"
|
||||||
aria-checked={checked}
|
aria-checked={checked}
|
||||||
onClick={() => onChange(!checked)}
|
disabled={disabled}
|
||||||
|
onClick={() => !disabled && onChange(!checked)}
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative w-11 h-6 rounded-full transition-colors duration-150 ease-in-out',
|
'relative w-11 h-6 rounded-full transition-colors duration-150 ease-in-out',
|
||||||
checked ? 'bg-[var(--color-primary)]' : 'bg-[var(--color-border)]',
|
checked ? 'bg-[var(--color-primary)]' : 'bg-[var(--color-border)]',
|
||||||
|
disabled && 'opacity-50 cursor-not-allowed',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user