- Criado por Fábio Duarte Freitas, última alteração por Igor Andrade em 14/02/2022
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 26 Próxima »
Função
O componente Lista Ordenada é capaz de agrupar listas estáticas: Numéricas e Ordenadas.
Figura 1 - Lista ordenada rodando na web
Principais 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. |
Estilo | style | Campo para adicionar atributos CSS. |
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. |
Itens | - | 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.
Nome | Propriedade | Função |
---|---|---|
Tipo de lista | list-type | Seleciona o tipo de lista, podendo escolher entre Numérica e Ordenada. |
Valor do atributo numerado | attribute-value | Exibe os tipos de valores numéricos da lista, 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), |
Valor do atributo ordenado | ordered-attribute-value | Exibe os tipos de ícones que serão exibidos ao lado esquerdo do item, são eles: Circulo vazio, circulo preenchido e quadrado. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
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
- 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.
Figura 2.1 - Adicionando e uma lista ordenada em outra lista ordenada
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.2, na view) ou clicar sobre o elemento do DOM correspondente àquele elemento (destaque 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 +;
- Para remover um item da lista, clique no ícone da lixeira.
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 lista ordenada ao abaixo do item Frutas (item 1), como mostra a figura 2.1. 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 e na propriedade Valor do atributo numerado, selecione a opção Numeração (1,2,3...). Como mostra a figura 3.1
Figura 3.1 - Criando uma sublista.
Figura 3.2 - Criando uma sublista com o componente Lista de opção.
Por fim, no ultimo item, Doces, vamos adicionar uma lista Ordenada, nessa lista, selecione o tipo de lista como ordenada e o valor do atributo 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
Video
Nessa página
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do componente
Imagem no editor visual
- Sem rótulos