# Sistema di progettazione Tabler ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Tabler Esamina le decisioni e gli studi delle copertine, aggiungi un checkpoint convalidato e cambia la modalità colore nativa. ## Riferimento di progettazione del sistema di progettazione sistema di design Tabler Variabili compilate CSS 1.6.1 Tabler. Questa versione usa primitive OKLCH e light-dark()/color-mix() nei ruoli semantici; gli esempi Tabler più datati basati su valori esadecimali non vanno considerati lo stesso tema. I valori riportati sotto sono quelli effettivi predefiniti nell’installazione. ### Colori predefiniti di stato e azione | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --tblr-primary | oklch(54.6% 0.1724 254.2deg) | Ruolo dell’azione principale. | | --tblr-secondary | oklch(55.55% 0 0deg) | Ruolo secondario. | | --tblr-success | oklch(67.38% 0.1885 145.43deg) | Ruolo di successo. | | --tblr-info | oklch(66.26% 0.1358 246.81deg) | Ruolo informativo. | | --tblr-warning | oklch(77.02% 0.1658 71.02deg) | Ruolo di avviso. | | --tblr-danger | oklch(58.29% 0.1941 25.59deg) | Ruolo di pericolo. | | --tblr-purple | oklch(57.83% 0.2186 319.15deg) | Colore della categoria di prototipo in questa applicazione. | | --tblr-body-color | light-dark(oklch(26.86% 0 0deg), oklch(92.19% 0 0deg)) | Il testo si adatta allo schema di colori corrente. | | --tblr-body-bg | light-dark(oklch(98.51% 0 0deg), oklch(20.46% 0 0deg)) | Lo sfondo della pagina si adatta allo schema di colori. | | --tblr-bg-surface | light-dark(var(--tblr-bg-surface-primary), var(--tblr-gray-800)) | Ruolo dello sfondo di schede/superfici. | ### Tipografia del corpo e scala degli angoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --tblr-font-sans-serif | system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | Stack sans-serif di sistema nella versione installata. | | --tblr-body-font-size | 0.875rem | Equivalente predefinito di 14px con una radice del browser di 16px. | | --tblr-body-font-weight | 400 | Spessore normale del testo del corpo. | | --tblr-body-line-height | 1.4285714286 | Circa 20px con la dimensione predefinita del testo del corpo. | | --tblr-border-radius | 6px | Raggio predefinito di 6px. | | --tblr-border-radius-sm | 4px | Raggio small di 4px. | | --tblr-border-radius-lg | 8px | Raggio grande di 8px. | | --tblr-border-radius-xl | 1rem | Raggio extra-large di 1rem. | | --tblr-border-radius-pill | 100rem | Arrotondamento delle pillole. | ### Spaziatura e geometria nativa della timeline | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --tblr-spacer-0 | 0 | Valore di spaziatura nativo con nome. | | --tblr-spacer-1 | 0.25rem | Valore di spaziatura nativo con nome. | | --tblr-spacer-2 | 0.5rem | Valore di spaziatura nativo con nome. | | --tblr-spacer-3 | 1rem | Valore di spaziatura nativo con nome. | | --tblr-spacer-4 | 1.5rem | Valore di spaziatura nativo con nome. | | --tblr-spacer-5 | 2rem | Valore di spaziatura nativo con nome. | | --tblr-spacer-6 | 2.5rem | Valore di spaziatura nativo con nome. | | --tblr-page-padding | var(--tblr-spacer-3) | Variabile di spaziatura tra pagina e timeline; le sovrascritture responsive possono modificarla. | | --tblr-card-spacer-x | 1.25rem | Padding orizzontale predefinito del corpo della scheda. | | --tblr-card-spacer-y | 1.25rem | Padding verticale predefinito del corpo della scheda. | | --tblr-timeline-icon-size | 2.5rem | Nodo icona da 40px con una radice predefinita di 16px. | ### Scelte originali del diario | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Project layout | col-lg-8 + col-lg-4 | Griglia nativa; due colonne dal breakpoint lg. | | Page padding | 32px; 24px 14px below 650px | Rientro originale dell’applicazione. | | Journal title | 32px / 1.2; 27px on mobile | Sovrascrittura originale del titolo della pagina. | | Cover studies | 155px tall; 120px on mobile | Illustrazione decorativa originale CSS. | ## Guida completa al sistema di progettazione sistema di design Tabler Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di progettazione sistema di design Tabler Usa il tema corrispondente alla versione di Tabler ### Usa il tema corrispondente alla versione di Tabler > Il diario del progetto è realizzato con Tabler 1.6.1. La palette compilata usa colori OKLCH, mentre le variabili semantiche usano light-dark e color-mix. Il riferimento riporta quindi le espressioni effettive anziché copiare valori esadecimali da una vecchia guida Bootstrap o Tabler. L’azione principale, i badge di stato e i ruoli delle superfici provengono tutti da questa versione installata. Tabler amplia il vocabolario dei componenti Bootstrap con propri schemi di layout e di visualizzazione delle informazioni. L’esempio usa le classi native timeline, page-header, datagrid e avatar insieme a schede, moduli e un modal familiari. Questi dettagli ne fanno una composizione Tabler, anziché una griglia generica di schede con un logo diverso. Leggi la specifica di supporto ## La modalità colore del sistema di progettazione sistema di design Tabler cambia le superfici oltre al testo ### Il cambio di modalità colore modifica sia le superfici sia il testo Il controllo del tema modifica data-bs-theme sull’elemento html e aggiorna il proprio stato premuto e l’etichetta dell’azione. Le espressioni semantiche di Tabler scelgono quindi i valori chiari o scuri. Per questo semplice esempio a due stati non serve un gestore del tema JavaScript separato e le preferenze non vengono salvate al di fuori della pagina. Decisione, Prototipo e Revisione usano le classi native per le sfumature blu, viola e verdi. Le etichette testuali mantengono il loro significato senza dipendere solo dal colore. Le illustrazioni degli studi di copertina conservano la palette originale, simile alla carta, in entrambe le modalità; le schede circostanti, la pagina e il testo usano il tema effettivo dei componenti. Leggi la specifica di supporto ## Sistema di design Tabler Sistema di progettazione: caratteri compatti per il testo corrente e gerarchia distinta per la pagina ### Testo compatto per il corpo con una gerarchia di pagina distinta Il testo corrente predefinito è di 0.875rem, con un’altezza della riga di circa 1.4286: su una radice di sedici pixel corrisponde a un testo di circa quattordici pixel. Lo stack di caratteri installato usa i caratteri sans-serif di sistema, quindi questa anteprima non richiede caratteri remoti. I titoli delle schede e i metadati mantengono le classi native, mentre il titolo della pagina usa una dimensione originale di trentadue pixel. I valori nativi di spaziatura aumentano secondo la sequenza 0, 0.25, 0.5, 1, 1.5, 2 e 2.5rem. Sono variabili denominate nel CSS installato, non una scala ipotizzata. La spaziatura interna predefinita del corpo della scheda è di 1.25rem in entrambe le direzioni. Il nodo della timeline è di 2.5rem e il connettore usa la variabile di spaziatura della pagina per colmare il vuoto tra le voci. Leggi la specifica di supporto ## Sistema di design Tabler Sistema di progettazione: una timeline è più di un bordo verticale ### Una timeline è più di un bordo verticale Ogni punto di revisione è un elemento di lista timeline-event, con timeline-event-icon e timeline-event-card. Il CSS nativo posiziona il nodo, disegna il connettore tra le voci non finali e distanzia la scheda del contenuto in base alla larghezza del nodo più la spaziatura della pagina. Questo esempio non simula la linea con un’immagine di sfondo né si affida a posizioni assolute per ogni scheda. Le schede variano per contenuto. Una registra una decisione strutturale, una contiene tre studi di copertina effettivi e una registra la revisione dei riferimenti. Il contesto del progetto è fuori dalla sequenza perché il formato e il focus attuale sono attributi persistenti, non eventi datati. Sugli schermi più piccoli, la barra laterale segue la timeline nell’ordine del documento. Leggi la specifica di supporto ## Sistema di design Tabler Sistema di progettazione: usare datagrid per piccoli gruppi di etichette e valori ### Usa Datagrid per piccoli gruppi di etichette e valori La scheda Contesto del progetto usa coppie datagrid-item, datagrid-title e datagrid-content. Formato, Team, Punti di revisione e Focus attuale sono attributi sullo stesso piano, quindi vengono presentati in un datagrid nativo compatto anziché in una tabella con intestazioni di riga ridondanti. Gli avatar iniziali usano le iniziali testuali e non richiedono immagini remote. Il conteggio dei punti di revisione è l’unico valore del contesto modificato da questo esempio. Aggiungendo una voce locale, il conteggio passa da tre a quattro, mentre la descrizione originale del progetto rimane invariata. Si evitano così metriche di dashboard inventate: il numero corrisponde direttamente alle voci visibili nell’elenco. Leggi la specifica di supporto ## Sistema di design Tabler Sistema di progettazione: la modale integrata gestisce visibilità e focus ### Il modal incluso gestisce visibilità e focus Il pulsante Aggiungi punto di revisione apre la modale nativa tramite data-bs-toggle e data-bs-target. Il JavaScript Tabler integrato fornisce l’implementazione della modale. Un listener per shown.bs.modal porta il focus sul campo del titolo al termine della transizione, quando l’input è effettivamente visibile. Chiudi e Annulla usano data-bs-dismiss per seguire lo stesso ciclo di vita del componente. La modale contiene un vero modulo. I vincoli di obbligatorietà e lunghezza rifiutano i campi incompleti prima che venga eseguito il gestore dell’invio. Il gestore verifica anche la lunghezza dopo aver rimosso gli spazi iniziali e finali, perché una stringa di soli spazi non è un titolo o una motivazione utile. La convalida mantiene il testo inserito disponibile per le correzioni; il modulo viene azzerato solo dopo l’aggiunta riuscita di una voce. 1. Apri la modale e invia i campi vuoti per individuare il primo controllo non valido. 2. Inserisci un titolo, scegli un tipo di punto di revisione e spiegane la motivazione. 3. Invia e verifica che la nuova voce e il conteggio nel contesto si aggiornino insieme. Leggi la specifica di supporto ## Sistema di design Tabler Sistema di progettazione: inserire testo in modo sicuro e indicare chiaramente i limiti locali ### Aggiungi testo sicuro e indica il confine dell’elaborazione locale L’applicazione crea una struttura di scheda nota e inserisce il titolo e la motivazione con textContent. Solo una mappatura fissa dei tre tipi del menu a discesa sceglie la classe per la sfumatura. Il testo fornito dall’utente non viene mai interpolato nel HTML della scheda. La nuova voce viene inserita in cima con l’etichetta chiara VOCE LOCALE, non con un timestamp del server inventato. Dopo l’inserimento, l’istanza della modale esistente si chiude e una notifica di stato indica il nuovo punto di revisione. Specifica chiaramente che non è stato aggiornato alcun servizio del progetto. Un vero diario collaborativo richiederebbe persistenza, identità degli autori e garanzie sull’ordinamento; l’aggiunta di un elemento al DOM locale non offre queste funzionalità. Leggi la specifica di supporto ## Sistema di design Tabler Sistema di progettazione: mantenere leggibili i contenuti densi in una timeline compatta ### Mantieni leggibili i contenuti densi in una timeline stretta La griglia principale usa col-lg-8 e col-lg-4. Al di sotto del breakpoint grande nativo, il contesto del progetto si dispone sotto il diario. Il foglio di stile originale per schermi piccoli riduce la distanza laterale della timeline, consente ai gruppi di titoli e badge di andare a capo e ridimensiona gli studi di copertina, mantenendo invariati testi e azioni. Una timeline può diventare affollata quando la colonna delle icone, la spaziatura interna delle schede e un titolo lungo competono per la stessa larghezza. L’esempio per dispositivi mobili mantiene il nodo come riferimento stabile, ma usa un rientro compatto. Gli studi di copertina originali restano tre piccoli confronti perché la loro relazione è importante; le didascalie sono accessorie rispetto al paragrafo esplicativo adiacente. - Mantieni leggibili il titolo e il tipo di punto di revisione quando vanno a capo. - Conserva il testo della motivazione invece di troncare ogni voce della timeline. - Sui dispositivi mobili, mostra la scheda del contesto dopo la sequenza di lettura principale. Leggi la specifica di supporto ## Sistema di design Tabler Sistema di progettazione: caricare un abbinamento coerente di CSS e JavaScript ### Carica una coppia CSS e JavaScript compatibile La configurazione usa @tabler/core 1.6.1 e copia le risorse dist in una directory pubblica locale. Carica tabler.min.css prima del foglio di stile dell’applicazione e tabler.min.js prima del codice di interazione locale. Aggiungere un secondo bundle Bootstrap non correlato potrebbe inizializzare due volte gli stessi attributi data; questo esempio usa solo il bundle Tabler corrispondente. Il foglio di stile attuale usa funzioni colore moderne. Consulta le indicazioni di Tabler sulla compatibilità dei browser prima di adottarlo in un prodotto con requisiti di supporto per browser meno recenti. L’esempio locale è stato verificato in Chromium per la convalida nativa della modale, l’inserimento nella timeline, la modalità scura e un layout da 390px; non è una distribuzione in produzione né una garanzia per ogni browser possibile. Leggi la specifica di supporto ## Sistema di design Tabler Esempi di componenti del sistema di progettazione ### Timeline, scheda del contesto e modale di inserimento Struttura nativa di timeline-event, card, datagrid, badge e modal. ```
TABLER · PROJECT JOURNAL

