Accesorios de React Suite <Checkbox>

Una suite de React es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre React suite Prop <Checkbox>. El componente <Checkbox> se utiliza para seleccionar uno o más valores de un conjunto.

<Casilla de verificación> Accesorios:

• marcada : Indica si la casilla de verificación está seleccionada o no.
• defaultChecked : especifica el estado inicial de si la casilla de verificación está seleccionada o no.
• disabled : deshabilita la casilla de verificación cuando se establece en verdadero.
• id : Denota el atributo id general de la casilla de verificación.
• indeterminado : Denota el estado marcado indeterminado de la casilla de verificación.
• en línea : se utiliza para el diseño en línea.
• inputRef : Denota la Ref del elemento de entrada.
• name : Denota el atributo de nombre de la casilla de verificación.
• onChange : es la función de devolución de llamada que se activa cuando cambia el estado.
• title : Denota el título HTML.
• value : Denota el valor de CheckboxGroup.

Sintaxis:

<Checkbox checked title="Yes" 
    onChange={handleCheck} value="A">
        Default
</Checkbox>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Ejemplo 1: el siguiente ejemplo muestra los accesorios <Checkbox> predeterminados.

import "rsuite/dist/rsuite.min.css";
import { Checkbox } from "rsuite";
  
export default function App() {
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Checkbox Prop</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
            <Checkbox defaultChecked> 
                default checked</Checkbox>
            <Checkbox> Check it</Checkbox>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra los accesorios deshabilitados, nombre, valor, título, <Checkbox>.

import "rsuite/dist/rsuite.min.css";
import { Checkbox } from "rsuite";
  
export default function App() {
  
  return (
    <center>
      <div>
        <h2>GeeksforGeeks</h2>
        <h4 style={{ color: "green" }}>
            React Suite Checkbox Prop</h4>
  
        <div style={{ marginTop: 20, width: 340 }}>
            <Checkbox name="chk" value={'A'} 
                title="ans"> Yes</Checkbox>
            <Checkbox disabled> Disabled</Checkbox>
        </div>
      </div>
    </center>
  );
}

Producción:

 

Referencia: https://rsuitejs.com/components/checkbox/#code-lt-checkbox-gt-code