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; 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
)} )}
> >