Velora UI v0.5.0

Framework Django per pannelli admin: template tag riusabili, design system SCSS, JavaScript vanilla a moduli ES. Questa pagina mostra i componenti documentati nello styleguide con snippet copia-incollabili.

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

Grigio extra scuro #4b4b4b — testo

Menu gray #4F5D72

Arancio #F5A000 — CTA, attivo

Arancio scuro #E58D00 — hover

Semantici

Rosso #c1282e — errore, elimina

Verde #7AB55C — successo, menu

Sfondo menu #333A3F

Menu scuro #1D2328

Grigi

#FAFBFC

#EBEEF0

#D3DBE2

#868686

#666666

#333333

#262626

Layout core (M2 + v0.2)

velora_ui/base.html + tag velora_header e velora_title_bar. La sidebar dello showcase, l'header in alto e la title bar di questa pagina sono il render live di questi componenti. L'header in alto contiene un esempio di tutti i tipi item supportati: link, single-menu, multi-menu, logo, apps-menu, notifications, user-menu.

Header v0.1: link + user-menu

{% velora_header items=[
    {"type": "link", "label": "Dashboard", "url": "/", "active": True},
    {"type": "link", "label": "Documentazione", "url": "/docs/"},
    {"type": "user-menu", "label": "Mario Rossi", "url": "/me/"},
] %}

Header v0.2: single-menu (dropdown semplice)

{% velora_header items=[
    {"type": "single-menu", "label": "Account",
     "items": [
         {"label": "Profilo",     "url": "/profile/"},
         {"label": "Impostazioni", "url": "/settings/"},
         {"label": "Esci",         "url": "/logout/"},
     ]},
] %}

Header v0.2: multi-menu (mega-menu a colonne)

Velora UI

{% velora_header items=[
    {"type": "multi-menu", "label": "Risorse",
     "sections": [
         {"label": "Sviluppo",
          "items": [{"label": "Form", "url": "/form/"},
                    {"label": "Tabelle", "url": "/tab/"}]},
         {"label": "Community",
          "items": [{"label": "Repo", "url": "https://github.com/..."}]},
     ]},
] %}

Header v0.2: apps-menu (griglia di app launcher)

{% velora_header items=[
    {"type": "apps-menu", "label": "App",
     "apps": [
         {"label": "Calendario", "url": "/cal/", "color": "#4285f4"},
         {"label": "Drive",      "url": "/drive/", "color": "#34a853"},
         {"label": "Mail",       "url": "/mail/", "color": "#ea4335"},
     ]},
] %}

Header v0.2: notifications (campanella + lista)

{% velora_header items=[
    {"type": "notifications", "label": "Notifiche", "unread_count": 3,
     "items": [
         {"title": "Nuovo cliente", "body": "Mario Rossi si è registrato.",
          "url": "/n/1/", "timestamp": "2 minuti fa", "unread": True},
         {"title": "Backup completato", "url": "/n/2/", "timestamp": "1 ora fa"},
     ],
     "footer_label": "Vedi tutte", "footer_url": "/notifications/"},
] %}

Header v0.2: logo (marchio aggiuntivo inline)

{% velora_header items=[
    {"type": "logo", "label": "AcmeCorp", "url": "/acme/"},
] %}

Title bar con azioni

Dashboard

Annulla Salva

{% velora_title_bar
    title="Dashboard"
    actions=[
        {"label": "Annulla", "url": "/cancel/", "variant": "secondary"},
        {"label": "Salva", "url": "/save/", "variant": "primary"},
    ]
%}

Sidebar collassabile

Cliccando Più spazio in fondo alla sidebar si commuta la classe velora-app--sidebar-collapsed sul body; lo stato è persistito 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 toggle il pannello, click fuori chiude, ESC chiude, apertura mutuamente esclusiva (un solo pannello aperto alla volta). Si usano in produzione attaccando un contesto reale al tag, qui sopra mostrano solo la firma copia-incollabile.

Form core (M3)

7 tipi base di velora_form_row + search box + separator. Tipi avanzati (datepicker, multiselect, autocomplete, redactor, image preview) rimandati a v0.2 / v0.3.

Text + email

Email

Email aziendale

{% velora_form_row
    type="text"
    name="email"
    label="Email"
    input_type="email"
    placeholder="mario@example.com"
    required=True
    help_text="Email aziendale"
%}

Textarea

Bio

{% velora_form_row
    type="textarea"
    name="bio"
    label="Bio"
    rows=3
    placeholder="Descrizione breve..."
%}

Select

Ruolo