Atlas field notes

Decisions, prototypes and review checkpoints for a small editorial project.

  • A clearer route through the issue

    Decision
    Alex Morgan · 02 OCT

    Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.

  • Three cover directions

    Prototype
    Jules Chen · 01 OCT
    ATLASRIDGE / 01
    ATLASRIVER / 02
    ATLASPLAIN / 03

    Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.

  • Reference package reviewed

    Review
    Sam Rivera · 30 SEP

    Image captions, credit lines and print dimensions are recorded alongside each selected reference.

``` Riferimento del codice - La timeline è un vero elenco, nell’ordine di lettura. - Il contesto del progetto usa coppie datagrid di titolo e contenuto. - Il pulsante di apertura della modale usa gli attributi data API compatibili con Bootstrap integrato. ### Aggiunta locale convalidata di un punto di revisione Ciclo di vita della modale, inserimento sicuro del testo, sincronizzazione del conteggio e modalità colore. ``` const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3; modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus()); q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';}; q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`

You · LOCAL ENTRY

`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity('')); ``` Riferimento del codice - Le stringhe inserite dall’utente vengono assegnate con textContent. - La modale viene azzerata solo dopo l’aggiunta di una voce valida. - La notifica dichiara che non è stato aggiornato alcun servizio del progetto. ### Layout originale del diario e studi di copertina Adattamenti responsive attorno ai componenti nativi Tabler. ``` html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}} ``` Riferimento del codice - Le illustrazioni di copertina originali rappresentano tre studi di progettazione fittizi. - Il documento usa l’altezza del contenuto per l’incorporamento. ## Sistema di design Tabler Configurazione dell’agente IA per il sistema di progettazione ### Punto di partenza per l’implementazione Verificato con Tabler 1.6.1. Salva i moduli di layout e applicazione allegati come style.css e app.js. Usa gli attributi data API della modale nativa. Il wrapper HTML include l’intero markup del body; salva gli esempi forniti di interazione e CSS con i nomi file indicati qui. ```
TABLER · PROJECT JOURNAL

