0
144
ViewsRotar un MUI LinearProgress
Estoy tratando de hacer un gráfico con MUI usando el componente LinearProgress con algo de estilo. La idea básica es hacer que esto gire 90deg
const BorderLinearProgressBottom = withStyles((theme) => ({ root: { height: 50, borderRadius: 5, }, colorPrimary: { backgroundColor: theme.palette.grey[theme.palette.type === "light" ? 200 : 700], }, bar: { borderRadius: 5, backgroundColor: "#00A99E", }, transform: [{ rotate: "90deg" }], }))(LinearProgress);consigue mi
<BorderLinearProgressBottom variant="determinate" value={22} />verse así
¿Cómo puedo hacer que gire 90deg ?
Intenté poner la transformación BorderLinearProgressBottom transform: [{ rotate: "90deg" }], pero eso no funcionó.
1 answers
Answer question0
No use rotate(-90deg) si desea mostrar el LinearProgress verticalmente, romperá su diseño porque la transform solo escala el elemento visualmente sin cambiar el tamaño, por lo que un LinearProgress aún ocupa el espacio como si estuviera dispuesto horizontalmente . Para rotar tanto su apariencia como su tamaño, debe echar un vistazo a la implementación de Slider como referencia. Pero te lo escribiré ahora para ahorrar tiempo.
En primer lugar, debe cambiar la height y el width del contenedor ProgressBar :
// before height: 50, // restrict the height width: 'auto', // expand as long as you want (inside container) // after width: 50, // restrict the width height: '100%', // expand as high as you want (inside container) Luego gire la barra de progreso hacia adentro. Esta transform funciona porque solo transforma 'localmente' (la posición de la barra es absoluta dentro del contenedor).
bar: { // the default style uses translateX, so we need to switch the axis transform: ({ value }) => { return `translateY(${value}%) !important`; } } Y eso es. Estás listo. No se verá como un Slider vertical.
Demo en vivo
