如何解决如何使模糊与跨度元素图标一起使用?
我希望在单击按钮时模糊活动元素。这有时有效,但并非始终如一。注意到我们在 :focus/:hover 使用 CSS 时应用了填充图标。这有助于将图标更改为填充图标,但是当我在按钮单击时应用模糊时,这无法将灰色图标带回来。我确实看到活动元素发生了变化,但仍然使用“填充”图标样式。这可能是由于跨度,我了解到跨度有焦点/模糊问题。有没有办法不继续使用“填充”图标并在模糊时切换到常规图标?
添加 -
// Change to blur() the active focus so that icon shifts to regular and feels like unselected.
const currentTarget = e.currentTarget as HTMLElement;
(currentTarget.closest('.ms-Button') as HTMLElement)?.blur();
反应:
export const FilePickerButton: React.FunctionComponent<FilePickerButtonFCProps> = ({
position,ariaLabel,ariaDescription,disabled,iconName,toolbarButtonId,acceptParams,onClickEvent,...props
}) => {
const uploadRef = React.useRef<HTMLInputElement>(null);
const fileUploadRefLink: (e: FluentButtonEventType) => void = React.useCallback(
(e) => {
uploadRef.current?.click();
// Change to blur() the active focus so that icon shifts to regular and feels like unselected.
const currentTarget = e.currentTarget as HTMLElement;
(currentTarget.closest('.ms-Button') as HTMLElement)?.blur();
},[uploadRef]
);
const onClick = React.useCallback((e) => {
// uploading same file again works with clearing up cache
e.target.value = '';
},[]);
return (
<>
<input
type="file"
ref={uploadRef}
id={`${toolbarButtonId}`}
accept={acceptParams}
onChange={onClickEvent}
onClick={onClick}
className="fileUploadPicker"
/>
<ToolbarButton
ariaLabel={ariaLabel}
ariaDescription={ariaDescription}
disabled={disabled}
iconName={iconName}
id={toolbarButtonId}
position={position}
onClick={fileUploadRefLink}
{...props}
/>
</>
);
};
CSS
.toolbarV2ButtonTooltipHost {
max-width: var(--iconButtonSize);
max-height: var(--iconButtonSize);
}
.toolbarV2ButtonLeft {
transform: rotate(90deg);
}
.toolbarV2Button .toolbarV2Icon {
align-items: center;
background-color: var(--buttonDefaultBackground);
border-radius: var(--borderRadiusSmall);
display: flex;
height: calc(var(--iconButtonSize) - var(--paddingThin));
justify-content: center;
position: relative;
transition: var(--backgroundTransition);
width: calc(var(--iconButtonSize) - var(--paddingThin));
}
/* Position both filled and unfilled icons in the center of the button */
.toolbarV2Icon > .icon {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
/* Hide the filled version of the icon by default */
.toolbarV2Icon > .icon.filled {
opacity: 0;
}
/* On hovering over the parent button,hide the unfilled icon */
.toolbarV2Button:focus .toolbarV2Icon > .icon:not(.filled),.toolbarV2Button:hover .toolbarV2Icon > .icon:not(.filled),.selectedToolbarButton .toolbarV2Icon > .icon:not(.filled) {
opacity: 0;
}
/* On hovering over the parent button,show the filled icon */
.toolbarV2Button:focus .toolbarV2Icon > .icon.filled,.toolbarV2Button:hover .toolbarV2Icon > .icon.filled,.selectedToolbarButton .toolbarV2Icon > .icon.filled {
opacity: 1;
}
/* The ToolbarIcon's background changes depending on the state of the parent button */
.toolbarV2Button.ms-Button:hover .toolbarV2Icon,.toolbarV2Button.ms-Button:focus .toolbarV2Icon,.toolbarV2Button.ms-Button.selectedToolbarButton .toolbarV2Icon,.selectOptionButton.ms-Button:hover .background {
background-color: var(--buttonDefaultBackgroundHover);
}
.toolbarV2Button.ms-Button:active .toolbarV2Icon,.toolbarV2Button.ms-Button.selectedToolbarButton:active .toolbarV2Icon,.selectOptionButton.ms-Button:active .background {
background-color: var(--buttonDefaultBackgroundPress);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。