Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Image RemovedO componente Lista Ordenada é capaz de agrupar listas estáticas: Ordenadas e Não Ordenadas.
Image Added
Figura 1 - Lista ordenada rodando no Browser
Principais propriedades
Propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do 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. |
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 | 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 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 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).
Image Added
Figura 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 +;
- 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).
Image Added
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.
Image Added
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.
Image Added
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.
Image Added
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.
Image Added
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.
Image Added
Figura 3.3 - Criando a sublista do item Doces
Execute o programa e confira o resultado final.
Image Added
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
Image RemovedImage Added
Imagem no editor visual
Image RemovedImage Added