diff --git a/docs/componenti/timeline.md b/docs/componenti/timeline.md index 69ee3025c..bc76432cf 100644 --- a/docs/componenti/timeline.md +++ b/docs/componenti/timeline.md @@ -6,7 +6,6 @@ group: componenti toc: true --- -## Timeline classica Il componente _Timeline_ è caratterizzato dalla classe `.it-timeline-wrapper`. Contiene un elenco di `.timeline-element`. @@ -39,7 +38,7 @@ Il codice markup è stato rivisto in chiave accessibilità e robustezza. In part -### Esempio +## Esempio {% comment %}Example name: Base, verticale{% endcomment %} {% capture example %} @@ -232,370 +231,3 @@ Il codice markup è stato rivisto in chiave accessibilità e robustezza. In part {% endcapture %}{% include example.html content=example %} - - -## Timeline Point list -Il componente **point list** permette la rappresentazione di una sequenza di eventi o informazioni in maniera -più compatta rispetto alla timeline classica. Il componente ha due layout: calendario e passo passo (step-by-step). - -In entrambi i layout il componente è composto da una sezione primaria `.point-list-content` destinata al contenuto -e da una sezione secondaria `.point-list-aside` con la quale viene evidenziata la sequenza temporale. -Nella sezione primaria, destinata al contenuto, è possibile innestare altri componenti. - -Il componente può essere sviluppato usando l'elenco non ordinato `ul` o il contenitore generico `div`. - -### Esempio come elenco -{% comment %}Example name: Point list, elenco non ordinato{% endcomment %} -{% capture example %} - - -{% endcapture %}{% include example.html content=example %} - -### Esempio con il contenitore generico -{% comment %}Example name: Point list, contenitore generico{% endcomment %} -{% capture example %} -
-
-
-
14
-
Ottobre
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- -{% endcapture %}{% include example.html content=example %} - - -### Layout calendario -Il layout calendario permette di esplicitare delle date nella sezione secondaria `.point-list-aside`. - -#### Esempio base -Nella sezione secondaria il contenitore `.point-date` viene usato per evidenziare il giorno, -il contenitore `.point-month` per il mese. - -{% comment %}Example name: Point list, calendario{% endcomment %} -{% capture example %} -
-
-
-
14
-
Ottobre
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- -{% endcapture %}{% include example.html content=example %} - -#### Con anno -Tramite il contenitore `.point-year` è possibile specificare l'anno. - -{% comment %}Example name: Point list, calendario completo{% endcomment %} -{% capture example %} - - -{% endcapture %}{% include example.html content=example %} - -### Layout passo passo -Il layout passo passo (o step-by-step) permette di evidenziare l'ordine temporale dei contenuti. -Nella sezione secondaria è possibile usare un testo breve (2 caratteri massimo) o un'icona. -La differenza principale con il layout calendario sta nelle minori dimensioni della sezione secondaria. - -#### Step-by-step con testo -Viene usato il contenitore `.point-date` per inserire un testo brevissimo (2 caratteri massimo). -È possibile usare `.point-month` e `.point-year` per aggiungere ulteriori informazioni. - -{% comment %}Example name: Point list, step con testo{% endcomment %} -{% capture example %} - - -{% endcapture %}{% include example.html content=example %} - -#### Step con icona -In questa variante viene inserita un'icona nel contenitore `.point-date`. -È possibile usare `.point-month` e `.point-year`. - -{% comment %}Example name: Point list, step con icona{% endcomment %} -{% capture example %} -
-
-
-
- Milestone -
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
-
-
- Milestone -
-
DOC
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
-
-
v2
-
- Milestone -
-
JS
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- -{% endcapture %}{% include example.html content=example %} - -### Varianti colore -La sezione secondaria del componente supporta le varianti colore modificando opportunamente `.point-list-{suffisso}`. - -{% comment %}Example name: Point list, varianti colore{% endcomment %} -{% capture example %} - - -{% endcapture %}{% include example.html content=example %} - -### Esempio complesso -Di seguito un esempio un po' più complesso. - -{% comment %}Example name: Point list, esempio complesso{% endcomment %} -{% capture example %} - - -{% endcapture %}{% include example.html content=example %}