Documentação é o mapa para um código sustentável.
Studio
Inspeção
O que é o Inspecionar?
O Inspecionar é uma ferramenta que permite selecionar e editar propriedades de uma seção, grupo ou elemento. Para acessar o Inspecionar, clique no ícone no cabeçalho do studio para ligar o modo de Inspeção.
- Desativado: Quando o modo Inspecionar está desativado, o conceito de bolha não é aplicado, permitindo ao usuário clicar apenas em seções, imagens e textos.
- Ativado: Quando o modo Inspecionar está ativado, o conceito de bolha é aplicado, tornando todos os elementos clicáveis. A cada clique, os elementos são selecionados e estouram simultaneamente.
Selecionar Seções, Grupos e Elementos
O Inspecionar permite selecionar seções, grupos e elementos para visualizar e editar suas propriedades.
Modos de seleção
- 1 - Ao passar o mouse sobre a bolha: A bolha deve ser destacada com uma película transparente, permitindo a visualização dos itens internos.
- 2 - Ao passar o mouse no círculo de adicionar: Ao passar o mouse sobre o círculo de adicionar, um botão maior aparecerá com um efeito de crescimento, permitindo adicionar uma nova sessão ou elemento.
- 3 - Pai Selecionado e Filhos Marcados: O pai selecionado deve ser destacado com uma borda transparente, enquanto os filhos devem ser destacados com uma linha pontilhada.
- 4 - Ao passar o mouse nos elementos dentro da bolha: Ao passar o mouse sobre os itens internos, uma película irá aparecer enquanto os outros itens continuam apenas com uma linha pontilhada.
- 5 - Ao selecionar item dentro da bolha: O item selecionado deve ser destacado com uma borda ao redor e exibir círculos de adição de novos elementos. Ao passar o mouse sobre esses círculos, a opção de adicionar será exibida.
- 6 - Ao passar pela borda do “seletor” entra então em modo “resize”: Quando se passa o mouse sobre a borda do seletor, o cursor muda para um cursor de redimensionamento, permitindo redimensionar o item.
Ações ao clicar
- Selecionar o elemento clicado com uma borda em volta
- A bolha deverá ser estourada com apenas um clique, sem a necessidade de seleção prévia para estourar a bolha..
- Exibir as propriedades da bolha no menu lateral direito.
- Exibir as ações disponíveis para o elemento no topo.
Opções Disponíveis na Seção:
-
Renomear:
Permite alterar o nome do elemento selecionado.
-
Mover para cima:
Move o elemento selecionado uma posição para cima na hierarquia.
-
Mover para baixo:
Move o elemento selecionado uma posição para baixo na hierarquia.
-
Duplicar:
Cria uma cópia do elemento selecionado.
-
Mostrar/Esconder:
Alterna a visibilidade do elemento selecionado na resolução selecionada.
-
Remover:
Exclui o elemento selecionado.
Redimencioar Seções, Grupos e Elementos
O redimensionamento de seções, grupos e elementos é uma funcionalidade que permite ao usuário alterar o tamanho de um item.
Para redimensionar um item, clique em qualquer um dos "quadradinhos" de redimensionamento nas bordas do item selecionado.
Regras por bolha
- Seções: Só podem ser redimencionadas verticamente (na altura).
- Grupos: Podem ser redimencionadas tanto verticalmente quanto horizontalmente.
- Elementos: Podem ser redimencionadas tanto verticalmente quanto horizontalmente