feat(ui): Toggle 组件添加 disabled 属性支持
- 添加 disabled 属性用于禁用开关 - 禁用状态下显示半透明效果和禁止光标
This commit is contained in:
parent
2d243a9f40
commit
e161da75c7
@ -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
|
||||
)}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user