Alterna, inserindo ou removendo, em cada execução, uma classe CSS ao componente (elemento) selecionado em um formulário. Este bloco utiliza o método toggleClass do jQuery, consulte a documentação oficial para mais detalhes.
Figura 1 - Bloco Alternar classe
| Informações |
|---|
Podem ser utilizadas quaisquer classes CSS criadas pelo usuário no arquivo app.css (visível no Modo Avançado ativado) (Localização: |
| Dica |
|---|
Quando adicionamos uma classe CSS a um componente, ela é associada ao atributo |
Compatibilidade
- Bloco cliente: cronapi.screen.toggleClass()
- Bloco servidor: cronapi.screen.toggleClass() - executado a partir da chamada do bloco cliente.
Retorno
Bloco não possui retorno.
Parâmetros
Obter identificador
Identificador (id) do componente que terá a classe CSS alternada. Para selecioná-lo é necessário vincular o bloco de programação a um formulário de referência, confira no tópico Propriedades do Blockly da documentação Bloco de Programação.
- Posição: 1
- Inglês: Get Identifier
- Tipo: Objeto / Object
- Exemplo: "
crn-textinput-290034"
Valor do atributo
Recebe o nome da classe CSS, sem o ponto (.) inicial, que será alternada no componente.
- Posição: 2
- Inglês: Attribute value
- Tipo: Texto / String
- Exemplo: "
style6090"
Exemplo
A função a seguir apresenta um exemplo de uso do bloco Alternar classe. Após vincular um formulário de referência nas configurações do blockly, selecionamos, no parâmetro Obter identificador do bloco, o identificador (id) do componente entrada de texto presente no formulário. Em seguida, no parâmetro Valor do atributo, inserimos a classe CSS "style6090", que pode ser visualizada na Figura 2.1.
Figura 2 - Exemplo de uso do bloco Alternar classe
Alternar classe
Alterna a cada vez que é chamado entre ativa ou não, uma classe css que foi configurada.
Parâmetros
Nome
Tipo
Doc
Recebe o nome da classe sem o símbolo de ponto no começo do nome.
Exemplo: style6090
Compatibilidade
Servidor
Cliente
Exemplo
Após vincular um formulário de referência nas configurações do bloco, a função "AnternandoClasse" (Figura 1) recebe o bloco Anternar classe e seus parâmetros estão configurados da seguinte forma:
- Obter identificador: nome da propriedade Identificador do componente que será utilizado;
- Valor do atributo: Classe CSS que será definida como ativa ou inativa (Sem o ponto antes do nome da classe).
Figura 1 - Bloco Definir visibilidade
A função acima é atribuída ao evento Ao Clicar do botão. Ao clicar no botão "Alternar Classe" (Figura 1.1) na aplicação, o componente Área de texto alternará a cada clique se a classe ficará ativa ou inativa no componente, inserimos uma cor de fundo na classe para ficar melhor de visualizar, após o clique no botão a classe ficou ativa e o fundo foi adicionado ao componente Entrada de texto como mostrado na figura 1.1.
Figura 1.1 - Alternando Classe CSS
Abaixo, segue o estilo CSS que foi utilizado no exemplo, ele pode ser configurado na aba Estilo, para mais detalhe presente no menu lateral do editor de views. Para mais detalhes de configuração, acesse a documentação sobre Estilo - CSS.
Figura 2.1 .2 - Após clicar no botão Esconder- Estilo CSS utilizado
A imagem abaixo exibe o resultado de execução da função da Figura 2, a qual foi associada ao evento "Ao clicar" do botão "Alternar Classe". Após clicar no botão, a função é executada e a classe CSS "style6090" será adicionada ao componente entrada de texto, que terá sua cor de fundo alterada (destaque 1 da Figura 2.2). Ao clicar novamente no botão, a classe CSS é removida e o componente retorna a seu estado inicial (destaque 2) e, assim, a cada clique do botão a classe CSS é alternada.
Figura 2.2 - Resultado de execução da função da Figura 2
Nesta página
| Índice |
|---|
Vincular formulário
Para selecionar Valor (ng-model) do componente no parâmetro Obter identificador, é necessário apontar a view desejada no campo Formulário de referência das configurações do Editor de Bloco de programação.
| title | Mais sobre |
|---|