Atlas field notes

Decisions, prototypes and review checkpoints for a small editorial project.

  • A clearer route through the issue

    Decision
    Alex Morgan · 02 OCT

    Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.

  • Three cover directions

    Prototype
    Jules Chen · 01 OCT
    ATLASRIDGE / 01
    ATLASRIVER / 02
    ATLASPLAIN / 03

    Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.

  • Reference package reviewed

    Review
    Sam Rivera · 30 SEP

    Image captions, credit lines and print dimensions are recorded alongside each selected reference.

``` ### Un prompt per il tuo progetto ``` Usa Tabler 1.6.1 per riprodurre il diario del progetto Atlas con timeline, schede del contesto, datagrid e modale nativa. Mantieni il modulo convalidato per i punti di revisione separato dalla timeline confermata: annullando il diario resta invariato, mentre un invio valido aggiunge il punto di revisione inserito ai record locali. Conserva gli attributi data-bs, il bundle Tabler corrispondente e lo stile del tema. Mantieni gli studi di copertina originali come elementi decorativi e assicurati che il testo dei punti di revisione sia leggibile sugli schermi stretti. Non suggerire la presenza di un inventario infrastrutturale o di una pubblicazione esterna. ``` ## Sistema di design Tabler Fonti e ambito del sistema di progettazione Tabler 1.6.1. Le variabili effettive del tema e i componenti nativi sono distinti dai contenuti originali del progetto e dalle illustrazioni di copertina. I nuovi punti di revisione restano locali. - Installazione Risorse del pacchetto corrispondente. - Colori Riferimento ai ruoli del tema. - Tipografia Stili tipografici nativi. - Timeline Struttura di nodo, connettore e scheda evento. - Datagrid Attributi compatti del progetto. - Modal Configurazione della modale nativa. - Modalità colore Controllo del tema chiaro e scuro. ## Sistema di design Tabler Risorse correlate del sistema di progettazione ### Tamagui Esplora le categorie effettive dei token v5 di Tamagui e i temi blu chiaro/scuro attraverso una bacheca completa delle abitudini con componenti nativi, convalida, progressi e recupero dallo stato vuoto. ### UIkit UIkit combina un framework CSS, la personalizzazione Less e componenti JavaScript basati su attributi. Lo Switcher, l’Accordion e la griglia responsive collaborano nel pianificatore di workshop qui sotto, mostrando dove termina il comportamento nativo dei componenti e dove inizia lo stato di selezione dell’applicazione. ### Vant Un flusso mobile di selezione dell’indirizzo realizzato con Vant 4: variabili CSS reali, identità dell’indirizzo controllata, convalida dei campi, cambio di tema e salvataggio esplicitamente limitato al dispositivo. - [Riferimento per l’implementazione](https://docs.tabler.io/ui/components/timeline) - [Fonte](https://docs.tabler.io/ui/base/colors) - [Fonte](https://docs.tabler.io/ui/base/typography) - [Fonte](https://docs.tabler.io/ui/components/timeline) - [Fonte](https://docs.tabler.io/ui/components/card) - [Leggi la specifica di supporto](https://docs.tabler.io/ui/getting-started/upgrade-to-1.6) - [Leggi la specifica di supporto](https://docs.tabler.io/ui/getting-started/color-modes) - [Leggi la specifica di supporto](https://docs.tabler.io/ui/base/typography) - [Leggi la specifica di supporto](https://docs.tabler.io/ui/components/timeline) - [Leggi la specifica di supporto](https://docs.tabler.io/ui/components/data-grid) - [Leggi la specifica di supporto](https://docs.tabler.io/ui/components/modal) - [Leggi la specifica di supporto](https://docs.tabler.io/ui/layout/page-layouts) - [Leggi la specifica di supporto](https://docs.tabler.io/ui/getting-started/installation) - [Riferimento del codice](https://docs.tabler.io/ui/components/timeline) - [Riferimento del codice](https://docs.tabler.io/ui/components/modal) - [Riferimento del codice](https://docs.tabler.io/ui/layout/page-layouts) - [Installazione Risorse del pacchetto corrispondente.](https://docs.tabler.io/ui/getting-started/installation) - [Colori Riferimento ai ruoli del tema.](https://docs.tabler.io/ui/base/colors) - [Tipografia Stili tipografici nativi.](https://docs.tabler.io/ui/base/typography) - [Timeline Struttura di nodo, connettore e scheda evento.](https://docs.tabler.io/ui/components/timeline) - [Datagrid Attributi compatti del progetto.](https://docs.tabler.io/ui/components/data-grid) - [Modal Configurazione della modale nativa.](https://docs.tabler.io/ui/components/modal) - [Modalità colore Controllo del tema chiaro e scuro.](https://docs.tabler.io/ui/getting-started/color-modes)