Executa a ação para expandir ou recolher os itens do componente visual Acordeão. Este bloco é utilizado quando é necessário utilizar algum outro componente para fazer interação com o acordeão,


Figura 1 - Bloco Alterar estado do acordeão

Compatibilidade

  • Bloco cliente: cronapi.event.changeValueAccordion()

Retorno

O bloco não possui retorno.

Parâmetros

Acordeão

Recebe o ID do componente que irá interagir com o acordeão. Para obter o ID do componente, é necessário vincular o arquivo blockly a um formulário de referência. Acesse o tópico "Propriedades do blockly" da documentação Bloco de programação para mais detalhes.

  • Posição: 1
  • Inglês: Accordion
  • Tipo: Objeto / Object
  • Exemplo: "crn-accordion-522389"

Ação

Indica qual ação o acordeão executará após a função ser acionada. 

  • Posição: 2
  • Inglês: Action
  • Tipo: Texto / String
  • Exemplo: "Abrir item"
  • Opções:
    • Fechar todos: fecha todos os itens do acordeão que estiverem sendo exibidos.
    • Abrir todos: abre todos os itens do acordeão que estiverem fechados.
    • Fechar item: fecha um item do acordeão.
    • Abrir item: abre um item do acordeão.

Item

Parâmetro utilizado para expandir ou recolher um ou mais itens de um acordeão, sendo cada item identificado por um nome que começa com "heading" ou "collapse". O prefixo "heading" é usado para expandir o item correspondente, como "headingOne" para abrir o primeiro item, enquanto o prefixo "collapse" serve para recolher o item, por exemplo, "collapseOne" para fechar o primeiro item."

  • Posição: 3
  • Inglês: Item
  • Tipo: Texto / String
  • Exemplo: "headingOne"
  • Opções: 
    • collapseOne: fecha o primeiro item do acordeão.
    • collapseTwo: fecha o segundo item do acordeão.
    • collapseThree: fecha o terceiro item do acordeão.
    • headingOne: abre o primeiro item do acordeão.
    • headingTwo: abre o segundo item do acordeão.
    • headingThree: abre o terceiro item do acordeão.

Exemplo 

Nos exemplos mostrados a seguir, o bloco Alterar estado do acordeão foi associado a diferentes botões. Na figura 2, estamos passando o ID do acordeão presente na view e, em seguida, informamos qual a ação a ser executada ao clicar no botão. Neste caso, o objetivo é abrir o primeiro item do acordeão (headingOne).


Figura 2 - Bloco Alterar estado do acordeão


Na figura 2.1, exibimos a função da figura 2 sendo executada através do botão "Expandir Item 1".


Figura 2.1 - Bloco Alterar estado do acordeão funcionando na web abrindo um item


Ao Alterar o parâmetro Ação do bloco para "Fechar item" e Item para "collapseOne", estaremos indicando que, ao clicar no botão "Fechar Item 1", o item 1 deverá ser fechado, confira na figura abaixo.



Figura 2.2 - Bloco Alterar estado do acordeão funcionando na web fechando um item


Alterando a ação para "Abrir todos" podemos expandir todos os itens do acordeão de uma vez. Nesse caso não é necessário preencher o parâmetro Item.


Figura 2.3 - Bloco Alterar estado do acordeão funcionando na web expandindo todos os itens


A última ação disponível no bloco é a de fechar todos os itens, altere o parâmetro Ação do bloco para "Fechar todos". Desse modo, todos os itens do acordeão serão fechados quando essa função for chamada.



Figura 2.4 - Bloco Alterar estado do acordeão funcionando na web fechando todos os itens

Nesta página