TailAdmin v2 Templates

Templates e componenti basati su TailAdmin per applicazioni Flask/Jinja2.

Struttura

.
├── templates/
│   ├── admin_base.html   # Layout base con header, sidebar e footer
│   └── dashboard.html    # Dashboard con KPI cards e grafici
├── static/
│   ├── css/
│   │   ├── tailadmin.css        # CSS compilato TailAdmin
│   │   └── tailadmin-custom.css # Personalizzazioni custom
│   └── js/
│       ├── alpine.min.js   # Alpine.js per interattività
│       └── tailadmin.js    # Script TailAdmin
└── components/           # Riferimenti componenti disponibili

Caratteristiche Header

Il layout header è strutturato a due colonne:

Colonna Sinistra

• Hamburger button - Toggle sidebar (responsive)
• Search bar - Ricerca globale con shortcut ⌘K
  • Larghezza fissa: w-full xl:w-[430px]
  • Altezza: h-11
  • Icona search: 20x20 posizionata left-4

Colonna Destra

• Notification bell - Campanello notifiche con badge
  • Dimensione: h-10 w-10
  • Icona: 18x18
• Dark mode toggle - Switcher tema chiaro/scuro
  • Dimensione: h-10 w-10
  • Icona: 18x18
• User dropdown - Menu profilo utente
  • Avatar circolare con gradiente
  • Nome e email
  • Menu dropdown con opzioni

Dashboard KPI Cards

Cards compatte per metriche:

• Padding: px-5 py-4
• Layout: Title top, Large number, Percentage right
• Footer: "Vs last month" label
• 4 cards responsive: grid-cols-1 md:grid-cols-2 xl:grid-cols-4

Componenti TailAdmin Disponibili

Basati sul menu del sito demo, sono disponibili i seguenti componenti:

UI Components

• Alerts - Messaggi di allerta e notifiche
• Avatars - Avatar utenti e profili
• Badge - Badge e tag
• Breadcrumb - Navigazione breadcrumb
• Buttons - Pulsanti in vari stili
• Buttons Group - Gruppi di pulsanti
• Cards - Card containers
• Carousel - Caroselli immagini
• Dropdowns - Menu dropdown
• Images - Gestione immagini
• Links - Collegamenti e link
• List - Liste ordinate/non ordinate
• Modals - Finestre modali
• Notifications - Sistema notifiche
• Pagination - Paginazione
• Popovers - Popup informativi
• Progress Bars - Barre progresso
• Ribbons - Nastri decorativi
• Spinners - Loader e spinner
• Tabs - Navigazione a tab
• Tooltips - Tooltip informativi
• Videos - Embed video

Tecnologie

• Tailwind CSS - Framework CSS utility-first
• Alpine.js - Framework JavaScript leggero per interattività
• Jinja2 - Template engine (compatibile Flask)
• ApexCharts - Libreria grafici (opzionale per dashboard)

Utilizzo con Flask

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/admin')
def admin_dashboard():
    return render_template('dashboard.html')

if __name__ == '__main__':
    app.run(debug=True)

Template Blocks

Il file admin_base.html definisce i seguenti block Jinja2:

• {% block title %} - Titolo pagina
• {% block content %} - Contenuto principale
• {% block extra_css %} - CSS aggiuntivi
• {% block extra_js %} - JavaScript aggiuntivi

Personalizzazione

Colori Brand

Modifica le classi brand-* in tailadmin-custom.css:

.bg-brand-500 { background-color: #your-color; }
.text-brand-500 { color: #your-color; }
.border-brand-500 { border-color: #your-color; }

Dark Mode

Il template supporta automaticamente dark mode tramite la classe dark: di Tailwind. Toggle gestito da Alpine.js con persistenza localStorage.

Riferimenti

• TailAdmin Demo
• Documentazione Tailwind CSS
• Documentazione Alpine.js
• Flask Templates

License

Questi template sono basati su TailAdmin. Verifica la licenza originale per l'utilizzo commerciale.

---

Creato: Ottobre 2025 Versione TailAdmin: v2.x