Função
O componente Lista Ordenada é capaz de agrupar dois tipos de listas, são elas: Numéricas e listas estáticas: Ordenadas e Não Ordenadas.
Figura 1 - Lista ordenada rodando na webno Browser
Principais propriedades
Propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente. Para acessa-las basta clicar sobre o componente.
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. |
Campo para adicionar atributos CSS.
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.
Exibe os rótulos dos itens da lista, é possível excluir um item clicando no ícone da lixeira.
Principais propriedades de configuração
Na tabela abaixo estão descritas as principais de configuração para o funcionamento básico do componente.
| Tipo de lista | list-type | Seleciona o tipo de lista, podendo escolher entre Ordenada e Não Ordenada. |
| Valor do atributo não ordenado | ordered-attribute-value | Exibe os tipos de ícones que serão exibidos ao lado esquerdo do item quando a lista for do tipo Não Ordenada, são eles: Círculo vazio, Círculo preenchido e Quadrado. |
| Valor do atributo ordenado |
Nome
Propriedade
Função
| attribute-value | Exibe os tipos de valores numéricos da lista do tipo Ordenada, podendo ser: Numeração (1,2,3), |
| Letra minúscula (a,b,c), |
| Letra maiúscula (A,B,C), |
| Números romanos (I, II, III) |
| Números romanos minúsculos (i, ii, iii), |
| Classe CSS | style | Adiciona classes CSS que já foram criadas. |
| Itens | - |
Exibe os rótulos dos itens da lista, é possível excluir um item clicando no ícone da lixeira.
Acessando as propriedades de configuração do componente
Para acessar as propriedades de configuração, precisamos clicar no elemento do DOM cron-ordered-list#cron-ordered-list-<idDaLista>
Figura 2 - Acessando as propriedades de configuração do componente
Permite adicionar, ordenar, configurar e excluir itens estáticos na lista. |
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. |
Item da lista | List item | Estiliza os itens da lista do componente. |
Item da lista
Na tabela abaixo estão descritas as principais propriedades do subcomponente.
Nome | Propriedade | Função |
|---|---|---|
| Identificador | id | Atributo que especifica um ID exclusivo para o item. Por padrão, o id não é gerado automaticamente para os itens da lista. |
| Conteúdo | content | Define o texto do Título. |
| Estilo | style | Altera o estilo do componente de forma inline. |
| Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
Repetir | 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. |
| 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 que já foram criadas |
. |
Adicionar/Remover item
Para adicionar ou remover algum item da lista ordenada, siga os passos da figura 2.
acessar a propriedade itens, responsável pela adição e remoção dos itens do componente, podemos clicar sobre o componente (destaque 1 da figura 2, na view) ou clicar sobre o elemento do DOM correspondente àquele elemento (destaque 1 da figura 2, na barra inferior).
Figura 2 Figura 2.1 - Adicionando e removendo itens da lista ordenada.
- Selecione o componente ou o elemento do DOM (cron-ordered-list#);
- Para adicionar um item à lista, clique no ícone ícone +;
- Para remover um item da lista, clique no ícone da lixeira.
Adicionando sublistas na lista ordenada
Para adicionar uma sublista a uma lista ordenada, primeiro selecione o componente inserido na view e clique no ícone de cadeado no menu de opções para desagrupar o componente (figura 2.1).
Figura 2.1 - Desagrupando o componente
Em seguida na lista ordenada, selecione o componente componente Lista ordenada e arraste-o para a primeira lista ordenada que colocamos adicionada anteriormente na view (figura 2.1).
Obs: adicione a lista exatamente como mostra mostrado na figura 2.2, com a seta para baixo, dessa forma a sublista ficará dentro do Item 1,.
Figura 2.1 2 - Adicionando e uma lista ordenada em outra lista ordenada
Exemplo
Para começar o nosso exemplo, adicione o componente Lista Ordenada à view e em seguida altere o nome dos itens, para isso, clique sobre um item e altere seu nome na propriedade Conteúdo.
Figura 3 - Alterando o nome dos itens
Agora precisamos adicionar outra lista ordenada dentro da lista que colocamos na view, dessa forma estaremos criando uma lista com sublistas. Adicione uma lista ordenada abaixo do item Frutas (item 1), como mostra a figura 2.2. Em seguida, altere os nomes dos itens, da mesma forma que fizemos na figura 3. Para mudar o tipo de exibição da lista, altere a propriedade Tipo de lista para Lista ordenada e na propriedade Valor do atributo ordenado, selecione a opção Numeração (1,2,3...), como mostra a figura 3.1.
Figura 3.1 - Criando uma sublista
A lista ordenada também aceita o componente Lista de opção, vamos inclui-lo ao item Salgados. Confira na figura 3.2.
Figura 3.2 - Criando uma sublista com o componente Lista de opção
Por fim, no último item, Doces, vamos adicionar uma lista ordenada, nessa lista, selecione o Tipo de lista como Lista não ordenada e o Valor do atributo não ordenado como Quadrado. Confira na figura 3.3.
Figura 3.3 - Criando a sublista do item Doces
Execute o programa e confira o resultado final.
Figura 3.4 - Lista ordenada em execução
Nome em inglês
VideoOrdered List
Nessa página
| Índice |
|---|
Compatibilidade
Formulário mobileWeb
Equivalente webmobile
Não possui.
Botão do componente
Imagem no editor visual
