react complex tree
2.4.6
Un componente de árbol accesible y sin opiniones con selección múltiple y arrastrar y soltar
Consulte la documentación oficial para ver más ejemplos y documentación más completa. Muchos problemas o preguntas comunes se tratan en la página de preguntas frecuentes.
El registro de cambios está disponible en https://rct.lukasbach.com/docs/changelog. Consulte las notas de la versión v2 al migrar de v1.x a v2.x.
El desarrollo de reaccionar-complejo-árbol cuenta con el apoyo de la comunidad. Un agradecimiento especial a:
Descubra cómo apoyar el desarrollo de reaccionar-complejo-árbol.
Para comenzar a usar React Complex Tree, instálelo en su proyecto como una dependencia a través de
npm install react-complex-tree
yarn add react-complex-tree
luego impórtalo y agrega tu estructura de árbol con
import { UncontrolledTreeEnvironment , Tree , StaticTreeDataProvider } from 'react-complex-tree' ;
< UncontrolledTreeEnvironment
dataProvider = { new StaticTreeDataProvider ( longTree . items , ( item , data ) => ( { ... item , data } ) ) }
getItemTitle = { item => item . data }
viewState = { { } }
>
< Tree treeId = "tree-1" rootItem = "root" treeLabel = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;Más detalles en la Guía de introducción. La guía sobre cómo integrar datos con un proveedor de datos de árbol estático también es un buen punto de partida para comprender cómo integrar datos con React Complex Tree.
Sin opinión
React Complex Tree no hace ninguna suposición sobre la estética de su diseño web o las tecnologías que esté utilizando. La representación depende totalmente de usted y cada nodo escrito en DOM se puede personalizar. Se proporcionan valores predeterminados sensibles diseñados mediante clases CSS fácilmente personalizables para facilitar la integración.
Accesible
La estructura del árbol cumple con la especificación del W3C para árboles accesibles. Admite lectores de pantalla e implementa todas las interacciones comunes del teclado para que cada interacción, desde mover el foco hasta arrastrar elementos, sea posible sin usar el mouse.
Potente arrastrar y soltar
El árbol proporciona las capacidades esperadas que los usuarios avanzados esperan de las herramientas avanzadas. ¡Seleccione tantos elementos como desee y arrástrelos a cualquier ubicación dentro del mismo árbol o de cualquier otro! React Complex Tree viene con muchas opciones de personalización para arrastrar y soltar, como no permitir la reordenación o permitir arrastrar o soltar solo en ciertos elementos.
Controles completos del teclado
El árbol es totalmente controlable mediante teclado. Implementa todos los controles sugeridos por el W3C para hacer que los árboles sean accesibles y proporciona controles adicionales para arrastrar y soltar, buscar o cambiar el nombre de elementos.
Cero dependencias
Sabemos lo molesto que es agregar un paquete y terminar con cientos de dependencias entre pares. Debido a que React Complex Tree no hace suposiciones sobre sus dependencias, tampoco necesitamos saturar su proyecto con más paquetes. Al agregar React Complex Tree a su paquete, agrega solo esa y ninguna otra dependencia.
Selección múltiple
A diferencia de otras bibliotecas de árboles más simples, React Complex Tree le permite seleccionar tantos elementos como desee y moverlos todos a la vez arrastrándolos a una ubicación diferente. ¿Por qué ofrecer a sus usuarios menos funcionalidad cuando puede ofrecer potentes capacidades de árbol sin esfuerzo adicional? Pruébelo en la demostración anterior y seleccione varios elementos a la vez manteniendo presionado el control de su teclado mientras hace clic en los elementos y luego arrástrelos todos a la vez a una ubicación diferente.
Cambio de nombre incorporado
React Complex Tree proporciona cambio de nombre como característica nativa con sus capacidades. Seleccione cualquier elemento y presione F2 para comenzar a cambiar el nombre del elemento. Esto proporciona una forma más intuitiva de cambiar el nombre de elementos para los usuarios sin implementar soluciones de diálogo personalizadas que sean más disruptivas para el flujo de trabajo de los usuarios.
Funcionalidad de búsqueda
¿Alguna vez ha intentado encontrar ese archivo en un enorme árbol de archivos caótico que sabe que está allí, pero no tiene idea de dónde? Simplemente comience a escribir mientras enfoca el árbol y aparecerá el primer elemento que coincida con su búsqueda. Esto también mejora la accesibilidad del árbol, ya que los usuarios que solo utilizan el teclado pueden navegar más fácilmente por la estructura del árbol.
Entornos de múltiples árboles
Puede utilizar varios árboles en su aplicación web que compartan un estado común y puedan interactuar entre sí. Los elementos de estado y árbol se proporcionan a un componente de proveedor de reacción común, y se pueden integrar fácilmente tantos árboles como desee simplemente agregando componentes de árbol debajo del proveedor. Los árboles no necesitan proporcionar su propio estado, solo necesitan una identificación y su elemento raíz; el resto de la lógica la maneja el proveedor.
Interfaces controladas y no controladas
La forma más sencilla de utilizar React Complex Tree es utilizar un entorno de árbol no controlado que mantenga el estado del árbol, es decir, qué elementos se seleccionan, expanden, etc., por sí mismo. Sólo necesita proporcionar un proveedor de datos que defina cómo se cargan los elementos de forma asincrónica y el entorno hace el resto. Sin embargo, si desea tener más control, puede utilizar el entorno controlado para una personalización total.
Desarrollado por React y TypeScript
React Complex Tree funciona con React (duh) y se integra fácilmente en proyectos de React existentes simplemente importando y utilizando los componentes proporcionados. Se proporciona información completa sobre tipos a través de interfaces TypeScript, que facilitan la integración y brindan seguridad de tipos adicional, sin importar si usa TypeScript en su proyecto o no.
Si desea desarrollar RCT localmente, aquí tiene algunos consejos:
yarn para instalar dependencias.yarn build una vez localmente antes de ejecutar cualquier comando de desarrollo.yarn start para iniciar Docusaurus y el paquete en modo de visualización, y/o yarn storybook para ejecutar Storybook.
