Velora UI v0.8.0
Design system per pannelli admin (SCSS + JS). In questa pagina ogni blocco indica le classi CSS da applicare e, sotto, l’anteprima reale del componente.
Naviga le sezioni dalla sidebar a sinistra. Aggiungere ?no_sidebar=1 alla URL nasconde la sidebar (utile per modali / iframe).
Scelte tipografiche
Font stack, gerarchie Proxima Nova e palette colori di riferimento.
Tipografia
Font di stack di base
-apple-system, BlinkMacSystemFont, "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", sans-serif
Proxima Nova Light — menu, pulsanti, titoli leggeri (fallback: stack di base).
Proxima Nova Regular — testo corpo, tooltip, elementi enfatizzati (fallback: stack di base).
Dimensioni — 12px, 13px, 14px (base), 18px, 20px, 22px, 24px.
Peso — font-weight normale (Light/Regular). Nessun grassetto predefinito nelle UI standard.
Colori principali
Semantici
Grigi
Layout core (M2 + v0.2)
Ogni blocco mostra prima le classi CSS da usare nel markup, poi l’anteprima reale. L’header globale in alto e la title bar sotto ripetono lo stesso pattern (barra scura + campioni bianchi).
Header: tutti i tipi in un'unica lista
.velora-header · .velora-header__*Title bar (titolo di pagina + azioni)
Stessa struttura della barra titolo sotto l’header di questa pagina (titolo a sinistra, azioni a destra).
.velora-title-bar · .velora-btnSidebar a larghezza fissa
La colonna laterale ha larghezza costante definita da --velora-sidebar-width. Il pulsante Più spazio commuta solo le etichette visibili (compatto / esteso), non la larghezza del layout; lo stato è salvato in localStorage.
Interazione dei dropdown header
I tipi single-menu, multi-menu, apps-menu
e notifications sono auto-inizializzati dal componente JS
header-menu: click sul trigger per aprire/chiudere, click
fuori chiude, ESC chiude, apertura mutuamente esclusiva (un solo
pannello aperto alla volta).
Form core (M3)
Classi .velora-form-row e modificatori per tipo campo; casi avanzati (data, multiselect, …) nella sezione Form avanzati.
Text + email
.velora-form-row.velora-form-row--text · .velora-form-row__inputEmail aziendale
Textarea
.velora-form-row--textarea · .velora-form-row__textareaSelect
.velora-form-row--select · .velora-form-row__selectCheckbox + onoff
.velora-form-row--checkbox · .velora-form-row--onoffRadio
.velora-form-row--radio · .velora-form-row__radio-listFile
.velora-form-row--fileJPEG o PNG, max 2MB
Stato di errore
.velora-form-row--errorValore non valido per questa demo
Search box + separator
.velora-search-box · .velora-fields-separatorTabelle (M4)
Classi .velora-table, .velora-pagination; selezione e celle editabili nella sezione Tabelle interattive.
.velora-table-wrapper · .velora-table · .velora-pagination| # | Nome | Ruolo | Importo | |
|---|---|---|---|---|
| 1 | Mario Rossi | mario@example.com | Admin | € 1.250,00 |
| 2 | Luca Bianchi | luca@example.com | Editor | € 480,50 |
| 3 | Giulia Verdi | giulia@example.com | Viewer | € 0,00 |
| 4 | Anna Neri | anna@example.com | Editor | € 2.100,75 |
Link essenziali (M4)
Varianti di link e pulsanti: classi .velora-link-* e .velora-btn.
Link testuali
Bottoni-link
Feedback (M5)
Alert inline, badge e toast: classi .velora-alert, .velora-label, .velora-toast.
Alert
.velora-alert · .velora-alert--success|error|warning|infoOperazione completata
Label / badge
.velora-label · .velora-label--*Toast (API JS)
.velora-toast (API JS Velora.toast.*)Toast da Django messages (server-side)
.velora-toast (django.contrib.messages)
Link di prova (nuova scheda): i messaggi server vengono mostrati come toast .velora-toast.
Overlays (v0.2)
Tooltip e dialog: attributi sui trigger e classi .velora-dialog__* per il pannello modale.
Tooltip
[data-velora-component="tooltip"]Dialog inline
.velora-dialog · .velora-dialog__*Progress (v0.2)
Tre componenti di progresso: barra classica con percentuale, breadcrumb di fasi numerate (wizard), barra "X di Y" per upload o sondaggi.
Progress bar classica
.velora-progress · .velora-progress__trackWizard steps
.velora-progress-steps · .velora-progress-steps__*Progress "X di Y"
.velora-progress-xy · .velora-progress-xy__*Form avanzati (v0.3)
Combinazioni aggiuntive di .velora-form-row--* (datepicker, multiselect, editor, …).
.velora-form-row.velora-form-row--datepicker · .velora-datepicker · .velora-form-row.velora-form-row--datetimepicker.velora-form-row.velora-form-row--multiselect · .velora-multiselect.velora-form-row--autocomplete · .velora-autocomplete · .velora-autocomplete--remote.velora-form-row--image-preview · .velora-image-preview · .velora-form-row--rating · .velora-rating · .velora-form-row--timer · .velora-timerInserisci ore, minuti e secondi
.velora-form-row--redactor · .velora-redactorTabelle interattive (v0.3)
Tabella con righe selezionabili, toolbar .velora-bulk-toolbar e celle .velora-cell-form.
.velora-bulk-toolbar · .velora-table.velora-table--selectable| # | Nome | Ruolo | Attivo | Piano | |
|---|---|---|---|---|---|
| 1 | Pro | ||||
| 2 | Free | ||||
| 3 | Pro |
.velora-cell-form · .velora-cell-form__input · __select · __checkbox · __onoffStruttura dati form_in_cell e API celle: AGENTS.md
Checkbox e Radio standalone (v0.3)
Checkbox e radio compatti: .velora-checkbox e varianti colore.
.velora-checkbox · .velora-checkbox--default|primary|info|success|danger.velora-checkbox (input type=radio)Grafici da tabella (Chart.js)
Grafico Chart.js in .velora-chart da dati in una tabella .velora-table.
.velora-table-wrapper · .velora-table · .velora-chart · canvas| Q1 | Q2 | Q3 | |
|---|---|---|---|
| Italia | 10 | 20 | 15 |
| Germania | 5 | 8 | 12 |
| Spagna | 8 | 7 | 9 |
Ionicons
SVG inline in .velora-icon; catalogo con ricerca in .velora-ionicons-gallery.
Icona (.velora-icon)
.velora-icon · .velora-icon--*Dimensioni (size) e hover tramite CSS
Pulsante e card
Galleria catalogo (ricerca AJAX)
.velora-ionicons-gallery · .velora-ionicons-gallery__*Ionicons
Per vedere tutte le icone scrivi «tutte» nella ricerca.
Tema scuro e marchio
Tema scuro su <html data-velora-theme>, marchio .velora-logo, barra .velora-satisfaction.