{% velora_form_row
    type="select"
    name="role"
    label="Ruolo"
    choices=role_choices
    empty_label="-- seleziona --"
%}

Checkbox + onoff

Accetto i termini

Notifiche email

{% velora_form_row type="checkbox" name="terms" label="Accetto i termini" %}
{% velora_form_row type="onoff" name="notifications" label="Notifiche email" value=True %}

Radio

Piano

Free Pro Enterprise

{% velora_form_row
    type="radio"
    name="plan"
    label="Piano"
    choices=plan_choices
    value="pro"
%}

File

Avatar

JPEG o PNG, max 2MB

{% velora_form_row
    type="file"
    name="avatar"
    label="Avatar"
    accept="image/*"
    help_text="JPEG o PNG, max 2MB"
%}

Stato di errore

Campo con errore

Valore non valido per questa demo

{% velora_form_row
    type="text"
    name="invalid"
    label="Campo con errore"
    value="x"
    error="Valore non valido per questa demo"
%}

Search box + separator

oppure

{% velora_search_box name="q" placeholder="Cerca componenti..." %}
{% velora_fields_separator label="oppure" %}
{% velora_search_box name="q2" placeholder="Altra search..." %}

Tabelle (M4)

velora_table e velora_pagination. Le tabelle interattive (form-in-cell AJAX, select_all_table_rows) arrivano in v0.3.

#	Nome	Email	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

{% velora_table headers=table_headers rows=table_rows %}
{% velora_pagination page=table_page base_url="/?status=open" %}

Link essenziali (M4)

4 tipologie di link per popolare le colonne azioni e le call-to-action: action (arancio), nav (blu), delete (rosso, con conferma JS), btn_link (bottone-link generico).

Link testuali

Modifica Dettagli Elimina

{% velora_action_link url=item.edit_url label="Modifica" %}
{% velora_nav_link url=item.detail_url label="Dettagli" %}
{% velora_delete_link url=item.delete_url confirm_message="Eliminare?" %}

Bottoni-link

Annulla Salva

{% velora_btn_link url=cancel_url label="Annulla" variant="secondary" %}
{% velora_btn_link url=save_url   label="Salva"   variant="primary"   %}

Feedback (M5)

Alert inline, badge e toast fluttuanti. I toast hanno API imperativa Velora.toast.success(msg) e sono integrati col framework django.contrib.messages: aggiungere messages.success(request, "...") in una view fa apparire automaticamente il toast.

Alert

Operazione completata

Salvataggio riuscito senza errori.

Connessione al server fallita.

La password scadra` fra 3 giorni.

Versione di anteprima: alcune feature potrebbero variare prima della release v0.1.

{% velora_alert variant="success" title="OK" message="..." dismissible=True %}
{% velora_alert variant="error"   message="..." dismissible=True %}
{% velora_alert variant="warning" message="..." %}
{% velora_alert variant="info"    message="..." %}

Label / badge

Attivo Errore In attesa Info Bozza

{% velora_label variant="success" text="Attivo" %}
{% velora_label variant="error"   text="Errore" %}
{% velora_label variant="warning" text="In attesa" %}
{% velora_label variant="info"    text="Info" %}
{% velora_label variant="neutral" text="Bozza" %}

Toast (API JS)

Velora.toast.success("Salvataggio riuscito");
Velora.toast.error("Errore inatteso");
Velora.toast.warning("Dati incompleti");
Velora.toast.info("Velora UI carica");
Velora.toast.error("Errore", { persistent: true });

Toast da Django messages (server-side)

Apri uno dei link sottostanti in una nuova scheda; il toast appare al caricamento, perche` la view aggiunge il messaggio via django.contrib.messages.

?toast=success · ?toast=error · ?toast=warning · ?toast=info

# views.py
from django.contrib import messages

def save_view(request):
    ...
    messages.success(request, "Salvataggio completato")
    return redirect("dashboard")

# templates/base.html (gia` incluso in velora_ui/base.html)
{% velora_toast_messages %}

Navigation (v0.2)

velora_breadcrumb, velora_submenu e i due drop-down inline (velora_drop_down_link / velora_drop_down_button) per navigazione contestuale dentro le pagine.

Breadcrumb

{% velora_breadcrumb items=[
    {"label": "Home",     "url": "/"},
    {"label": "Clienti",  "url": "/clients/"},
    {"label": "Mario Rossi"},
] %}

Submenu (con titolo)

{% velora_submenu items=[
    {"label": "Generale", "url": "...", "active": True},
    {"label": "Tema",     "url": "..."},
    {"label": "Sicurezza","url": "..."},
] title="Impostazioni" %}

