Histórico da Página
List item é a diretiva que adiciona um container para representar um registro de uma lista. A principio não passa de um container mas por convenção é ideia ideal que seja informado um identificador único para cada item caso seja preciso realizar alguma operação com determinado registro. Também é possível customizar o CSS informando as classes a serem adicionadas; de acordo com o guideline da TOTVS na lista você deve alterar apenas a cor da borda da esquerda caso seja necessário identificar algum tipo de registro.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
.page-content .list-item .tag-1 {
border-left: 5px solid #F15A22;
} |
Sintaxe
| Bloco de código | ||
|---|---|---|
| ||
<totvs-list-item> ... </totvs-list-item> |
Propriedades
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| id | string | - | Identificador único para o item da lista. Por convenção deve ser concatenado o nome do item com um id (ou valor correspondente) para formação do identificador único. |
| class | string | - | (opcional) Para que seja apresentado a borda lateral conforme a cor da tag devemos montar um css conforme exemplo a baixo: |
| selected | objeto | - | (opcional) Item da lista para ser usado em conjunto com o Totvs Page Quick Select. Deve conter o proprio item (objeto) que esta sendo exibido. Ao ser informado será disponibilizado o checkbox para seleção do registro, a identificação do item selecionado é feito através da propriedade $selected adicionada ao proprio item da lista. |
Dependência
Exemplo de uso
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<totvs-page type="list">
...
<totvs-page-content>
...
<totvs-list-item
id="country{{country.id}}"
class="tag-2"
ng-repeat="country in controller.listOfcountry">
...
</totvs-list-item>
</totvs-page-content>
</totvs-page> |
...
Resultado
Leia mais...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas