From 885bdd69077bc762fedcd3c8339ee2fe5ee65998 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 10 Sep 2024 12:46:46 +0200 Subject: [PATCH] docs: `Table` component (#1392) --- .../design-system/componenti/tables.yaml | 51 +++++++++++++++--- .../componenti/table-cell-anatomy.png | Bin 0 -> 4746 bytes .../componenti/table-cell-specs.png | Bin 0 -> 7373 bytes 3 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 static/images/design-system/componenti/table-cell-anatomy.png create mode 100644 static/images/design-system/componenti/table-cell-specs.png diff --git a/src/data/content/design-system/componenti/tables.yaml b/src/data/content/design-system/componenti/tables.yaml index a5d2c420e9..ba653787b5 100644 --- a/src/data/content/design-system/componenti/tables.yaml +++ b/src/data/content/design-system/componenti/tables.yaml @@ -9,7 +9,7 @@ metadata: seo: name: Tables - Designers Italia description: >- - Le tabelle di dati sono utilizzate per organizzare e visualizzare i dati in modo razionale. + Rappresentazione organizzata di dati in righe e colonne per visualizzare informazioni in modo strutturato e facilitare il confronto tra più elementi. image: null canonical: null pathname: /design-system/componenti/tables/ @@ -23,7 +23,7 @@ components: addonClasses: mt-3 text-uppercase column: true subtitle: >- - Le tabelle di dati sono utilizzate per organizzare e visualizzare i dati in modo razionale + Rappresentazione organizzata di dati in righe e colonne per visualizzare informazioni in modo strutturato e facilitare il confronto tra più elementi imgRatio: 1x1 noBorder: true kangaroo: @@ -62,7 +62,23 @@ tabs: title: Quando usarlo headingLevel: 2 text: > - _In stesura_ + Il componente table, in italiano tabella, è ideale quando si desidera presentare dati strutturati in modo chiaro e organizzato. Una tabella consente di organizzare in modo logico le informazioni, raggruppando elementi simili, favorendo la comparazione e facilitando la comprensione di contenuti complessi. + + È particolarmente utile in contesti come: + + - gestione di inventari o elenchi di elementi, dove ogni voce può essere dettagliata attraverso colonne specifiche; + + - visualizzazione di dati comparativi, come tabelle di confronto tra prodotti o servizi; + + - presentazione di dati statistici, dove l'organizzazione in righe e colonne facilita l'analisi; + + - creazione di report o documenti che richiedono la suddivisione dei dati in categorie distinte. + + ### Alternative a questo componente + + - **[List](/design-system/componenti/list)**: nel caso siano presenti dati o informazioni non struttutrati. + + - **[Card](/design-system/componenti/card)**: per mostrare contenuti in sequenza e permettere la navigazione a pagine di dettaglio. - full: true noSpace: true paddingLeft: true @@ -72,7 +88,13 @@ tabs: title: Come usarlo headingLevel: 2 text: > - _In stesura_ + - Definisci in modo chiaro come presentare i dati, limitando il numero delle colonne. + + - Usa sempre le intestazioni delle colonne. + + - Crea tabelle facili da consultare, applicando gli stili di formattazione del testo per evidenziare i punti chiave. + + - Permetti di ordinare i contenuti di una colonna solo quando è necessario, utilizzando l’ordinamento alfabetico o numerico a seconda dei casi. - full: true noSpace: true paddingLeft: true @@ -244,7 +266,16 @@ tabs: title: Anatomia headingLevel: 2 text: > - _In stesura_ + ![Gli elementi che formano la cella di una tablle](/images/design-system/componenti/table-cell-anatomy.png) + + La cella di una tabella è composta da: + + 1. **sfondo**, che può essere trasparente o di vari colori a seconda delle esigenze; + + 2. **etichetta (label)**, il testo che fa parte della cella e che, nel caso di intestazioni, può essere in **bold** oppure maiuscoletto; + + 3. **bordo**, che può essere applicato a uno o più lati, a seconda dello stile della tabella. + - full: true noSpace: true paddingLeft: true @@ -254,7 +285,7 @@ tabs: title: Comportamento headingLevel: 2 text: > - _In stesura_ + Non sono previste indicazioni particolari. - full: true noSpace: true paddingLeft: true @@ -264,7 +295,13 @@ tabs: title: Specifiche di design headingLevel: 2 text: > - _In stesura_ + Le specifiche sono relative alle due dimensioni "large" e "small". + + Tutte le misure indicate sono espresse in `px`. + + ![Specifiche di design della cella di una tabella](/images/design-system/componenti/table-cell-specs.png) + + - full: true noSpace: true paddingLeft: true diff --git a/static/images/design-system/componenti/table-cell-anatomy.png b/static/images/design-system/componenti/table-cell-anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..62b765b6c29f315ab27fe665f7510db5159d3bff GIT binary patch literal 4746 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 literal 0 HcmV?d00001 diff --git a/static/images/design-system/componenti/table-cell-specs.png b/static/images/design-system/componenti/table-cell-specs.png new file mode 100644 index 0000000000000000000000000000000000000000..8d1694a3226ee73bb3fa11906277d1532494b98c GIT binary patch literal 7373 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 literal 0 HcmV?d00001