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 carrossel do mobile permite alterar seu tema, texto e textoimagem. Ele possui os slider dots, que informa quantos elementos possui e qual está sendo exibido no momento.
Image RemovedImage Added
Figura 1 .1 - Exemplo do componente rodando no Aplicativo
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente carrossel e seus subcomponentes.
Nome | Propriedade | Função | Identificador | idAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. | |
---|---|---|---|---|---|
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 | AngularJS Angular usada para | exibir ou ocultar o componentemostrar 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. | ||
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. | ||
Classes CSS | class | Adiciona classes CSS já criadas. |
Acesse a documentação do subcomponente Conteúdo H2 para maiores informações.
ItensSubtí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
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 seu 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 (2 da figura 2.1) e dê um segundo clique sobre a área do componente para ter acesso as propriedades desse slide.
Image Removed
Figura 2.1 - Selecionar, adicionar e remover um item do carrossel
Alterar texto
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 subcomponente Conteúdo H2 para maiores informações.
Image Removed
Figura 2.2 - Alterando o título 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?.
Image Removed
Figura 2.3 - Acesso as propriedades de reprodução do Carrossel
podemos Adicionar (destaque 1 da figura 2.1) ou Remover (ícone lixeira, destaque 2) slides.
Image Added
Figura 2.1 - Adicionar e remover um item do carrossel
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 mobile
Equivalente web
Botão do Componente
Image RemovedImage Added
Imagem no Editor Visual
Image RemovedImage Added