react complex tree
2.4.6
Um componente de árvore acessível não opinativo com seleção múltipla e arrastar e soltar
Consulte a documentação oficial para ver mais exemplos e uma documentação mais abrangente. Muitos problemas ou dúvidas comuns são abordados na página de perguntas frequentes.
O Changelog está disponível em https://rct.lukasbach.com/docs/changelog. Verifique as notas de versão v2 ao migrar da v1.x para a v2.x.
O desenvolvimento do react-complex-tree é apoiado pela comunidade. Agradecimentos especiais a:
Descubra como apoiar o desenvolvimento de react-complex-tree.
Para começar a usar o React Complex Tree, instale-o em seu projeto como uma dependência via
npm install react-complex-tree
yarn add react-complex-tree
em seguida, importe-o e adicione sua estrutura de árvore com
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 > ;Mais detalhes no Guia de primeiros passos. O guia sobre como integrar dados com um provedor de dados de árvore estática também é um bom ponto de partida para entender como integrar dados com React Complex Tree.
Sem opinião
O React Complex Tree não faz nenhuma suposição sobre a estética do seu web design ou qualquer tecnologia que você esteja usando. A renderização depende inteiramente de você e cada nó gravado no DOM pode ser personalizado. Padrões sensatos estilizados por classes CSS facilmente personalizáveis são fornecidos para facilitar a integração.
Acessível
A estrutura da árvore está em conformidade com a especificação do W3C para árvores acessíveis. Ele oferece suporte a leitores de tela e implementa todas as interações comuns do teclado para que todas as interações, desde mover o foco até arrastar itens, sejam possíveis sem o uso do mouse.
Arrastar e soltar poderoso
A árvore fornece os recursos esperados que os usuários avançados esperam de ferramentas avançadas. Selecione quantos itens desejar e arraste-os para qualquer local da mesma árvore ou de qualquer outra árvore! React Complex Tree vem com muitas opções de personalização para arrastar e soltar, como proibir a reordenação ou ativar arrastar ou soltar apenas em determinados itens.
Controles completos do teclado
A árvore é totalmente controlável via teclado. Ele implementa todos os controles sugeridos pelo W3C para tornar as árvores acessíveis e fornece controles adicionais para arrastar e soltar, pesquisar ou renomear itens.
Dependências Zero
Sabemos como é chato adicionar um pacote e acabar com centenas de dependências de pares. Como o React Complex Tree não faz nenhuma suposição sobre suas dependências, também não precisamos sobrecarregar seu projeto com mais pacotes. Ao adicionar React Complex Tree ao seu pacote, você adiciona apenas isso e nenhuma outra dependência.
Seleção múltipla
Diferente de outras bibliotecas de árvores mais simples, React Complex Tree permite selecionar quantos itens desejar e movê-los todos de uma vez, arrastando-os para um local diferente. Por que fornecer menos funcionalidades aos seus usuários, quando você pode oferecer recursos de árvore poderosos sem esforço adicional? Experimente na demonstração acima e selecione vários itens de uma vez mantendo o controle no teclado enquanto clica nos itens e arrastando todos de uma vez para um local diferente.
Renomeando integrado
React Complex Tree fornece renomeação como recurso nativo com seus recursos. Selecione qualquer item e pressione F2 para começar a renomear o item. Isso fornece uma maneira mais intuitiva de renomear itens para os usuários sem implementar soluções de diálogo personalizadas que atrapalham mais o fluxo de trabalho dos usuários.
Funcionalidade de pesquisa
Você já tentou encontrar aquele arquivo em uma enorme árvore de arquivos caótica que você sabe que está lá, mas não tem ideia de onde? Basta começar a digitar enquanto foca a árvore e o primeiro item correspondente à sua pesquisa aparecerá. Isso também melhora a acessibilidade da árvore, pois os usuários somente com teclado podem navegar mais facilmente pela estrutura da árvore.
Ambientes com múltiplas árvores
Você pode usar várias árvores em seu aplicativo Web que compartilham um estado comum e são capazes de interagir entre si. Os itens de estado e árvore são fornecidos para um componente comum do provedor de reação, e quantas árvores você desejar podem ser facilmente integradas apenas adicionando componentes de árvore abaixo do provedor. As árvores não precisam fornecer seu próprio estado, elas apenas precisam de um ID e seu item raiz, todas as outras lógicas são tratadas pelo provedor.
Interfaces controladas e não controladas
A maneira mais fácil de usar o React Complex Tree é usar um ambiente de árvore não controlado que mantém o estado da árvore, ou seja, quais itens são selecionados, expandidos, etc. Você só precisa fornecer um provedor de dados que defina como os itens são carregados de forma assíncrona e o ambiente faz o resto. No entanto, se quiser mais controle, você pode usar o ambiente controlado para ser totalmente personalizável.
Desenvolvido por React e TypeScript
React Complex Tree é desenvolvido com React (duh) e é facilmente integrado a projetos React existentes apenas importando e usando os componentes fornecidos. Informações abrangentes sobre tipos são fornecidas como interfaces TypeScript, que facilitam a integração e fornecem segurança adicional de tipos, independentemente de você usar TypeScript em seu projeto ou não.
Se você deseja desenvolver RCT localmente, aqui estão algumas dicas:
yarn para instalar dependênciasyarn build uma vez localmente antes de executar qualquer comando devyarn start para iniciar o docusaurus e o pacote no modo watch, e/ou yarn storybook para executar o storybook
