Reaccionar MUI ToggleButtonGroup API

React MUI es una biblioteca de interfaz de usuario que proporciona componentes robustos y personalizables predefinidos para React para facilitar el desarrollo web. El diseño de MUI se basa en la parte superior de Material Design de Google. 

En este artículo, vamos a discutir la API React MUI ToggleButtonGroup. ToggleButtonGroup se utiliza para agrupar los ToggleButtons. La API ToggleButtonGroup proporciona muchas personalizaciones como estilo, funcionalidad, etc. ToggleButtonGroups nos permite seleccionar una o varias opciones.

Sintaxis:

import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
// or
import { ToggleButtonGroup } from '@mui/material';

Lista de accesorios: aquí está la lista de diferentes accesorios utilizados con este componente. Podemos acceder a ellos y modificarlos según nuestras necesidades.

• children: Es un componente similar a la fila de la tabla.
• clases: Esto anula los estilos existentes o agrega nuevos estilos al componente.
• componente: Es el componente utilizado para el Node raíz. Puede ser una string HTML o un componente.
• valor: Este es el valor del botón.
• color: Este es el color del ToggleButton.
• disabled: si se establece en true, el botón de alternancia está deshabilitado.
• fullWidth: si se establece en verdadero, el botón de alternar ocupará todo el ancho del contenedor.
• onChange: la función de devolución de llamada cuando se cambia el botón de alternancia.
• onClick: la función de devolución de llamada cuando se hace clic en el botón de alternancia.
• seleccionado: si se establece en verdadero, el botón está en estado activo.
• tamaño: especifica el tamaño del botón.
• sx: la propiedad del sistema permite definir anulaciones del sistema, así como estilos CSS adicionales. 
• orientación: Es la orientación del componente.

Sintaxis: Cree un ToggleButtonGroup de la siguiente manera:

<ToggleButtonGroup value={alignment}>
    <ToggleButton value="Data Structures">
            Data Structures
    </ToggleButton>
    <ToggleButton value="Algorithms">
            Algorithms
    </ToggleButton>
    <ToggleButton value="Web Development">
            Web Development
    </ToggleButton>
</ToggleButtonGroup>

Instalar y crear la aplicación React y agregar las dependencias de MUI.

Paso 1: Cree un proyecto de reacción usando el siguiente comando.

npx create-react-app gfg_tutorial

Paso 2 : Entrar en el directorio del proyecto

cd gfg_tutorial

Paso 3: instale las dependencias de MUI de la siguiente manera:

npm install @mui/material @emotion/react @emotion/styled @mui/lab

Paso 4: Ejecute el proyecto de la siguiente manera:

npm start

Ejemplo 1: En el siguiente ejemplo, tenemos opciones de selección única en el grupo de botones de alternar.

import "./App.css";
import * as React from "react";
  
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import { useState } from "react";
  
function App() {
    const [val, setVal] = useState();
  
    const handleChange = (event, newAlignment) => {
        setVal(newAlignment);
    };
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI ToggleButtonGroup API</strong>
                <br />
                <br />
            </div>
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <ToggleButtonGroup value={val} exclusive 
                    onChange={handleChange}>
                    <ToggleButton value="Data Structures">
                        Data Structures
                    </ToggleButton>
                    <ToggleButton value="Algorithms">
                        Algorithms
                    </ToggleButton>
                    <ToggleButton value="Web Development">
                        Web Development
                    </ToggleButton>
                </ToggleButtonGroup>
            </div>
        </div>
    );
}
  
export default App;

Producción:

 

Ejemplo 2: En el siguiente ejemplo, tenemos la opción de selección múltiple de ToggleButtonGroup.

import "./App.css";
import * as React from "react";
  
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import { useState } from "react";
  
function App() {
  const [tuts, setTuts] = React.useState(() => [
    "Data Structures",
    "Algorithms",
  ]);
  
  const handleChange = (event, newFormats) => {
    setTuts(newFormats);
  };
  return (
    <div className="App">
      <div
        className="head"
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <h1
          style={{
            color: "green",
          }}
        >
          GeeksforGeeks
        </h1>
        <strong>React MUI ToggleButtonGroup API</strong>
        <br />
        <br />
      </div>
      <div
        style={{
          width: "fit-content",
          margin: "auto",
        }}
      >
        <ToggleButtonGroup value={tuts}
            onChange={handleChange}>
          <ToggleButton value="Data Structures">
              Data Structures
          </ToggleButton>
          <ToggleButton value="Algorithms">
              Algorithms
          </ToggleButton>
          <ToggleButton value="Web Development">
              Web Development
          </ToggleButton>
        </ToggleButtonGroup>
      </div>
    </div>
  );
}
  
export default App;

Producción:

 

Referencia: https://mui.com/material-ui/api/toggle-button-group/