# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## Guida introduttiva

- [Introduzione](https://www.mdui.org/it/docs/2/index.md): mdui è una libreria di Web Components con oltre 50 componenti Material Design. Supporta modalità scura, localizzazione e TypeScript. Crea facilmente app moderne con mdui.
- [Installazione](https://www.mdui.org/it/docs/2/getting-started/installation.md): Installa mdui tramite npm, pnpm o CDN. Supporta l'importazione completa o su richiesta per ridurre il bundle. Guida dettagliata per build globali ed ES module.
- [Utilizzo](https://www.mdui.org/it/docs/2/getting-started/usage.md): Basato su Web Components, mdui descrive l'uso di attributi, proprietà, metodi, eventi e slot. Scopri come personalizzare stili e Shadow DOM con le nostre guide tecniche.
- [Supporto TypeScript](https://www.mdui.org/it/docs/2/getting-started/typescript-support.md): Scritto interamente in TypeScript, mdui offre definizioni di tipo complete. Ottieni completamento automatico e controllo dei tipi per uno sviluppo più efficiente.
- [Supporto IDE](https://www.mdui.org/it/docs/2/getting-started/ide-support.md): Ottimizzato per VS Code e WebStorm. Ricevi suggerimenti sul codice e dati HTML/CSS tramite npm o estensioni, migliorando notevolmente la velocità di sviluppo.
- [Localizzazione](https://www.mdui.org/it/docs/2/getting-started/localization.md): Supporto multilingue integrato con oltre 50 pacchetti lingua. Gestisci caricamento pigro, pre-caricamento e importazioni statiche per app accessibili a livello globale.
- [Domande Frequenti](https://www.mdui.org/it/docs/2/getting-started/faq.md): Risposte alle domande più frequenti della community mdui. Soluzioni per tag autochiudenti, prevenzione FOUC e suggerimenti tecnici completi con esempi pratici di codice.

## Sviluppo assistito dall'IA

- [LLMs.txt](https://www.mdui.org/it/docs/2/ai/llms.md): mdui fornisce llms.txt e llms-full.txt per offrire contesto ai modelli AI. Documentazione in Markdown pronta all'uso per migliorare la precisione delle risposte AI.
- [MCP Server](https://www.mdui.org/it/docs/2/ai/mcp.md): Il server @mdui/mcp integra server MCP per agenti AI come Cursor. Interroga attributi, icone e variabili CSS direttamente per un'esperienza di sviluppo assistita dall'IA.

## Stili

- [Tema scuro](https://www.mdui.org/it/docs/2/styles/dark-mode.md): Supporto integrato per la modalità scura in tutti i componenti. Attivala tramite preferenze di sistema o manualmente con setTheme per un'esperienza personalizzata.
- [Colore Dinamico](https://www.mdui.org/it/docs/2/styles/dynamic-color.md): Genera palette cromatiche complete a partire da un colore base o un'immagine. Usa setColorScheme e getColorFromImage per creare temi armoniosi in modo automatico.
- [Tipografia](https://www.mdui.org/it/docs/2/styles/prose.md): Le classi mdui-prose e mdui-table ottimizzano il layout di articoli e tabelle. Ottieni tipografia e spaziatura eleganti senza sforzo per contenuti Markdown o dinamici.
- [Design Tokens](https://www.mdui.org/it/docs/2/styles/design-tokens.md): Sistema di Design Tokens basato su variabili CSS. Oltre 100 token per colori, angoli e altro ancora. Personalizzali per creare un look unico e coerente per la tua app.

## Integrazione con i framework

- [Integrazione con React](https://www.mdui.org/it/docs/2/frameworks/react.md): Integrazione perfetta con React basata su Web Components. Supporto TypeScript completo per l'associazione di eventi e sincronizzazione delle proprietà nelle app.
- [Integrazione con Vue](https://www.mdui.org/it/docs/2/frameworks/vue.md): Integrazione semplice con Vue tramite configurazione del compilatore. Supporta v-model, ascolto di eventi personalizzati, tipi TypeScript e suggerimenti per l'IDE.
- [Integrazione con Angular](https://www.mdui.org/it/docs/2/frameworks/angular.md): Integrazione con Angular tramite CUSTOM_ELEMENTS_SCHEMA. Guide dettagliate ed esempi per DI, associazione bidirezionale e definizioni di tipo TypeScript complete.
- [Integrazione con Altri Framework](https://www.mdui.org/it/docs/2/frameworks/others.md): Basato su standard Web Components, mdui si integra con framework come Svelte, Next.js o Nuxt. Fornisce guide universali e le migliori pratiche di sviluppo moderno.

## Componenti

- [Componente Avatar](https://www.mdui.org/it/docs/2/components/avatar.md): Avatar rappresenta utenti o brand con immagini, icone o testo. Supporta forme circolari o quadrate di varie dimensioni per profili, commenti e schede informative.
- [Componente Badge](https://www.mdui.org/it/docs/2/components/badge.md): Badge mostra conteggi o etichette di stato. Supporta dimensioni piccole o grandi con numeri o testo. Si associa facilmente ai componenti per notifiche e indicatori.
- [Componente Bottom App Bar](https://www.mdui.org/it/docs/2/components/bottom-app-bar.md): Bottom App Bar per la navigazione mobile e barre d'azione inferiori. Integra Fab, elementi e menu con supporto per posizioni fisse e stili grafici personalizzati.
- [Componente Button](https://www.mdui.org/it/docs/2/components/button.md): Button supporta stili elevated, filled, tonal, outlined e text. Include icone, stati di caricamento e accessibilità completa secondo le linee guida di Material Design 3.
- [Componente Icon Button](https://www.mdui.org/it/docs/2/components/button-icon.md): Icona Button per azioni secondarie con stili standard, filled, tonal e outlined. Supporta caricamento e link, ideale per barre strumenti e intestazioni delle card.
- [Componente Card](https://www.mdui.org/it/docs/2/components/card.md): Card è un contenitore versatile per contenuti e azioni correlate. Supporta stili elevated, filled e outlined con supporto per clic, link e aree multimediali diverse.
- [Componente Checkbox](https://www.mdui.org/it/docs/2/components/checkbox.md): Checkbox per la selezione multipla di opzioni. Supporta stati selezionato, non selezionato e indeterminato con icone personalizzate, validazione e supporto ai moduli.
- [Componente Chip](https://www.mdui.org/it/docs/2/components/chip.md): Chip rappresenta input, selezioni o filtri. Include varianti assist, filter, input e suggestion con stati selezionabili e rimovibili per una facile categorizzazione.
- [Componente Circular Progress](https://www.mdui.org/it/docs/2/components/circular-progress.md): Circular Progress mostra l'avanzamento con barre circolari. Supporta modalità determinate e spinner con dimensioni e colori personalizzabili per pulsanti o ricaricamenti.
- [Componente Collapse](https://www.mdui.org/it/docs/2/components/collapse.md): Collapse organizza i contenuti in sezioni raggruppate per risparmiare spazio. Supporta modalità a fisarmonica e animazioni, ideale per FAQ e impostazioni complesse.
- [Componente Dialog](https://www.mdui.org/it/docs/2/components/dialog.md): Dialog per informazioni o decisioni importanti. Supporta titoli, icone e pulsanti con modalità modali o a schermo intero. Fornisce funzioni alert, confirm e prompt.
- [Componente Divider](https://www.mdui.org/it/docs/2/components/divider.md): Divider fornisce separazione visiva per elenchi e layout. Supporta modalità orizzontali e verticali con rientri personalizzati per una chiara gerarchia visiva.
- [Componente Dropdown](https://www.mdui.org/it/docs/2/components/dropdown.md): Dropdown attiva menu o contenuti al clic o al passaggio del mouse. Supporta diverse modalità di attivazione e posizionamento automatico per le interazioni più avanzate.
- [Componente Floating Action Button](https://www.mdui.org/it/docs/2/components/fab.md): Floating Action Button evidenzia le azioni principali in varie forme e dimensioni. Include icone, colori e stati di caricamento per un accesso rapido alle macro funzioni.
- [Componente Icona](https://www.mdui.org/it/docs/2/components/icon.md): Icona rappresenta azioni con Material Icons o SVG personalizzati. Personalizza dimensioni, colori e rotazione via CSS per migliorare il riconoscimento dell'interfaccia.
- [Componente Layout](https://www.mdui.org/it/docs/2/components/layout.md): Layout organizza barre dell'app, drawer e aree di contenuto. Sistema a griglia reattiva con breakpoint e spaziatura per costruire intere strutture di pagine web.
- [Componente Linear Progress](https://www.mdui.org/it/docs/2/components/linear-progress.md): Linear Progress mostra l'avanzamento con barre orizzontali. Supporta modalità determinate e indeterminate con colori e altezze personalizzabili per caricamenti e upload.
- [Componente List](https://www.mdui.org/it/docs/2/components/list.md): La List mostra elementi verticali per navigazione o contatti. Supporta righe singole, doppe o triple con avatar, icone e link in un layout completamente personalizzabile.
- [Componente Menu](https://www.mdui.org/it/docs/2/components/menu.md): Menu mostra opzioni operative verticali. Supporta modalità di selezione, sottomenu, scorciatoie e contenuti personalizzati per i menu contestuali e la navigazione.
- [Componente Navigation Bar](https://www.mdui.org/it/docs/2/components/navigation-bar.md): Navigation Bar per spostarsi tra le pagine principali su mobile. Supporta da 3 a 5 elementi con etichette, icone e badge. Include modalità di navigazione a scomparsa.
- [Componente Navigation Drawer](https://www.mdui.org/it/docs/2/components/navigation-drawer.md): Navigation Drawer scorrevole lateralmente per la navigazione. Supporta modalità modali per i lati sinistro o destro con informazioni utente, elenchi e Divider.
- [Componente Navigation Rail](https://www.mdui.org/it/docs/2/components/navigation-rail.md): Navigation Rail per una navigazione laterale compatta su tablet e desktop. Supporta badge, Divider e allineamento personalizzato con icone ed etichette opzionali.
- [Componente Radio](https://www.mdui.org/it/docs/2/components/radio.md): Radio per selezioni mutuamente esclusive. Assicura la scelta di una sola opzione alla volta. Supporta icone personalizzate e stati disabilitati per i moduli e i sondaggi.
- [Componente Range Slider](https://www.mdui.org/it/docs/2/components/range-slider.md): Range Slider per selezionare un intervallo con doppio cursore. Include passaggi discreti, etichette personalizzate e validazione per prezzi o intervalli temporali.
- [Componente Select](https://www.mdui.org/it/docs/2/components/select.md): Select permette selezioni singole o multiple da un elenco. Include etichette, validazione e icone personalizzate per l'immissione di dati e filtri molto complessi.
- [Componente Segmented Button](https://www.mdui.org/it/docs/2/components/segmented-button.md): Segmented Button per selezione singola o multipla utile per filtrare o cambiare vista. Supporta icone, link e stili personalizzati per il controllo dell'interfaccia.
- [Componente Slider](https://www.mdui.org/it/docs/2/components/slider.md): Slider consente la selezione di valori con step e tacche. Include validazione, focus automatico ed etichette. Ideale per volume, briosità o i vari filtri di intervallo.
- [Componente Snackbar](https://www.mdui.org/it/docs/2/components/snackbar.md): Snackbar fornisce brevi feedback con pulsanti d'azione e chiusura automatica. Supporta colori, posizioni e chiamate programmatiche per un'esperienza utente migliore.
- [Componente Switch](https://www.mdui.org/it/docs/2/components/switch.md): Switch attiva impostazioni binarie con feedback immediato. Supporta icone, colori e dimensioni personalizzate. Ideale per gestire preferenze, permessi e autorizzazioni.
- [Componente Tabs](https://www.mdui.org/it/docs/2/components/tabs.md): Tab consentono di passare tra più viste in un'unica area. Supporta stili primari e secondari con icone, badge e indicatori per la navigazione tra le varie categorie.
- [Componente Text Field](https://www.mdui.org/it/docs/2/components/text-field.md): Text Field per input a riga singola o multipla di password, email e altro. Supporta etichette, icone e validazione completa con supporto per l'altezza automatica.
- [Componente Tooltip](https://www.mdui.org/it/docs/2/components/tooltip.md): Tooltip mostra informazioni supplementari al passaggio del mouse o al focus. Supporta rich text, posizionamento personalizzato e ritardi regolabili durante l'aiuto.
- [Componente Top App Bar](https://www.mdui.org/it/docs/2/components/top-app-bar.md): Top App Bar per titoli, navigazione e azioni in alto. Offre stili multipli, effetti di scorrimento e pulsanti come intestazione unificata per la navigazione.

## Funzioni

- [Libreria JavaScript](https://www.mdui.org/it/docs/2/functions/jq.md): Libreria jq integrata con API simile a jQuery ma sei volte più leggera. Supporta manipolazione DOM a catena, eventi e animazioni senza dipendenze esterne o overhead.
- [Funzione dialog](https://www.mdui.org/it/docs/2/functions/dialog.md): Wrapper programmatico per <mdui-dialog>. Apri Dialog da JavaScript senza HTML. Supporta titoli e pulsanti personalizzati e restituisce una Promise per l'interazione.
- [Funzione alert](https://www.mdui.org/it/docs/2/functions/alert.md): Sostituto moderno di window.alert basato su Dialog. Visualizza avvisi a tema con titoli e pulsanti personalizzati senza bloccare il processo di rendering della pagina.
- [Funzione confirm](https://www.mdui.org/it/docs/2/functions/confirm.md): Sostituto Material Design di window.confirm. Mostra Dialog di conferma programmatici e gestisce le scelte dell'utente tramite Promise per un controllo e stile migliori.
- [Funzione prompt](https://www.mdui.org/it/docs/2/functions/prompt.md): Sostituto di window.prompt in stile Material Design. Acquisisce l'input tramite Dialog con validazione e tipi personalizzati. Restituisce una Promise con il valore.
- [Funzione snackbar](https://www.mdui.org/it/docs/2/functions/snackbar.md): Chiamata programmatica per <mdui-snackbar>. Mostra rapidamente messaggi di feedback con azioni, durata e posizionamento personalizzati senza markup HTML richiesto.
- [Funzione getTheme](https://www.mdui.org/it/docs/2/functions/getTheme.md): Recupera le impostazioni del tema per pagine o elementi. Supporta modalità chiaro, scuro e auto. Utile per regolare logica o stili in base al tema attivo dell'utente.
- [Funzione setTheme](https://www.mdui.org/it/docs/2/functions/setTheme.md): Imposta dinamicamente i temi chiaro, scuro o automatico per l'intera pagina o elementi specifici. Supporta override globali o locali per un'esperienza flessibile.
- [Funzione getColorFromImage](https://www.mdui.org/it/docs/2/functions/getColorFromImage.md): Estrae i colori dominanti dalle immagini come valori esadecimali. Si abbina a setColorScheme per generare palette armoniose che corrispondono ai contenuti della pagina.
- [Funzione setColorScheme](https://www.mdui.org/it/docs/2/functions/setColorScheme.md): Genera palette Material Design complete da un singolo colore esadecimale. Supporta impostazioni globali o locali per branding rapido e personalizzazione dei colori.
- [Funzione removeColorScheme](https://www.mdui.org/it/docs/2/functions/removeColorScheme.md): Rimuove gli schemi cromatici personalizzati per ripristinare la palette predefinita. Applicabile globalmente o a elementi specifici per ripristini e cambio modalità.
- [Funzione loadLocale](https://www.mdui.org/it/docs/2/functions/loadLocale.md): Carica pacchetti lingua per la localizzazione. Supporta metodi lazy, pre-load e static per oltre 50 lingue. Ottimizzato per migliori prestazioni e caricamento rapido.
- [Funzione setLocale](https://www.mdui.org/it/docs/2/functions/setLocale.md): Imposta i codici lingua dell'app in modo dinamico con supporto asincrono. Aggiorna automaticamente i componenti per una localizzazione senza ricaricare la pagina.
- [Funzione getLocale](https://www.mdui.org/it/docs/2/functions/getLocale.md): Recupera il codice lingua corrente dell'applicazione. Usalo per il rilevamento dell'ambiente, il caricamento di risorse o regolazioni del layout in base alla lingua.
- [Funzione throttle](https://www.mdui.org/it/docs/2/functions/throttle.md): Crea funzioni throttle per limitare la frequenza di esecuzione. Ideale per eventi ad alta frequenza come scroll o resize, migliorando le prestazioni dell'applicazione.
- [Funzione observeResize](https://www.mdui.org/it/docs/2/functions/observeResize.md): Monitora i cambiamenti di dimensione degli elementi utilizzando l'API ResizeObserver. Attiva callback per layout reattivi o contenitori adattivi con supporto cleanup.
- [Funzione breakpoint](https://www.mdui.org/it/docs/2/functions/breakpoint.md): Controlla i Breakpoint reattivi come xs, sm, md, lg, xl o xxl. Valuta se la larghezza è maggiore, minore o entro un intervallo per logiche di interfaccia personalizzate.

## Librerie

- [@mdui/icons](https://www.mdui.org/it/docs/2/libraries/icons.md): Libreria di icone Material Design autonoma con tutte le icone Google. Ottimizzata per il tree-shaking e l'importazione on-demand per ridurre le dimensioni del bundle.