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. 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:
Aba de Estilos
Na tabela abaixo esta descrito os tipos de estilos disponíveis para o componente Carrossel.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Plano de fundo do carousel | Carousel background | Estiliza plano de fundo do componente. |
Seta Esquerda | Left Arrow | Estiliza a seta esquerda do componente. |
Seta Direita | Right Arrow | Estiliza a seta direita do componente. |
Indicador Padrão | Standard Indicator | Estiliza o indicador padrão do componente. |
Indicador Ativo | Active Indicator | Estiliza o indicador ativo do componente. |
Título | Title | Estiliza o título do componente. |
Subtítulo | Subtitle | Estiliza o subtítulo do componente. |
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.
Informações | ||
---|---|---|
| ||
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.
Informações | ||
---|---|---|
| ||
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.
Informações | ||
---|---|---|
| ||
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
Índice maxLevel 3 printable false
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual