fix: add active style (#42249)

This commit is contained in:
lijianan 2023-05-10 14:56:58 +08:00 committed by GitHub
parent 3a964001e9
commit 026b74aa0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,7 +1,7 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent, textEllipsis } from '../../style';
export interface ComponentToken {}
@ -13,6 +13,7 @@ interface SegmentedToken extends FullToken<'Segmented'> {
labelColorHover: string;
bgColor: string;
bgColorHover: string;
bgColorActive: string;
bgColorSelected: string;
}
@ -106,11 +107,16 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
[`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
color: token.labelColorHover,
'&::after': {
backgroundColor: token.bgColorHover,
},
},
[`&:active:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
color: token.labelColorHover,
'&::after': {
backgroundColor: token.bgColorActive,
},
},
'&-label': {
minHeight: token.controlHeight - token.segmentedContainerPadding * 2,
@ -200,6 +206,7 @@ export default genComponentStyleHook('Segmented', (token) => {
colorTextLabel,
colorText,
colorFillSecondary,
colorFill,
colorBgLayout,
colorBgElevated,
} = token;
@ -212,6 +219,7 @@ export default genComponentStyleHook('Segmented', (token) => {
labelColorHover: colorText,
bgColor: colorBgLayout,
bgColorHover: colorFillSecondary,
bgColorActive: colorFill,
bgColorSelected: colorBgElevated,
});
return [genSegmentedStyle(segmentedToken)];