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 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente carrossel.
Nome | Propriedade | Função |
|---|---|---|
| Imagem | src | Adiciona uma imagem ao componente. |
| Preenchimento da imagem | object-fit | Ajusta a imagem de forma Proporcional, Ajustado ou Preenchida. |
| Título | content | Altera o título do componente. |
| Posição do título | title-position | Altera a posição do título. |
| Subtítulo | content | Altera o subtítulo do componente. |
| Posição do subtítulo | subtitle-position | Altera a posição do subtítulo. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
| Largura da imagem | width | Define uma largura de exibição da imagem. |
| Altura da imagem | height | Define uma altura de exibição da imagem. |
| Estilo | style | Altera o estilo do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
| Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
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. |
Propriedades do Slider dots
Na tabela abaixo, estão descritos as propriedades do subcomponente Slider dots.
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. |
| Estilo | style | Altera o estilo do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
| Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
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. |
| Itens | - | Permite adicionar, ordenar, configurar e excluir itens no carrossel. |
Aba de Estilos
Na tabela abaixo estão descritos 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. |
O acesso à aba estilos no componente Carrossel é um pouco diferente em relação aos outros componentes, é possível acessá-lo de duas maneiras diferentes: através do menu de configuração hierarquia (Figura 2) ou através da árvore do DOM (Figura 2.1), confira os exemplos nas imagens abaixo.
Acesso via menu de configuração hierarquia
Inicialmente selecione o componente Carrossel e acesse o menu de configurações clicando no botão hierarquia (destaque 1 da figura 2), em seguida clique na div Carrossel (destaque 2 da figura 2), por fim, clique em propriedades (destaque 3 da figura 2) e acesse a subaba Estilos.
Figura 2 - Acessando a aba estilos através do menu de configuração hierarquia
Acesso via árvore do DOM
Dentro da view, clique sobre o componente Carrossel e em seguida acesse o antepenúltimo item da árvore do DOM (destaque 1 da figura 2.1), logo após, em Propriedades (destaque 2 da figura 2,1) e por fim, clique na aba Estilos (destaque 3 da figura 2.1),
Figura 2.1 - Acessando a aba estilos através da árvore do DOM
Configuração
Seleção, adição e remoção de itens
Clique no símbolo de Cadeado na barra de opções do componente Carrossel para desbloquear os subcomponentes (1 da figura 2.2), selecione na área indicada (2) o componente Carrossel no editor visual para exibir a propriedade Itens no menu lateral (Figura 2.2). 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 "+" (3) e para excluí-lo clique no ícone da lixeira (4).
Figura 2.2 - Selecionar, adicionar e remover um item do carrossel
Alterar imagem
Com o componente selecionado para exibir suas propriedades no menu lateral (1 da figura 2.3). Use a propriedade Imagem (destaque 2 da figura 2.3) para adicionar ou alterar a imagem do slide, inserindo o endereço de uma imagem, da internet ou dentro do projeto.
Observação
Acesse a documentação do componente Imagem para mais informações sobre suas propriedades.
Figura 2.3 - Propriedades do subcomponente imagem
Alterar título e subtítulo
Para selecionar o título ou o subtítulo clique em qualquer área do componente Carrossel (1 da figura 2.4), altere o texto padrão usando a propriedade Título ou Subtítulo (destaque 2 da figura 2.4), e o texto do subtítulo na propriedade Subtítulo . É possível internacionalizar esse campo.
Figura 2.4 - Alterando o tí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, também é usado para adicionar novos itens no carrossel. Essa barra é automaticamente atualizada quando há inserção ou remoção do slide na propriedade Itens.
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).
Para exibir os ícones do slider dots, Desbloqueie o cadeado do componente carrossel como mostrado no tópico Seleção, adição e remoção de itens.
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
