Alternar classe / Toggle class
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
Podem ser utilizadas quaisquer classes CSS criadas pelo usuário no arquivo app.css (visível no Modo Avançado ativado) (Localização: src/main/webapp/css/app.css), assim como as classes carregadas junto com a página.
Quando adicionamos uma classe CSS a um componente, ela é associada ao atributo class do elemento. No entanto, pode haver outras classes anteriores a ela, com prioridade superior. Se essas classes anteriores alterarem a mesma propriedade CSS que você inseriu, a classe com maior prioridade irá sobrepor as demais. Portanto, é possível que as alterações não ocorram devido a uma prioridade mais alta de outras classes.
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
Abaixo, segue o estilo CSS que foi utilizado no exemplo, ele pode ser configurado na aba Estilo, presente no menu lateral do editor de views. Para mais detalhes de configuração, acesse a documentação Estilo - CSS.
Figura 2.1 - 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