{{ t.pages.accordion.intro }}
{{ t.common.sectionDescription }}
{{ t.pages.accordion.descriptionBody }}
{{ t.common.sectionFeatures }}
- {{ t.pages.accordion.featureOne }}
- {{ t.pages.accordion.featureTwo }}
- {{ t.pages.accordion.featureThree }}
{{ t.common.sectionLimitations }}
- {{ t.pages.accordion.limitOne }}
- {{ t.pages.accordion.limitTwo }}
- {{ t.pages.accordion.limitThree }}
Demo estilo "Visualiza Processo"
A API atual já suporta esse padrão sem ajustes no componente: use apenas
[header], omita [description] e iconClass,
ative [flush]="true" e, se quiser um corpo mais seco como no SALI,
combine com [bodyPadding]="false". Para a aba ativa não ficar azul,
use [activeTextBodyColor]="true". Para o título do accordion ficar
cinza e sem negrito, use buttonClass="text-muted" com
[buttonSemibold]="false".
| Nº | Data | Nome CGM | Organograma destino | Recebimento |
|---|---|---|---|---|
| 1 | 00/00/0000 00:00 | Lorem ipsum | Lorem ipsum dolor sit amet | 00/00/0000 00:00 |
| 2 | 00/00/0000 00:00 | Dolor sit amet | Consectetur adipiscing elit | 00/00/0000 00:00 |
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
{{ t.pages.accordion.directiveApiTitle }}
{{ t.pages.accordion.directiveApiIntro }}
{{ t.pages.accordion.directiveApiNote }}
{{ t.pages.accordion.collapseTitle }}
{{ t.pages.accordion.collapseIntro }}
{{ t.pages.accordion.intro }}
- {{ t.pages.accordion.apiOne }}
- {{ t.pages.accordion.apiTwo }}
- {{ t.pages.accordion.apiThree }}
- {{ t.pages.accordion.apiFour }}
- {{ t.pages.accordion.apiFive }}
<li-accordion [allowMultipleOpen]="true" [flush]="true" [bodyPadding]="false">
<li-accordion-item [header]="'Dados do Requerente'" [expanded]="true">
<div class="p-3">...conteúdo da seção...</div>
</li-accordion-item>
<li-accordion-item [header]="'Dados do Processo'">
<div class="p-3">...conteúdo da seção...</div>
</li-accordion-item>
</li-accordion><li-accordion [allowMultipleOpen]="true">
<li-accordion-item
[header]="'Título'"
[expanded]="true"
(expandedChange)="onChange($event)">
</li-accordion-item>
</li-accordion><div liAccordion [closeOthers]="true" [destroyOnHide]="true" #accordion="liAccordion">
<div liAccordionItem="first" #first="liAccordionItem" [collapsed]="false">
<h2 liAccordionHeader>
<button liAccordionButton>Primeiro</button>
</h2>
<div liAccordionCollapse>
<template liAccordionBody>
<div liAccordionBody>Conteúdo do primeiro item</div>
</template>
</div>
</div>
</div><div [liCollapse]="isCollapsed">
<div class="border rounded p-3">Conteúdo colapsável</div>
</div>