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 O carrossel do mobile permite alterar seu tema, texto e imagem. Ele possui slider dots, que que informa quantos elementos possui e qual está sendo exibido no momento. Todos esses subcomponentes podem ser removidos ou alterados.
Image Added
Figura 1. 1 - Exemplo do componente rodando no browser Aplicativo
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente carrossel e seus subcomponentes.
Nome | Propriedade | Função |
---|---|---|
Intervalo de transição (segundos) | slide-interval | Define o tempo, em milissegundos, para alternar para o próximo slide. |
Início automático | auto-play | Informe true para iniciar automaticamente a transição ou false para que isso não ocorra. |
Reprodução contínua? | does-continue | Informe true para que a transição fique em loop ou false para finalizar a transição no último slide. |
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 AngularJS usada para exibir ou ocultar 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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS já criadas. |
Itens | - | Permite adicionar, ordenar, configurar e excluir os sliders do componente. |
Principais propriedades do componente Item do carrossel
Na tabela abaixo estão descritas as principais propriedades do componente item do carrossel.
Nome | Propriedade | Função |
---|---|---|
Imagem | src | Define qual imagem será utilizada no componente. |
Subtítulo | content | Altera o subtítulo |
Posição horizontal do texto | horizontal-text-position | Define como o texto será posicionado horizontalmente: à esquerda, ao centro ou à direita |
Posição vertical do texto | vertical-text-position | Define como o texto será posicionado verticalmente: topo, centro ou abaixo. |
Preenchimento da imagem | object-fit | Define de qual forma a imagem preencherá o carrossel, podendo ser Proporcional, Ajustado, Preencher (padrão) e Nenhum. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Personalize o item | style | Altera o estilo do componente da forma inline. |
Tema do slider | xattr-theme | Permite escolher uma cor de tema para o componente. |
Exibir | ng-show | Propriedade Angular usada para mostrar 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 perfia perfis selecionados. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS já criadas. |
Para saber sobre os outros subcomponentes, clique nos links abaixo:
Configuração
Acesse a documentação do subcomponente Subtítulo para maiores informações sobre a propriedade Subtítulo.
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Navegação ativa | Active slider dots | Estiliza o indicador de navegação ativo do componente. |
Navegação padrão | Default slider dots | Estiliza o indicador de navegação padrão do componente. |
Âncora temaSlider temaSlider
Tema do slider
Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.
As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:
- Alteração do tema do projeto (menor prioridade);
- Adição da Skin do projeto através do campo "Skin do Tema Mobile" na janela de Configurações do Projeto.
- Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).
Configuração
Acessando o componente
Devido aos vários componentes que o compõem, a navegação pelo componente Carrossel em design time pode parecer um pouco confusa, porém, veremos aqui alguns passos para tornar essa navegação mais simples. Existem duas formas de fazer isso:
- A primeira é através do botão de Hierarquia (destaque 1 da figura 2), perceba que essa área exibe todos os componentes presentes na view, sendo possível acessar tanto o Carrossel como os seus subitens (destaque "a" da figura 2).
- A segunda forma é utilizando a árvore do DOM (destaque 2 da figura 2), na figura abaixo o id
div#crn-slider-917555
identifica o Carrossel, no entanto, ele só será visível enquanto o Carrossel ou seus subitens estiverem selecionados, por conta disso, recomendamos sempre utilizar o botão de hierarquia, caso deseje voltar às propriedades gerais do Carrossel.
Image Added
Figura 2 - Navegando entre os subelementos do componente Carrossel
Adição e remoção de slides
Seleção, adição e remoção de itensSelecione 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.
podemos Adicionar (destaque 1 da figura 2.1) ou Remover (ícone lixeira, destaque 2) slides.
Image Added
Figura 2.1 - Selecionar, adicionar 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.
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.
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.
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).
Image Removed
Figura 2.5 - Excluindo os slider dots
Acesso às propriedades do slide
É possível acessar as propriedades de cada slide clicando sobre o item desejado na propriedade Itens. Porém, apesar da propriedade Itens do carrossel exibir 3 slides inicialmente, apenas o código HTML do Slide 1 está contido no componente. Assim, para acessarmos pela primeira vez as propriedades de qualquer slide que não seja o Slide 1, será necessário clicar sobre o slide desejado (item da propriedade Itens) duas vezes: o primeiro clique irá carregar o código HTML do slide selecionado (destaque 1 da figura 2.2) e o segundo clique irá acessar as propriedades do código HTML recém carregado (figura 2.3).
Image Added
Figura 2.2 - Acesso às propriedades dos itens do carrossel
Alterar imagem e subtítulo
Para modificar a imagem dos slides, selecione um dos Itens do Carrossel na propriedade Itens (figura 2.2) ou através do botão de Hierarquia (destaque 1 da figura 2.3), em seguida acesse as propriedades (destaque 2 da figura 2.3). Use a propriedade Imagem (destaque 3 da figura 2.3) para adicionar ou alterar a imagem do slide, clique no botão "..." para selecionar uma imagem dentro do projeto ou insira a URL de uma imagem da internet. Logo abaixo dessa propriedade é possível alterar o Subtítulo de cada item do carrossel (destaque 4 da figura 2.3) este campo permite internacionalização.
Informações |
---|
Sempre que um item do carrossel é acessado, o ícone do cadeado aparece aberto (desagrupado) (destaque 5 da figura 2.3), para exibir os outros itens do carrossel, basta clicar no cadeado novamente, dessa forma será possível alterar suas propriedades. |
Image Added
Figura 2.3 - Adicionando imagem e subtítulo
Nome em inglês
Carousel
Nesta
Nome em inglês
Carousel
Nessa página
Índice maxLevel 3 printable false
Compatibilidade
Formulário webmobile
Equivalente mobileweb
Carrossel (mobileweb)
Botão do Componente
Image Added
Imagem no Editor Visual
Image Added