Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Função

Carrossel é um componente que tem a mesma funcionalidade de um slideshow, alternando entre seus itens de tempo em tempo em um loop. O Carrossel do mobile permite alterar seu tema e texto. Ele possui os slider dots, que  que informa quantos elementos possui e qual está sendo exibido no momento.


Figura 1.1 - Exemplo do componente rodando no Aplicativo

Principais propriedades

Nas tabelas abaixo estão descritas as principais propriedades do componente carrossel e seus subcomponentes.

Nome

Propriedade

Função

Identificador

id

Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.

Intervalo de transiçãoslide-intervalDefine o tempo, em milissegundos, para alternar para a transição do o próximo slide.
Início automáticoauto-playInforme "true" para iniciar automaticamente a transição ou "false" para que isso não ocorra.
Reprodução contínua?does-continueInforme "true" para que a transição fique em loop ou "false" para finalizar a transição no último slide.
Itens-Permite adicionar, ordenar, configurar e excluir os sliders do componente.

Exibir

ng-show

Propriedade AngularJS usada para exibir ou oculta o componente.

Segurança

cronapp-security

Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfia perfil selecionados.

Classes CSS

class

Adiciona classes CSS já criadas.


Acesse a documentação do subcomponente Conteúdo H2 para maiores informações.

Configuração

Seleção, adição e remoção de itens

Itens

Selecione o componente Carrossel no editor visual para exibir a propriedade Itens no menu lateral (Figura 2.1). Cada item dessa propriedade representa um slide e ao selecionar um dos itens, seu slide correspondente será exibido na tela de edição, permitindo alterar sua imagem, título e subtítuloseu tema e texto.

Para adicionar um novo elemento na propriedade Itens, clique no botão + (Adicionar) e para excluí-lo, clique no ícone da lixeira (1 da Figura 2.1). Após a seleção de um dos elementos da propriedade Itens, clique no botão bola cadeado (item 2 da figura 2.1) e dê um segundo clique sobre a área do componente para ter acesso aos subcomponentes as propriedades desse slide.


Image Modified

Figura 2.1 - Selecionar, adicionar e remover um item do carrossel

Alterar

imagem

texto

Com o botão bola cadeado desbloqueado, selecione o subcomponente imagem no slide para exibir suas propriedades no menu lateral. Use a propriedade origem (1 da Figura 2.2) para adicionar ou alterar a imagem do slide, inserindo o endereço de uma imagem, da internet ou dentro do projeto.

Use campo valor alternativo (2 da Figura 2.2) para que deficientes visuais que utilizem aplicativos de leitor de tela.

Acesse a documentação do componente imagem para mais informações sobre suas propriedades.

Image Removed

Figura 2.2 - Propriedades do subcomponente imagem

Alterar título

Para selecionar o título é necessário desbloquear o slide clicando no botão bola cadeado, depois selecione o subcomponente Cabeçalho no slide para exibir suas propriedades no menu lateral (Figura 2.3).

Para modificar o texto dos slides, selecione um dos elementos na propriedade Itens e em seguida clique o subcomponente H2 conteúdo no centro do componente Carrossel. Altere o texto padrão do título usando a propriedade conteúdo. É possível internacionalizar esse campo.

Acesse a documentação do componente Cabeçalho para mais informações sobre suas propriedadessubcomponente Conteúdo H2 para maiores informações.


Image Modified

Figura 2.3 2 - Alterando o título

Alterar subtítulo

Para selecionar o subtítulo é necessário desbloquear o slide clicando no botão bola cadeado, depois selecione o subcomponente Subtítulo no slide para exibir suas propriedades no menu lateral (Figura 2.4).

Altere o texto padrão do subtítulo usando a propriedade conteúdo. É possível internacionalizar seu conteúdo.

do slide

Propriedades de reprodução

Selecione o componente visual na área de edição e certifique-se que o botão bola cadeado está bloqueado (item 1 da figura 2.3), dessa forma será possível visualizar as propriedades: Intervalo de transição, Início automático e Reprodução contínua?Acesse a documentação do componente Subtítulo para mais informações sobre suas propriedades.



Image Modified

Figura 2.4 - Selecionando o subtítulo

Slider dots

Os ícones do slider dots servem de indicação, mostrando qual é o slide em exibição no momento e a quantidade total deles. Essa barra é automaticamente atualizada quando há inserção ou remoção do slide na propriedade Itens do Carrossel.

Caso não queira exibir os slider dots, desbloqueie o componente carrossel, selecione o subcomponente slider dots e clique no botão bola x (Figura 2.5).

Image Removed

Figura 2.5 - Excluindo os slider dots3 - Acesso as propriedades de reprodução do Carrossel

Nome em inglês

Carousel


Nessa página

Índice
maxLevel3
printablefalse

Compatibilidade

  • Formulário mobile


Equivalente web

Carrossel (web)


Botão do Componente


Imagem no Editor Visual