React Suite es una biblioteca front-end con un conjunto de componentes de reacción que están diseñados teniendo en cuenta a los desarrolladores. Ayuda a construir interfaces de reacción escalables y receptivas de una manera rápida y eficiente. En este artículo, veremos React Suite Checkbox Indeterminate State .
El componente Casilla de verificación se utiliza para presentar al usuario un conjunto de opciones, desde las cuales el usuario puede seleccionar una o más opciones. Cuando la casilla de verificación no está marcada ni desactivada , se dice que está en un estado indeterminado .
React Suite Checkbox Componentes de estado indeterminado:
- Casilla de verificación: este es el componente de casilla de verificación utilizado para mostrar una casilla de verificación al usuario.
Casilla de verificación de React Suite Accesorios de estado indeterminado:
- indeterminado: es un accesorio booleano cuando es verdadero, establezca la casilla de verificación en un estado indeterminado.
- verificado: también es un accesorio booleano que indica si la casilla de verificación está marcada o no. Si está configurado, la casilla de verificación estará marcada.
- en línea: es un accesorio booleano del componente CheckboxGroup que se utiliza para el diseño en línea de las casillas de verificación.
Creación de la aplicación React y módulo de instalación:
Paso 1: Cree la aplicación React usando el comando npx:
npx create-react-app foldername
Paso 2: después de crear la carpeta del proyecto, acceda a ella con el comando cd:
cd foldername
Paso 3: después de crear la aplicación ReactJS, instale el módulo rsuite para que podamos usar el componente de casilla de verificación usando el siguiente comando:
npm install rsuite
Después de seguir los pasos anteriores, la estructura del proyecto se verá así:
Estructura del proyecto
Ejemplo 1: ahora reemplace el código en el archivo App.js con el código a continuación. Aquí, usamos tres casillas de verificación y cuando todas estén marcadas, la casilla de verificación anterior estará en el estado marcado y si una o dos están marcadas, estará en un estado indeterminado.
App.js
import "rsuite/dist/rsuite.min.css";
import { Checkbox, CheckboxGroup } from "rsuite";
import React from "react";
function App() {
const checkboxes = [1, 2, 3];
const [checked, setChecked] = React.useState([]);
// Function to handle all checkbox check
function handleCheckboxesCheckAll(checked, isChecked) {
// if "isChecked" is "true" set "setChecked"
// to checkboxes array or set it to empty array.
setChecked(isChecked ? checkboxes : []);
}
function handleCheckboxChange(checked) {
setChecked(checked);
}
return (
<div className="App" style={{
display: "flex", alignItems: "center",
flexDirection: "column"
}}>
<header style={{
textAlign: "center", display: "block",
marginBottom: "30px"
}}>
<h3 style={{ color: "green" }}>
GeeksforGeeks
</h3>
<h5>
React Suite Checkbox Indeterminate State
</h5>
</header>
<Checkbox
indeterminate={checked.length > 0 &&
checked.length < checkboxes.length}
checked={checked.length === checkboxes.length}
onChange={handleCheckboxesCheckAll}
style={{ display: "block" }}
>
Check All Checkboxes
</Checkbox>
{/* Checkbox Group with three checkboxes */}
<CheckboxGroup inline name="checkboxGroup"
value={checked}
onChange={handleCheckboxChange}>
<Checkbox key={1} value={1}>
Checkbox {1}
</Checkbox>
<Checkbox key={2} value={2}>
Checkbox {2}
</Checkbox>
<Checkbox key={3} value={3}>
Checkbox {3}
</Checkbox>
</CheckboxGroup>
</div>
);
}
export default App;
Ejecute la aplicación: ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.
npm start
Salida: Vaya a http://localhost:3000/ en su navegador para ver la siguiente salida.
Ejemplo 2: El siguiente ejemplo muestra el uso de un tema oscuro con un estado indeterminado de casilla de verificación. Para usar el tema oscuro, usamos el componente CustomProvider con el accesorio de tema configurado en oscuro .
App.js
import "rsuite/dist/rsuite.min.css";
import { Checkbox, CheckboxGroup, CustomProvider } from "rsuite";
import React from "react";
function App() {
const checkboxes = [1, 2, 3];
const [checked, setChecked] = React.useState([]);
// Function to handle all checkbox check
function handleCheckboxesCheckAll(checked, isChecked) {
// if "isChecked" is "true" set "setChecked" to checkboxes array
// or set it to empty array.
setChecked(isChecked ? checkboxes : []);
}
function handleCheckboxChange(checked) {
setChecked(checked);
}
return (
{/* Dark theme using CutomProvider */}
<CustomProvider theme="dark">
<div className="App" style={{
display: "flex", alignItems: "center", flexDirection: "column" }}>
<header style={{ textAlign: "center",
display: "block", marginBottom: "30px" }}>
<h3 style={{ color: "green" }}>GeeksforGeeks</h3>
<h5>React Suite Checkbox Indeterminate State</h5>
</header>
<Checkbox
indeterminate={checked.length > 0 &&
checked.length < checkboxes.length}
checked={checked.length === checkboxes.length}
onChange={handleCheckboxesCheckAll}
style={{ display: "block" }}
>
Check All Checkboxes
</Checkbox>
{/* Checkbox Group with three checkboxes */}
<CheckboxGroup inline name="checkboxGroup"
value={checked} onChange={handleCheckboxChange}>
<Checkbox key={1} value={1}>
Checkbox {1}
</Checkbox>
<Checkbox key={2} value={2}>
Checkbox {2}
</Checkbox>
<Checkbox key={3} value={3}>
Checkbox {3}
</Checkbox>
</CheckboxGroup>
</div>
</CustomProvider>
);
}
export default App;
Producción:
Referencia: https://rsuitejs.com/components/checkbox/#indeterminate-state