Drop-down link & button

{% velora_drop_down_link   label="Altre azioni" items=actions %}
{% velora_drop_down_button label="Salva e..."   items=actions variant="primary" %}

Settings link, toggle link, copy link

Impostazioni

Mostra dettagli

Dettagli nascosti: questo blocco appare/scompare al click del link sopra.

Copia versione

{% velora_settings_link url="/settings/" %}

{% velora_toggle_link target="#dettagli"
    label_show="Mostra dettagli"
    label_hide="Nascondi dettagli" %}
...

{% velora_copy_link value="velora-ui@0.2.0"
    label="Copia versione"
    label_copied="Copiato!" %}

Overlays (v0.2)

Tooltip e dialog modale. Il tag velora_tooltip emette solo gli attributi data-* da iniettare in elementi esistenti (button, link, span). Il tag velora_open_dialog_action_link apre un dialog gia` nel DOM (modalita` inline) o scaricato via fetch (modalita` remote).

Tooltip

Dialog inline

Apri dialog inline

Il contenuto di questo dialog e` gia` nel DOM, nascosto da CSS. Click sul backdrop, sulla X o ESC per chiudere.

Conferma Annulla

{% velora_open_dialog_action_link
    label="Modifica" target="#dialog-edit" %}


    
    
        
            Titolo
            
        
        ...

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_bar value=70 max=100 label="Caricamento" %}
{% velora_progress_bar value=45 label="Storage" variant="warning" %}
{% velora_progress_bar value=92 label="Sync"    variant="success" %}
{% velora_progress_bar value=15 label="Crediti" variant="danger" %}

Wizard steps

Anagrafica
Indirizzo
Pagamento
Conferma

{% velora_condensed_progress_breadcrumb steps=[
    "Anagrafica", "Indirizzo", "Pagamento", "Conferma",
] current=2 %}

Progress "X di Y"

{% velora_new_progress_bar current=3 total=10 label="Upload" %}
{% velora_new_progress_bar current=7 total=7  label="Domande" variant="success" %}
{% velora_new_progress_bar current=0 total=0  label="Indet."  %}  {# senza barra #}

Form avanzati (v0.3)

9 nuovi field_type per velora_form_row. Tutti zero-deps: zero librerie esterne, solo HTML/CSS/JS vanilla.

Datepicker e Datetimepicker

Data di nascita

Appuntamento

{% velora_form_row type="datepicker" name="dob" label="Data di nascita" %}
{% velora_form_row type="datetimepicker" name="appointment" step_minutes=15 %}

Multiselect (chip + dropdown)

Competenze

{% velora_form_row type="multiselect" name="skills"
                  choices=options value="frontend,ux" %}

Autocomplete (locale e remoto)

Citta` (locale)

Utente (remoto demo)

{# Locale: opzioni passate inline #}
{% velora_form_row type="autocomplete" name="city" options=cities %}

{# Remoto: AJAX a endpoint che ritorna [{value,label}] #}
{% velora_form_row type="remote_autocomplete" name="user" url="/api/users/search/" %}

Image preview, rating, timer

Avatar

Qualita`

5 stelle 4 stelle 3 stelle 2 stelle 1 stella

Durata sessione

ore

min

sec

Inserisci ore, minuti e secondi

{% velora_form_row type="image_preview" name="avatar" max_size_kb=500 %}
{% velora_form_row type="rating_stars" name="quality" value=4 %}
{% velora_form_row type="timer_fields" name="duration" value=5415 units="h,m,s" %}

Redactor (toolbar + textarea)

Biografia

{% velora_form_row type="redactor" name="bio" rows=6 %}

Tabelle interattive (v0.3)

velora_table con form-in-cell AJAX, selezione multi-riga e velora_select_all_table_rows per le bulk-actions.

Tabella editabile + bulk actions

	#	Nome	Ruolo	Attivo	Piano
	1				Pro
	2				Free
	3				Pro

{% velora_select_all_table_rows
    target="#tab-adv"
    url="/api/users/bulk/"
    actions=bulk_actions %}

{% velora_table id="tab-adv"
    headers=headers
    rows=rows_with_form_in_cell
    selectable=True %}

Schema riga con form-in-cell

# Una cella editabile inline:
{
    "value": "Mario",                     # fallback non-JS
    "form_in_cell": {
        "type": "text",                   # text|select|checkbox|onoff
        "name": "name",
        "value": "Mario",
        "url": "/api/users/1/",           # endpoint PATCH/POST
        "method": "patch",                # default patch
        "auto_submit": True,              # debounce 400ms su input
        "row_id": 1,                      # passato come `id` nella request
    },
}

Checkbox e Radio standalone (v0.3)

velora_checkbox_tag: checkbox/radio inline con 5 varianti colore. Usali in tabelle, toolbar, list-item dove non serve la "form row" completa.

Varianti colore

Default (arancio) Primary (blu) Info (azzurro) Success (verde) Danger (rosso) Disabled Allineato a destra

{% velora_checkbox_tag name="agree" label="Accetto" variant="success" checked=True %}
{% velora_checkbox_tag name="role" label="Admin" value="admin" radio=True variant="primary" %}

Radio group

Free Pro Enterprise

{% velora_checkbox_tag name="plan" label="Free" value="free" radio=True %}
{% velora_checkbox_tag name="plan" label="Pro"  value="pro"  radio=True checked=True %}
{% velora_checkbox_tag name="plan" label="Enterprise" value="enterprise" radio=True %}

Grafici da tabella (Chart.js)

Il tag velora_chart_from_table legge una tabella HTML e disegna un grafico line, bar o pie sul canvas (bundle Chart.js incluso in velora.js).

	Q1	Q2	Q3
Italia	10	20	15
Germania	5	8	12
Spagna	8	7	9

{% load velora_chart %}
<table id="vendite">...</table>
{% velora_chart_from_table table_selector="#vendite" chart_type="line" canvas_id="ch1" %}

Ionicons

Libreria Ionicons (npm ionicons): sincronizza le SVG con npm run sync:icons. Il tag velora_icon usa SVG inline e currentColor. La galleria catalogo replica lo stile del content-showcase: ogni scheda mostra il nome stile ion-… (prefisso + slug) e un esempio velora_icon; la ricerca è AJAX sull’endpoint /api/ionicons/ (digita tutte per caricare l’intero set, fino al limite richiesto).

velora_icon

Dimensioni (size) e hover tramite CSS

Pulsante e card

Notifiche Esempio di blocco testuale affiancato a un'icona tematica.

{% load velora_icons %}
{% velora_icon "home-outline" size="md" extra_class="my-class" %}
{% velora_icon "warning-outline" alt="Avviso importante" size="sm" %}
{# Solo se serve  lazy (es. liste lunghe): #}
{% velora_icon "star-outline" as_img=True width=24 height=24 alt="" %}

Galleria catalogo (ricerca AJAX)

Ionicons

Per vedere tutte le icone scrivi «tutte» nella ricerca.

{% load velora_icons %}
{# URL della view JSON (es. reverse nell'app showcase) #}
{% velora_ionicons_gallery search_input_id="icon-search" search_url="/api/ionicons/" %}

Tema scuro e marchio

Attributo data-velora-theme="dark" su <html>, preferenze in localStorage (chiave velora-theme). Più il tag standalone velora_logo e la barra segmenti velora_satisfaction_bar.

velora_logo

Velora

Partner

velora_satisfaction_bar

Soddisfazione cliente (default)

Obiettivo raggiunto

Criticità

{% velora_logo label="Acme" url="/" size="md" %}
{% velora_satisfaction_bar value=3 max_value=5 label="NPS" variant="success" %}

Velora UI — Living styleguide

Velora UI v0.5.0

Scelte tipografiche

Tipografia

Colori principali

Semantici

Grigi

Layout core (M2 + v0.2)

Header v0.1: link + user-menu

Header v0.2: single-menu (dropdown semplice)

Header v0.2: multi-menu (mega-menu a colonne)

Header v0.2: apps-menu (griglia di app launcher)

Header v0.2: notifications (campanella + lista)

Header v0.2: logo (marchio aggiuntivo inline)

Title bar con azioni

Dashboard

Sidebar collassabile

Interazione dei dropdown header

Form core (M3)

Text + email

Textarea

Select

Checkbox + onoff

Radio

File

Stato di errore

Search box + separator

Tabelle (M4)

Link essenziali (M4)

Link testuali

Bottoni-link

Feedback (M5)

Alert

Label / badge

Toast (API JS)

Toast da Django messages (server-side)

Navigation (v0.2)

Breadcrumb

Submenu (con titolo)

Drop-down link & button

Settings link, toggle link, copy link

Overlays (v0.2)

Tooltip

Dialog inline

Progress (v0.2)

Progress bar classica

Wizard steps

Progress "X di Y"

Form avanzati (v0.3)

Tabelle interattive (v0.3)

Checkbox e Radio standalone (v0.3)

Grafici da tabella (Chart.js)

Ionicons

velora_icon

Galleria catalogo (ricerca AJAX)

Ionicons

Tema scuro e marchio