Função
O componente Lista Ordenada é capaz de agrupar listas estáticas: Numéricas 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 | - | 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 |
Adiciona classes CSS que já foram criadas.
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
- Clique no elemento do DOM;
- Acesse as propriedades de configuração do componente.
Adicionando sublistas na lista ordenada
Para adicionar uma sublista na lista ordenada, selecione o componente Lista ordenada e arraste-o para a lista ordenada que colocamos na view (figura 2). Obs: adicione a lista exatamente como mostra na figura 2.1, com a seta para baixo, dessa forma a sublista ficará dentro do Item 1.
| 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 acessar a propriedade propriedade itens, responsável pela adição e remoção dos itens do componente, podemos clicar sobre o componente (destaque 1 da figura 2.2, na view) ou clicar sobre o elemento do DOM correspondente àquele elemento (destaque 2 1 da figura 2.2, na barra inferior).
Figura 2. 2 - 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, selecione o componente Lista ordenada e arraste-o para a lista ordenada adicionada anteriormente na view (figura 2.1).
Obs: adicione a lista exatamente como mostrado na figura 2.2, com a seta para baixo, dessa forma a sublista ficará dentro do Item 1.
Figura 2.2 - Adicionando 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 a uma lista ordenada ao abaixo do item Frutas (item 1), como mostra a figura 2.12. 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 da lista para lista numerada de lista para Lista ordenada e na propriedade Valor do atributo numeradoordenado, selecione a opção Numeração (1,2,3...). Como , 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 ultimo último item, Doces, vamos adicionar uma lista Ordenadaordenada, nessa lista, selecione o tipo Tipo de lista como Lista não ordenada e o valor Valor do atributo não ordenado como quadrado 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
