是否可以在不破坏布局的情况下在ButtonGroup内禁用的MUI按钮上呈现工具提示? [英] Is it possible to render a tooltip on a disabled MUI Button within a ButtonGroup without breaking the layout?
本文介绍了是否可以在不破坏布局的情况下在ButtonGroup内禁用的MUI按钮上呈现工具提示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用禁用的按钮和工具提示创建MUIButtonGroup
。
以下代码挡路正确显示了按钮,但是如此处所述(https://material-ui.com/components/tooltips/#disabled-elements)禁用的元素不能提供工具提示。
<ButtonGroup>
<Tooltip title={"This is button A"}>
<Button>{"Button A"}</Button>
</Tooltip>
<Tooltip title={"This is button B"}>
<Button disabled>{"Button B"}</Button>
</Tooltip>
</ButtonGroup>
但是,如果我在禁用按钮周围添加span
,组布局将被销毁。
<ButtonGroup>
<Tooltip title={"This is button A"}>
<Button>{"Button A"}</Button>
</Tooltip>
<Tooltip title={"This is button B"}>
<span>
<Button disabled>{"Button B"}</Button>
</span>
</Tooltip>
</ButtonGroup>
推荐答案
禁用按钮有两个方面会妨碍工具提示行为:
- 如您引用的文档中所述,禁用的
<button>
元素(独立于Material-UI)不会以支持工具提示正确行为的方式触发事件。 - Material-UI被禁用时,专门在Material-UI的
ButtonBase
组件(由Button
利用)中的disables pointer-events。
第二个问题可以通过覆盖Material-UI的禁用样式以允许指针事件来解决:
import MuiButton from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";
const Button = withStyles({
root: {
"&.Mui-disabled": {
pointerEvents: "auto"
}
}
})(MuiButton);
第一个问题可以通过使用Button的component
属性使用<div>
元素而不是<button>
元素来解决。禁用的按钮元素不会接收单击事件,因此为了使Button仍以禁用的方式运行,此代码在禁用onClick
道具时将其移除。
const ButtonWithTooltip = ({ tooltipText, disabled, onClick, ...other }) => {
const adjustedButtonProps = {
disabled: disabled,
component: disabled ? "div" : undefined,
onClick: disabled ? undefined : onClick
};
return (
<Tooltip title={tooltipText}>
<Button {...other} {...adjustedButtonProps} />
</Tooltip>
);
};
下面是按钮B和C均禁用的工作演示。按钮A和B使用上面概述的方法,而按钮C是常规材质-没有用于比较的工具提示的UI按钮。它们下面的附加按钮可切换B和C的禁用状态。
import React from "react";
import Tooltip from "@material-ui/core/Tooltip";
import MuiButton from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";
import ButtonGroup from "@material-ui/core/ButtonGroup";
const Button = withStyles({
root: {
"&.Mui-disabled": {
pointerEvents: "auto"
}
}
})(MuiButton);
const ButtonWithTooltip = ({ tooltipText, disabled, onClick, ...other }) => {
const adjustedButtonProps = {
disabled: disabled,
component: disabled ? "div" : undefined,
onClick: disabled ? undefined : onClick
};
return (
<Tooltip title={tooltipText}>
<Button {...other} {...adjustedButtonProps} />
</Tooltip>
);
};
export default function App() {
const [bAndCDisabled, setBAndCDisabled] = React.useState(true);
return (
<>
<ButtonGroup>
<ButtonWithTooltip
tooltipText="This is Button A"
onClick={() => console.log("A")}
>
{"Button A"}
</ButtonWithTooltip>
<ButtonWithTooltip
tooltipText="This is Button B"
onClick={() => console.log("B")}
disabled={bAndCDisabled}
>
{"Button B"}
</ButtonWithTooltip>
<MuiButton onClick={() => console.log("C")} disabled={bAndCDisabled}>
{"Button C"}
</MuiButton>
</ButtonGroup>
<br />
<br />
<MuiButton
variant="contained"
onClick={() => setBAndCDisabled(!bAndCDisabled)}
>
Toggle disabled for B and C
</MuiButton>
</>
);
}
这篇关于是否可以在不破坏布局的情况下在ButtonGroup内禁用的MUI按钮上呈现工具提示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文