Un sito su WebBlocks UI costruito solo con WebBlocks UI

Questa demo spiega il progetto, il modello a livelli, i primitives inclusi, i patterns e il comportamento JavaScript usando esclusivamente le risorse del pacchetto e le classi wb-* che esso fornisce.

Solo pacchetto Nessun CSS personalizzato Nessun JS personalizzato

Che cosa dimostra questa pagina

WebBlocks UI è in grado di documentarsi da sé senza un livello di presentazione separato. Questa guida non aggiunge CSS di supporto, script di utilità o classi inventate.

Che cosa contiene il pacchetto

Livelli dell'architettura

6

Foundation, utilities, layout, primitives, patterns, icons

Dipendenze

0

Il pacchetto in sé non richiede alcun framework

JavaScript

14+

Moduli per tema, overlay, navigazione, feedback e disclosure

Icons

173

Uso delle icone con mask-image basato su classi

Leggi il sistema nell'ordine giusto

Per iniziare Inclusione dei file, attributi root, primo flusso

Parti da questa pagina se ti serve il percorso di setup corretto più breve per un progetto reale.

Architettura Il modello a sei livelli

Usa questa pagina quando devi capire dove stanno i token, il layout, i primitives, i patterns e le icons.

Foundation Token, intestazioni, assi del tema

Usa questa pagina per gli attributi di tema sulla radice, la modalità scura, i preset, la tipografia predefinita, i token di spaziatura e lo stile degli elementi nudi.

Layout Container, griglie, shell

Usa questa pagina per wb-container, wb-grid, wb-row, navbar, sidebar e la struttura del page-shell.

Primitives Blocchi inclusi nel pacchetto

Usa questa pagina per esaminare i controlli, le surface, i form e le interaction shell realmente inclusi.

Icons Riferimento delle classi mask-image

Usa questa pagina quando ti servono i nomi delle classi delle icone incluse, il comportamento degli alias e la via dell'icona <i> basata su classi.

Patterns Composizioni a livello di schermata

Usa questa pagina quando la domanda riguarda il tipo di pagina, la gerarchia o la composizione e non un singolo primitive.

Playground Anteprima dal vivo solo in HTML

Usa questo strumento per incollare HTML semplice, renderizzarlo con le risorse reali di WebBlocks UI e verificare rapidamente frammenti generati dall'IA o scritti a mano.

Utilities Aiuti per spaziatura, testo e allineamento

Usa questa pagina per gli aiuti di spaziatura, le dimensioni del testo, le utilities di colore, gli aiuti di visibilità e gli aggiustamenti finali di composizione.

JavaScript Hook dei dati e API pubbliche

Usa questa pagina quando conta il modello di interazione e ti serve il pattern di attivazione corretto o il nome del modulo pubblico.

Parti da un esempio reale incluso nel pacchetto

Quando il compito della pagina è già chiaro, copiare l'esempio di pattern più vicino da questa guida è più sicuro che ricostruire la schermata a memoria. Parti dall'intera struttura, sostituisci il contenuto e poi taglia senza timore.

Dashboard di amministrazione Sidebar, topbar, statistiche, tabelle

Usalo quando la pagina è molto applicativa e servono navigazione, metriche, azioni di riga e dati facili da scorrere.

Impostazioni di amministrazione Form più lunghi e azioni per sezioni

Usalo quando la pagina è guidata da impostazioni raggruppate, azioni distruttive e flussi di form più lenti.

Login Flusso di accesso mirato

Usalo quando la schermata deve restare stretta, silenziosa e centrata su un unico compito di form.

Home pubblica Ritmo dell'hero e superfici promozionali

Usalo quando la pagina è orientata al marketing e serve un flusso di contenuti più calmo invece della densità amministrativa.

Content Shell Documentazione, onboarding e flussi incentrati sul testo

Usalo quando la pagina ha bisogno di struttura, riferimenti e una progressione leggibile più che di cromature di prodotto.