React suite 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 CheckTreePicker Props. CheckTreePicker se utiliza como selectores múltiples para la selección de múltiples estructuras de datos complejas.
Accesorios de CheckTreePicker:
- apariencia : Se utiliza para la apariencia del componente.
- block : Se utiliza para bloquear una fila entera.
- cascada : Se utiliza para indicar si se selecciona cascada o no.
- childrenKey : se utiliza para denotar el nombre de la propiedad Children de la estructura de datos del árbol.
- cleanable : Se utiliza para indicar si la opción se puede vaciar o no.
- contenedor : se utiliza para establecer el contenedor de renderizado.
- contable : se utiliza para indicar si se muestran los recuentos de elementos de verificación o no.
- data : Se utiliza para denotar los datos seleccionables.
- defaultExpandAll : se utiliza para expandir todos los Nodes de forma predeterminada.
- defaultExpandItemValues : se utiliza para establecer el valor del Node expandido predeterminado.
- defaultValue : se utiliza para indicar el valor predeterminado.
- disabled : Se utiliza para indicar si el componente está deshabilitado o no.
- disabledItemValues : se utiliza para deshabilitar opcional.
- expandItemValues : Se utiliza para establecer el valor del Node expandido (controlado).
- altura : Se utiliza para indicar la altura del menú.
- labelKey : se utiliza para configurar las opciones para mostrar la ‘clave’ en ‘datos’.
- menuClassName : se utiliza para indicar una clase CSS para aplicar al Node Menú DOM.
- menuStyle : se utiliza para denotar un estilo para aplicar al Node Menú DOM.
- onChange : es una función de devolución de llamada que se activa cuando cambia el valor.
- onClean : es una función de devolución de llamada que se activa cuando se limpia el valor.
- onClose : es una función de devolución de llamada que se activa en un evento de cierre.
- onExpand : es una función de devolución de llamada que se activa cuando se muestra el Node del árbol.
- onEnter : es una función de devolución de llamada que se activa antes de que se produzca la transición de la superposición.
- onEntered : es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
- onEntering : es una función de devolución de llamada que se activa cuando la superposición comienza a hacer la transición.
- onExit : es una función de devolución de llamada que se activa justo antes de que la superposición termine.
- onExited : es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
- onExiting : es una función de devolución de llamada que se activa cuando la superposición comienza a salir.
- onOpen : es una función de devolución de llamada que se activa al abrir el componente.
- onSearch : es una función de devolución de llamada para la búsqueda.
- onSelect : es una función de devolución de llamada que se activa al seleccionar una opción.
- marcador de posición : se utiliza para indicar el marcador de posición.
- colocación : Se utiliza para la colocación de componentes.
- preventOverflow : se utiliza para evitar el desbordamiento de elementos flotantes.
- renderExtraFooter : se utiliza para el pie de página adicional de renderizado personalizado.
- renderMenu : se utiliza para personalizar la lista del menú de renderizado.
- renderTreeIcon : se utiliza para indicar el icono de renderizado personalizado.
- renderTreeNode : se utiliza para indicar el Node de árbol de renderizado personalizado.
- renderValue : se utiliza para las opciones seleccionadas de renderización personalizadas.
- searchBy : se utiliza para las reglas de búsqueda personalizadas.
- searchable : Se utiliza para indicar si se pueden buscar opciones o no.
- tamaño : se utiliza para indicar el tamaño del selector.
- toggleComponentClass : se puede usar para el elemento personalizado de este componente.
- uncheckableItemValues : se utiliza para establecer el valor de la opción para que la casilla de verificación no se represente.
- value : Se utiliza para denotar el valor (Controlado).
- valueKey : se utiliza para establecer el valor de la opción ‘clave’ en ‘datos’.
- virtualizado : Se utiliza para indicar si usar o no la Lista virtualizada.
- caretAs: se utiliza para agregar un icono de intercalación personalizado.
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 Node 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 demuestra el tamaño, el marcador de posición y los accesorios en cascada de CheckTreePicker.
Javascript
import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
export default function App() {
const data = [
{
label: "Algorithms",
value: 1,
children: [
{
label: "Searching",
value: 2,
children: [
{
label: "Binary Search",
value: 3,
},
{
label: "Linear Search",
value: 4,
},
],
},
{
label: "Sorting",
value: 5,
children: [
{
label: "Selection Sort",
value: 6,
},
{
label: "Bubble Sort",
value: 7,
},
{
label: "Merge Sort",
value: 8,
},
],
},
],
},
];
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckTreePicker Props</h4>
<div style={{ marginTop: 20, width: 800 }}>
<CheckTreePicker
size="md"
placeholder="Select Algorithms"
data={data}
cascade={false}
/>
</div>
</div>
</center>
);
}
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la ubicación, apariencia y accesorios disabledItemValues de CheckTreePicker.
Javascript
import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
export default function App() {
const data = [
{
label: "Algorithms",
value: 1,
children: [
{
label: "Searching",
value: 2,
children: [
{
label: "Binary Search",
value: 3,
},
{
label: "Linear Search",
value: 4,
},
],
},
{
label: "Sorting",
value: 5,
children: [
{
label: "Selection Sort",
value: 6,
},
{
label: "Bubble Sort",
value: 7,
},
{
label: "Merge Sort",
value: 8,
},
],
},
],
},
];
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckTreePicker Props</h4>
<div style={{ marginTop: 20, width: 800 }}>
<CheckTreePicker
placeholder="Select Algorithms"
data={data}
placement="bottomStart"
appearance="subtle"
disabledItemValues={[4, 7, 8]}
/>
</div>
</div>
</center>
);
}
Producción:
Referencia: https://rsuitejs.com/components/check-tree-picker/#code-lt-check-tree-picker-gt-code
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA