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 do mobile permite alterar seu tema, texto e imagem. Ele possui slider dots, que informa quantos elementos possui e qual está sendo exibido no momento.
Figura 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 |
---|---|---|
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 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 Subtítulo para maiores informações sobre a propriedade Subtítulo.
Â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 do projeto através do campo "Skin do Tema WebMobile" na janela de 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.
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 podemos Adicionar (destaque 1 da figura 2.1) ou Remover (ícone lixeira, destaque 2) slides.
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).
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. |
Figura 2.3 - Adicionando imagem e subtítulo
Nome em inglês
Carousel
Nesta página
Índice maxLevel 3 printable false
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Imagem no Editor Visual