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 las opciones personalizadas de React Suite CheckTreePicker. CheckTreePicker se utiliza como selectores múltiples para la selección de múltiples estructuras de datos complejas. Podemos usar opciones personalizadas como pie de página personalizado, Node de árbol personalizado, etc. en el componente CheckTreePicker.
Sintaxis:
<CheckTreePicker
data={data}
renderTreeNode={...}
renderValue={...}
searchBy={...}
/>
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 CheckTreePicker básico con opciones personalizadas.
Javascript
import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import PlusCircle from "@rsuite/icons/legacy/PlusCircle"
import Tag from "@rsuite/icons/legacy/Tag"
export default function App() {
const customData = [
{
label: "Data Structures",
value: 1,
children: [
{
label: "Queue",
value: 2,
children: [
{
label: "Priority Queue",
value: 3,
},
{
label: "FIFO Queue",
value: 4,
},
],
},
{
label: "Linked List",
value: 5,
children: [
{
label: "Circular",
value: 6,
},
{
label: "Double",
value: 7,
},
{
label: "Single",
value: 8,
},
],
},
],
},
];
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckTreePicker Custom Options</h4>
<div style={{ marginTop: 20, width: 800 }}>
<CheckTreePicker
defaultExpandAll
data={customData}
style={{ width: 280 }}
placeholder={
<span>
<PlusCircle color="gray" />
Select Algorithms
</span>
}
renderTreeNode={(nodeData) => {
return (
<span>
<i className="rs-icon
rs-icon-map-marker" />
{nodeData.label}
</span>
);
}}
renderValue={(value, checkedItems) => {
return (
<span>
<span style={{ color: "#575757" }}>
<Tag color="gray" />
Selected Algorithms :
</span>{" "}
{checkedItems.map(
(item) => item.label).join(" , ")}
</span>
);
}}
/>
</div>
</div>
</center>
);
}
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el CheckTreePicker con el pie de página personalizado.
Javascript
import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import Copyright from "@rsuite/icons/legacy/Copyright"
import PlusCircle from "@rsuite/icons/legacy/PlusCircle"
import Tag from "@rsuite/icons/legacy/Tag"
export default function App() {
const customData = [
{
label: "Data Structures",
value: 1,
children: [
{
label: "Queue",
value: 2,
children: [
{
label: "Priority Queue",
value: 3,
},
{
label: "FIFO Queue",
value: 4,
},
],
},
{
label: "Linked List",
value: 5,
children: [
{
label: "Circular",
value: 6,
},
{
label: "Double",
value: 7,
},
{
label: "Single",
value: 8,
},
],
},
],
},
];
return (
<center>
<div>
<h2>GeeksforGeeks</h2>
<h4 style={{ color: "green" }}>
React Suite CheckTreePicker Custom Options</h4>
<div style={{ marginTop: 20, width: 800 }}>
<CheckTreePicker
defaultExpandAll
data={customData}
style={{ width: 280 }}
placeholder={
<span>
<PlusCircle color="gray" />
Select Algorithms
</span>
}
renderTreeNode={(nodeData) => {
return (
<span>
<i className="rs-icon
rs-icon-map-marker" />
{nodeData.label}
</span>
);
}}
renderValue={(value, checkedItems) => {
return (
<span>
<span style={{ color: "#575757" }}>
<Tag color="gray" />
Selected Algorithms :
</span>{" "}
{checkedItems.map(
(item) => item.label).join(" , ")}
</span>
);
}}
renderExtraFooter={() => {
return (
<span style={{ padding: 6,
alignItems: 'center',
textAlign: 'center' }}>
<Copyright color="gray" />
by GeeksforGeeks
</span>
);
}}
/>
</div>
</div>
</center>
);
}
Producción:
Referencia: https://rsuitejs.com/components/check-tree-picker/#custom-options
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA