0
355
Vistas¿Es posible mostrar información sobre herramientas en un botón MUI deshabilitado dentro de un grupo de botones sin romper el diseño?
Estoy tratando de crear un grupo de botones ButtonGroup con botones deshabilitados e información sobre herramientas.
El siguiente bloque de código muestra los botones correctamente, pero como se describe aquí ( https://material-ui.com/components/tooltips/#disabled-elements ), los elementos deshabilitados no se pueden proporcionar con información sobre herramientas.
<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> Pero si agrego un span alrededor del botón deshabilitado, el diseño del grupo se destruirá.
<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>2 Respuestas
Responde la pregunta0
Agregar div/span alrededor de los botones puede alterar el estilo del botón a veces. Así que idealmente deberíamos usar <> o <React.Fragment> . Pero la información sobre herramientas no funciona con fragmentos de reacción, por lo que podemos usar el <span> como se menciona en la pregunta. Pero en ese caso, dado que ButtonGroup se usa aquí y funciona clonando los elementos del botón secundario y pasando accesorios para el estilo, tendremos que enviar los accesorios de estilo al "Botón B" en este caso.
import React from "react"; import "./styles.css"; import { Tooltip, Button } from "@material-ui/core"; import ButtonGroup from "@material-ui/core/ButtonGroup"; export default function App() { const ButtonDemo = (props) => { return ( <Tooltip title={"This is button B"}> <span> <Button {...props} disabled> {"Button B"} </Button> </span> </Tooltip> ); }; return ( <ButtonGroup> <Tooltip title={"This is button A"}> <Button>{"Button A"}</Button> </Tooltip> <ButtonDemo /> </ButtonGroup> ); } 
0
Sí, es posible. necesitaría envolver su botón en el ejemplo de etiqueta de intervalo
<Tooltip title={YOUR_MESSAGE_HERE}> <span> <Button disabled>my button is disabled</Button> </span> </Tooltip>