Scelte tipografiche (font, colori, grassetti…)
- Font base:
- -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif
- Proxima Nova Light:
- menu, bottoni, titoli leggeri (fallback: base)
- Proxima Nova Regular:
- testo corpo, tooltip, elementi enfatizzati (fallback: base)
- Dimensioni:
- 12px, 13px, 14px (base), 18px, 20px, 22px, 24px
- 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) · ■ menu bg #333A3F · ■ menu scuro #1D2328
- Grigi:
- #FAFBFC · #EBEEF0 · #D3DBE2 · #868686 · #666666 · #333333 · #262626
- Peso:
- font-weight: normal (Light/Regular). Nessun bold di default nelle UI standard.
L’esempio completo di tutti i tipi di voci (link semplice, sottomenu apps-menu, single-menu, multi-menu a sinistra; testo, menu utente, notifiche, logo a destra) è l’header in alto in questa pagina. Per usarlo: passa dal context della view left_items e right_items (liste di dict secondo il contratto in AGENTS.md). Opzionalmente imposta icona e nome app con i settings STATICGEN_HEADER_APP_ICON_URL e STATICGEN_HEADER_APP_NAME oppure con ta_header_app_icon_url e ta_header_app_name nel context. Il layout include già {% ta_header %}; non serve inserire markup HTML dell’header nei template.
| Nome | Cognome | Stato | Azioni |
|---|---|---|---|
| Mario | Rossi | Attivo | Modifica |
| Luigi | Verdi | Inattivo | Modifica |
| Anna | Bianchi | In attesa | Modifica |
Ogni cella contiene una form con un solo campo (testo, datepicker, onoff, select, multiselect). Submit AJAX con automatic-submit.
| Testo | Data | On/Off | Select | Multiselect |
|---|---|---|---|---|
| Mese | Vendite | Ricavi |
|---|---|---|
| Gen | 120 | 2400 |
| Feb | 150 | 3000 |
| Mar | 180 | 3600 |
| Apr | 140 | 2800 |
- ta_action_link
- Link azione (arancione): per azioni primarie, es. Modifica, Salva. Supporta data-confirm, data-remote, data-method.
- ta_nav_link
- Link navigazione (blu): per spostarsi tra pagine o sezioni, es. Indietro, Dettagli.
- ta_delete_link
- Link eliminazione (rosso): per cancellare risorse. Di default chiede conferma (data-confirm) e invia DELETE; può essere data-remote per AJAX.
- ta_settings_link
- Link impostazioni (verde): per accedere a pagine di configurazione o preferenze.
-
ta_open_dialog_action_link
Contenuto del dialog
- Apre un dialog modale: l’url può essere un id in pagina (es. #dialog) o un URL remoto da cui caricare il contenuto.
- ta_toggle_link
- Link che mostra/nasconde un blocco (es. filtri aggiuntivi) e alterna il testo del link tra due etichette.
- ta_copy_to_clipboard_link
- Copia un testo negli appunti al click e può mostrare un messaggio di conferma (es. “Copiato!”).
Dialog di conferma JS: messaggio, pulsanti Sì/Annulla, callback onConfirm/onCancel. Richiede ta.dialog.js (ta_framework_assets).
select_all_table_rows (in th/thead; box checkbox + testo + buttons, richiede ta-responsive.js):
|
|
Nome | Stato |
|---|---|---|
| Elemento A | Attivo | |
| Elemento B | In attesa | |
| Elemento C | Attivo |
satisfaction_bar:
new_html_logo_ta:
.teamARTIST®Per vedere tutte le icone scrivi «tutte» nella ricerca