React Suite CheckTreePicker Tamaño

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. CheckTreePicker es compatible con múltiples selectores para múltiples selecciones de estructuras de datos complejas.

React Suite CheckTreePicker Size ayuda al usuario a crear CheckTreePicker de diferentes tamaños. Proporciona cuatro tamaños; a saber , lg, md, sm y xs

Sintaxis:

<CheckTreePicker size="Class Name"  data={data}  />

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

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

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

 

Ejemplo: En este ejemplo, mostraremos CheckTreePicker grande y mediano.

• App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import react from 'react';
import CheckTreePicker from 'rsuite/CheckTreePicker';
import 'rsuite/dist/rsuite.min.css';
  
export default function App() {
    // Sample Options
    const data = [
        {
            "label": "Madhya Pradesh",
            "value": 1,
            "children": [
                {
                    "label": "Mhow",
                    "value": 2
                },
                {
                    "label": "Indore",
                    "value": 3,
                    "children": [
                        {
                            "label": "Vijay Nagar",
                            "value": 4
                        },
                        {
                            "label": "Rajiv Gandhi Square",
                            "value": 5
                        },
                        {
                            "label": "MR 10",
                            "value": 6
                        },
                    ]
                },
            ]
        }
    ]
    return (
        <div className="App">
            <h1 style={{ color: 'green' }} >
                GeeksforGeeks</h1>
            <h3>React Suite CheckTreePicker Size</h3>
            <CheckTreePicker size="lg" 
                placeholder="GFG_Large_CheckTreePicker" 
                data={data} />
                 
            <CheckTreePicker size="md" 
                placeholder="GFG_Medium_CheckTreePicker" 
                data={data} />
                 
  
        </div>
    );
}

Paso para ejecutar la aplicación : ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

 

Ejemplo 2: En este ejemplo, mostraremos CheckTreePicker pequeño y extrapequeño

import react from 'react';
import CheckTreePicker from 'rsuite/CheckTreePicker';
import 'rsuite/dist/rsuite.min.css';
  
export default function App() {
    // Sample Options
    const data = [
        {
            "label": "Madhya Pradesh",
            "value": 1,
            "children": [
                {
                    "label": "Mhow",
                    "value": 2
                },
                {
                    "label": "Indore",
                    "value": 3,
                    "children": [
                        {
                            "label": "Vijay Nagar",
                            "value": 4
                        },
                        {
                            "label": "Rajiv Gandhi Square",
                            "value": 5
                        },
                        {
                            "label": "MR 10",
                            "value": 6
                        },
                    ]
                },
            ]
        }
    ]
    return (
        <div className="App">
            <h1 style={{ color: 'green' }} >GeeksforGeeks</h1>
            <h3>React Suite CheckTreePicker Size</h3>
            <CheckTreePicker size="sm" 
                placeholder="GFG_Small_CheckTreePicker" 
                data={data} />
                 
            <CheckTreePicker size="xs" 
                placeholder="GFG_Xsmall_CheckTreePicker" 
                data={data} />
        </div>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/check-tree-picker/#size