Componente per la visualizzazione cronologica di eventi.
Timeline
Il Web Toolkit mette a disposizione un componente per la visualizzazione cronologica di eventi denominato Timeline.
labore facere aut
Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.
porro vel rem
Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
culpa nam consequatur
Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
La costruzione può avvenire sia direttamente tramite codice che tramite l'editor TinyMCE.
La costruzione dell'a Timeline tramite codice è abbastanza laboriosa
<div class="u-padding-all-xxl u-background-grey-15 u-sizeFull">
<div class="Timeline u-layout-prose u-layoutCenter">
<div class="Timeline-point">
<div class="Timeline-point-content u-background-95 u-color-white">
<div class="u-textWeight-700">a</div>
</div>
</div>
<div class="Timeline-content u-color-black">
<div class="Timeline-arrow Icon-drop-down u-color-white"></div>
<div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
<h2 class="u-text-r-xs u-padding-r-bottom">labore facere aut</h2>
<p class="u-text-p u-textSecondary">
Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.
</p>
</div>
</div>
</div>
<div class="Timeline u-layout-prose u-layoutCenter">
<div class="Timeline-point">
<div class="Timeline-point-content u-background-95 u-color-white">
<div class="u-textWeight-700">dolores</div>
</div>
</div>
<div class="Timeline-content u-color-black">
<div class="Timeline-arrow Icon-drop-down u-color-white"></div>
<div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
<h2 class="u-text-r-xs u-padding-r-bottom">porro vel rem</h2>
<p class="u-text-p u-textSecondary">
Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
</p>
</div>
</div>
</div>
<div class="Timeline u-layout-prose u-layoutCenter">
<div class="Timeline-point">
<div class="Timeline-point-content u-background-95 u-color-white">
<div class="u-textWeight-700">vel</div>
</div>
</div>
<div class="Timeline-content u-color-black">
<div class="Timeline-arrow Icon-drop-down u-color-white"></div>
<div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
<h2 class="u-text-r-xs u-padding-r-bottom">culpa nam consequatur</h2>
<p class="u-text-p u-textSecondary">
Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
</p>
</div>
</div>
</div>
</div>
Il template ItaliaPA permette di inserire la Timeline mediante definition list DL
- a
-
labore facere aut
Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.
- dolores
-
porro vel rem
Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
- vel
-
culpa nam consequatur
Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
Utilizzando la definition list il codice si semplifica di molto.
<dl class="Timeline">
<dt>a</dt>
<dd>
<h2 class="u-text-r-xs u-padding-r-bottom">labore facere aut</h2>
<p class="u-text-p u-textSecondary">
Voluptate blanditiis omnis. Et doloremque et. Debitis suscipit voluptatem est aut consequatur suscipit eos. Nisi sit voluptas quod. Vitae eligendi quasi culpa ut omnis pariatur nihil autem. Ipsam non eum sit omnis ut rerum.
</p>
</dd>
<dt>dolores</dt>
<dd>
<h2 class="u-text-r-xs u-padding-r-bottom">porro vel rem</h2>
<p class="u-text-p u-textSecondary">
Sed rerum asperiores magni et facilis illo recusandae quia similique. Eos non at. Est sit voluptates. Esse corrupti cupiditate possimus hic quasi consequatur et.
</p>
</dd>
<dt>vel</dt>
<dd>
<h2 class="u-text-r-xs u-padding-r-bottom">culpa nam consequatur</h2>
<p class="u-text-p u-textSecondary">
Ipsam ad et voluptates quaerat. Veritatis sed voluptatem sit tempore recusandae accusantium et vero. At laborum eveniet quaerat expedita nihil doloremque assumenda aperiam alias.
</p>
</dd>
</div>
Ultima opzione è l'utilizzo del pulsante Definition List direttamente dall'editor TinyMCE.
In questo caso non bisogna inserire il codice manualmente ma se ne occupa direttamente l'editor. Per agevolare l'inserimento dei contenuti l'editor mostra una rappresentazione grafica della struttura della Timeline.
Configurazione
Il pulsante Definition list può essere attivato direttamente dal plugin Editor - TinyMCE, previa installazione del plugin System - TinyMCE for ItaliaPA Template, attivando il plugin personalizzato ipa e selezionando il pulsante personalizzato ipa-deflist.
Requisiti
Plugin System - TinyMCE for ItaliaPA 3.8.0.10 o successivo
Template ItaliaPA 3.8.0.10 o successivo