Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Lista com thumbnail miniatura são componentes Item com thumbnailminiatura vinculado a umaum Fonte Componente visual fonte de dados, Dessa forma, é possível associar os subcomponentes imagem, título e subtítulo aos registros da fonte de dados.
Image RemovedImage Added
Figura 1 - Exemplo da Lista com thumbnail miniatura rodando no aplicativo
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
---|---|---|
Fonte de dados | crn-datasource | Seleciona uma fonte de dados que estiver presente no na área de edição do formulário html. |
src | Campo para informar o endereço da imagem, podendo ser local ou uma URL externa. | |
content | Esse campo define o texto que é exibido ao usuário. Nesse caso, ele define o título do componente. | |
content | Esse campo define o texto que é exibido ao usuário. Nesse caso, ele define o subtítulo do componente. | |
Repetidor | ng-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. |
Posição da imagem | xattr-position | Define a posição da imagem através dos botões de seleção, podendo ser esquerda ou direita. |
Posição do texto | xattr-text-position | Define a posição do conteúdo (título e subtítulo) através dos botões de seleção, podendo ser esquerda, centro ou direita. |
Tema Cor do título | xattr-theme | Define o tema a cor do título. |
Cor do subtítulo | xattr-theme | Define a cor 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. |
Estilo | style | Altera o estilo do componente de forma inline, |
Exibir | ng-show | Propriedade AngularJS Angular usada para mostrar ou ocultar o componente. |
Segurança | cronapp-security | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Itens | _ | Adiciona ou remove itens com miniatura da lista |
Para mais detalhes sobre propriedades não descritas abaixo, acesse a documentação do componente Item com thumbnail.miniatura.
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 |
---|---|---|
Plano de fundo | Background | Estiliza o plano de fundo do componente. |
Título | Title | Estiliza o título do componente. |
Subtítulo | Subtitle | Estiliza o subtítulo do componente. |
Vincular fonte de dados
O funcionamento básico do componente é através do vínculo de uma Fonte fonte de dados. Assim, insira e configure o componente Fonte Componente visual fonte de dados na na área de design, em seguida, adicione a Lista com thumbnail miniatura e, em propriedades, selecione a Fonte de dados. (Figura 2).1)
Image RemovedImage Added
Figura 2 .1 - Vincular fonte Vincular fonte de dados existente no formulário ao componente
Aviso | ||
---|---|---|
| ||
Adicione a fonte de dados fora do componente lista com miniatura. |
Âncora | ||||
---|---|---|---|---|
|
Título, Subtítulo e Origem
As propriedades Título, Subtítulo e Origem podem estar associadas a um campo da fonte de dados ou ser um conteúdo estático. Para vincular a um campo da fonte de dados, clique no botão "..." da propriedade para abrir a janela de seleção e na aba Campo de Tela, selecione o campo da Fonte de dados.
Após a confirmação do campo da fonte de dados, será exibido a expressão {{rowData.<campo>}}
, informando que a propriedade já está associada a fonte de dados.
Image RemovedImage Added
Figura 2.2 - Vincular dados 3 - Vincular dados ao componente
No caso da propriedade Origem, é necessário acessar o ícone Editar Expressão para abrir a janela de seleção e fazer o mesmo procedimento.
Para mais informações sobre o campo Origem, acesse a documentação do componente Imagem.
Âncora | ||||
---|---|---|---|---|
|
Alterar
temacor do título
Para alterar o tema a cor do título, clique no campo para mostrar as opções existentes (Figura 2.3.14).
Image RemovedImage Added
Figura 2.3.1 4 - Alterar tema dos textos do componente
No entanto, essa não é a única forma. Na aba estilos Estilos (destaque 1 da figura 5), alguns elementos serão mostrados para que sejam estilizados, bastando clicar no menu "…"(destaque 2 da figura 5) para abrir a aba de configuração de CSS específica (Figura 2.3.2).
Image RemovedImage Added
Figura 2.3.2 5 - Elementos estilizados especificamente
Âncora | ||||
---|---|---|---|---|
|
Itens
A propriedade Itens permite adicionar 1 ou mais componentes item com thumbnail miniatura à lista com configurações distintas. Dessa forma, após cada registro da Lista com thumbnailminiatura, será exibido um registro do novo item.
Image RemovedImage Added
Figura 2.4.1 6 - Adição de novo registro da propriedade Itens
Ao clicar no botão "+" (Adicionar) da propriedade Itens, um Item com thumbnailminiatura será inserido no componente Lista com thumbnail (Figura 2.4.1). miniatura. Clique sobre o novo Item (destaque 1 da figura 2.4.16) para configuráedita-lo.
Para reordenar os itens, clique e arraste (destaque 2 da figura 2.4.1) ou clique no ícone da lixeira para excluir o item.
Perceba na figura abaixo que somente o novo item fica selecionado na área de edição. Para retornar as configurações da Lista com thumbnailminiatura, clique fora da área selecionada na área de edição.
Image Removed
Para reordenar os itens, clique e arraste (destaque 2 da figura 6) ou clique no ícone da lixeira para excluir o item.
Image Added
Figura 7 Figura 2.4.2 - Selecione o novo registro na propriedade Itens para acessar suas propriedades
Após configurar um registro da propriedade Itens, o componente será visualizado como na figura abaixo.
Image RemovedImage Added
Figura 2.4.3 8 - Lista com thumbnail miniatura com novo registro na propriedade itens
Nome em inglês
List Thumbnail
Nessa página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do Componente
Image RemovedImage Added
Imagem no Editor Visual
Image RemovedImage Added