Função

O componente Lista Ordenada é capaz de agrupar dois tipos de listas, são elaslistas 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.

Principais propriedades de configuração

Na tabela abaixo estão descritas as principais de configuração para o funcionamento básico do componente. 

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

1. Clique no elemento do DOM;
2. 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) ou clicar sobre o elemento do DOM correspondente àquele elemento (destaque 2 da figura 2.2).

Figura 2.2 - Adicionando e removendo itens da lista ordenada.

1. Selecione o componente ou o elemento do DOM (cron-ordered-list#);
2. Para adicionar um item à lista, clique no ícone +;
3. 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  ao abaixo do item Frutas (item 1), como mostra a figura 2.1, em . 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 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.