- Criado por Deborah Melo de Carvalho, última alteração em 07/02/2019
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 4 Próxima »
Introdução
A área de trabalho varia conforme o arquivo que será aberto nela e conjuntamente todos os componentes correspondentes a esse arquivo. Nessa parte será explicada mais sobre os arquivos html pois eles possuem mais abas e menus para configuração.
Figura 1 - Área de trabalho do arquivo HTML
- Recarregar Área de Design;
- Redimensionamento: redimensiona a tela para verificar a responsividade em diferentes equipamentos;
- Modal: Adiciona e/ou seleciona os modais criados;
- Exibir elementos ocultos: exibe/oculta elementos que serão renderizados mas somente são mostrados após uma ação feita pelo usuário, como os itens de um menu dropdown - que são exibidos após clicar no menu;
- Exibir elementos não visuais: exibe/oculta elementos que não serão renderizados ao executar o projeto, como ícones de fonte de dados;
- Menu lateral: área que abrange as abas de controle, propriedade, responsividade e estilos.
- Aba componente: exibe uma lista de componestes arrastáveis;
- Aba propriedades: edição das propriedades do componente selecionado na tela,
- Aba eventos: exibe vários eventos para adicionar ações a um componente selecionado na tela;
- Aba responsividade:
- Aba estilo: adiciona estilo a todo o componente;
- Abas Visualização e código: exibe o conteúdo de forma visual ou o código-fonte HTML.
Redimensionamento
A view do formulário pode ser redimensionada conforme os ícones abaixo, além de poder resetar e recarregar a área.
Figura 2 - Itens do redimesionamento
- Resetar: reajusta a área de design do formulário;
- Área de redimensionamento: redimensiona a área de design para mostrar como é seu comportamento conforme o ícone selecionado:
- Dispositivos pequenos, telefones;
- Dispositivos médios, tablets;
- Desktops;
- Dispositivos grandes, Tv's.
Modal
Modal não é nada mais que uma caixa de diálogo que fica sobreposta na view para chamar atenção do usuário. Na IDE, a janela modal é constituída de três áreas: header, body e footer; e para adicionar componentes nessa área, basta somente selecioná-lo e arrastá-lo até a área desejada.
Figura 3.1 - Modal
- Adicionar janela: cria uma janela modal;
- Remover janela: remove uma janela modal. Essa opção somente aparece quando uma janela modal é selecionada;
- Área para seleção da janela modal;
- Janela modal.
Renomear a modal
Para renomear uma modal é preciso que ela seja selecionada completamente (clicando fora da área da modal) e no menu lateral, na aba de propriedade, renomeie o nome do campo identificador.
Figura 3.2 - Campo para renomear modal
Menu lateral
Menu lateral possui quatro abas que contém os componentes que são adicionados na área de design, onde mostra a configuração e a estilizaação desses componentes.
Figura 4 - Abas do menu lateral
- Controles;
- Propriedades;
- Responsividade; configuração da responsividade de um componente para o tipo de redimensionamento selecionado;
- Estilo.
Controles
Contém os componentes, como fonte de dados, grade, botão, que são adicionados na área de design ou na modal. Dentro dessa aba é possível ainda fazer pesquisa desses componentes caso não seja encontrado visualizando.
Figura 4.2 - Aba de controle
Propriedades
Somente aparece conteúdo na área do menu lateral quando um elemnto na área de design é selecionado. Através dessa aba é possível adicionar segurança a um componente, renomea-lo e entre outros; incluindo a adição/remoção de estilos e eventos desse componente como também de seus elementos internos (caso ele tiver).
Figura 4.3 - Aba de propriedades do componente botão
- Propriedades: contém as informações do componente que podem ser definidas, como segurança, conteúdo, ícone, entre outros;
- Eventos: contém os eventos que podem ser configurados para aquele componente;
- Estilos: contém as especifidades de estilos que o componente pode ter.
Informação
Caso deseje saber mais sobre estilos visite esse tópico: Estilização de componentes - CSS
- Sem rótulos