- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 11/03/2021
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 9 Próxima »
Função
Carrossel é um componente que tem a mesma funcionalidade de um slideshow, alternando entre seus itens de tempo em tempo em um loop. Por padrão, o carrossel possui os componentes imagem, cabeçalho e subtítulo (H2), além do slider dots, que informa quantos elementos possui e qual está sendo exibido no momento. Todos esses subcomponentes podem ser removidos ou alterados.
Figura 1.1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente carrossel.
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. |
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 perfis selecionados. |
Classes CSS | class | Adiciona classes CSS já criadas. |
Para saber sobre os outros subcomponentes, clique nos links abaixo:
Configuração
Seleção, adição e remoção de 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ítulo.
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) para ter acesso aos subcomponentes desse slide.
Figura 2.1 - Selecionar, adicionar e remover um item do carrossel
Alterar imagem
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.
Observação
Acesse a documentação do componente Imagem para mais informações sobre suas propriedades.
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).
Altere o texto padrão do título usando a propriedade Conteúdo. É possível internacionalizar esse campo.
Observação
Acesse a documentação do componente Cabeçalho para mais informações sobre suas propriedades.
Figura 2.3 - 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.
Observação
Acesse a documentação do componente Subtítulo para mais informações sobre suas propriedades.
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).
Figura 2.5 - Excluindo os slider dots
Nome em inglês
Carousel
Nesta página
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual
- Sem rótulos