Node tree (Navigator)

🤔 O que é

A Node Tree é uma das principais peças que compõe o campo de editor de nossa plataforma.

É a barra lateral que fica localizada no campo esquerdo da página do editor. É a grande responsável por garantir a informação de hierarquia dos componentes que são utilizados em um projeto.

📂Estrutura

A sua estrutura começa com um componente padrão que é uma página. Neste caso a página é o item raiz e os demais componentes que são utilizados durante o projeto vão complementando a hierarquia da Node Tree.

Os componentes dentro da Node Tree podem ser classificados como pai (A) e filho (B). Neste caso os componentes pais são aqueles que abrigam dentro de si outros componentes, ou seja, os componentes filhos.

O pai é o nó que está mais alto na hierarquia e o filho o que está mais baixo.

É possível que um projeto tenha diversos componentes pai, assim como alguns componentes específicos podem agir como pai mesmo que estejam dentro de um componente pai.

💻Organização

A Node Tree permite que os componentes sejam agrupados em diversos componentes pais com seus respectivos filhos. A visualização permite que um componente pode ser expandido ou recolhido.

📃Ações na Node Tree

Para fazer ações na Node Tree é muito simples e intuitivo:

Para adicionar um componente: Basta clicar na opção "+" ao lado do nome do componente que aparece dentro da Node Tree e selecionar o componente desejado

Para excluir um componente: Selecione o componente que deseja excluir e clique no ícone de lixeira que fica ao lado do nome do componente.

Duplicar um componente: Para replicar um componente selecionando a opção duplicar.

Para criar um novo componente pai: Clique na opção "+" no item page e um novo componente pai será criado.