Componi una bacheca di consegna funzionante con i token Vibe 4 e i controlli React. Scopri la differenza tra i colori semantici delle azioni e le etichette della bacheca, le spaziature nominali, le scorciatoie tipografiche e la configurazione esplicita di CSS necessaria per una nuova applicazione.
Interpretazione indipendente di HTML/CSS basata sulla palette del tema chiaro di Vibe verificata, sulle dimensioni di spaziatura e tipografia; carattere di fallback del sistema. · Riferimento per l’implementazione
02
Riferimento di design per il sistema di progettazione sistema di design Monday Vibe
Sorgente pubblica di Vibe 4 e integrazione con @vibe/core. I valori riportati di seguito sono le definizioni verificate del tema chiaro e degli stili; i colori delle etichette della bacheca sono distinti dai ruoli semantici di successo/errore. L'esempio nativo usa veri controlli Button di Vibe all'interno di una tabella HTML gestita dall'applicazione.
Sistema di design Monday Vibe: sviluppa usando gli attuali punti di accesso di Vibe
I componenti principali e il token CSS si importano separatamente
Vibe 4 espone i componenti React denominati tramite @vibe/core e le variabili CSS tramite @vibe/core/tokens. Importali entrambi in una nuova applicazione client. Un componente può iniettare i propri stili e continuare a usare le variabili fornite dal file dei token. L'esempio della bacheca usa una struttura tabellare nativa e i controlli Button di Vibe, con dati delle righe e selezione gestiti dall'applicazione.
Evita di mescolare versioni precedenti dei pacchetti
Il pacchetto precedente monday-ui-react-core appartiene a Vibe 2. Vibe 3 viene mantenuto per le correzioni critiche, non per aggiungere nuove funzionalità. Questa guida usa l'interfaccia attuale di Vibe 4 e le variabili di spaziatura numerate. L'integrazione non è un client SDK di monday.com e non dispone di connessioni a account, workspace o elementi API.
Sistema di design Monday Vibe: i colori delle azioni e le etichette della bacheca svolgono funzioni diverse
Usa ruoli semantici per i controlli
Le azioni principali usano il ruolo primary e il relativo colore hover. La selezione usa lo sfondo selected, mentre per il testo normale si usano i ruoli primary e secondary. Usa i valori del tema come un insieme coerente, invece di modificare isolatamente lo sfondo del corpo. Questo studio circoscritto si attiene al tema chiaro verificato.
La fonte include colori categorici per la bacheca accanto ai colori semantici per i feedback. Il verde «Fatto» è #00c875, mentre il colore semantico positivo è #00854d. Le celle di stato delle righe usano i colori della bacheca con testo leggibile e contrastante, mantengono le etichette «In corso», «Bloccato» e «Fatto» e non si affidano mai al solo colore per comunicare lo stato.
Sistema di design Monday Vibe Usa la notazione abbreviata completa per i font
I titoli e le righe di lavoro hanno caratteri distinti
La fonte assegna Poppins ai titoli e Figtree al testo del corpo, con fallback specifici per i sistemi di scrittura. La notazione abbreviata corrente h1-medium è 600 32px/40px, mentre text2-normal è 400 14px/20px. Applica la notazione con la proprietà CSS font, così peso, dimensione, interlinea e famiglia restano collegati. La fonte contiene anche alias obsoleti per le intestazioni: non sostituirli senza avviso con valori di scala diversi.
Vibe non importa automaticamente i file dei font consigliati. Aggiungi all’applicazione il link documentato al foglio di stile Figtree/Poppins HTML oppure ospita autonomamente file con licenza adeguata. L’esempio offline usa esplicitamente font di sistema come fallback: il risultato è quindi un’interpretazione, non una riproduzione dichiarata della tipografia esatta di monday.com.
Sistema di design Monday Vibe Una bacheca compatta senza controlli compressi
Gli spazi numerati definiscono il ritmo
Usa --space-8 tra le azioni adiacenti della barra degli strumenti, --space-16 per la spaziatura interna del pannello e --space-24 tra le aree della bacheca. Sono tutti nomi esatti della fonte corrente. Queste disposizioni sono scelte specifiche per questa applicazione. La scala comprende anche un intervallo di due pixel per gli allineamenti di precisione e valori più ampi, fino a ottanta pixel, per la composizione.
Sistema di design Monday Vibe Una tabella modificabile con una barra degli strumenti per le operazioni in blocco
Mantieni esplicita la struttura dei dati
Ogni elemento di lavoro ha un ID stabile, un titolo, un responsabile e uno stato. Le intestazioni native delle colonne spiegano questi valori. La casella di selezione di una riga aggiunge l’ID a un Set; quando cambia lo stato, l’oggetto corrispondente viene sostituito anziché modificare l’array. L’azione «Completa selezionati» legge lo stesso Set e aggiorna solo le righe selezionate. Il riepilogo dei completamenti deriva dalle righe.
Il pulsante primario per le azioni in blocco è disabilitato quando il Set di selezione è vuoto.
L’azione terziaria di ogni riga alterna lo stato locale a scopo dimostrativo.
L’azione di ripristino riporta le righe allo stato iniziale e cancella la selezione.
Sistema di design Monday Vibe Sistema di progettazione: esponi lo stato tramite il Button effettivo API
Disabilitato, in caricamento e premuto sono stati diversi
L’esempio nativo usa disabled per un’azione in blocco non disponibile. Non mostra stati di caricamento o di successo perché non è prevista alcuna operazione remota. Se colleghi un livello di persistenza reale, associa lo stato di caricamento al ciclo di vita della richiesta e aggiorna lo stato di successo solo dopo la conferma. Il sorgente di Button espone anche active per l’aspetto e aria-pressed per la semantica di attivazione: l’uno non sostituisce l’altro.
Non presentare le modifiche locali come operazioni di un servizio
Il messaggio dinamico indica quanti elementi locali sono cambiati. Non afferma che sia stata aggiornata una board di monday.com. Al ricaricamento, vengono ripristinati i dati di esempio iniziali. Un’integrazione di produzione richiederebbe autorizzazioni esplicite per l’area di lavoro, gestione degli errori e sincronizzazione al di fuori del livello del sistema di progettazione.
Sistema di design Monday Vibe Sistema di progettazione: mantieni il significato delle righe a ogni larghezza
Adatta con cura il layout della dimostrazione
Sui dispositivi con schermo stretto, la bacheca offline dispone ogni riga in una scheda con etichette. I nomi delle colonne vengono ripetuti come etichette visibili, così che responsabile e stato restino comprensibili. È una scelta di layout dell’applicazione, non l’affermazione che Vibe trasformi automaticamente ogni tabella. In alternativa, lo starter nativo mantiene una tabella semantica in un’area con scorrimento orizzontale e un’etichetta, adatta a dati più densi.
Applica box-sizing: border-box agli elementi e agli pseudoelementi prima di usare la libreria. Altrimenti, una cella di larghezza fissa con padding può superare le dimensioni previste, soprattutto quando un pulsante è annidato in una colonna densa. Mantieni flessibile il contenitore esterno e consenti alle azioni della barra degli strumenti di andare a capo.
Sistema di design Monday Vibe Sistema di progettazione: selezione e stato devono avere nomi indipendenti
Assegna un’etichetta a ogni controllo di riga
Una casella di selezione include il titolo dell’attività nel nome accessibile. Ogni azione di stato include il nome dell’elemento e il suo stato corrente. Un messaggio di stato non intrusivo comunica il risultato dell’operazione in blocco. Chi usa la tastiera può selezionare le righe, attivare il comando in blocco e reimpostare la bacheca con i controlli nativi; la pagina non introduce comportamenti di navigazione con i tasti freccia tipici dei fogli di calcolo.
Seleziona Design handoff e verifica che l’azione in blocco diventi disponibile.
Completa la selezione e controlla che il testo dello stato e il conteggio derivato corrispondano.
Reimposta e verifica che sia i dati sia la selezione delle caselle tornino allo stato iniziale.
Sistema di design Monday Vibe Sistema di progettazione: una voce client completa
Installa, importa, monta
La configurazione seguente è un file main.jsx per un progetto client React che contiene un elemento radice. Installa react, react-dom e @vibe/core@4, carica una sola volta il token CSS e applica il foglio di stile globale indicato. Il pacchetto attuale usa esportazioni ES module. L’estrazione degli stili lato server è documentata come sperimentale; questo starter usa intenzionalmente il rendering lato client.
Sistema di design Monday Vibe Esempi di componenti del sistema di progettazione
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS basata sulle dimensioni verificate della palette, della spaziatura e della tipografia del tema chiaro di Vibe; font di fallback del sistema.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Weekly delivery — Vibe study</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#323338;font:14px/20px Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:4px;padding:8px 16px;background:white;color:#323338}button:hover{background:#e7e9ef}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #0073ea;outline-offset:2px}.shell{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:600px}aside{padding:24px 16px;border-right:1px solid #d0d4e4;background:#fff}.brand{font-size:20px;font-weight:bold;margin-bottom:40px}.brand span{color:#0073ea}aside p{font-size:12px;color:#676879}aside strong{display:block;background:#cce5ff;padding:12px;border-radius:4px;color:#323338}main{padding:32px;min-width:0}h1{font-size:32px;line-height:40px;font-weight:600;margin:0 0 8px}.sub{color:#676879}.overview{margin:24px 0;display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:center}.count{font-size:32px;line-height:40px}.count small{font-size:14px;color:#676879}.bar{display:flex;border-radius:8px;overflow:hidden;height:16px;background:#e7e9ef}.bar span{transition:width .15s}.legend{display:flex;gap:16px;font-size:12px;margin-top:8px}.legend span:before{content:'●';color:var(--c);margin-right:4px}.tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.primary{background:#0073ea;color:white}.primary:hover{background:#0060b9}h2{font-size:18px;line-height:24px;color:#784bd1;font-weight:600}.board{border-left:6px solid #784bd1;border-radius:8px;background:white;overflow:hidden}.row,.head{display:grid;grid-template-columns:36px minmax(180px,1fr) 90px 130px;align-items:center;min-height:52px;border-bottom:1px solid #d0d4e4}.head{color:#676879;min-height:36px;font-size:12px}.row>*{padding:12px}.head>*{padding:8px}.row label{display:flex;align-items:center;justify-content:center}.row input{accent-color:#0073ea}.row .status{border-radius:0;height:100%;font-weight:500}.status[data-status=Working]{background:#fdab3d}.status[data-status=Stuck]{background:#df2f4a;color:white}.status[data-status=Done]{background:#00c875}.person{display:inline-flex;align-items:center;gap:8px}.avatar{width:24px;height:24px;border-radius:50%;background:#eceff8;display:inline-grid;place-items:center;font-size:11px}.row.selected{background:#f0f7ff}#message{min-height:24px;margin-top:16px;color:#676879}.mobile-label{display:none}footer{padding:16px 24px;color:#676879;font-size:11px;border-top:1px solid #d0d4e4}@media(max-width:800px){.shell{grid-template-columns:1fr}aside{display:none}main{padding:24px}}@media(max-width:560px){main{padding:16px}.overview{grid-template-columns:1fr;gap:12px}.head{display:none}.row{grid-template-columns:36px 1fr}.row .person,.row .status{grid-column:2}.row .status{margin:0 12px 12px;width:calc(100% - 24px);border-radius:4px}.mobile-label{display:inline;color:#676879;margin-right:8px}.row{padding:8px 0}.legend{flex-wrap:wrap}}</style><div class="shell"><aside><div class="brand"><span>▰</span> workroom</div><p>TEAM WORKSPACE</p><strong>Weekly delivery</strong><p>Sample project<br>No external account</p></aside><main><h1>Weekly delivery</h1><div class="sub">A shared view of the work moving this week.</div><section class="overview" aria-label="Completion summary"><div class="count"><span id="done">1</span><small> / 3 completed</small></div><div><div class="bar" aria-hidden="true"><span id="working-bar" style="background:#fdab3d"></span><span id="stuck-bar" style="background:#df2f4a"></span><span id="done-bar" style="background:#00c875"></span></div><div class="legend"><span style="--c:#fdab3d">Working</span><span style="--c:#df2f4a">Stuck</span><span style="--c:#00c875">Done</span></div></div></section><div class="tools"><button class="primary" id="complete" disabled>Complete selected</button><button id="reset">Reset board</button><span id="selection" style="padding:8px;color:#676879">0 selected</span></div><h2>▼ This week</h2><div class="board"><div class="head" aria-hidden="true"><span></span><span>Item</span><span>Owner</span><span>Status</span></div><div id="rows"></div></div><p id="message" role="status">Select items or click a status to change it locally.</p></main></div><footer>Independent Vibe 4 HTML/CSS study. Published light-theme and board-label colors; system fallback fonts. No monday.com workspace connection.</footer><script>
const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'},{id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'},{id:3,title:'Release notes',owner:'Sam',status:'Done'}],states=['Working','Stuck','Done'];let items=structuredClone(initial),selection=new Set();const $=id=>document.getElementById(id);function totals(){$('done').textContent=items.filter(x=>x.status==='Done').length;for(const state of states)$(state.toLowerCase()+'-bar').style.width=items.filter(x=>x.status===state).length/items.length*100+'%';$('complete').disabled=!selection.size;$('selection').textContent=selection.size+' selected'}function render(){$('rows').replaceChildren();for(const item of items){const row=document.createElement('div');row.className='row'+(selection.has(item.id)?' selected':'');const label=document.createElement('label'),check=document.createElement('input');check.type='checkbox';check.checked=selection.has(item.id);check.setAttribute('aria-label','Select '+item.title);check.onchange=()=>{check.checked?selection.add(item.id):selection.delete(item.id);row.classList.toggle('selected',check.checked);totals()};label.append(check);const name=document.createElement('span');name.textContent=item.title;const person=document.createElement('span');person.className='person';const av=document.createElement('span');av.className='avatar';av.setAttribute('aria-hidden','true');av.textContent=item.owner[0];const pl=document.createElement('span');pl.className='mobile-label';pl.textContent='Owner';person.append(pl,av,document.createTextNode(item.owner));const status=document.createElement('button');status.className='status';status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');status.onclick=()=>{item.status=states[(states.indexOf(item.status)+1)%states.length];status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');totals();$('message').textContent=item.title+' is now '+item.status+' locally.'};row.append(label,name,person,status);$('rows').append(row)}totals()}
$('complete').onclick=()=>{let n=selection.size;items.forEach(x=>{if(selection.has(x.id))x.status='Done'});selection.clear();render();$('message').textContent=n+' local items completed.'};$('reset').onclick=()=>{items=structuredClone(initial);selection.clear();render();$('message').textContent='Board reset.'};render();
</script></html>
La barra degli strumenti in blocco modifica gli stati delle attività di esempio. I colori delle etichette descrivono il flusso di lavoro di questa bacheca e non sostituiscono i token semantici di azione di Vibe.
Implementazione nativa completa
L’implementazione completa descritta nella configurazione, raccolta qui insieme alle spiegazioni specifiche di API. Segui i prerequisiti documentati per pacchetti e build nella configurazione.
Voce locale completa della bacheca; aggiungi board.css dall’esempio del componente. I font non vengono inclusi automaticamente. Il pacchetto nativo API è stato verificato rispetto alla fonte ufficiale; in questo ambiente l’esempio del pacchetto non è stato compilato.
Foglio di stile della bacheca basato sui token
Usa l’esportazione dei token per il layout e la tipografia. La regione contenitore mantiene la tabella semantica utilizzabile anche con larghezze ridotte.
Questa configurazione di font ospitati autonomamente e con licenza può sostituire il foglio di stile esterno.
04
Sistema di design Monday Vibe Configurazione dell’agente per il sistema di progettazione
Punto di partenza per l’implementazione
Voce locale completa della bacheca; aggiungi board.css dall’esempio del componente. I font non vengono inclusi automaticamente. Il pacchetto nativo API è stato verificato rispetto alla fonte ufficiale; in questo ambiente l’esempio del pacchetto non è stato compilato.
Crea la bacheca di consegna Vibe 4 fornita. Importa @vibe/core/tokens, usa le variabili di spaziatura numerate attuali e le forme abbreviate complete dei font, e mantieni distinti i colori semantici di feedback da quelli delle etichette della bacheca. Implementa la selezione locale delle righe, la modifica degli stati e un conteggio derivato degli elementi completati. Usa disabled sul pulsante in blocco; non simulare il salvataggio remoto.
05
Sistema di design Monday Vibe Fonti e ambito del sistema di progettazione
Riferimento indipendente a Vibe 4 e demo locale della bacheca. Nessun account monday.com, dato di workspace o collegamento SDK. Lo starter nativo usa i controlli Button reali di Vibe e markup della tabella gestito dall’applicazione.
