Skip to end of metadata
Go to start of metadata

Elementos do Editor - Sidebar

Arraste um “sidebar” para adicionar uma barra lateral a sua aplicação. Ela já vem configurada para aparecer o nome do usuário logado, o botão “Home” e “Logout”.

 

Figura 1 - Inserindo o elemento "Sidebar"



Selecionando o elemento todo é possível localizar a barra de itens. Clicando no  você adiciona quantos itens precisar e clicando na lixeira ao lado você deleta um item.

Figura 2 - Menu de configurações correspondentes ao elemento todo


Clicando em partes do elemento, outras funções aparecerão ao menu de propriedades.

 Clicando em “Menu Item” temos as opções de class, criação de propriedades e conteúdo para alterar o texto do elemento. Ao clicar no  você adiciona outros subitens, na lixeira você os apaga e no “Olho”  o menu com os subitens é apresentado. Clicando no subitem as suas opções de configuração específicas também serão apresentadas, como “Href”, para referenciar a página que o usuário será levado ao clicar neste subitem e aa opções “Class”, data-componentdraggable e conteúdo servem para alterar o texto. Por último há a opção de criação de propriedades.
 

Figura 3 - Menu de configurações correspondentes ao elemento: sub-item

Obs. Note que a aplicação irá rodar como a página está aparecendo. Então, para a aplicação não executar com o menu aberto devemos clicar novamente no “Olho” .

Elementos do editor - Navbar

Ao adicionar esse elemento você terá um menu de topo na sua página (Figura 9). Clicando no elemento, será possível localizar a barra de itens (Figura 10), clicando em "+" será adicionado um novo item e clicando na lixeira o item será removido. Selecionando uma parte do elemento, outras funções aparecerão no menu de propriedades (Figura 11), por exemplo, em "project name"  aparecerá as seguintes opções:

Class: é a janela que contém as classes CSS.

Data-component: é uma propriedade de configuração

Href: serve para configurar a página que será referenciada ao clicar no botão "project name".

Content: contém o texto que será apresentado, você pode editar conforme desejado.

New propety: serve para atribuir uma nova propriedade ao elemento.


 

 Figura 9 - Elemento Navbar

 

 

 Figura 10 - Barra de itens 


 

 

 Figura 11 - Atributos de Project name

 

Ao clicar e "menu itens" os atributos "content" e "new propety" serão apresentados. Além disso, em itens você você poderá clicar no ícone "olho" para apresentar o menu com subitens e clicar adicionar e remover outros subitens clicando no "+" e na lixeira, respectivamente (Figura 12). Ao selecionar um subitem, suas opções de configuração também serão apresentadas, serão os mesmo atributos descritos acima.

 

 

 Figura 12 - Atributos de Project name 

 

 

 

Nesta página

 

  • No labels