rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: 增强 SwitchButtonGroup 的交互样式并移除冗余属性

Browse Source
This commit is contained in:
雨霖铃
2026-07-09 23:51:15 +08:00
parent e6276c573f
commit a714ddd5a2
1 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SwitchButtonGroup.tsx
+4 -5
View File
@@ -15,7 +15,6 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
options: SwitchOption<T>[]; options: SwitchOption<T>[];
onChange: (value: T) => void; onChange: (value: T) => void;
size?: 'small' | 'medium' | 'large'; size?: 'small' | 'medium' | 'large';
buttonClassName?: string;
} }
const SIZE_CLASSES = { const SIZE_CLASSES = {
@@ -24,8 +23,10 @@ const SIZE_CLASSES = {
large: 'text-base h-11 px-4 py-2 rounded-lg', large: 'text-base h-11 px-4 py-2 rounded-lg',
} as const; } as const;
const SELECTED_CLASSES = 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95'; const SELECTED_CLASSES =
const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80'; 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95 hover:shadow-md active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted';
const UNSELECTED_CLASSES =
'hover:bg-background/50 hover:text-foreground/80 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted';
export default function SwitchButtonGroup<T extends string | number = string>({ export default function SwitchButtonGroup<T extends string | number = string>({
value, value,
@@ -33,7 +34,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
onChange, onChange,
size = 'medium', size = 'medium',
className, className,
buttonClassName,
...props ...props
}: SwitchButtonGroupProps<T>) { }: SwitchButtonGroupProps<T>) {
return ( return (
@@ -54,7 +54,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
'flex-1 transition-all', 'flex-1 transition-all',
SIZE_CLASSES[size], SIZE_CLASSES[size],
value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES, value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
buttonClassName,
)} )}
> >
{option.label} {option.label}