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.
ta_header — Come usarlo
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.
ta_search_box
Ricerca avanzata
Avanzate
ta_search_box (aperta)
Ricerca avanzata
Avanzate
ta_search_box (tutti i filtri)
Ricerca avanzata
Avanzate
ta_form_row
Form con tutti i tipi di campi
ta_checkbox_tag
ta-checkbox-arancio
ta-checkbox-blu
ta-checkbox-verde
ta-checkbox-rosso
ta-checkbox-disabled
ta-checkbox-right
ta-checkbox-radio
ta-checkbox-radio-blu
ta-checkbox-radio-verde
ta-checkbox-radio-rosso
ta_table
| Nome | Cognome | Stato | Azioni |
|---|---|---|---|
| Mario | Rossi | Attivo | Modifica |
| Luigi | Verdi | Inattivo | Modifica |
| Anna | Bianchi | In attesa | Modifica |
Tabella con form-in-cell (campi aggiornabili)
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 |
|---|---|---|---|---|
ta_pagination
ta_progress_bar
ta_label
Attivo
Errore
In attesa
Info
Grigio
ta_breadcrumb
ta_tooltip
Passa il mouse
ta_condensed_progress_breadcrumb
new_ta_progress_bar
ta_submenu
ta_submenu (senza titolo)
ta_alert
Operazione completata con successo.
Errore di validazione.
Attenzione: controlla i dati inseriti.
Messaggio informativo.
×
Messaggio con stile di base (nessun kind).
toastr
ta.chartutils
| Mese | Vendite | Ricavi |
|---|---|---|
| Gen | 120 | 2400 |
| Feb | 150 | 3000 |
| Mar | 180 | 3600 |
| Apr | 140 | 2800 |
ta_drop_down_link
ta_drop_down_button
Elenco link con i vari tipi
- 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!”).
taConfirm
Dialog di conferma JS: messaggio, pulsanti Sì/Annulla, callback onConfirm/onCancel. Richiede ta.dialog.js (ta_framework_assets).
select_all_table_rows
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
satisfaction_bar:
new_html_logo_ta
new_html_logo_ta:
.teamARTIST®Ionicons
Per vedere tutte le icone scrivi «tutte» nella ricerca
ion-alert
ion-alert-circled
ion-android-add
ion-android-add-circle
ion-android-alarm-clock
ion-android-alert
ion-android-apps
ion-android-archive
ion-android-arrow-back
ion-android-arrow-down
ion-android-arrow-dropdown
ion-android-arrow-dropdown-circle
ion-android-arrow-dropleft
ion-android-arrow-dropleft-circle
ion-android-arrow-dropright
ion-android-arrow-dropright-circle
ion-android-arrow-dropup
ion-android-arrow-dropup-circle
ion-android-arrow-forward
ion-android-arrow-up
ion-android-attach
ion-android-bar
ion-android-bicycle
ion-android-boat
ion-android-bookmark
ion-android-bulb
ion-android-bus
ion-android-calendar
ion-android-call
ion-android-camera
ion-android-cancel
ion-android-car
ion-android-cart
ion-android-chat
ion-android-checkbox
ion-android-checkbox-blank
ion-android-checkbox-outline
ion-android-checkbox-outline-blank
ion-android-checkmark-circle
ion-android-clipboard
ion-android-close
ion-android-cloud
ion-android-cloud-circle
ion-android-cloud-done
ion-android-cloud-outline
ion-android-color-palette
ion-android-compass
ion-android-contact
ion-android-contacts
ion-android-contract
ion-android-create
ion-android-delete
ion-android-desktop
ion-android-document
ion-android-done
ion-android-done-all
ion-android-download
ion-android-drafts
ion-android-exit
ion-android-expand
ion-android-favorite
ion-android-favorite-outline
ion-android-film
ion-android-folder
ion-android-folder-open
ion-android-funnel
ion-android-globe
ion-android-hand
ion-android-hangout
ion-android-happy
ion-android-home
ion-android-image
ion-android-laptop
ion-android-list
ion-android-locate
ion-android-lock
ion-android-mail
ion-android-map
ion-android-menu
ion-android-microphone
ion-android-microphone-off
ion-android-more-horizontal
ion-android-more-vertical
ion-android-navigate
ion-android-notifications
ion-android-notifications-none
ion-android-notifications-off
ion-android-open
ion-android-options
ion-android-people
ion-android-person
ion-android-person-add
ion-android-phone-landscape
ion-android-phone-portrait
ion-android-pin
ion-android-plane
ion-android-playstore
ion-android-print
ion-android-radio-button-off
ion-android-radio-button-on
ion-android-refresh
ion-android-remove
ion-android-remove-circle
ion-android-restaurant
ion-android-sad
ion-android-search
ion-android-send
ion-android-settings
ion-android-share
ion-android-share-alt
ion-android-star
ion-android-star-half
ion-android-star-outline
ion-android-stopwatch
ion-android-subway
ion-android-sunny
ion-android-sync
ion-android-textsms
ion-android-time
ion-android-train
ion-android-unlock
ion-android-upload
ion-android-volume-down
ion-android-volume-mute
ion-android-volume-off
ion-android-volume-up
ion-android-walk
ion-android-warning
ion-android-watch
ion-android-wifi
ion-aperture
ion-archive
ion-arrow-down-a
ion-arrow-down-b
ion-arrow-down-c
ion-arrow-expand
ion-arrow-graph-down-left
ion-arrow-graph-down-right
ion-arrow-graph-up-left
ion-arrow-graph-up-right
ion-arrow-left-a
ion-arrow-left-b
ion-arrow-left-c
ion-arrow-move
ion-arrow-resize
ion-arrow-return-left
ion-arrow-return-right
ion-arrow-right-a
ion-arrow-right-b
ion-arrow-right-c
ion-arrow-shrink
ion-arrow-swap
ion-arrow-up-a
ion-arrow-up-b
ion-arrow-up-c
ion-asterisk
ion-at
ion-backspace
ion-backspace-outline
ion-bag
ion-battery-charging
ion-battery-empty
ion-battery-full
ion-battery-half
ion-battery-low
ion-beaker
ion-beer
ion-bluetooth
ion-bonfire
ion-bookmark
ion-bowtie
ion-briefcase
ion-bug
ion-calculator
ion-calendar
ion-camera
ion-card
ion-cash
ion-chatbox
ion-chatbox-working
ion-chatboxes
ion-chatbubble
ion-chatbubble-working
ion-chatbubbles
ion-checkmark
ion-checkmark-circled
ion-checkmark-round
ion-chevron-down
ion-chevron-left
ion-chevron-right
ion-chevron-up
ion-clipboard
ion-clock
ion-close
ion-close-circled
ion-close-round
ion-closed-captioning
ion-cloud
ion-code
ion-code-download
ion-code-working
ion-coffee
ion-compass
ion-compose
ion-connection-bars
ion-contrast
ion-crop
ion-cube
ion-dailymotion
ion-disc
ion-document
ion-document-text
ion-drag
ion-earth
ion-easel
ion-edit
ion-egg
ion-eject
ion-email
ion-email-unread
ion-erlenmeyer-flask
ion-erlenmeyer-flask-bubbles
ion-eye
ion-eye-disabled
ion-female
ion-filing
ion-film-marker
ion-fireball
ion-flag
ion-flame
ion-flash
ion-flash-off
ion-folder
ion-fork
ion-fork-repo
ion-forward
ion-funnel
ion-gear-a
ion-gear-b
ion-grid
ion-hammer
ion-happy
ion-happy-outline
ion-headphone
ion-heart
ion-heart-broken
ion-help
ion-help-buoy
ion-help-circled
ion-home
ion-icecream
ion-image
ion-images
ion-information
ion-information-circled
ion-ionic
ion-ios-alarm
ion-ios-alarm-outline
ion-ios-albums
ion-ios-albums-outline
ion-ios-americanfootball
ion-ios-americanfootball-outline
ion-ios-analytics
ion-ios-analytics-outline
ion-ios-arrow-back
ion-ios-arrow-down
ion-ios-arrow-forward
ion-ios-arrow-left
ion-ios-arrow-right
ion-ios-arrow-thin-down
ion-ios-arrow-thin-left
ion-ios-arrow-thin-right
ion-ios-arrow-thin-up
ion-ios-arrow-up
ion-ios-at
ion-ios-at-outline
ion-ios-barcode
ion-ios-barcode-outline
ion-ios-baseball
ion-ios-baseball-outline
ion-ios-basketball
ion-ios-basketball-outline
ion-ios-bell
ion-ios-bell-outline
ion-ios-body
ion-ios-body-outline
ion-ios-bolt
ion-ios-bolt-outline
ion-ios-book
ion-ios-book-outline
ion-ios-bookmarks
ion-ios-bookmarks-outline
ion-ios-box
ion-ios-box-outline
ion-ios-briefcase
ion-ios-briefcase-outline
ion-ios-browsers
ion-ios-browsers-outline
ion-ios-calculator
ion-ios-calculator-outline
ion-ios-calendar
ion-ios-calendar-outline
ion-ios-camera
ion-ios-camera-outline
ion-ios-cart
ion-ios-cart-outline
ion-ios-chatboxes
ion-ios-chatboxes-outline
ion-ios-chatbubble
ion-ios-chatbubble-outline
ion-ios-checkmark
ion-ios-checkmark-empty
ion-ios-checkmark-outline
ion-ios-circle-filled
ion-ios-circle-outline
ion-ios-clock
ion-ios-clock-outline
ion-ios-close
ion-ios-close-empty
ion-ios-close-outline
ion-ios-cloud
ion-ios-cloud-download
ion-ios-cloud-download-outline
ion-ios-cloud-outline
ion-ios-cloud-upload
ion-ios-cloud-upload-outline
ion-ios-cloudy
ion-ios-cloudy-night
ion-ios-cloudy-night-outline
ion-ios-cloudy-outline
ion-ios-cog
ion-ios-cog-outline
ion-ios-color-filter
ion-ios-color-filter-outline
ion-ios-color-wand
ion-ios-color-wand-outline
ion-ios-compose
ion-ios-compose-outline
ion-ios-contact
ion-ios-contact-outline
ion-ios-copy
ion-ios-copy-outline
ion-ios-crop
ion-ios-crop-strong
ion-ios-download
ion-ios-download-outline
ion-ios-drag
ion-ios-email
ion-ios-email-outline
ion-ios-eye
ion-ios-eye-outline
ion-ios-fastforward
ion-ios-fastforward-outline
ion-ios-filing
ion-ios-filing-outline
ion-ios-film
ion-ios-film-outline
ion-ios-flag
ion-ios-flag-outline
ion-ios-flame
ion-ios-flame-outline
ion-ios-flask
ion-ios-flask-outline
ion-ios-flower
ion-ios-flower-outline
ion-ios-folder
ion-ios-folder-outline
ion-ios-football
ion-ios-football-outline
ion-ios-game-controller-a
ion-ios-game-controller-a-outline
ion-ios-game-controller-b
ion-ios-game-controller-b-outline
ion-ios-gear
ion-ios-gear-outline
ion-ios-glasses
ion-ios-glasses-outline
ion-ios-grid-view
ion-ios-grid-view-outline
ion-ios-heart
ion-ios-heart-outline
ion-ios-help
ion-ios-help-empty
ion-ios-help-outline
ion-ios-home
ion-ios-home-outline
ion-ios-infinite
ion-ios-infinite-outline
ion-ios-information
ion-ios-information-empty
ion-ios-information-outline
ion-ios-ionic-outline
ion-ios-keypad
ion-ios-keypad-outline
ion-ios-lightbulb
ion-ios-lightbulb-outline
ion-ios-list
ion-ios-list-outline
ion-ios-location
ion-ios-location-outline
ion-ios-locked
ion-ios-locked-outline
ion-ios-loop
ion-ios-loop-strong
ion-ios-medical
ion-ios-medical-outline
ion-ios-medkit
ion-ios-medkit-outline
ion-ios-mic
ion-ios-mic-off
ion-ios-mic-outline
ion-ios-minus
ion-ios-minus-empty
ion-ios-minus-outline
ion-ios-monitor
ion-ios-monitor-outline
ion-ios-moon
ion-ios-moon-outline
ion-ios-more
ion-ios-more-outline
ion-ios-musical-note
ion-ios-musical-notes
ion-ios-navigate
ion-ios-navigate-outline
ion-ios-nutrition
ion-ios-nutrition-outline
ion-ios-paper
ion-ios-paper-outline
ion-ios-paperplane
ion-ios-paperplane-outline
ion-ios-partlysunny
ion-ios-partlysunny-outline
ion-ios-pause
ion-ios-pause-outline
ion-ios-paw
ion-ios-paw-outline
ion-ios-people
ion-ios-people-outline
ion-ios-person
ion-ios-person-outline
ion-ios-personadd
ion-ios-personadd-outline
ion-ios-photos
ion-ios-photos-outline
ion-ios-pie
ion-ios-pie-outline
ion-ios-pint
ion-ios-pint-outline
ion-ios-play
ion-ios-play-outline
ion-ios-plus
ion-ios-plus-empty
ion-ios-plus-outline
ion-ios-pricetag
ion-ios-pricetag-outline
ion-ios-pricetags
ion-ios-pricetags-outline
ion-ios-printer
ion-ios-printer-outline
ion-ios-pulse
ion-ios-pulse-strong
ion-ios-rainy
ion-ios-rainy-outline
ion-ios-recording
ion-ios-recording-outline
ion-ios-redo
ion-ios-redo-outline
ion-ios-refresh
ion-ios-refresh-empty
ion-ios-refresh-outline
ion-ios-reload
ion-ios-reloading
ion-ios-reverse-camera
ion-ios-reverse-camera-outline
ion-ios-rewind
ion-ios-rewind-outline
ion-ios-rose
ion-ios-rose-outline
ion-ios-search
ion-ios-search-strong
ion-ios-settings
ion-ios-settings-strong
ion-ios-shuffle
ion-ios-shuffle-strong
ion-ios-skipbackward
ion-ios-skipbackward-outline
ion-ios-skipforward
ion-ios-skipforward-outline
ion-ios-snowy
ion-ios-speedometer
ion-ios-speedometer-outline
ion-ios-star
ion-ios-star-half
ion-ios-star-outline
ion-ios-stopwatch
ion-ios-stopwatch-outline
ion-ios-sunny
ion-ios-sunny-outline
ion-ios-telephone
ion-ios-telephone-outline
ion-ios-tennisball
ion-ios-tennisball-outline
ion-ios-thunderstorm
ion-ios-thunderstorm-outline
ion-ios-time
ion-ios-time-outline
ion-ios-timer
ion-ios-timer-outline
ion-ios-toggle
ion-ios-toggle-outline
ion-ios-trash
ion-ios-trash-outline
ion-ios-undo
ion-ios-undo-outline
ion-ios-unlocked
ion-ios-unlocked-outline
ion-ios-upload
ion-ios-upload-outline
ion-ios-videocam
ion-ios-videocam-outline
ion-ios-volume-high
ion-ios-volume-low
ion-ios-wineglass
ion-ios-wineglass-outline
ion-ios-world
ion-ios-world-outline
ion-ipad
ion-iphone
ion-ipod
ion-jet
ion-key
ion-knife
ion-laptop
ion-leaf
ion-levels
ion-lightbulb
ion-link
ion-load-a
ion-load-b
ion-load-c
ion-load-d
ion-loading-a
ion-loading-b
ion-loading-c
ion-loading-d
ion-location
ion-lock-combination
ion-locked
ion-log-in
ion-log-out
ion-loop
ion-looping
ion-magnet
ion-male
ion-man
ion-map
ion-medkit
ion-merge
ion-mic-a
ion-mic-b
ion-mic-c
ion-minus
ion-minus-circled
ion-minus-round
ion-model-s
ion-monitor
ion-more
ion-mouse
ion-music-note
ion-navicon
ion-navicon-round
ion-navigate
ion-network
ion-no-smoking
ion-nuclear
ion-outlet
ion-paintbrush
ion-paintbucket
ion-paper-airplane
ion-paperclip
ion-pause
ion-person
ion-person-add
ion-person-stalker
ion-pie-graph
ion-pin
ion-pinpoint
ion-pizza
ion-plane
ion-planet
ion-play
ion-playstation
ion-plus
ion-plus-circled
ion-plus-round
ion-podium
ion-pound
ion-power
ion-pricetag
ion-pricetags
ion-printer
ion-pull-request
ion-qr-scanner
ion-quote
ion-radio-waves
ion-record
ion-refresh
ion-refreshing
ion-reply
ion-reply-all
ion-ribbon-a
ion-ribbon-b
ion-sad
ion-sad-outline
ion-scissors
ion-search
ion-settings
ion-share
ion-shuffle
ion-skip-backward
ion-skip-forward
ion-social-android
ion-social-android-outline
ion-social-angular
ion-social-angular-outline
ion-social-apple
ion-social-apple-outline
ion-social-bitcoin
ion-social-bitcoin-outline
ion-social-buffer
ion-social-buffer-outline
ion-social-chrome
ion-social-chrome-outline
ion-social-codepen
ion-social-codepen-outline
ion-social-css3
ion-social-css3-outline
ion-social-designernews
ion-social-designernews-outline
ion-social-dribbble
ion-social-dribbble-outline
ion-social-dropbox
ion-social-dropbox-outline
ion-social-euro
ion-social-euro-outline
ion-social-facebook
ion-social-facebook-outline
ion-social-foursquare
ion-social-foursquare-outline
ion-social-freebsd-devil
ion-social-github
ion-social-github-outline
ion-social-google
ion-social-google-outline
ion-social-googleplus
ion-social-googleplus-outline
ion-social-hackernews
ion-social-hackernews-outline
ion-social-html5
ion-social-html5-outline
ion-social-instagram
ion-social-instagram-outline
ion-social-javascript
ion-social-javascript-outline
ion-social-linkedin
ion-social-linkedin-outline
ion-social-markdown
ion-social-nodejs
ion-social-octocat
ion-social-pinterest
ion-social-pinterest-outline
ion-social-python
ion-social-reddit
ion-social-reddit-outline
ion-social-rss
ion-social-rss-outline
ion-social-sass
ion-social-skype
ion-social-skype-outline
ion-social-snapchat
ion-social-snapchat-outline
ion-social-tumblr
ion-social-tumblr-outline
ion-social-tux
ion-social-twitch
ion-social-twitch-outline
ion-social-twitter
ion-social-twitter-outline
ion-social-usd
ion-social-usd-outline
ion-social-vimeo
ion-social-vimeo-outline
ion-social-whatsapp
ion-social-whatsapp-outline
ion-social-windows
ion-social-windows-outline
ion-social-wordpress
ion-social-wordpress-outline
ion-social-yahoo
ion-social-yahoo-outline
ion-social-yen
ion-social-yen-outline
ion-social-youtube
ion-social-youtube-outline
ion-soup-can
ion-soup-can-outline
ion-speakerphone
ion-speedometer
ion-spoon
ion-star
ion-stats-bars
ion-steam
ion-stop
ion-thermometer
ion-thumbsdown
ion-thumbsup
ion-toggle
ion-toggle-filled
ion-transgender
ion-trash-a
ion-trash-b
ion-trophy
ion-tshirt
ion-tshirt-outline
ion-umbrella
ion-university
ion-unlocked
ion-upload
ion-usb
ion-videocamera
ion-volume-high
ion-volume-low
ion-volume-medium
ion-volume-mute
ion-wand
ion-waterdrop
ion-wifi
ion-wineglass
ion-woman
ion-wrench
ion-xbox