Znacznik zwijania/rozwijania w Treści

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

Poniżej przykładowy wygląd na wniosku z zastosowaniem w Treści znacznika zwiń/rozwiń:

Ilustracja 1. Wygląd Treści na wniosku ze znacznikiem Zwiń/Rozwiń

Tworząc Treść należy przygotować artefakt typu HTML. Przykładowy kod:

Przykładowy HTML

<style>
  div.togglewrapper { margin-right: 10px; }
</style>

<div>Wartość z wniosku: <b style="color: red;">${GesTextField1}</b></div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed,
  lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
  Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
  sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu,
  vel tempus metus leo non est.
</div>

<div style="display:flex; align-items:center; justify-content:space-between;margin-top:10px;margin-bottom:10px;">
  <div>Lorem ipsum dolor sit amet</div>
  <div class="toggleWrapper">
    <div class="unfold">Rozwiń</div>
    <div class="fold">Zwiń</div>
    <div class="toggle-icon"></div>
  </div>
</div>

/more/

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed,
  lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
  Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus,
  sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu,
  vel tempus metus leo non est.
</div>

Za rozwijak odpowiada fragment:

Element rozwijający

<div class="toggleWrapper">
  <div class="unfold">Rozwiń</div>
  <div class="fold">Zwiń</div>
  <div class="toggle-icon"></div>
</div>

Znacznik /more/ odpowiada za podział na część zwiniętą i rozwiniętą Treści — wszystko przed /more/ to zawartość widoczna domyślnie, a wszystko po /more/ to część rozwinięta.

Wyrównanie przycisku do prawej zależy od stylów zdefiniowanych wewnątrz Treści (w przykładzie w Treści zastosowano styl):

Przykładowy styl wyrównania

<style>
  div.togglewrapper { margin-right: 10px; }
</style>

<div style="display:flex; align-items:center; justify-content:space-between;margin-top:10px;margin-bottom:10px;">
  ...
</div>

Ważne, żeby:

• umieścić przycisk w widocznej części Treści;

• elementy miały odpowiednie klasy: toggleWrapper, unfold, fold, toggle-icon;

• struktura przycisku była zachowana.

Wniosek demo: demoTextContent