feat(ui): Toggle 组件添加 disabled 属性支持

- 添加 disabled 属性用于禁用开关
- 禁用状态下显示半透明效果和禁止光标
This commit is contained in:
gaoziman 2025-12-18 11:28:55 +08:00
parent 2d243a9f40
commit e161da75c7

View File

@ -6,18 +6,21 @@ interface ToggleProps {
checked: boolean;
onChange: (checked: boolean) => void;
className?: string;
disabled?: boolean;
}
export function Toggle({ checked, onChange, className }: ToggleProps) {
export function Toggle({ checked, onChange, className, disabled }: ToggleProps) {
return (
<button
type="button"
role="switch"
aria-checked={checked}
onClick={() => onChange(!checked)}
disabled={disabled}
onClick={() => !disabled && onChange(!checked)}
className={cn(
'relative w-11 h-6 rounded-full transition-colors duration-150 ease-in-out',
checked ? 'bg-[var(--color-primary)]' : 'bg-[var(--color-border)]',
disabled && 'opacity-50 cursor-not-allowed',
className
)}
>