Utilizado para apresentar telas com conteúdo genérico através de blocos, chamados de seções de conteúdo.
Os SectionLists são telas comumente utilizadas para disponibilizar detalhamento de conteúdos.
Por exemplo, dentro de um fluxo de telas a app disponibiliza uma listagem utilizando um GroupList. Ao selecionar um item da listagem para detalhar o conteúdo, uma SectionList é exibida.
Os templates do SectionList suportam a apresentação de conteúdo agrupados ou não em cards. A utilização do template que suporte card permite que as informações sejam agrupadas em seções.
O código para as telas de exemplo estão no final desta seção.
Utilizado para renderizar telas com conteúdo genérico através de blocos, chamados de seções de conteúdo.
Nome da template a ser utilizada para o agrupamento
title
Título da seção. Exibido no centralizado no topo da seção
background
Customiza a cor do background da seção. Se nulo ou vazio, a cor padrão é branco(#FFF) para o template A e transparente para o template B.
color
Customiza a cor dos ícones e texto da seção. Se nulo ou vazio, a cor padrão é cinza (#444).
actions
Lista de ações para a seção
actionDefault
Ação padrão ao trocar na seção
sections
Lista de itens do agrupamento.
sections.(x) type
Tipo do item da seção, suportando:
Html: Texto comum
Image: Lista de imagens separadas por pipe (“|”)
Audio : Lista de arquivos separadas por pipe (“|”)
sections.(x) title
Título da do item da seção. Vem em negrito.
sections.(x) value
Conteúdo da seção. Pode ser escrito em HTML simples com CSS2.
Existem alguns elementos e estilos já pré-definidos que podem ser utilizados:
Elementos html: h1, h2, h3, div, table
Css:
text-default: pinta a fonte do elemento com a cor definida em “itemList.(x)color”. Se color não for definido, assume a cor de fonte padrão definida para o endpoint em “appStyle.colorBaseFont”.
Ex: <h3 class=´text-default´> Texto aqui </h3>
sections.(x) actions
Lista de ações para o item da seção.
sections.(x) actionDefault
Ação default a ser executada quando o item for tocado.
Se vazio ou nulo, nenhuma ação será executada.
Template
E
Área da célula da seção.
pageContent.sectionList(x).background define a cor do card. Se nulo ou vazio, a cor padrão é #FFF para o template A e transparente para o template B.
pageContent.sectionList(x).colordefine a cor da fonte, linhas e ícones do card. Se nulo ou vazio, a cor padrão é #444.
E1
Área de exibição do título da seção.
pageContent.sectionList(x).title define o texto da área, sempre centralizada.
pageContent.sectionList(x).color define a cor do texto e a cor da linha de separação.
Se nulo ou vazio a área é ocultada.
Possui na formatação uma linha inferior separando o título do conteúdo da seção.
E2
pageContent.sectionList(x).sections(0-z) define o conteúdo da área. Se z>1, então o conteúdo é separado por espaço em branco.
pageContent.sectionList(x).sections(0-z).title define o subtítulo da seção.
pageContent.sectionList(x).color define a cor do titulo.
Deve receber a cor negrito.
pageContent.sectionList(x).sections(0-z).type define o tipo do conteúdo da seção.
pageContent.sectionList(x).sections(0-z).value define o texto HTML da célula.
E3
pageContent.sectionList(x).actions define a lista de ações do item.
Se nulo ou vazio, o espaço é ocultado;
Suporta de 1 a N actions, sendo:
1 a 6 action: Exibe a action informada, de acordo com o order, e da direita para a esquerda.
>6 actions: Exibe as actions de 1 a 5 na linha e agrupar as actions de 6 a no “menu de bolinhas” para acesso através de menu suspenso.
