# Introduzione Iniziamo aggiungendo mdui a un modello di pagina di base utilizzando un CDN. > Stai attualmente leggendo la documentazione per mdui 2! > > Per la documentazione di mdui 1, visita [www.mdui.org/docs/](https://www.mdui.org/docs/). ## Primi Passi {#getting-started} Per utilizzare mdui, importa i file CSS e JS dal CDN. Per le istruzioni di installazione tramite npm, fare riferimento alla sezione [Installazione](/it/docs/2/getting-started/installation). **Importazione dei File** Aggiungi le seguenti righe al tag `` della tua pagina: ```html ``` Per utilizzare l'attributo icona (ad esempio, `icon="search"` in ``), includi il file CSS per l'icona. Consulta [Utilizzo delle Icone Material](/it/docs/2/components/icon#usage-material-icons) per maggiori informazioni. mdui funziona indipendentemente da librerie di terze parti ed è pronto per essere utilizzato una volta inclusi i file. ## Modello di Pagina Più Semplice {#template} Di seguito è riportato il modello di pagina più semplice. Puoi aggiungere più componenti e contenuti per costruire il tuo sito web. ```html Ciao, mondo! Ciao, mondo! ``` # Installazione mdui può essere installato tramite npm o incluso direttamente da un CDN. Il metodo consigliato è npm. ## Installa tramite npm {#npm} ```bash npm install mdui --save ``` ### Importazione Completa {#full-import} Per utilizzare tutti i componenti mdui, importa i seguenti due file nel file di ingresso del tuo progetto: ```js import 'mdui/mdui.css'; import 'mdui'; ``` Puoi anche importare funzioni specifiche da mdui. Ad esempio, per importare la funzione [`snackbar`](/it/docs/2/functions/snackbar): ```js import { snackbar } from 'mdui'; ``` Elenca tutte le funzioni importabili da mdui 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### Importazione Selettiva {#cherry-picking} Per ottimizzare le dimensioni del tuo progetto, importa solo i componenti e le funzioni necessari. Ad esempio, se hai solo bisogno del componente [``](/it/docs/2/components/button) e della funzione [`snackbar`](/it/docs/2/functions/snackbar), importali come segue: ```js // Importa sempre il file CSS import 'mdui/mdui.css'; // Importa il componente import 'mdui/components/button.js'; // Importa la funzione snackbar import { snackbar } from 'mdui/functions/snackbar.js'; ``` La pagina di documentazione di ogni componente o funzione fornisce dettagli su come eseguire importazioni selettive. Elenca tutti i componenti e le funzioni supportati per l'importazione selettiva 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} mdui può anche essere incluso direttamente tramite CDN utilizzando tag `` e ` Cliccami ``` ### Build ES Module {#es-module} La build ES module di mdui ti consente di importarla utilizzando la sintassi ES module dal CDN. ```html Cliccami ``` # Utilizzo I componenti mdui, come standard Web Component, possono essere usati come elementi `
`. La documentazione di ciascun componente fornisce un'API completa, inclusi attributi, metodi, eventi, slot, CSS Part e Proprietà CSS personalizzate. Questa guida si concentra sull'utilizzo dei Web Component. ## Attributi {#attribute} Gli attributi sono divisi in attributi HTML e Proprietà JavaScript. Di solito corrispondono uno a uno e sono sincronizzati. Ciò significa che l'aggiornamento del valore di un Attributo HTML aggiorna anche il valore della proprietà JavaScript e viceversa. Gli attributi HTML possono essere impostati direttamente nella stringa HTML del componente. Possono essere letti o modificati utilizzando i metodi `getAttribute` e `setAttribute`: ```html Cliccami ``` Le proprietà JavaScript possono essere accessibili direttamente sull'istanza del componente o impostate per modificare il valore della proprietà: ```html Cliccami ``` Gli attributi booleani corrispondono a Proprietà JavaScript che sono `true` quando l'Attributo HTML è presente e `false` altrimenti. Tuttavia, mdui tratta il valore stringa `false` come il valore booleano `false` per la compatibilità con alcuni framework. ```html ``` Per le proprietà che sono array, oggetti o funzioni, esiste solo una Proprietà JavaScript; non esiste un Attributo HTML corrispondente. Ad esempio, la proprietà [`labelFormatter`](/it/docs/2/components/slider#attributes-labelFormatter) del componente [``](/it/docs/2/components/slider) è una funzione, che può essere impostata solo utilizzando la proprietà JavaScript: ```html ``` Ecco un esempio dalla documentazione degli attributi del componente [``](/it/docs/2/components/slider): | Attributo HTML | Proprietà JavaScript | rifletti | | --- | --- | --- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | L'attributo `name` di questo componente ha sia proprietà HTML che JavaScript, e la colonna rifletti indica che se la proprietà JavaScript viene aggiornata, verrà aggiornato anche l'Attributo HTML. Tuttavia, l'attributo `value` non riflette le modifiche dalla proprietà JavaScript all'Attributo HTML. La proprietà `labelFormatter` esiste solo come proprietà JavaScript. ## Metodi {#method} I componenti forniscono metodi pubblici che attivano comportamenti specifici. Ad esempio, il metodo [`focus()`](/it/docs/2/components/text-field#methods-focus) del componente [``](/it/docs/2/components/text-field) imposta il focus sul campo di testo. ```html ``` Consulta la documentazione di ciascun componente per un elenco completo di metodi e parametri. ## Eventi {#event} I componenti emettono eventi in risposta ad azioni specifiche. Ad esempio, il componente [``](/it/docs/2/components/dialog) emette un evento [`open`](/it/docs/2/components/dialog#events-open) quando inizia ad aprirsi. Questi eventi possono essere ascoltati, consentendo l'esecuzione di azioni personalizzate. ```html Dialogo ``` Un elenco completo di eventi e dei loro parametri per ciascun componente può essere trovato nelle rispettive pagine di documentazione. Quando si integra mdui con altri framework come Vue, React o Angular, è possibile utilizzare la sintassi del framework per associare gli eventi. Tuttavia, alcuni framework, come React, potrebbero supportare solo eventi standard come `click` e non eventi personalizzati come `open`. In questi casi, potrebbe essere necessario associare manualmente l'evento utilizzando `addEventListener` ottenendo un riferimento all'elemento. Per ulteriori informazioni sull'utilizzo di mdui con React, consultare la sezione [Framework - React](/it/docs/2/frameworks/react). ## Slot {#slot} I componenti spesso forniscono slot per l'inserimento di contenuto HTML personalizzato. Lo slot predefinito è il più comune, utilizzato per HTML semplice o testo all'interno del componente. Ad esempio, lo slot predefinito del componente [``](/it/docs/2/components/button) imposta il testo del pulsante: ```html Cliccami ``` Alcuni componenti offrono anche slot nominati. Dovresti specificare il nome dello slot nell'Attributo HTML `slot`. Ad esempio, il componente [``](/it/docs/2/components/icon) utilizza `slot="start"` per indicare uno slot nominato chiamato [`start`](/it/docs/2/components/button#slots-icon), posizionando l'icona a sinistra all'interno del componente: ```html Impostazioni ``` Per i componenti con più slot nominati, l'ordine non ha importanza. Devono solo essere all'interno del componente e il browser li posizionerà automaticamente nelle posizioni corrette. Consulta la documentazione di ciascun componente per un elenco degli slot supportati. ## Proprietà CSS Personalizzate {#css-custom-properties} mdui utilizza le proprietà CSS Personalizzate, note anche come variabili CSS, per stabilire una serie di [design tokens globali](/it/docs/2/styles/design-tokens). Questi token vengono referenziati da vari componenti, consentendo di regolare gli stili dei componenti mdui a livello globale. Ad esempio, puoi ridurre il raggio d'angolo di tutti i componenti modificando le relative Proprietà CSS personalizzate: ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Le proprietà CSS personalizzate possono anche essere modificate all'interno di un ambito locale. Ad esempio, puoi ridurre il raggio d'angolo per gli elementi con `class="sharp"` e i loro elementi figli impostando le appropriate Proprietà CSS personalizzate: ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Alcuni componenti forniscono anche Proprietà CSS personalizzate uniche. Queste sono limitate a componenti specifici e non includono il prefisso `--mdui`. Ad esempio, puoi modificare lo stile `z-index` del componente [``](/it/docs/2/components/dialog) modificando la sua Proprietà `--z-index`. ```css mdui-dialog { --z-index: 3000; } ``` Consulta la documentazione di ciascun componente per un elenco delle proprietà CSS personalizzate supportate. ## CSS Part {#css-part} I componenti mdui utilizzano il shadow DOM per incapsulare stili e comportamenti. Tuttavia, i selettori CSS standard non possono selezionare elementi all'interno del shadow DOM. Per superare questo, alcuni componenti aggiungono un Attributo `part` agli elementi all'interno del shadow DOM. Questi elementi possono quindi essere selezionati e stilizzati utilizzando il selettore CSS `::part`. Ad esempio, la CSS Part [`button`](/it/docs/2/components/button#cssParts-button) modifica il padding interno del pulsante, mentre le CSS Part [`label`](/it/docs/2/components/button#cssParts-label), [`icon`](/it/docs/2/components/button#cssParts-icon) e [`end-icon`](/it/docs/2/components/button#cssParts-end-icon) regolano rispettivamente il colore del testo, il colore dell'icona sinistra e il colore dell'icona destra: ```html Pulsante ``` Puoi ispezionare gli elementi del shadow DOM dei componenti negli strumenti di sviluppo del tuo browser per vedere la loro struttura e gli stili predefiniti. Prima di utilizzare CSS Part, verifica se le proprietà CSS personalizzate globali o le proprietà CSS personalizzate specifiche del componente coprono già le tue esigenze. Se lo fanno, preferiscile per la personalizzazione dello stile. Per un elenco delle proprietà `part` esposte pubblicamente, consulta la documentazione di ciascun componente. ## Meccanismo di Aggiornamento del Componente {#update-mechanism} I componenti mdui sono costruiti utilizzando [Lit](https://lit.dev/), una libreria leggera che semplifica lo sviluppo di Web Component. Comprendere il meccanismo di rendering e aggiornamento dei componenti può migliorare la tua esperienza quando utilizzi i componenti mdui. Quando modifichi le proprietà dei componenti mdui, i componenti eseguiranno nuovamente il rendering. Tuttavia, questo nuovo rendering non è sincrono. Quando più valori di Proprietà cambiano contemporaneamente, Lit raggruppa queste modifiche fino al ciclo di aggiornamento successivo. Questo approccio garantisce che ogni componente venga riproposto una sola volta, indipendentemente da quante Proprietà cambiano. Solo le parti del shadow DOM che effettivamente cambiano verranno riproposte. Nell'esempio seguente, impostiamo la proprietà JavaScript `disabled` di un pulsante su `true` e interroghiamo immediatamente il suo Attributo HTML. Tuttavia, il componente non ha ancora avuto la possibilità di riproporsi, quindi l'Attributo HTML interrogato rimane `false`: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Per assicurarsi che un componente abbia completato il nuovo rendering dopo una modifica del valore della proprietà, puoi utilizzare la proprietà `updateComplete`. Questa Proprietà restituisce una Promise che si risolve una volta che il componente ha terminato il nuovo rendering. ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # Supporto TypeScript mdui è sviluppato con TypeScript, offrendo un robusto supporto TypeScript. Tutte le librerie ufficiali mdui includono file di dichiarazione dei tipi per un uso immediato. ## Tipi di Istanza del Componente {#instance} Occasionalmente, potresti aver bisogno di asserire una variabile JavaScript come istanza di un componente mdui. Puoi importare il tipo di componente corrispondente direttamente da mdui. Ad esempio, per importare il tipo di componente Tooltip dal file del componente: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Oppure, importa il tipo di componente Tooltip direttamente da mdui: ```ts import type { Tooltip } from 'mdui'; ``` Quindi, puoi asserire una variabile JavaScript come tipo Tooltip: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` Il tuo IDE suggerirà automaticamente le proprietà e i metodi della variabile `tooltip`. Quando aggiungi un listener di eventi alla variabile `tooltip`, l'IDE suggerirà anche i nomi degli eventi, i tipi di evento e il contesto `this` nella funzione di callback: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Tipi di Evento {#event} Ogni componente esporta un'interfaccia che mappa i nomi degli eventi del componente ai corrispondenti tipi di oggetto evento. L'interfaccia è denominata `${componentName}EventMap`. Ad esempio, il componente Tooltip esporta un'interfaccia chiamata `TooltipEventMap`: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Puoi importare l'interfaccia `TooltipEventMap` dal file del componente: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` O direttamente da mdui: ```ts import type { TooltipEventMap } from 'mdui'; ``` Questa interfaccia include solo gli eventi specifici del componente. Poiché i componenti mdui ereditano da `HTMLElement`, supportano anche gli eventi `HTMLElement`. Usa i tipi di intersezione per ottenere tutti i tipi di evento per un componente: ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # Supporto IDE mdui è ottimizzato per VS Code e WebStorm, offrendo funzionalità come il completamento automatico del codice e suggerimenti al passaggio del mouse. ## VS Code {#vscode} ### Per mdui installato tramite npm {#vscode-npm} Se hai installato mdui tramite npm, puoi abilitare il supporto IDE VS Code per il tuo progetto seguendo questi passaggi: 1. Crea una directory `.vscode` nella root del tuo progetto. 2. All'interno della directory `.vscode`, crea un file `settings.json`. 3. Aggiungi il seguente codice a `settings.json`: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Se `settings.json` esiste già, aggiungi semplicemente le righe sopra alla radice del documento JSON. Riavvia VS Code dopo aver apportato queste modifiche. ### Per mdui utilizzato tramite CDN {#vscode-cdn} Se stai utilizzando mdui tramite CDN, puoi installare l'estensione mdui VS Code per il supporto IDE. Cerca `mdui` nel marketplace delle estensioni VS Code, seleziona il primo risultato e installalo, oppure [clicca qui per installarlo](vscode:extension/zdhxiong.mdui). Questo abiliterà il supporto IDE mdui per tutti i progetti. Dai la priorità all'installazione npm e alla configurazione di `settings.json` rispetto all'estensione VS Code per garantire che il supporto IDE sia allineato con la versione di mdui in uso. ## WebStorm {#webstorm} ### Per mdui installato tramite npm {#webstorm-npm} Per abilitare il supporto IDE WebStorm per mdui installato tramite npm: 1. Aggiungi la seguente Proprietà alla radice del file `package.json` del tuo progetto: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Se `package.json` ha già una Proprietà `web-types`, aggiungi `./node_modules/mdui/web-types.en.json` all'array `web-types`. Riavvia WebStorm dopo queste modifiche. ### Per mdui utilizzato tramite CDN {#webstorm-cdn} Se stai utilizzando mdui tramite CDN, puoi installare il plugin mdui WebStorm per il supporto IDE. Cerca `mdui` nel marketplace dei plugin WebStorm, seleziona il primo risultato e installalo. Questo abiliterà il supporto IDE mdui per tutti i progetti. Dai la priorità all'installazione npm e alla configurazione di `package.json` rispetto al plugin WebStorm per garantire che il supporto IDE sia allineato con la versione di mdui in uso. ## Differenze nel supporto tra VS Code e WebStorm {#difference} Il supporto mdui varia tra VS Code e WebStorm. La tabella seguente dettaglia le differenze: | Posizione di completamento automatico e suggerimenti al passaggio del mouse | VS Code | WebStorm | | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Nomi dei tag HTML | | | | Nomi degli attributi all'interno dei tag HTML | | | | Valori di enumerazione all'interno degli attributi dei tag HTML | | (Non supporta la visualizzazione dei commenti sui valori di enumerazione) | | Nomi degli eventi all'interno dei tag HTML | | | | Valori dell'Attributo `name` all'interno degli slot HTML | | | | Nomi degli attributi `part` all'interno dei selettori CSS `::part()` | | | | Nomi delle proprietà CSS personalizzate all'interno di CSS specifici del componente | | | | Nomi delle proprietà CSS personalizzate globali | | | | Nomi delle classi CSS globali | | | # Localizzazione mdui predefinisce l'inglese. Per supportare altre lingue, configura la Localizzazione. ## Utilizzo {#usage} mdui fornisce tre funzioni per la Localizzazione: - [`loadLocale`](/it/docs/2/functions/loadLocale): Carica i moduli di Localizzazione. Accetta una funzione che prende un codice locale e restituisce una Promise che risolve il modulo locale. Chiama questa funzione nel file di ingresso del tuo progetto. - [`setLocale`](/it/docs/2/functions/setLocale): Inizia a cambiare la lingua attiva con il codice locale dato e restituisce una promise che si risolve quando la nuova lingua è stata caricata. - [`getLocale`](/it/docs/2/functions/getLocale): Restituisce il codice locale attivo. Esempio di utilizzo: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // Carica i moduli di Localizzazione nel punto di ingresso del tuo progetto loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Cambia lingua e restituisce una promise che si risolve quando la nuova lingua è stata caricata setLocale('zh-cn').then(() => { // Puoi usare getLocale() per ottenere il codice locale corrente console.log(getLocale()); // zh-cn }); ``` ## Eventi di Stato {#event} L'evento `mdui-localize-status` viene attivato su `window` ogni volta che inizia, termina o fallisce un cambio di lingua. Puoi ascoltare questo evento per eseguire operazioni personalizzate, come impostare un cookie di preferenza della lingua. La proprietà stringa `detail.status` ti informa sul tipo di cambiamento di stato che si è verificato e può essere `loading`, `ready` o `error`:
detail.status descrizione
loading

Una nuova lingua ha iniziato a caricarsi.

L'oggetto detail contiene:

  • loadingLocale: Codice della lingua che ha iniziato il caricamento.
ready

Una nuova lingua è stata caricata con successo.

L'oggetto detail contiene:

  • readyLocale: Codice della lingua che è stata caricata con successo.
error

Il caricamento di una nuova lingua è fallito.

L'oggetto detail contiene:

  • errorLocale: Codice della lingua che non è riuscita a caricarsi.
  • errorMessage: Messaggio di errore dal fallimento del caricamento della lingua.
Esempio di utilizzo dell'evento di stato: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log(`Caricamento nuova lingua: ${event.detail.loadingLocale}`); } else if (event.detail.status === 'ready') { console.log(`Caricata nuova lingua: ${event.detail.readyLocale}`); } else if (event.detail.status === 'error') { console.error( `Errore durante il caricamento della lingua ${event.detail.errorLocale}: ${event.detail.errorMessage}`, ); } }); ``` ## Approcci per caricare i moduli di Localizzazione {#load-locale} ### Caricamento Lazy {#lazy-load} Utilizza gli [import dinamici](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) per caricare ogni lingua solo quando diventa attiva. Questa è una buona impostazione predefinita perché riduce al minimo la quantità di codice che i tuoi utenti scaricheranno ed eseguiranno. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Pre-caricamento {#pre-load} Quando la pagina viene caricata, scarica in anticipo tutti i pacchetti lingua necessari. In questo modo, al cambio di lingua non è necessario alcun download aggiuntivo, rendendo il cambio più rapido. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### Import Statici {#static-imports} Utilizzando questo metodo, tutti i pacchetti lingua necessari e il codice del progetto vengono raggruppati nello stesso file, non è più necessario scaricare i pacchetti lingua separatamente. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## Caricamento dei Moduli di Localizzazione tramite CDN {#cdn} Quando si utilizza mdui tramite CDN, è possibile caricare direttamente i moduli di Localizzazione dal CDN: ```html ``` ## Lingue Supportate {#languages} mdui supporta le seguenti lingue: | Lingua | Codice Locale | | ---------------------- | ------------- | | Arabo | ar-eg | | Azero | az-az | | Bulgaro | bg-bg | | Bengalese (Bangladesh) | bn-bd | | Bielorusso | be-by | | Catalano | ca-es | | Ceco | cs-cz | | Danese | da-dk | | Tedesco | de-de | | Greco | el-gr | | Inglese (Regno Unito) | en-gb | | Inglese (Americano) | en-us | | Spagnolo | es-es | | Estone | et-ee | | Persiano | fa-ir | | Finlandese | fi-fi | | Francese (Belgio) | fr-be | | Francese (Canada) | fr-ca | | Francese (Francia) | fr-fr | | Irlandese (Irlanda) | ga-ie | | Galiziano (Spagna) | gl-es | | Ebraico | he-il | | Hindi | hi-in | | Croato | hr-hr | | Ungherese | hu-hu | | Armeno | hy-am | | Indonesiano | id-id | | Italiano | it-it | | Islandese | is-is | | Giapponese | ja-jp | | Georgiano | ka-ge | | Khmer | km-kh | | Curdo (Kurmanji) | kmr-iq | | Kannada | kn-in | | Kazako | kk-kz | | Coreano | ko-kr | | Lituano | lt-lt | | Lettone | lv-lv | | Macedone | mk-mk | | Malayalam (India) | ml-in | | Mongolo | mn-mn | | Malese (Malaysia) | ms-my | | Norvegese | nb-no | | Nepalese | ne-np | | Olandese (Belgio) | nl-be | | Olandese | nl-nl | | Polacco | pl-pl | | Portoghese (Brasile) | pt-br | | Portoghese | pt-pt | | Rumeno | ro-ro | | Russo | ru-ru | | Slovacco | sk-sk | | Serbo | sr-rs | | Sloveno | sl-si | | Svedese | sv-se | | Tamil | ta-in | | Thai | th-th | | Turco | tr-tr | | Urdu (Pakistan) | ur-pk | | Ucraino | uk-ua | | Vietnamita | vi-vn | | Cinese (Semplificato) | zh-cn | | Cinese (Tradizionale) | zh-hk | | Cinese (Tradizionale) | zh-tw | ## Invio di Nuove Traduzioni o Miglioramenti {#contribute} Per contribuire con nuove traduzioni o miglioramenti alle traduzioni esistenti, invia una pull request su GitHub. Le traduzioni si trovano in [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff) e possono essere modificate direttamente su GitHub se non vuoi clonare il repository in locale. # Domande Frequenti Ecco le domande frequenti su mdui. Controllale prima di chiedere nella community o di creare una nuova segnalazione. ## Perché i componenti non vengono mostrati con tag autochiudenti? {#no-self-closing} mdui è una libreria basata sui Web Component. I Web Component non supportano i tag autochiudenti, quindi con i componenti mdui devi sempre usare il tag di chiusura. ```html ``` ## Come evitare che i componenti non stilizzati appaiano prima del loro caricamento? {#waiting-load} I componenti mdui vengono registrati tramite JavaScript, il che può causare una breve comparsa senza stili fino a quando JavaScript non carica e registra i componenti. Ecco due soluzioni: Una soluzione è utilizzare la pseudo-classe [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:defined) per nascondere i componenti mdui non registrati. Il seguente CSS nasconde tutti i componenti mdui non registrati e li mostra una volta registrati: ```css :not(:defined) { visibility: hidden; } ``` Un'altra soluzione è utilizzare il metodo [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined). Questo metodo restituisce una promise che si risolve quando il componente specificato viene registrato. Per gestire i casi in cui alcuni componenti potrebbero non caricarsi, usa [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled). Nell'esempio seguente, l'elemento `` viene inizialmente nascosto con `opacity: 0` e viene mostrato gradualmente dopo che i componenti sono stati registrati. `Promise.allSettled()` viene utilizzato per attendere il completamento di tutte le promise, garantendo che la pagina venga visualizzata correttamente anche se un componente non riesce a caricarsi. ```html ``` # LLMs.txt mdui fornisce due file: `llms.txt` e `llms-full.txt`. Questi file offrono ai grandi modelli linguistici (LLM) un contesto accurato e citabile, consentendo loro di rispondere a domande su mdui in modo più affidabile. ## Usa llms.txt per fornire contesto all'IA {#context} Link: - `llms.txt`: https://www.mdui.org/it/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/it/docs/2/llms-full.txt `llms.txt` è un indice breve. È ideale per i modelli in grado di navigare sul web. Possono seguire i link per recuperare le pagine Markdown di cui hanno bisogno o usare il file come una rapida panoramica del progetto. `llms-full.txt` contiene il contesto completo. Include tutti i contenuti delle pagine elencati da `llms.txt`. Usalo quando il modello non può accedere a internet o quando preferisci fornire tutto in un unico file. ## Versioni Markdown della documentazione {#md-mirror} Ogni pagina della documentazione ha una versione Markdown. Aggiungi `.md` all'URL della pagina (aggiungi `index.md` per la pagina iniziale). Esempi: https://www.mdui.org/it/docs/2/components/button → https://www.mdui.org/it/docs/2/components/button.md https://www.mdui.org/it/docs/2/ → https://www.mdui.org/it/docs/2/index.md Puoi fornire l'URL Markdown oppure incollare il testo grezzo come contesto. Questo porta spesso a risposte più precise e accurate. ## Come usare con ChatGPT, Claude, ecc. {#how-to-use} Scegli un metodo in base al fatto che il modello possa navigare o caricare file (puoi anche combinare i metodi): 1. Incolla direttamente: inserisci il contenuto di `llms-full.txt` nel prompt di sistema o nel primo messaggio. Esempio: "Ecco il contesto di mdui. Rispondi attenendoti strettamente a esso. Se c'è un conflitto, questo contesto ha la precedenza:\n\n[incolla qui llms-full.txt]". 2. Carica un file: carica `llms-full.txt` (o `llms.txt`) e scrivi nel primo messaggio: "Usa l'allegato come contesto principale". Esempio: "Sulla base della documentazione mdui allegata, descrivi come usare `` ed elenca le insidie comuni." 3. Leggi online: invia un link a `llms.txt` o `llms-full.txt`. Esempio: "Per favore, carica e usa https://www.mdui.org/it/docs/2/llms-full.txt come contesto per le mie domande su mdui." 4. Se devi lavorare solo su un componente o su una funzione, invia l'URL Markdown di quella pagina. Esempio: "Per favore, leggi https://www.mdui.org/it/docs/2/components/button.md e fornisci tre best practice basate su di esso." Suggerimento: Fai clic sull'icona in alto a destra di qualsiasi pagina per copiare rapidamente questi link, aprire la versione Markdown o aprire la pagina corrente o `llms-full.txt` in ChatGPT come contesto. # MCP Server mdui fornisce un server [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) dedicato, `@mdui/mcp`, che consente agli agenti IA di interrogare informazioni locali su componenti, icone, variabili CSS e documentazione. Funziona con strumenti per sviluppatori quali Claude Code, Cursor, GitHub Copilot e altri, aiutandoti a generare codice e a usare correttamente i componenti e gli stili di mdui. ## Strumenti {#tools} Il server MCP di mdui espone i seguenti strumenti agli agenti IA: - `list_components`: Elenca tutti i componenti di mdui. - `get_component_metadata`: Ottiene i metadati API dettagliati per un singolo componente. - `list_css_classes`: Elenca i nomi delle classi CSS globali. - `list_css_variables`: Elenca le variabili CSS globali. - `list_documents`: Elenca tutte le voci della documentazione. - `get_document`: Ottiene il contenuto completo di un singolo documento. - `list_icon_codes`: Elenca i codici delle icone per attributi o API. - `list_icon_components`: Elenca i componenti icona autonomi e le loro istruzioni di importazione ESM. ## Come usare {#usage} Questo server supporta solo il [trasporto stdio](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio). Funziona direttamente con VS Code, Cursor, Claude Code, Windsurf, Zed e altri client, così come con agenti IA che supportano MCP su stdio. ### VS Code {#vscode} > Assicurati di avere installate sia le estensioni [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) che [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). 1. Crea `.vscode/mcp.json` nella root del progetto con il seguente contenuto: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Fai clic sul pulsante "Start" che appare nel file `mcp.json`. 3. Avvia una conversazione in GitHub Copilot Chat. ### Cursor {#cursor} 1. Crea o modifica `.cursor/mcp.json` nella root del progetto e aggiungi: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Vai su Impostazioni > Impostazioni Cursor > MCP & Integrazioni e abilita il server mdui. 3. Avvia una chat in Cursor. ### Claude Code {#claude-code} 1. Nel tuo terminale, aggiungi il server MCP mdui: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Quindi esegui `claude` per avviare una sessione. 3. Inserisci i tuoi prompt per iniziare a interagire con il server. ### Windsurf {#windsurf} 1. Apri Impostazioni > Impostazioni Windsurf > Cascade. 2. Fai clic su "Gestisci MCP", poi "Visualizza configurazione raw", e aggiungi: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > Se il server MCP non appare automaticamente, fai clic su Aggiorna per ricaricare l'elenco. 3. Inserisci i tuoi prompt per avviare una conversazione. ### Zed {#zed} 1. Apri Impostazioni > Apri Impostazioni, quindi aggiungi quanto segue a `settings.json`: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Inizia a dare istruzioni per utilizzare il server. ### Client MCP personalizzati {#custom} Quando utilizzi un client MCP personalizzato localmente o in un ambiente di sviluppo, aggiungi il server alla configurazione del tuo client. Ad esempio: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Tema scuro Tutti i componenti mdui supportano la Modalità scura e possono cambiare automaticamente tema in base alle impostazioni del sistema operativo. Fai clic sulle icone nell'angolo in alto a destra della pagina di documentazione per passare dalla Modalità chiara a quella scura e vedere in anteprima i componenti in entrambe le modalità. Per abilitare la Modalità scura, aggiungi la classe `mdui-theme-dark` al tag ``: ```html ``` Per il cambio automatico del tema in base alle impostazioni del sistema operativo, usa la classe `mdui-theme-auto`: ```html ``` Puoi applicare temi diversi a contenitori diversi all'interno della stessa pagina. Ad esempio, il seguente codice imposta la Modalità scura sul tag ``, ma un `
` annidato utilizza la classe `mdui-theme-light`. Di conseguenza, gli elementi al suo interno vengono mostrati in Modalità chiara, mentre il resto della pagina rimane in Modalità scura: ```html
``` mdui fornisce anche due funzioni per una comoda manipolazione del tema: - [`getTheme`](/it/docs/2/functions/getTheme): Recupera il tema corrente sull'intera pagina o su un elemento specificato. - [`setTheme`](/it/docs/2/functions/setTheme): Applica un tema all'intera pagina o a un elemento specificato. --- Nota: mdui imposta gli stili `color` e `background-color` sui selettori `:root`, `.mdui-theme-light`, `.mdui-theme-dark` e `.mdui-theme-auto`. Se preferisci stili diversi, sentiti libero di sovrascrivere questi valori predefiniti. Ad esempio, per impostare il colore di sfondo su bianco puro e il colore del testo su nero puro in Modalità chiara, e viceversa in Modalità scura, utilizza il seguente CSS: ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # Colore Dinamico mdui supporta il Colore Dinamico. Dato un valore di colore, mdui genera uno Schema Cromatico completo. Può anche estrarre il colore dominante da uno sfondo e creare uno Schema Cromatico basato su di esso. Fai clic sull'icona della tavolozza nell'angolo in alto a destra della pagina della documentazione per alternare tra gli schemi cromatici e osservare l'aspetto di vari componenti con diversi schemi cromatici. Uno Schema Cromatico in mdui è un insieme di Proprietà CSS personalizzate. I componenti mdui fanno riferimento a queste Proprietà per i loro valori di colore, consentendo di aggiornare l'intero Schema Cromatico contemporaneamente. Fare riferimento a [Design Tokens - Colore](/it/docs/2/styles/design-tokens#color) per un elenco completo delle proprietà CSS personalizzate. ## Generazione di uno Schema Cromatico {#color-scheme} La funzione [`setColorScheme`](/it/docs/2/functions/setColorScheme) genera uno Schema Cromatico. Accetta un valore colore esadecimale, genera uno Schema Cromatico basato su di esso e lo applica all'elemento `` della pagina. Ad esempio: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Genera uno Schema Cromatico basato su #0061a4 e imposta l'elemento su quello Schema Cromatico setColorScheme('#0061a4'); ``` Puoi specificare la proprietà `target` nel secondo parametro per applicare lo Schema Cromatico a un elemento specifico. Ad esempio: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Genera uno Schema Cromatico basato su #0061a4 e applicarlo all'elemento .foo setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` Per impostazione predefinita, lo Schema Cromatico generato include solo i colori elencati in [Design Tokens - Colore](/it/docs/2/styles/design-tokens#color). Puoi includere gruppi di colori personalizzati specificando la proprietà `customColors` nel secondo parametro. Fornisci i tuoi nomi e valori di colore personalizzati come mostrato: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Genera uno Schema Cromatico basato su #0061a4, modifica il valore del gruppo di colori di errore esistente e aggiunge un nuovo gruppo di colori musicali setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` Un gruppo di colori personalizzato include quattro Proprietà CSS personalizzate: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` Qui, `{name}` è il nome del colore personalizzato `name` che hai fornito nel campo `customColors`. I nomi dei colori personalizzati possono essere nomi di colori esistenti dallo Schema Cromatico predefinito, come `primary`, `secondary`, `tertiary`, `error`, ecc. Se specifichi questi valori come nomi di colore personalizzati, le corrispondenti quattro Proprietà CSS personalizzate nello Schema Cromatico generato utilizzeranno i valori di colore specificati. Ad esempio, nell'esempio sopra, viene specificato il nome del colore personalizzato `error` e poiché `error` è un nome di colore esistente nello Schema Cromatico predefinito, le sue Proprietà CSS personalizzate corrispondenti vengono utilizzate dai componenti mdui per rappresentare gli stati di errore. Ora, poiché il valore del colore è impostato su un colore verde, anche lo stato di errore nei componenti mdui diventerà verde. I nomi dei colori personalizzati possono anche essere nuovi, come `music` nell'esempio sopra, che non esiste nello Schema Cromatico predefinito. In questo caso, lo Schema Cromatico generato includerà inoltre quattro Proprietà CSS personalizzate. Puoi fare riferimento a queste Proprietà CSS personalizzate nei tuoi stili: ```html
Musica
Contenitore Musica
``` Puoi anche utilizzare la funzione [`removeColorScheme`](/it/docs/2/functions/removeColorScheme) per rimuovere uno Schema Cromatico. Specifica un parametro per rimuovere lo Schema Cromatico da un elemento specifico. Per impostazione predefinita, rimuove lo Schema Cromatico dall'elemento ``. ## Estrazione dei Colori dallo Sfondo {#from-wallpaper} La funzione [`getColorFromImage`](/it/docs/2/functions/getColorFromImage) in mdui estrae il colore dominante da un'istanza Image. Questa funzione restituisce una Promise che restituisce il valore esadecimale del colore estratto. Puoi utilizzare questo valore di colore con la funzione [`setColorScheme`](/it/docs/2/functions/setColorScheme) per impostare lo Schema Cromatico. Ad esempio: ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # Tipografia mdui offre la classe CSS `mdui-prose` per migliorare lo stile degli articoli e la classe CSS `mdui-table` per migliorare lo stile delle tabelle. ## Stile degli Articoli {#prose} Per migliorare la presentazione visiva complessiva di un articolo, inclusi gli elementi ``, applica la classe `mdui-prose` all'elemento padre dell'articolo: ```html

Intestazione

Corpo

``` ## Stile delle Tabelle {#table} Per migliorare la presentazione visiva di una tabella, applica la classe `mdui-table` all'elemento ``: ```html
``` Se desideri che la tabella scorra orizzontalmente all'interno del suo elemento padre, applica la classe `mdui-table` all'elemento padre del ``: ```html
``` # Design Tokens I Design Tokens rappresentano un approccio ormai diffuso per gestire i sistemi di design. Trasformano valori riutilizzabili come colori, caratteri e spaziatura in variabili che possono essere utilizzate in modo coerente in tutto un sistema di design. mdui utilizza Proprietà CSS personalizzate globali per implementare i Design Tokens, mantenendo gli stili coerenti in tutti i componenti. Modificando queste Proprietà, puoi regolare globalmente gli stili di tutti i componenti mdui. Per i tuoi stili, dai la priorità all'utilizzo di queste Proprietà CSS personalizzate per mantenere la coerenza con gli stili dei componenti mdui. Ciò garantisce anche che i tuoi stili si aggiornino in modo sincrono quando si modificano gli schemi cromatici dinamici. ## Colore {#color} mdui fornisce Proprietà CSS personalizzate sia per la Modalità chiara che per quella scura. In Modalità chiara, la proprietà è denominata `--mdui-color-{name}-light` e in Modalità scura è `--mdui-color-{name}-dark`. Inoltre, mdui fornisce Proprietà CSS personalizzate denominate `--mdui-color-{name}`. Questa Proprietà fa riferimento a `--mdui-color-{name}-light` in Modalità chiara e a `--mdui-color-{name}-dark` in Modalità scura, consentendo il cambio automatico del colore in base alla modalità corrente. Per modificare colori specifici, regola sia `--mdui-color-{name}-light` che `--mdui-color-{name}-dark`. Quando leggi le proprietà CSS personalizzate, usa la proprietà `--mdui-color-{name}`. Queste Proprietà CSS personalizzate memorizzano tre valori di canale RGB separati da virgole. Ecco un esempio di come utilizzare le proprietà CSS personalizzate del colore: ```css /* Modifica il valore del colore primario */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* Imposta il colore di sfondo dell'elemento foo su primario */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* Imposta il colore di sfondo dell'elemento bar su primario con opacità 0.8 */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Per generare un nuovo Schema Cromatico, usa la funzione [`setColorScheme`](/it/docs/2/functions/setColorScheme). Questa funzione genera uno Schema Cromatico completo in base al colore fornito.
Nome Colore Proprietà CSS Personalizzata Predefinito Esempio
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## Raggio d'angolo {#shape-corner} mdui fornisce 7 dimensioni di raggio d'angolo. Queste Proprietà CSS personalizzate consentono di regolare il raggio d'angolo: ```css /* Modifica la dimensione del raggio d'angolo extra-piccolo */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* Imposta il raggio d'angolo dell'elemento foo su extra-piccolo */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | Proprietà CSS Personalizzata | Predefinito | Esempio | | --------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## Tipografia {#typescale} mdui fornisce 15 stili tipografici. Ogni stile include Proprietà per l'altezza della linea, la dimensione del carattere, la spaziatura delle lettere e il peso del carattere. Ecco un esempio di come utilizzare queste Proprietà: ```css /* Modifica lo stile del testo Body large */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* Imposta lo stile del testo dell'elemento foo su Body large */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
Proprietà CSS Personalizzata Predefinito Esempio
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## Opacità del Livello di Stato {#state-layer} I componenti mdui, come [``](/it/docs/2/components/button), utilizzano uno strato overlay semi-trasparente durante gli stati di interazione come hover, focus, pressione e trascinamento. L'opacità di questo strato può essere regolata modificando le seguenti Proprietà CSS personalizzate: ```css /* Modifica l'opacità del livello di stato */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | Proprietà CSS Personalizzata | Predefinito | Esempio | | ---------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Elevazione {#elevation} I componenti mdui utilizzano l'elevazione per creare profondità con le ombre. Puoi regolare queste ombre modificando le proprietà CSS personalizzate: ```css /* Modifica l'elevazione di livello1 */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* Imposta l'elevazione dell'elemento foo su livello1 */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | Proprietà CSS Personalizzata | Predefinito | Esempio | | ---------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## Animazione {#motion} I componenti mdui incorporano animazioni, con curve di easing e durate personalizzabili. Queste Proprietà possono essere modificate utilizzando le proprietà CSS personalizzate: ```css /* Modifica la curva di easing standard e la durata short1 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* Applica la curva di easing standard e la durata short1 all'effetto di transizione dell'elemento foo */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Tipo Proprietà CSS Personalizzata Predefinito
Curva di Easing --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
Durata --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## Breakpoint {#breakpoint} I componenti mdui adattano il loro layout in base a vari breakpoint, che vengono forniti tramite Proprietà CSS personalizzate. Ecco un esempio di come modificare un breakpoint: ```css /* Modifica il valore del breakpoint per sm */ :root { --mdui-breakpoint-sm: 560px; } ``` Tieni presente che le proprietà CSS personalizzate non possono essere utilizzate nelle media query CSS. Ad esempio, il seguente utilizzo non è corretto: ```css /* Utilizzo errato. Le proprietà CSS personalizzate non possono essere utilizzate nelle media query */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` Per determinare i breakpoint in JavaScript, utilizza la funzione [`breakpoint`](/it/docs/2/functions/breakpoint). | Proprietà CSS Personalizzata | Predefinito | | ---------------------------- | ----------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # Integrazione con React Per integrare mdui con React, inizia seguendo i passaggi sulla pagina di [installazione](/it/docs/2/getting-started/installation#npm). ## Note {#notes} Quando usi mdui in un ambiente React, tieni a mente alcune cose. Queste considerazioni derivano dai vincoli generali dei Web Component e non sono specifiche di mdui. ### Binding degli Eventi {#event-binding} React non supporta nativamente gli eventi personalizzati. Pertanto, per utilizzare gli eventi forniti dai componenti mdui, devi ottenere un riferimento al componente utilizzando l'attributo `ref`. Tale riferimento può quindi essere utilizzato per aggiungere listener di eventi. Ecco un esempio di gestione degli eventi dei componenti mdui in React: ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('l'interruttore è stato attivato/disattivato'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### Dichiarazioni dei Tipi TypeScript per JSX {#jsx-typescript} Se stai usando mdui in file TypeScript (.tsx), è importante includere le dichiarazioni dei tipi TypeScript. Puoi farlo importando i file di dichiarazione dei tipi di mdui nel file .d.ts del tuo progetto: ```ts /// ``` # Integrazione con Vue Dopo aver [installato mdui](/it/docs/2/getting-started/installation#npm) in Vue, dovrai apportare alcune modifiche aggiuntive. ## Configurazione {#configuration} Per evitare che Vue interpreti i componenti mdui come componenti Vue, dovrai modificare l'opzione `compilerOptions.isCustomElement` in `vite.config.js`: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // Tratta tutti i tag che iniziano con mdui- come componenti mdui isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` Per ulteriori informazioni, consulta la [documentazione ufficiale di Vue](https://it.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue). ## Note {#notes} ### Data Binding Bidirezionale {#data-binding} La direttiva `v-model` non può essere utilizzata per il data binding bidirezionale con i componenti mdui. Dovrai invece gestire manualmente il data binding e gli aggiornamenti. Ad esempio: ```html ``` ### Configurazione di eslint {#eslint} Se stai usando [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue), dovrai aggiungere la seguente regola al tuo `.eslintrc.js`: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Integrazione con Angular Per utilizzare mdui in Angular, completa prima l'[installazione](/it/docs/2/getting-started/installation#npm). Quindi aggiungi la configurazione sottostante. ## Configurazione {#configuration} Innanzitutto, abilita i Web Component in Angular aggiungendo `CUSTOM_ELEMENTS_SCHEMA` all'array `schemas` nel tuo modulo. ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule { } ``` Una volta impostato, puoi importare i componenti mdui nel codice del tuo componente Angular. ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Contenuto del Dialogo
` }) export class DialogExampleComponent implements OnInit { // Usa @ViewChild per ottenere un riferimento all'elemento #dialog @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // Usa nativeElement per accedere al componente mdui this.dialog?.nativeElement.open = true; } } ``` # Integrazione con Altri Framework mdui è costruito con Web Components nativi del browser, il che lo rende compatibile con tutti i framework web. Ecco alcuni modi per utilizzare mdui con i framework più diffusi. ## Aurelia {#Aurelia} Dopo aver completato l'[installazione](/it/docs/2/getting-started/installation#npm) di mdui, dovrai installare e configurare un pacchetto aggiuntivo (solo Aurelia 2): ```bash npm install aurelia-mdui --save ``` quindi collegalo alla tua applicazione: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Note** Segnala bug su [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui) ## WebCell {#WebCell} Per integrare mdui con [WebCell](https://web-cell.dev/), inizia seguendo i passaggi sulla pagina di [installazione](/it/docs/2/getting-started/installation#npm). Il supporto per Web Components, TypeScript e JSX è di prim'ordine e disponibile immediatamente. Oppure puoi creare un nuovo progetto con [il repository template ufficiale su GitHub](https://github.com/EasyWebApp/WebCell-mobile) con [un clic](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Componente Avatar Gli avatar rappresentano utenti o entità tramite immagini, icone o caratteri. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/avatar.js'; ``` Importa il tipo TypeScript: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Avatar con immagine {#example-src} Usa l'attributo `src` per impostare un'immagine come avatar, oppure inserisci direttamente un elemento `` nello slot predefinito. ```html Esempio di immagine profilo ``` L'attributo `fit` determina il modo in cui l'immagine si adatta al contenitore. Funziona in modo simile alla proprietà nativa [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). ### Avatar con icona {#example-icon} Usa l'attributo `icon` per impostare un'Icona Material per l'avatar. Oppure, passa un elemento icona nello slot predefinito. ```html ``` ### Avatar con testo {#example-char} Puoi usare qualsiasi testo nello slot predefinito come avatar. ```html A ``` ## mdui-avatar API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
src src true string

URL dell'immagine dell'avatar
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Come l'immagine si adatta al contenitore, equivalente alla proprietà nativa object-fit. I valori opzionali includono:

  • contain: mantiene le proporzioni originali dell'immagine, ridimensionando il contenuto in modo proporzionale
  • cover: mantiene le proporzioni originali dell'immagine, ma il contenuto potrebbe essere ritagliato
  • fill: valore predefinito, non mantiene le proporzioni originali, il contenuto viene allungato per riempire l'intero contenitore
  • none: mantiene le dimensioni originali dell'immagine, il contenuto non viene ridimensionato né allungato
  • scale-down: mantiene le proporzioni originali dell'immagine, le dimensioni del contenuto corrispondono al valore più piccolo tra none e contain
icon icon true string

Nome dell'icona Material per l'avatar
label label true string

Testo alternativo per l'avatar
### Slots
Nome Descrizione
(predefinito)

Contenuto personalizzato dell'avatar: lettere, caratteri, elementi <img>, icone, ecc.
### CSS Parts
Nome Descrizione
image

Quando si utilizza un'immagine come avatar, l'elemento <img> all'interno del componente
icon

Quando si utilizza un'icona come avatar, l'elemento <mdui-icon> all'interno del componente
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Badge I badge forniscono informazioni dinamiche, come conteggi o indicazioni di stato. Possono contenere etichette o numeri. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/badge.js'; ``` Importa il tipo TypeScript: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Esempio: ```html 12 ``` ## Esempi {#examples} ### Varianti {#example-variant} Usa l'attributo `variant` per controllare la forma del badge. Il valore `large` lo rende più grande. Il contenuto va inserito nello slot predefinito. ```html 99+ ``` ## mdui-badge API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'small' | 'large' 'large'

Variante del badge. I valori opzionali includono:

  • small: badge piccolo, non visualizza testo
  • large: badge grande, visualizza il testo
### Slots
Nome Descrizione
(predefinito)

Testo visualizzato nel badge
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Bottom App Bar La Bottom App Bar offre navigazione e azioni principali nella parte inferiore dello schermo su dispositivi mobili. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/bottom-app-bar.js'; ``` Importa il tipo TypeScript: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` Esempio: (Nota: lo stile `position: relative` nell'esempio è solo a scopo dimostrativo. Rimuovilo in produzione.) ```html
``` **Note:** Il componente `` usa `position: fixed` per impostazione predefinita. Aggiunge automaticamente `padding-bottom` al `body` per evitare che il contenuto della pagina venga oscurato. Tuttavia, usa `position: absolute` nei seguenti casi: 1. Quando è specificato l'attributo `scroll-target`. In questo caso, `padding-bottom` viene aggiunto all'elemento specificato da `scroll-target`. 2. Quando si trova all'interno del componente [``](/it/docs/2/components/layout). In questo caso, non viene aggiunto alcun `padding-bottom`. ## Esempi {#examples} ### All'interno di un contenitore {#example-scroll-target} Per impostazione predefinita, la Bottom App Bar compare sul bordo inferiore della finestra corrente. Per posizionarla all'interno di un contenitore specifico, specifica l'attributo `scroll-target` con il selettore CSS o l'elemento DOM del contenitore. L'elemento padre deve avere gli stili `position: relative; overflow: hidden`. ```html
Contenuto
``` ### Nascondi durante lo scorrimento {#example-scroll-behavior} Per nascondere la Bottom App Bar quando scorre verso il basso e mostrarla quando si scorre verso l'alto, imposta l'attributo `scroll-behavior` su `hide`. Usa l'attributo `scroll-threshold` per impostare quanti pixel devono essere percorsi prima che la Bottom App Bar inizi a nascondersi. ```html
Contenuto
``` ### Floating Action Button ancorato {#example-fab-detach} Se la Bottom App Bar include un [Floating Action Button (FAB)](/it/docs/2/components/fab), aggiungi l'attributo `fab-detach` per fissare il FAB nell'angolo inferiore destro della pagina quando la Bottom App Bar si nasconde allo scorrimento. ```html
``` ## mdui-bottom-app-bar API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
hide hide true boolean false

Se nascondere
fab-detach fabDetach true boolean false

Indica se il componente <mdui-fab> debba staccarsi dalla barra dell'applicazione. Se è true, quando la barra è nascosta, il <mdui-fab> rimane visibile sulla pagina.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Comportamento allo scorrimento. I valori opzionali sono:

  • hide: si nasconde durante lo scorrimento
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Elemento da monitorare per gli eventi di scorrimento. Il valore può essere un selettore CSS, un elemento DOM o un oggetto JQ. Per impostazione predefinita, ascolta l'evento di scorrimento di window.
scroll-threshold scrollThreshold true number

Distanza di scorrimento necessaria per attivare il comportamento, in px.
order order true number

Ordine di layout di questo componente all'interno di <mdui-layout>, dal più piccolo al più grande. Il valore predefinito è 0.
### Eventi
Nome Descrizione
show

L'evento viene attivato all'inizio dell'apertura. Puoi impedirne l'apertura chiamando event.preventDefault().
shown

L'evento viene attivato al termine dell'animazione di apertura.
hide

L'evento viene attivato all'inizio della chiusura. È possibile impedire la chiusura chiamando event.preventDefault().
hidden

L'evento viene attivato al termine dell'animazione di chiusura.
### Slots
Nome Descrizione
(predefinito)

Elementi all'interno della barra dell'applicazione inferiore
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--z-index

Valore CSS z-index del componente
# Componente Button I pulsanti sono componenti interattivi che consentono agli utenti di eseguire azioni come inviare email, condividere documenti o esprimere preferenze. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/button.js'; ``` Importa il tipo TypeScript: ```ts import type { Button } from 'mdui/components/button.js'; ``` Esempio: ```html Pulsante ``` ## Esempi {#examples} ### Variante {#example-variant} L'attributo `variant` determina l'aspetto del pulsante. ```html In rilievo Riempito Tonale Con contorno Testo ``` ### Larghezza intera {#example-full-width} Aggiungi l'attributo `full-width` per far sì che il pulsante occupi l'intera larghezza del suo contenitore. ```html Pulsante ``` ### Icone {#example-icon} Usa gli attributi `icon` e `end-icon` per aggiungere Icone Material rispettivamente ai lati sinistro e destro del pulsante. Oppure, usa gli slot `icon` e `end-icon` per aggiungere elementi personalizzati ai lati del pulsante. ```html Icona Slot ``` ### Link {#example-link} Usa l'attributo `href` per trasformare il pulsante in un link. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html Link ``` ### Stato Disabilitato e in Caricamento {#example-disabled} Usa l'attributo `disabled` per disabilitare il pulsante. L'attributo `loading` visualizza uno stato di caricamento. ```html Disabilitato Caricamento Caricamento e Disabilitato ``` ## mdui-button API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

Variante del pulsante. I valori opzionali includono:

  • elevated: pulsante con ombra, utile quando serve separarlo visivamente dallo sfondo
  • filled: aspetto più marcato, adatto all'azione finale di un processo importante, come "Salva" o "Conferma"
  • tonal: aspetto intermedio tra filled e outlined, adatto ad azioni di priorità medio-alta, come "Avanti" in un processo
  • outlined: pulsante con bordo, adatto per azioni di priorità media o secondaria, come "Indietro"
  • text: pulsante testuale, adatto ad azioni di priorità più bassa
full-width fullWidth true boolean false

Se deve occupare l'intera larghezza dell'elemento padre
icon icon true string

Nome dell'icona Material a sinistra. Può essere specificato anche tramite slot="icon".
end-icon endIcon true string

Nome dell'icona Material a destra. Può essere specificato anche tramite slot="end-icon".
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. Le opzioni disponibili sono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. Le opzioni disponibili sono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se attivare automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Indice di tabulazione dell'elemento
disabled disabled true boolean false

Se il componente è disabilitato
loading loading true boolean false

Se il componente è in stato di caricamento
name name true string ''

Nome del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
value value true string ''

Valore iniziale del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo di pulsante. Il tipo predefinito è button. Le opzioni disponibili sono:

  • submit: invia i dati del modulo al server
  • reset: reimposta tutti i campi del modulo ai valori iniziali
  • button: questo tipo di pulsante non ha un comportamento predefinito

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
formaction formAction true string

Specifica l'URL per l'invio del modulo.

Se questo attributo è specificato, sovrascriverà l'attributo action dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Specifica il tipo di contenuto per l'invio del modulo al server. Le opzioni disponibili sono:

  • application/x-www-form-urlencoded: valore predefinito quando questo attributo non è specificato
  • multipart/form-data: utilizzato quando il modulo contiene un elemento <input type="file">
  • text/plain: introdotto in HTML5, utilizzato per il debug

Se questo attributo è specificato, sovrascriverà l'attributo enctype dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formmethod formMethod true 'post' | 'get'

Specifica il metodo HTTP da utilizzare durante l'invio del modulo. Le opzioni disponibili sono:

  • post: i dati del modulo sono inclusi nel corpo della richiesta e inviati al server
  • get: i dati del modulo vengono aggiunti all'URL del modulo con ? come separatore e l'URL generato viene inviato al server. Utilizzare questo metodo quando il modulo non ha effetti collaterali e contiene solo caratteri ASCII

Se questo attributo è impostato, sovrascriverà l'attributo method dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formnovalidate formNoValidate true boolean false

Se questo attributo è impostato, la convalida del modulo non verrà eseguita durante l'invio.

Se questo attributo è impostato, sovrascriverà l'attributo novalidate dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dove aprire la risposta ricevuta dopo l'invio del modulo. I valori opzionali includono:

  • _self: opzione predefinita, apre nel frame corrente
  • _blank: apre in una nuova finestra
  • _parent: apre nel frame genitore
  • _top: apre nell'intera finestra

Se questo attributo è impostato, sovrascriverà l'attributo target dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
invalid

Attivato quando la convalida del campo del modulo non viene superata
### Slots
Nome Descrizione
(predefinito)

Testo del pulsante
icon

Elemento a sinistra del pulsante
end-icon

Elemento a destra del pulsante
### CSS Parts
Nome Descrizione
button

Elemento <button> o <a> interno
label

Testo del pulsante
icon

Icona a sinistra del pulsante
end-icon

Icona a destra del pulsante
loading

Elemento <mdui-circular-progress> nello stato di caricamento
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Icon Button I pulsanti icona vengono utilizzati per eseguire piccole azioni con un solo clic. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/button-icon.js'; ``` Importa il tipo TypeScript: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Icona {#example-icon} Usa l'attributo `icon` per specificare il nome di un'icona Material. Oppure, puoi inserire direttamente l'icona nello slot predefinito. ```html ``` ### Variante {#example-variant} L'attributo `variant` determina la variante del pulsante icona. ```html ``` ### Selezionabile {#example-selectable} Aggiungi l'attributo `selectable` per rendere selezionabile il pulsante icona. ```html ``` Usa l'attributo `selected-icon` per specificare il nome dell'Icona Material per lo stato selezionato. Oppure, usa lo slot `selected-icon` per specificare l'elemento icona dello stato selezionato. ```html ``` La proprietà `selected` è `true` quando il pulsante icona è selezionato. Aggiungi l'attributo `selected` per fare in modo che il pulsante icona sia selezionato fin dall'inizio. ```html ``` ### Link {#example-link} Usa l'attributo `href` per trasformare il pulsante icona in un link. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html ``` ### Stato Disabilitato e in Caricamento {#example-disabled} Usa l'attributo `disabled` per disabilitare il pulsante icona. L'attributo `loading` mostra lo stato di caricamento. ```html ``` ## mdui-button-icon API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

Variante del pulsante icona. I valori opzionali includono:

  • standard: adatto ad azioni di priorità più bassa
  • filled: aspetto più marcato, adatto ad azioni ad alta priorità
  • tonal: aspetto intermedio tra filled e outlined, adatto ad azioni di priorità medio-alta
  • outlined: adatto per operazioni a priorità media
icon icon true string

Nome dell'icona Material. Può essere specificato anche tramite lo slot predefinito.
selected-icon selectedIcon true string

Nome dell'icona Material per lo stato selezionato. Può essere specificato anche tramite slot="selected-icon".
selectable selectable true boolean false

Se selezionabile
selected selected true boolean false

Se il componente è selezionato
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. Le opzioni disponibili sono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. Le opzioni disponibili sono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se attivare automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Indice di tabulazione dell'elemento
disabled disabled true boolean false

Se il componente è disabilitato
loading loading true boolean false

Se il componente è in stato di caricamento
name name true string ''

Nome del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
value value true string ''

Valore iniziale del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo di pulsante. Il tipo predefinito è button. Le opzioni disponibili sono:

  • submit: invia i dati del modulo al server
  • reset: reimposta tutti i campi del modulo ai valori iniziali
  • button: questo tipo di pulsante non ha un comportamento predefinito

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
formaction formAction true string

Specifica l'URL per l'invio del modulo.

Se questo attributo è specificato, sovrascriverà l'attributo action dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Specifica il tipo di contenuto per l'invio del modulo al server. Le opzioni disponibili sono:

  • application/x-www-form-urlencoded: valore predefinito quando questo attributo non è specificato
  • multipart/form-data: utilizzato quando il modulo contiene un elemento <input type="file">
  • text/plain: introdotto in HTML5, utilizzato per il debug

Se questo attributo è specificato, sovrascriverà l'attributo enctype dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formmethod formMethod true 'post' | 'get'

Specifica il metodo HTTP da utilizzare durante l'invio del modulo. Le opzioni disponibili sono:

  • post: i dati del modulo sono inclusi nel corpo della richiesta e inviati al server
  • get: i dati del modulo vengono aggiunti all'URL del modulo con ? come separatore e l'URL generato viene inviato al server. Utilizzare questo metodo quando il modulo non ha effetti collaterali e contiene solo caratteri ASCII

Se questo attributo è impostato, sovrascriverà l'attributo method dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formnovalidate formNoValidate true boolean false

Se questo attributo è impostato, la convalida del modulo non verrà eseguita durante l'invio.

Se questo attributo è impostato, sovrascriverà l'attributo novalidate dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dove aprire la risposta ricevuta dopo l'invio del modulo. I valori opzionali includono:

  • _self: opzione predefinita, apre nel frame corrente
  • _blank: apre in una nuova finestra
  • _parent: apre nel frame genitore
  • _top: apre nell'intera finestra

Se questo attributo è impostato, sovrascriverà l'attributo target dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
change

Attivato quando lo stato di selezione cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
### Slots
Nome Descrizione
(predefinito)

Componente icona
selected-icon

Elemento icona visualizzato nello stato selezionato
### CSS Parts
Nome Descrizione
button

Elemento <button> o <a> interno
icon

Icona nello stato non selezionato
selected-icon

Icona nello stato selezionato
loading

Elemento <mdui-circular-progress> nello stato di caricamento
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Card Le card sono componenti versatili che fungono da contenitori per contenuti e azioni relativi a un singolo argomento. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/card.js'; ``` Importa il tipo TypeScript: ```ts import type { Card } from 'mdui/components/card.js'; ``` Esempio: ```html Card ``` ## Esempi {#examples} ### Variante {#example-variant} L'attributo `variant` determina l'aspetto della card. ```html ``` ### Cliccabile {#example-clickable} Aggiungi l'attributo `clickable` per rendere interattiva la card. Questo aggiunge effetti hover e di ripple al clic. ```html ``` ### Link {#example-link} Usa l'attributo `href` per trasformare la card in un link. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html ``` ### Stato Disabilitato {#example-disabled} Usa l'attributo `disabled` per disabilitare la card. ```html ``` ## mdui-card API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

Variante della card. I valori opzionali includono:

  • elevated: card con ombra, che offre maggiore separazione visiva dallo sfondo
  • filled: card con sfondo pieno, che offre minore separazione visiva dallo sfondo
  • outlined: card con bordo, che offre la massima separazione visiva dallo sfondo
clickable clickable true boolean false

Se cliccabile. Se true, la card avrà un effetto al passaggio del mouse e un effetto a ondulazione al clic.
disabled disabled true boolean false

Se il componente è disabilitato
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. I valori opzionali includono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. I valori opzionali includono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
### Slots
Nome Descrizione
(predefinito)

Contenuto della card
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Checkbox Le checkbox consentono agli utenti di selezionare una o più opzioni da un insieme. Ogni checkbox può passare dallo stato selezionato a quello deselezionato. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/checkbox.js'; ``` Importa il tipo TypeScript: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Esempio: ```html Checkbox ``` ## Esempi {#examples} ### Stato Selezionato {#example-checked} La proprietà `checked` è `true` quando la checkbox è selezionata. Aggiungi l'attributo `checked` per fare in modo che la checkbox sia selezionata fin dall'inizio. ```html Checkbox ``` ### Stato Disabilitato {#example-disabled} Usa l'attributo `disabled` per disabilitare la checkbox. ```html Checkbox Checkbox ``` ### Stato Indeterminato {#example-indeterminate} L'attributo `indeterminate` imposta la checkbox su uno stato indeterminato. ```html Checkbox ``` ### Icone {#example-icon} Usa gli attributi `unchecked-icon`, `checked-icon` e `indeterminate-icon` per impostare le Icone Material per la checkbox rispettivamente negli stati deselezionato, selezionato e indeterminato. Oppure, usa gli slot corrispondenti per impostare le icone. ```html Checkbox Checkbox
Checkbox Checkbox ``` ## mdui-checkbox API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
disabled disabled true boolean false

Se il componente è disabilitato
checked checked true boolean false

Se il componente è selezionato
undefined defaultChecked false boolean false

Stato selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo stato. Questa proprietà può essere impostata solo tramite JavaScript.
indeterminate indeterminate true boolean false

Se il componente è indeterminato
required required true boolean false

Se è obbligatorio selezionare questa casella di controllo al momento dell'invio del modulo
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.
name name true string ''

Nome della casella di controllo, inviato insieme ai dati del modulo
value value true string 'on'

Valore della casella di controllo, inviato insieme ai dati del modulo
unchecked-icon uncheckedIcon true string

Nome dell'icona Material per lo stato non selezionato. Può essere specificato anche tramite slot="unchecked-icon".
checked-icon checkedIcon true string

Nome dell'icona Material per lo stato selezionato. Può essere specificato anche tramite slot="checked-icon".
indeterminate-icon indeterminateIcon true string

Nome dell'icona Material per lo stato indeterminato. Può essere specificato anche tramite slot="indeterminate-icon".
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
change

Attivato quando lo stato di selezione cambia
input

Attivato quando lo stato di selezione cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
### Slots
Nome Descrizione
(predefinito)

Testo della casella di controllo
unchecked-icon

Icona nello stato non selezionato
checked-icon

Icona nello stato selezionato
indeterminate-icon

Icona nello stato indeterminato
### CSS Parts
Nome Descrizione
control

Contenitore dell'icona a sinistra
unchecked-icon

Icona nello stato non selezionato
checked-icon

Icona nello stato selezionato
indeterminate-icon

Icona nello stato indeterminato
label

Testo della casella di controllo
# Componente Chip I chip sono elementi compatti che rappresentano un input, un attributo o un'azione. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/chip.js'; ``` Importa il tipo TypeScript: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Esempio: ```html Chip ``` ## Esempi {#examples} ### Variante {#example-variant} L'attributo `variant` determina l'aspetto del chip. Sono disponibili quattro varianti: - `assist`: Utilizzato per azioni ausiliarie relative al contesto corrente, come condividere o aggiungere ai preferiti un elemento. - `filter`: Rappresenta i filtri per una raccolta. - `input`: Rappresenta informazioni inserite singolarmente dall'utente. - `suggestion`: Aiuta a restringere l'intento dell'utente presentando suggerimenti generati dinamicamente. ```html Assist Filtro Input Suggerimento ``` ### In rilievo {#example-elevated} Aggiungi l'attributo `elevated` per aggiungere un'ombra al chip. ```html Chip ``` ### Icone {#example-icon} Usa gli attributi `icon` e `end-icon` per aggiungere Icone Material rispettivamente ai lati sinistro e destro del chip. Oppure, usa gli slot `icon` e `end-icon` per aggiungere elementi ai lati del chip. ```html Icona Icona finale Slot ``` ### Link {#example-link} Usa l'attributo `href` per trasformare il chip in un link. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html Link ``` ### Stato Disabilitato e in Caricamento {#example-disabled} Usa l'attributo `disabled` per disabilitare il chip. L'attributo `loading` mostra lo stato di caricamento. ```html Disabilitato Caricamento Caricamento e Disabilitato ``` ### Selezionabile {#example-selectable} Aggiungi l'attributo `selectable` per rendere selezionabile il chip. ```html Chip ``` Usa l'attributo `selected-icon` per specificare il nome dell'Icona Material per lo stato selezionato. Oppure, usa lo slot `selected-icon` per specificare l'elemento icona dello stato selezionato. ```html Chip Chip ``` La proprietà `selected` è `true` quando il chip è selezionato. Aggiungi l'attributo `selected` per fare in modo che il chip sia selezionato fin dall'inizio. ```html Chip ``` ### Eliminabile {#example-deletable} Aggiungi l'attributo `deletable` per aggiungere un'icona di eliminazione a destra del chip. Quando si fa clic su questa icona viene attivato l'evento `delete`. Usa l'attributo `delete-icon` per specificare l'Icona Material per l'icona di eliminazione, oppure usa lo slot `delete-icon` per specificare l'elemento per l'icona di eliminazione. ```html Chip Chip Chip ``` ## mdui-chip API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'assist' | 'filter' | 'input' | 'suggestion' 'assist'

Variante del chip. I valori opzionali includono:

  • assist: usato per azioni ausiliarie contestuali, come condividere o aggiungere ai preferiti un elemento
  • filter: usato per filtrare i contenuti, come i risultati di ricerca
  • input: usato per rappresentare informazioni inserite dall'utente, come i contatti nel campo "A" di Gmail
  • suggestion: usato per fornire suggerimenti generati dinamicamente e facilitare le azioni dell'utente, come prevedere i messaggi che potrebbe voler inviare in una chat
elevated elevated true boolean false

Se mostrare l'ombra
selectable selectable true boolean false

Se può essere selezionato
selected selected true boolean false

Se il chip è selezionato
deletable deletable true boolean false

Se eliminabile. Se true, sul lato destro dell'etichetta verrà visualizzata un'icona di eliminazione.
icon icon true string

Nome dell'icona Material a sinistra. Può essere specificato anche tramite slot="icon".
selected-icon selectedIcon true string

Nome dell'icona Material a sinistra nello stato selezionato. Può essere specificato anche tramite slot="selected-icon".
end-icon endIcon true string

Nome dell'icona Material a destra. Può essere specificato anche tramite slot="end-icon".
delete-icon deleteIcon true string

Nome dell'icona Material per l'icona di eliminazione a destra, se eliminabile. Può essere specificato anche tramite slot="delete-icon".
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. Le opzioni disponibili sono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. Le opzioni disponibili sono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se attivare automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Indice di tabulazione dell'elemento
disabled disabled true boolean false

Se il componente è disabilitato
loading loading true boolean false

Se il componente è in stato di caricamento
name name true string ''

Nome del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
value value true string ''

Valore iniziale del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo di pulsante. Il tipo predefinito è button. Le opzioni disponibili sono:

  • submit: invia i dati del modulo al server
  • reset: reimposta tutti i campi del modulo ai valori iniziali
  • button: questo tipo di pulsante non ha un comportamento predefinito

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
formaction formAction true string

Specifica l'URL per l'invio del modulo.

Se questo attributo è specificato, sovrascriverà l'attributo action dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Specifica il tipo di contenuto per l'invio del modulo al server. Le opzioni disponibili sono:

  • application/x-www-form-urlencoded: valore predefinito quando questo attributo non è specificato
  • multipart/form-data: utilizzato quando il modulo contiene un elemento <input type="file">
  • text/plain: introdotto in HTML5, utilizzato per il debug

Se questo attributo è specificato, sovrascriverà l'attributo enctype dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formmethod formMethod true 'post' | 'get'

Specifica il metodo HTTP da utilizzare durante l'invio del modulo. Le opzioni disponibili sono:

  • post: i dati del modulo sono inclusi nel corpo della richiesta e inviati al server
  • get: i dati del modulo vengono aggiunti all'URL del modulo con ? come separatore e l'URL generato viene inviato al server. Utilizzare questo metodo quando il modulo non ha effetti collaterali e contiene solo caratteri ASCII

Se questo attributo è impostato, sovrascriverà l'attributo method dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formnovalidate formNoValidate true boolean false

Se questo attributo è impostato, la convalida del modulo non verrà eseguita durante l'invio.

Se questo attributo è impostato, sovrascriverà l'attributo novalidate dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dove aprire la risposta ricevuta dopo l'invio del modulo. I valori opzionali includono:

  • _self: opzione predefinita, apre nel frame corrente
  • _blank: apre in una nuova finestra
  • _parent: apre nel frame genitore
  • _top: apre nell'intera finestra

Se questo attributo è impostato, sovrascriverà l'attributo target dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
invalid

Attivato quando la convalida del campo del modulo non viene superata
change

Attivato quando lo stato di selezione cambia
delete

Attivato quando si fa clic sull'icona di eliminazione
### Slots
Nome Descrizione
(predefinito)

Testo dell'etichetta
icon

Elemento a sinistra
end-icon

Elemento a destra
selected-icon

Elemento a sinistra nello stato selezionato
delete-icon

Elemento di eliminazione a destra quando è eliminabile
### CSS Parts
Nome Descrizione
button

Elemento <button> o <a> interno
label

Testo dell'etichetta
icon

Icona a sinistra
end-icon

Icona a destra
selected-icon

Icona a sinistra nello stato selezionato
delete-icon

Icona di eliminazione a destra quando è eliminabile
loading

Elemento <mdui-circular-progress> nello stato di caricamento
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Circular Progress Gli indicatori di progresso circolari mostrano lo stato di avanzamento delle attività in corso. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/circular-progress.js'; ``` Importa il tipo TypeScript: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Progresso Determinato {#example-value} Per impostazione predefinita, l'indicatore di progresso circolare è in uno stato indeterminato. Per impostare il progresso corrente, usa l'attributo `value`. Il valore massimo di progresso predefinito è `1`. ```html ``` Per impostare il valore massimo di progresso, usa l'attributo `max`. ```html ``` ## mdui-circular-progress API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
max max true number 1

Valore massimo dell'indicatore di progresso. Il valore predefinito è 1.
value value false number

Valore corrente dell'indicatore di progresso. Se questo valore non è specificato, viene visualizzato come stato indeterminato.
# Componente Collapse I pannelli a scomparsa vengono utilizzati per raggruppare e nascondere aree di contenuto complesse, migliorando l'organizzazione della pagina. Il componente collapse non include stili predefiniti. Devi creare i tuoi stili o usarlo insieme ad altri componenti. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` Importa i tipi TypeScript: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Esempio: ```html primo contenuto secondo contenuto ``` ## Esempi {#examples} ### Intestazione e Contenuto del Pannello {#example-header} Puoi impostare il testo dell'intestazione del pannello usando l'attributo `header` del componente ``. Oppure, usa lo slot `header` per specificare l'elemento dell'intestazione del pannello. Lo slot predefinito del componente è riservato al contenuto del pannello. ```html Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
``` ### Modalità Accordion {#example-accordion} Per abilitare la modalità accordion, aggiungi l'attributo `accordion` al componente ``. In questa modalità, è possibile aprire un solo pannello alla volta. ```html Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
``` ### Impostazione del Pannello Attivo {#example-value} L'attributo `value` del componente `` consente di leggere o impostare il pannello attualmente aperto. In modalità accordion, `value` è una stringa e può essere manipolato utilizzando attributi o proprietà. In modalità non accordion, `value` è un array e può essere manipolato solo utilizzando la proprietà JavaScript. ```html Modalità Accordion Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
Modalità non accordion Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
``` ### Stato Disabilitato {#example-disabled} Per disabilitare l'intero gruppo di pannelli a scomparsa, aggiungi l'attributo `disabled` al componente ``. Per disabilitare un pannello a scomparsa specifico, aggiungi l'attributo `disabled` al ``. ```html Tutti i pannelli disabilitati Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
Disabilita il Primo Pannello Elemento 1
Elemento 1 - sottoelemento
Elemento 2
Elemento 2 - sottoelemento
``` ### Elemento di attivazione per l'apertura/chiusura {#example-trigger} Per impostazione predefinita, facendo clic sull'intera intestazione del pannello ne viene controllata l'apertura e la chiusura. Puoi specificare un elemento trigger diverso utilizzando l'attributo `trigger` del componente ``. L'attributo `trigger` può essere un selettore CSS o un elemento DOM. ```html Elemento 1
Elemento 1 - sottoelemento
``` ## mdui-collapse-item API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
value value true string

Valore di questo elemento del pannello a scomparsa
header header true string

Titolo di questo elemento del pannello a scomparsa
disabled disabled true boolean false

Se questo elemento del pannello a scomparsa deve essere disabilitato
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Attiva l'apertura/chiusura quando si fa clic su questo elemento. Il valore può essere un selettore CSS, un elemento DOM o un oggetto JQ. Per impostazione predefinita, l'apertura/chiusura si attiva facendo clic sull'intera intestazione.
### Eventi
Nome Descrizione
open

L'evento viene attivato all'inizio dell'apertura.
opened

L'evento viene attivato al termine dell'animazione di apertura.
close

L'evento viene attivato all'inizio della chiusura.
closed

L'evento viene attivato al termine dell'animazione di chiusura.
### Slots
Nome Descrizione
(predefinito)

Contenuto del corpo dell'elemento del pannello a scomparsa
header

Contenuto dell'intestazione dell'elemento del pannello a scomparsa
### CSS Parts
Nome Descrizione
header

Contenuto dell'intestazione del pannello a scomparsa
body

Contenuto del corpo del pannello a scomparsa
## mdui-collapse API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
accordion accordion true boolean false

Se abilitare la modalità fisarmonica
value value false string | string[]

Valore del <mdui-collapse-item> attualmente espanso.

Nota: l'attributo HTML di questa proprietà è sempre una stringa e può essere impostato come valore iniziale tramite l'attributo HTML solo quando accordion è true. Il valore della proprietà JavaScript è una stringa quando accordion è true e un array di stringhe quando accordion è false. Pertanto, quando accordion è false, questo valore può essere modificato solo tramite la proprietà JavaScript.
disabled disabled true boolean false

Se questo pannello a scomparsa deve essere disabilitato
### Eventi
Nome Descrizione
change

Attivato quando l'elemento del pannello a scomparsa attualmente espanso cambia
### Slots
Nome Descrizione
(predefinito)

Componente <mdui-collapse-item>
# Componente Dialog I dialoghi vengono utilizzati per visualizzare informazioni cruciali durante il flusso di lavoro di un utente. Oltre a utilizzare direttamente questo componente, mdui fornisce anche quattro funzioni: [`mdui.dialog`](/it/docs/2/functions/dialog), [`mdui.alert`](/it/docs/2/functions/alert), [`mdui.confirm`](/it/docs/2/functions/confirm), [`mdui.prompt`](/it/docs/2/functions/prompt). Queste funzioni offrono un modo più pratico per usare il componente Dialog. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/dialog.js'; ``` Importa il tipo TypeScript: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Esempio: ```html Dialogo Chiudi Apri il dialogo ``` ## Esempi {#examples} ### Chiudi al clic sullo sfondo {#example-close-on-overlay-click} Aggiungi l'attributo `close-on-overlay-click` per chiudere il dialogo quando si fa clic sullo sfondo. ```html Dialogo Apri il dialogo ``` ### Chiudi con ESC {#example-close-on-esc} Aggiungi l'attributo `close-on-esc` per abilitare la chiusura del dialogo quando viene premuto il tasto ESC. ```html Dialogo Apri il dialogo ``` ### Schermo Intero {#example-fullscreen} Aggiungi l'attributo `fullscreen` per rendere il dialogo a schermo intero. ```html Dialogo Chiudi Apri il dialogo ``` ### Icona {#example-icon} Imposta l'attributo `icon` per aggiungere un'Icona Material sopra il dialogo. ```html Dialogo Apri il dialogo ``` Oppure, aggiungi un elemento icona sopra il dialogo utilizzando lo slot `icon`. ```html Dialogo Apri il dialogo ``` ### Titolo e Descrizione {#example-headline} Usa gli attributi `headline` e `description` per impostare il titolo e la descrizione del dialogo. ```html Apri il dialogo ``` Oppure, usa gli slot `headline` e `description` per impostare gli elementi del titolo e della descrizione. ```html Eliminare le immagini selezionate? Le immagini verranno rimosse permanentemente dal tuo account e da tutti i dispositivi sincronizzati. Apri il dialogo ``` ### Pulsanti di Azione in Basso {#example-action} Usa lo slot `action` per aggiungere pulsanti di azione nella parte inferiore del dialogo. ```html Annulla Elimina Apri il dialogo ``` Aggiungi l'attributo `stacked-actions` per impilare verticalmente i pulsanti di azione. ```html Attiva la localizzazione No grazie Apri il dialogo ``` ### Intestazione {#example-header} Usa lo slot `header` per definire l'intestazione del dialogo. ```html Titolo Salva
Apri il dialogo ``` ## mdui-dialog API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
icon icon true string

Nome dell'icona Material in alto. Può essere specificato anche tramite slot="icon".
headline headline true string

Titolo. Può essere specificato anche tramite slot="headline".
description description true string

Testo sotto il titolo. Può essere specificato anche tramite slot="description".
open open true boolean false

Se la finestra di dialogo è aperta
fullscreen fullscreen true boolean false

Indica se mostrare la finestra di dialogo a schermo intero
close-on-esc closeOnEsc true boolean false

Indica se consentire la chiusura della finestra di dialogo premendo il tasto ESC
close-on-overlay-click closeOnOverlayClick true boolean false

Indica se consentire la chiusura della finestra di dialogo facendo clic sull'overlay
stacked-actions stackedActions true boolean false

Se disporre verticalmente i pulsanti di azione in basso
### Eventi
Nome Descrizione
open

Attivato all'inizio dell'apertura della finestra di dialogo. È possibile impedire l'apertura della finestra di dialogo chiamando event.preventDefault().
opened

Attivato al termine dell'animazione di apertura della finestra di dialogo.
close

Attivato all'inizio della chiusura della finestra di dialogo. È possibile impedire la chiusura della finestra di dialogo chiamando event.preventDefault().
closed

Attivato al termine dell'animazione di chiusura della finestra di dialogo.
overlay-click

Attivato quando si fa clic sull'overlay.
### Slots
Nome Descrizione
header

Elemento in alto, contiene di default lo slot icon e lo slot headline.
icon

Icona in alto
headline

Titolo in alto
description

Testo sotto il titolo
(predefinito)

Contenuto principale della finestra di dialogo
action

Elementi nella barra delle azioni in basso
### CSS Parts
Nome Descrizione
overlay

Overlay
panel

Contenitore della finestra di dialogo
header

Parte dell'intestazione della finestra di dialogo, contiene icona e titolo
icon

Icona in alto, situata nell'intestazione
headline

Titolo in alto, situato nell'intestazione
body

Parte del corpo della finestra di dialogo
description

Parte del testo secondario, situata nel corpo
action

Pulsanti di azione in basso
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--z-index

Valore CSS z-index del componente
# Componente Divider Un divider è una linea sottile che raggruppa il contenuto in elenchi e layout. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/divider.js'; ``` Importa il tipo TypeScript: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Divider Verticale {#example-vertical} Per visualizzare il divider verticalmente, aggiungi l'attributo `vertical`. ```html
``` ### Margine Sinistro {#example-inset} Per creare un margine del divider da sinistra, aggiungi l'attributo `inset`. Questo viene tipicamente utilizzato negli elenchi per allineare il divider con il testo a sinistra. ```html Elemento 1 Elemento 2 ``` ### Margine Centrale {#example-middle} Per aggiungere un margine a entrambi i lati del divider, aggiungi l'attributo `middle`. ```html Elemento 1 Elemento 2 ``` ## mdui-divider API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
vertical vertical true boolean false

Se è una linea di separazione verticale
inset inset true boolean false

Se deve rientrare a sinistra
middle middle true boolean false

Se deve rientrare su entrambi i lati
# Componente Dropdown Il componente Dropdown mostra il contenuto in un menu a comparsa. Si usa spesso insieme a Menu. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/dropdown.js'; ``` Importa il tipo TypeScript: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Esempio: ```html Apri il menu Elemento 1 Elemento 2 ``` ## Esempi {#examples} ### Stato Disabilitato {#example-disabled} Aggiungi l'attributo `disabled` per disabilitare il dropdown. ```html Apri il menu Elemento 1 Elemento 2 ``` ### Posizione di apertura {#example-placement} Usa l'attributo `placement` per controllare la posizione del menu a discesa. ```html Apri il menu Elemento 1 Elemento 2 ``` ### Attivazione {#example-trigger} Usa l'attributo `trigger` per scegliere come si attiva il menu a discesa. ```html Apri il menu Elemento 1 Elemento 2 ``` ### Apri nel punto del puntatore {#example-open-on-pointer} Aggiungi l'attributo `open-on-pointer` per aprire il dropdown nella posizione del puntatore. Questo viene spesso combinato con `trigger="contextmenu"` per l'attivazione del menu con il tasto destro. ```html Apri il menu qui con il tasto destro del mouse Elemento 1 Elemento 2 ``` ### Mantieni il menu aperto {#example-stay-open-on-click} Per impostazione predefinita, il dropdown si chiude quando fai clic su una voce di menu. Aggiungi `stay-open-on-click` per mantenerlo aperto. ```html Apri il menu Elemento 1 Elemento 2 ``` ### Ritardo di apertura/chiusura {#example-delay} Con `trigger="hover"`, usa `open-delay` e `close-delay` per impostare i ritardi di apertura e chiusura. ```html Apri il menu Elemento 1 Elemento 2 ``` ## mdui-dropdown API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
open open true boolean false

Se il dropdown deve aprirsi
disabled disabled true boolean false

Se il dropdown deve essere disabilitato
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

Modalità di apertura del dropdown. Supporta più valori separati da spazi. I valori opzionali includono:

  • click: apre al clic
  • hover: apre al passaggio del mouse
  • focus: apre al focus
  • contextmenu: apre al clic con il tasto destro del mouse o alla pressione prolungata sul tocco
  • manual: può essere aperto e chiuso solo via codice; non è possibile specificare altre modalità di apertura
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Posizione del contenuto del dropdown. I valori opzionali includono:

  • auto: determina automaticamente la posizione
  • top-start: in alto a sinistra
  • top: in alto al centro
  • top-end: in alto a destra
  • bottom-start: in basso a sinistra
  • bottom: in basso al centro
  • bottom-end: in basso a destra
  • left-start: a sinistra in alto
  • left: a sinistra al centro
  • left-end: a sinistra in basso
  • right-start: a destra in alto
  • right: a destra al centro
  • right-end: a destra in basso
stay-open-on-click stayOpenOnClick true boolean false

Dopo il clic su <mdui-menu-item>, indica se il dropdown rimane aperto.
open-delay openDelay true number 150

Ritardo per l'apertura del dropdown attivato dal passaggio del mouse, in millisecondi
close-delay closeDelay true number 150

Ritardo per la chiusura del dropdown attivato dal passaggio del mouse, in millisecondi
open-on-pointer openOnPointer true boolean false

Indica se aprire il dropdown nella posizione del puntatore quando viene attivato; è utile soprattutto per aprire il menu contestuale con il tasto destro.
### Eventi
Nome Descrizione
open

L'evento viene attivato all'inizio dell'apertura del componente dropdown. È possibile impedire l'apertura del dropdown chiamando event.preventDefault().
opened

L'evento viene attivato al termine dell'animazione di apertura del dropdown.
close

L'evento viene attivato all'inizio della chiusura del componente dropdown. È possibile impedire la chiusura del dropdown chiamando event.preventDefault().
closed

L'evento viene attivato al termine dell'animazione di chiusura del dropdown.
### Slots
Nome Descrizione
(predefinito)

Contenuto del componente dropdown
trigger

Elemento che attiva il dropdown, ad esempio un elemento <mdui-button>.
### CSS Parts
Nome Descrizione
trigger

Contenitore dell'elemento che attiva il dropdown, cioè il contenitore dello slot trigger.
panel

Contenitore del contenuto del dropdown
### CSS Custom Property
Nome Descrizione
--z-index

Valore CSS z-index del componente
# Componente Floating Action Button Il Floating Action Button (FAB) è un pulsante di azione principale per azioni chiave, e offre un accesso rapido. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/fab.js'; ``` Importa il tipo TypeScript: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Icona {#example-icon} Usa l'attributo `icon` per impostare il nome dell'Icona Material, oppure usa lo slot `icon`. ```html ``` ### Stato Esteso {#example-extended} Usa `extended` per mostrare il testo dello slot predefinito nello stato esteso. ```html Componi ``` ### Variante {#example-variant} Usa l'attributo `variant` per impostare la variante del FAB. ```html ``` ### Dimensione {#example-size} Usa l'attributo `size` per impostare la dimensione del FAB. ```html ``` ### Link {#example-link} Usa l'attributo `href` per trasformare il FAB in un link. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html ``` ### Stato Disabilitato e in Caricamento {#example-disabled} Usa `disabled` per disabilitare il FAB. Usa `loading` per mostrare uno stato di caricamento. ```html ``` ## mdui-fab API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

Variante del FAB, le diverse varianti di questo componente differiscono solo per il colore. I valori opzionali includono:

  • primary: utilizza il colore di sfondo Primary container
  • surface: utilizza il colore di sfondo Surface container high
  • secondary: utilizza il colore di sfondo Secondary container
  • tertiary: utilizza il colore di sfondo Tertiary container
size size true 'normal' | 'small' | 'large' 'normal'

Dimensione del FAB. I valori opzionali includono:

  • normal: FAB di dimensioni normali
  • small: FAB piccolo
  • large: FAB grande
icon icon true string

Nome dell'icona Material. Può essere specificato anche tramite slot="icon".
extended extended true boolean false

Se il componente è espanso
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. Le opzioni disponibili sono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. Le opzioni disponibili sono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se attivare automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Indice di tabulazione dell'elemento
disabled disabled true boolean false

Se il componente è disabilitato
loading loading true boolean false

Se il componente è in stato di caricamento
name name true string ''

Nome del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
value value true string ''

Valore iniziale del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo di pulsante. Il tipo predefinito è button. Le opzioni disponibili sono:

  • submit: invia i dati del modulo al server
  • reset: reimposta tutti i campi del modulo ai valori iniziali
  • button: questo tipo di pulsante non ha un comportamento predefinito

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
formaction formAction true string

Specifica l'URL per l'invio del modulo.

Se questo attributo è specificato, sovrascriverà l'attributo action dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Specifica il tipo di contenuto per l'invio del modulo al server. Le opzioni disponibili sono:

  • application/x-www-form-urlencoded: valore predefinito quando questo attributo non è specificato
  • multipart/form-data: utilizzato quando il modulo contiene un elemento <input type="file">
  • text/plain: introdotto in HTML5, utilizzato per il debug

Se questo attributo è specificato, sovrascriverà l'attributo enctype dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formmethod formMethod true 'post' | 'get'

Specifica il metodo HTTP da utilizzare durante l'invio del modulo. Le opzioni disponibili sono:

  • post: i dati del modulo sono inclusi nel corpo della richiesta e inviati al server
  • get: i dati del modulo vengono aggiunti all'URL del modulo con ? come separatore e l'URL generato viene inviato al server. Utilizzare questo metodo quando il modulo non ha effetti collaterali e contiene solo caratteri ASCII

Se questo attributo è impostato, sovrascriverà l'attributo method dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formnovalidate formNoValidate true boolean false

Se questo attributo è impostato, la convalida del modulo non verrà eseguita durante l'invio.

Se questo attributo è impostato, sovrascriverà l'attributo novalidate dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dove aprire la risposta ricevuta dopo l'invio del modulo. I valori opzionali includono:

  • _self: opzione predefinita, apre nel frame corrente
  • _blank: apre in una nuova finestra
  • _parent: apre nel frame genitore
  • _top: apre nell'intera finestra

Se questo attributo è impostato, sovrascriverà l'attributo target dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
invalid

Attivato quando la convalida del campo del modulo non viene superata
### Slots
Nome Descrizione
(predefinito)

Testo
icon

Icona
### CSS Parts
Nome Descrizione
button

Elemento <button> o <a> interno
label

Testo a destra
icon

Icona a sinistra
loading

Elemento <mdui-circular-progress> nello stato di caricamento
### CSS Custom Property
Nome Descrizione
--shape-corner-small

Quando size="small", dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--shape-corner-normal

Quando size="normal", dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--shape-corner-large

Quando size="large", dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Icona Il componente Icona rappresenta azioni comuni e supporta sia le Icone Material che le icone SVG. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/icon.js'; ``` Importa il tipo TypeScript: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Esempio: ```html ``` ### Utilizzo delle Icone Material {#usage-material-icons} Per utilizzare le Icone Material, importa il file CSS per la variante desiderata: Filled, Outlined, Rounded, Sharp o Two-Tone. ```html ``` Usa l'attributo `name` per specificare l'icona, aggiungendo il nome della variante come suffisso (non è necessario alcun suffisso per Filled). Ecco come utilizzare l'icona `delete` in tutte e 5 le varianti: ```html ``` Cerca le icone direttamente utilizzando lo strumento [Ricerca Icone Material](/it/docs/2/components/icon#search) in fondo alla pagina. Fai clic su un'icona per copiarne il codice negli appunti. mdui fornisce anche un pacchetto autonomo [`@mdui/icons`](/it/docs/2/libraries/icons), con ogni componente icona come file separato. Questo ti permette di importare solo i componenti icona di cui hai bisogno, senza includere l'intera libreria di icone. ### Utilizzo di Icona SVG {#usage-svg} Il componente supporta le icone SVG. Passa il link dell'icona SVG all'Attributo `src`: ```html ``` Oppure, passa il contenuto SVG direttamente nello slot predefinito del componente: ```html ``` ## Esempi {#examples} ### Imposta Colore {#example-color} Cambia il colore dell'icona impostando lo stile CSS `color` dell'elemento `` o del suo genitore. ```html ``` ### Imposta Dimensione {#example-size} Cambia la dimensione dell'icona impostando lo stile CSS `font-size` dell'elemento `` o del suo genitore. ```html ``` ## mdui-icon API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
name name true string

Nome dell'icona Material
src src true string

Percorso dell'icona SVG
### Slots
Nome Descrizione
(predefinito)

Contenuto dell'icona svg
# Componente Layout I componenti Layout offrono un sistema flessibile di layout a livello di pagina. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` Importa i tipi TypeScript: ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **Introduzione:** Il sistema di layout è progettato per essere costruito dall'esterno verso l'interno. Ogni componente layout (``) occupa spazio su uno dei quattro lati (alto, basso, sinistra, destra). I successivi componenti layout riempiono lo spazio rimanente. I seguenti componenti ereditano da `` e possono anche essere utilizzati come componenti layout: - [``](/it/docs/2/components/navigation-bar) - [``](/it/docs/2/components/navigation-drawer) - [``](/it/docs/2/components/navigation-rail) - [``](/it/docs/2/components/bottom-app-bar) - [``](/it/docs/2/components/top-app-bar) Il componente `` occupa lo spazio rimanente, dove puoi posizionare il contenuto della pagina. ## Esempi {#examples} ### Ordine dei Componenti Layout {#layout-default-order} Per impostazione predefinita, i componenti layout occupano lo spazio nell'ordine in cui appaiono nel codice. I seguenti esempi illustrano questo concetto, mostrando diversi ordini per [``](/it/docs/2/components/top-app-bar) e [``](/it/docs/2/components/navigation-drawer).

Mostra questo esempio su uno schermo grande.

```html Barra superiore dell'app Pannello di navigazione Principale ``` ```html Pannello di navigazione Barra superiore dell'app Principale ``` Quando [``](/it/docs/2/components/top-app-bar) è posizionato prima di [``](/it/docs/2/components/navigation-drawer), occupa prima l'intera larghezza dello schermo, lasciando solo l'altezza rimanente per ``. Se le loro posizioni sono invertite, [``](/it/docs/2/components/navigation-drawer) occupa prima l'intera altezza dello schermo, lasciando solo la larghezza rimanente per [``](/it/docs/2/components/top-app-bar). ### Posizionamento dei Componenti Layout {#example-placement} Usa l'attributo `placement` per specificare la posizione (alto, basso, sinistra o destra) del componente `` nel layout. Per [``](/it/docs/2/components/navigation-drawer) e [``](/it/docs/2/components/navigation-rail), l'attributo `placement` specifica la loro posizione sinistra o destra. Nell'esempio seguente, due componenti `` sono posizionati su entrambi i lati dell'applicazione. ```html Barra superiore dell'app Elemento di layout Elemento di layout Principale ``` ### Ordine Personalizzato dei Componenti Layout {#example-order} Nella maggior parte dei casi, l'ordine dei componenti layout nel codice produrrà il layout desiderato. Tuttavia, puoi utilizzare l'attributo `order` per specificare l'ordine di layout. Il sistema dispone i componenti in ordine crescente di valore `order`. Quando i valori `order` sono uguali, li dispone nell'ordine in cui appaiono nel codice. L'`order` predefinito per tutti i componenti layout è `0`. ```html Elemento di layout Barra superiore dell'app
order="-1" Principale ``` ## mdui-layout-item API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

Posizione del componente. I valori opzionali includono:

  • top: in alto
  • bottom: in basso
  • left: a sinistra
  • right: a destra
order order true number

Ordine di layout di questo componente all'interno di <mdui-layout>, dal più piccolo al più grande. Il valore predefinito è 0.
### Slots
Nome Descrizione
(predefinito)

Può contenere qualsiasi contenuto
## mdui-layout-main API ### Slots
Nome Descrizione
(predefinito)

Può contenere qualsiasi contenuto
## mdui-layout API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
full-height fullHeight true boolean false

Imposta l'altezza del layout corrente al 100%
### Slots
Nome Descrizione
(predefinito)

Può contenere elementi <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main>.
# Componente Linear Progress Gli indicatori di progresso lineari sono barre orizzontali che mostrano lo stato di avanzamento delle operazioni in corso, come il caricamento dei dati o l'invio di moduli. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/linear-progress.js'; ``` Importa il tipo TypeScript: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Progresso Determinato {#example-value} Per impostazione predefinita, l'indicatore di progresso lineare è in uno stato indeterminato. Usa l'attributo `value` per impostare il progresso corrente. Il valore massimo di progresso predefinito è `1`. ```html ``` Imposta il valore massimo di progresso con l'attributo `max`. ```html ``` ## mdui-linear-progress API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
max max true number 1

Valore massimo dell'indicatore di progresso. Il valore predefinito è 1.
value value false number

Valore corrente dell'indicatore di progresso. Se questo valore non è specificato, è in uno stato indeterminato.
### CSS Parts
Nome Descrizione
indicator

Parte dell'indicatore
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente List Un elenco è una sequenza verticale di elementi che può contenere testo o immagini. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` Importa i tipi TypeScript: ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` Esempio: ```html Sottotitolo Elemento 1 Elemento 2 ``` ## Esempi {#examples} ### Contenuto Testuale {#example-text} L'attributo `headline` su `` imposta il testo principale, mentre l'attributo `description` imposta il testo secondario. ```html ``` Oppure, usa lo slot predefinito per il testo principale e lo slot `description` per il testo secondario. ```html Intestazione Intestazione Testo di supporto ``` Per impostazione predefinita, sia il testo principale che quello secondario vengono mostrati per intero. Per limitare il numero di righe, usa gli attributi `headline-line` e `description-line`. Il limite massimo è di `3` righe. ```html Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto ``` ### Contenuto ai lati {#example-side} Gli attributi `icon` e `end-icon` su `` aggiungono Icone Material rispettivamente ai lati sinistro e destro. ```html Intestazione ``` Oppure, usa gli slot `icon` e `end-icon` per aggiungere elementi ai lati sinistro e destro dell'elemento dell'elenco. ```html Intestazione ``` ### Link {#example-link} L'attributo `href` trasforma l'elemento dell'elenco in un link, con gli attributi `download`, `target` e `rel` disponibili per funzionalità relative ai link. ```html Intestazione ``` ### Stato Disabilitato {#example-disabled} L'attributo `disabled` su `` disabilita l'elemento. Questo disabilita anche i componenti all'interno dell'elemento dell'elenco. ```html Intestazione Intestazione ``` ### Stato Attivo {#example-active} L'attributo `active` su `` attiva l'elemento. ```html Intestazione Intestazione ``` ### Stato Non Cliccabile {#example-nonclickable} L'attributo `nonclickable` su `` rimuove gli effetti hover del mouse e di ripple al clic. ```html Intestazione Intestazione ``` ### Forma Arrotondata {#example-rounded} L'attributo `rounded` su `` conferisce all'elemento un aspetto arrotondato. ```html Intestazione Intestazione ``` ### Allineamento Verticale {#example-alignment} L'attributo `alignment` su `` allinea verticalmente il contenuto dell'elemento. Valori possibili: - `start`: allineamento in alto. - `center`: allineamento al centro. - `end`: allineamento in basso. ```html Intestazione Intestazione Intestazione ``` ### Contenuto Personalizzato {#example-custom} Lo slot `custom` in `` consente la personalizzazione completa del contenuto dell'elemento dell'elenco. ```html
test
 ``` ## mdui-list-item API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
headline headline true string

Testo principale. Può essere specificato anche tramite lo slot predefinito.
headline-line headlineLine true 1 | 2 | 3

Numero di righe del testo principale, verrà troncato se supera il limite. Nessun limite di righe per impostazione predefinita. I valori opzionali includono:

  • 1: visualizza una riga, tronca se supera
  • 2: visualizza due righe, tronca se supera
  • 3: visualizza tre righe, tronca se supera
description description true string

Testo secondario. Può essere specificato anche tramite slot="description".
description-line descriptionLine true 1 | 2 | 3

Numero di righe del testo secondario, verrà troncato se supera il limite. Nessun limite di righe per impostazione predefinita. I valori opzionali includono:

  • 1: visualizza una riga, tronca se supera
  • 2: visualizza due righe, tronca se supera
  • 3: visualizza tre righe, tronca se supera
icon icon true string

Nome dell'icona Material a sinistra. Può essere specificato anche tramite slot="icon".
end-icon endIcon true string

Nome dell'icona Material a destra. Può essere specificato anche tramite slot="end-icon".
disabled disabled true boolean false

Se questo elemento dell'elenco deve essere disabilitato. Se lo è, l'elemento verrà visualizzato in grigio e gli elementi al suo interno, come <mdui-checkbox>, <mdui-radio> e <mdui-switch>, saranno disabilitati.
active active true boolean false

Se attivare questo elemento dell'elenco
nonclickable nonclickable true boolean false

Se rendere l'elemento dell'elenco non cliccabile. Una volta impostato, elementi come <mdui-checkbox>, <mdui-radio>, <mdui-switch> al suo interno rimangono comunque interattivi.
rounded rounded true boolean false

Se utilizzare una forma arrotondata per l'elemento dell'elenco
alignment alignment true 'start' | 'center' | 'end' 'center'

Allineamento verticale dell'elemento dell'elenco. I valori opzionali includono:

  • start: allineato in alto
  • center: centrato
  • end: allineato in basso
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. I valori opzionali includono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. I valori opzionali includono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
### Slots
Nome Descrizione
(predefinito)

Testo principale
description

Testo secondario
icon

Elemento a sinistra dell'elemento dell'elenco
end-icon

Elemento a destra dell'elemento dell'elenco
custom

Qualsiasi contenuto personalizzato
### CSS Parts
Nome Descrizione
container

Contenitore dell'elemento dell'elenco
icon

Icona a sinistra
end-icon

Icona a destra
body

Parte centrale
headline

Titolo principale
description

Sottotitolo
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli dell'elemento dell'elenco. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--shape-corner-rounded

Quando è specificato l'attributo rounded, dimensione dell'arrotondamento degli angoli dell'elemento dell'elenco. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
## mdui-list-subheader API ### Slots
Nome Descrizione
(predefinito)

Testo dell'intestazione
## mdui-list API ### Slots
Nome Descrizione
(predefinito)

Elementi <mdui-list-item>
# Componente Menu I menu presentano un elenco di scelte in una superficie temporanea. Appaiono quando gli utenti interagiscono con un pulsante, un'azione o un altro controllo. Per i menu a discesa, usa il componente [``](/it/docs/2/components/dropdown). ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` Importa i tipi TypeScript: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Esempio: ```html Elemento 1 Elemento 2 ``` ## Esempi {#examples} ### Menu a Discesa {#example-dropdown} Per creare un menu a discesa, usa il componente [``](/it/docs/2/components/dropdown). ```html Apri il menu Elemento 1 Elemento 2 ``` ### Stile Denso {#example-dense} Per uno stile di menu denso, aggiungi l'attributo `dense` a ``. ```html Elemento 1 Elemento 2 Elemento 3 ``` ### Elementi Disabilitati {#example-disabled} Per disabilitare le voci di menu, aggiungi l'attributo `disabled` a ``. ```html Elemento 1 Elemento 2 Elemento 3 ``` ### Selezione Singola {#example-selects-single} Per la selezione singola, imposta l'attributo `selects` su `single` per ``. Il `value` di `` è il `value` del `` selezionato. ```html Elemento 1 Elemento 2 ``` ### Selezione Multipla {#example-selects-multiple} Per la selezione multipla, imposta l'attributo `selects` su `multiple` per ``. Il `value` di `` è un array dei valori dei `` selezionati. Nota: Per la selezione multipla, il `value` di `` è un array e può essere letto e impostato solo tramite proprietà JavaScript. ```html Elemento 1 Elemento 2 Elemento 3 ``` ### Icone {#example-icon} Per aggiungere Icone Material a sinistra e a destra, aggiungi gli attributi `icon`, `end-icon` a ``. Usa l'attributo `end-text` per aggiungere testo sul lato destro. Oppure, usa gli slot `icon`, `end-icon`, `end-text` per lo stesso scopo. Impostare l'attributo `icon` su una stringa vuota riserva spazio per un'icona a sinistra in modo che l'elemento si allinei con gli altri. ```html Elemento 1 Elemento 2 Ctrl+X Elemento 3 ``` Per la selezione singola o multipla, usa l'attributo o lo slot `selected-icon` per definire l'icona dello stato selezionato. ```html Elemento 1 Elemento 2 ``` ### Link {#example-link} Per trasformare la voce di menu in un link, usa l'attributo `href` sul componente ``. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html Elemento 1 Elemento 2 ``` ### Sottomenu {#example-submenu} Usa lo slot `submenu` in `` per definire le voci del sottomenu. ```html Interlinea Singola 1.5 Doppia Personalizzata: 1.2 Stile paragrafo ``` Usa l'attributo `submenu-trigger` su `` per definire come si apre il sottomenu. ```html Interlinea Singola 1.5 Doppia Personalizzata: 1.2 Stile paragrafo ``` Quando è impostato `submenu-trigger="hover"`, usa gli attributi `submenu-open-delay` e `submenu-close-delay` su `` per impostare il ritardo per l'apertura e la chiusura del sottomenu. ```html Interlinea Singola 1.5 Doppia Personalizzata: 1.2 Stile paragrafo ``` ### Contenuto Personalizzato {#example-custom} Per personalizzare completamente il contenuto della voce di menu, usa lo slot `custom` in ``. ```html
ABS
Valore assoluto del numero
ACOS
Arco coseno del numero, in radianti
ACOSH
Coseno iperbolico inverso del numero
 ``` ## mdui-menu-item API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
value value true string

Valore dell'elemento di menu
disabled disabled true boolean false

Se l'elemento di menu deve essere disabilitato
icon icon true string

Nome dell'icona Material a sinistra. Può essere specificato anche tramite slot="icon".

Se non serve mostrare un'icona a sinistra, ma vuoi riservare uno spazio per un'icona, puoi passare una stringa vuota come segnaposto.
end-icon endIcon true string

Nome dell'icona Material a destra. Può essere specificato anche tramite slot="end-icon".
end-text endText true string

Testo a destra. Può anche essere impostato tramite slot="end-text".
selected-icon selectedIcon true string

Nome dell'icona Material per lo stato selezionato. Può anche essere impostato tramite slot="selected-icon".
submenu-open submenuOpen true boolean false

Indica se aprire il sottomenu
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. I valori opzionali includono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. I valori opzionali includono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
submenu-open

L'evento viene attivato all'inizio dell'apertura del sottomenu. È possibile impedire l'apertura del sottomenu chiamando event.preventDefault().
submenu-opened

L'evento viene attivato al termine dell'animazione di apertura del sottomenu.
submenu-close

L'evento viene attivato all'inizio della chiusura del sottomenu. È possibile impedire la chiusura del sottomenu chiamando event.preventDefault().
submenu-closed

L'evento viene attivato al termine dell'animazione di chiusura del sottomenu.
### Slots
Nome Descrizione
(predefinito)

Testo dell'elemento di menu
icon

Icona a sinistra dell'elemento di menu
end-icon

Icona a destra dell'elemento di menu
end-text

Testo a destra del menu
selected-icon

Icona nello stato selezionato
submenu

Sottomenu
custom

Qualsiasi contenuto personalizzato
### CSS Parts
Nome Descrizione
container

Contenitore dell'elemento di menu
icon

Icona a sinistra
label

Contenuto testuale
end-icon

Icona a destra
end-text

Testo a destra
selected-icon

Icona nello stato selezionato
submenu

Elemento del sottomenu
## mdui-menu API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
selects selects true 'single' | 'multiple'

Stato di selezione degli elementi del menu. Non selezionabile per impostazione predefinita. I valori opzionali includono:

  • single: selezione singola
  • multiple: selezione multipla
value value false string | string[]

Valore del <mdui-menu-item> attualmente selezionato.

Nota: l'attributo HTML di questa proprietà è sempre una stringa e può essere impostato come valore iniziale tramite l'attributo HTML solo quando selects="single". Il valore della proprietà JavaScript è una stringa quando selects="single" e un array di stringhe quando selects="multiple". Pertanto, quando selects="multiple", per modificare questo valore, è possibile farlo solo tramite la proprietà JavaScript.
dense dense true boolean false

Se gli elementi del menu utilizzano un layout compatto
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Modalità di apertura del sottomenu. Supporta più valori separati da spazi. I valori opzionali includono:

  • click: apre il sottomenu quando si fa clic sull'elemento del menu
  • hover: apre il sottomenu quando si passa il mouse sull'elemento del menu
  • focus: apre il sottomenu quando si mette a fuoco l'elemento del menu
  • manual: può essere aperto e chiuso solo via codice; non è possibile specificare altre modalità di apertura
submenu-open-delay submenuOpenDelay true number 200

Ritardo per l'apertura del sottomenu attivato dal passaggio del mouse, in millisecondi
submenu-close-delay submenuCloseDelay true number 200

Ritardo per la chiusura del sottomenu attivato dal passaggio del mouse, in millisecondi
### Metodi
Nome Descrizione
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
change

Attivato quando lo stato di selezione degli elementi del menu cambia
### Slots
Nome Descrizione
(predefinito)

Elementi come voci del sottomenu (<mdui-menu-item>), divider (<mdui-divider>), ecc.
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Navigation Bar La barra di navigazione consente di passare facilmente da una pagina principale all'altra sui dispositivi mobili. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` Importa i tipi TypeScript: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` Esempio: (Nota: lo stile `position: relative` nell'esempio è solo a scopo dimostrativo. Rimuovilo nell'uso effettivo.) ```html Elemento 1 Elemento 2 Elemento 3 ``` **Nota:** Per impostazione predefinita, questo componente usa `position: fixed` e aggiunge automaticamente `padding-bottom` al `body` per evitare che il contenuto della pagina venga oscurato. Tuttavia, usa `position: absolute` nei seguenti casi: 1. Quando è specificato l'attributo `scroll-target`. In questo caso, `padding-bottom` viene aggiunto all'elemento specificato. 2. Quando si trova all'interno del componente [``](/it/docs/2/components/layout). In questo caso, non viene aggiunto alcun `padding-bottom`. ## Esempi {#examples} ### Visibilità delle etichette {#example-label-visibility} Le etichette di testo nella barra di navigazione sono sempre visibili quando sono presenti 3 o meno elementi di navigazione. Se ci sono più di 3 elementi, viene mostrato solo il testo dell'elemento selezionato. ```html Elemento 1 Elemento 2 Elemento 3
Elemento 1 Elemento 2 Elemento 3 Elemento 4 ``` L'attributo `label-visibility` su `` controlla la visibilità delle etichette di testo. Valori possibili: - `selected`: Viene visualizzato solo il testo dell'elemento selezionato. - `labeled`: Il testo è sempre visualizzato. - `unlabeled`: Il testo non viene mai visualizzato. ```html Elemento 1 Elemento 2 Elemento 3 selezionato etichettato non etichettato ``` ### In un contenitore {#example-scroll-target} Per impostazione predefinita, la barra di navigazione è relativa alla finestra corrente e viene visualizzata nella parte inferiore della pagina. Se desideri posizionare la barra di navigazione all'interno di un contenitore specifico, usa l'attributo `scroll-target` su ``. Il valore può essere il selettore CSS o l'elemento DOM del contenitore con contenuto scorrevole. In questo caso, la barra di navigazione sarà relativa all'elemento padre. Devi aggiungere manualmente gli stili `position: relative; overflow: hidden` all'elemento padre. ```html
Elemento 1 Elemento 2 Elemento 3
Contenuto della pagina
``` ### Nascondi durante lo scorrimento {#example-scroll-behavior} L'attributo `scroll-behavior` su `` controlla la visibilità della barra di navigazione durante lo scorrimento. Imposta il suo valore su `hide` per nascondere la barra di navigazione quando si scorre verso il basso e mostrarla quando si scorre verso l'alto. Usa l'attributo `scroll-threshold` per impostare quanti pixel devono essere scorsi prima che la barra di navigazione inizi a nascondersi. ```html
Elemento 1 Elemento 2 Elemento 3
Contenuto della pagina
``` ### Icone {#example-icon} L'attributo `icon` su `` imposta l'icona per lo stato inattivo. L'attributo `active-icon` imposta l'icona per lo stato attivo. Oppure, usa gli slot `icon` e `active-icon` per impostare le icone per gli stati inattivo e attivo. ```html Elemento 1 Elemento 2 ``` ### Link {#example-link} Usa l'attributo `href` sul componente `` per trasformare l'elemento della Navigation Bar in un link. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html Elemento 1 Elemento 2 ``` ### Badge {#example-badge} Puoi aggiungere un badge al componente `` utilizzando lo slot `badge`. ```html Elemento 1 99+ Elemento 2 ``` ## mdui-navigation-bar-item API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
icon icon true string

Nome dell'icona Material per lo stato non attivo. Può anche essere impostato tramite slot="icon".
active-icon activeIcon true string

Nome dell'icona Material per lo stato attivo. Può anche essere impostato tramite slot="active-icon".
value value true string

Valore dell'elemento di navigazione
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. I valori opzionali includono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. I valori opzionali includono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
### Slots
Nome Descrizione
(predefinito)

Testo dell'elemento di navigazione
icon

Icona
active-icon

Elemento icona nello stato attivo
badge

Badge
### CSS Parts
Nome Descrizione
container

Contenitore dell'elemento di navigazione
indicator

Indicatore
badge

Badge
icon

Icona
active-icon

Icona nello stato attivo
label

Testo dell'elemento di navigazione
### CSS Custom Property
Nome Descrizione
--shape-corner-indicator

Dimensione dell'arrotondamento degli angoli dell'indicatore. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
## mdui-navigation-bar API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
hide hide true boolean false

Se nascondere
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

Stato di visibilità del testo. I valori opzionali includono:

  • auto: quando le opzioni sono <= 3, mostra sempre il testo; quando le opzioni sono > 3, mostra solo il testo dello stato selezionato
  • selected: mostra il testo solo nello stato selezionato
  • labeled: mostra sempre il testo
  • unlabeled: non mostra mai il testo
value value true string

Valore del <mdui-navigation-bar-item> attualmente selezionato
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Comportamento allo scorrimento. I valori opzionali includono:

  • hide: si nasconde durante lo scorrimento
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Elemento da monitorare per gli eventi di scorrimento. Il valore può essere un selettore CSS, un elemento DOM o un oggetto JQ. Per impostazione predefinita, ascolta l'evento di scorrimento di window.
scroll-threshold scrollThreshold true number

Distanza di scorrimento necessaria per attivare il comportamento, in px.
order order true number

Ordine di layout di questo componente all'interno di <mdui-layout>, dal più piccolo al più grande. Il valore predefinito è 0.
### Eventi
Nome Descrizione
change

Attivato quando il valore cambia
show

L'evento viene attivato all'inizio dell'apertura. Puoi impedirne l'apertura chiamando event.preventDefault().
shown

L'evento viene attivato al termine dell'animazione di apertura.
hide

L'evento viene attivato all'inizio della chiusura. È possibile impedirne la chiusura chiamando event.preventDefault().
hidden

L'evento viene attivato al termine dell'animazione di chiusura.
### Slots
Nome Descrizione
(predefinito)

Componente <mdui-navigation-bar-item>
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--z-index

Valore CSS z-index del componente
# Componente Navigation Drawer Il Navigation Drawer fornisce una navigazione laterale verso diverse pagine di un sito web. In genere, il componente [``](/it/docs/2/components/list) viene utilizzato all'interno del Navigation Drawer per aggiungere elementi di navigazione. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/navigation-drawer.js'; ``` Importa il tipo TypeScript: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Esempio: ```html Chiudi il Navigation Drawer Apri il Navigation Drawer ``` **Note:** Per impostazione predefinita, questo componente usa `position: fixed`. Quando `modal` è `false` e il breakpoint è almeno [`--mdui-breakpoint-md`](/it/docs/2/styles/design-tokens#breakpoint), aggiunge automaticamente `padding-left` o `padding-right` al body per evitare che il contenuto venga oscurato. Tuttavia, usa `position: absolute` nei seguenti casi: 1. Quando la proprietà `contained` è `true`. 2. Quando si trova all'interno del componente [``](/it/docs/2/components/layout). In questo caso, non aggiunge `padding-left` o `padding-right`. ## Esempi {#examples} ### In un contenitore {#example-contained} Per impostazione predefinita, il Navigation Drawer viene mostrato sul lato sinistro o destro della finestra corrente. Per posizionarlo all'interno di un contenitore, aggiungi l'attributo `contained`. In questo modo viene posizionato rispetto all'elemento padre (devi aggiungere manualmente gli stili `position: relative; overflow: hidden;` all'elemento padre). ```html
Chiudi il pannello di navigazione
Apri il pannello di navigazione
``` ### Modale {#example-modal} L'attributo `modal` visualizza un overlay modale quando il pannello di navigazione è aperto. Nota che se la finestra o la larghezza dell'elemento padre è inferiore a [`--mdui-breakpoint-md`](/it/docs/2/styles/design-tokens#breakpoint), questo Attributo viene ignorato e l'overlay modale viene sempre visualizzato. L'attributo `close-on-esc` consente di chiudere il pannello di navigazione quando viene premuto il tasto ESC. L'attributo `close-on-overlay-click` consente di chiudere il pannello di navigazione quando si fa clic sull'overlay modale. ```html
Chiudi il pannello di navigazione
Apri il pannello di navigazione
``` ### Posizionamento a Destra {#example-placement} Usa l'attributo `placement` per posizionare il pannello di navigazione sul lato destro. ```html
Chiudi il pannello di navigazione
Apri il pannello di navigazione
``` ## mdui-navigation-drawer API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
open open true boolean false

Indica se aprire il pannello di navigazione a cassetto
modal modal true boolean false

Quando il pannello di navigazione a cassetto è aperto, indica se mostrare l'overlay.

Sui dispositivi con schermo stretto (larghezza dello schermo inferiore a --mdui-breakpoint-md), l'overlay viene sempre mostrato, ignorando questo parametro.
close-on-esc closeOnEsc true boolean false

Se è presente un overlay, indica se premendo il tasto ESC si chiude il pannello di navigazione a cassetto.
close-on-overlay-click closeOnOverlayClick true boolean false

Indica se il pannello di navigazione a cassetto si chiude facendo clic sull'overlay.
placement placement true 'left' | 'right' 'left'

Posizione del pannello di navigazione a cassetto. I valori opzionali includono:

  • left: a sinistra
  • right: a destra
contained contained true boolean false

Per impostazione predefinita, il pannello di navigazione a cassetto è posizionato rispetto all'elemento body. Quando questo attributo è impostato su true, il pannello verrà posizionato rispetto al suo elemento padre.

Nota: quando si imposta questo attributo, è necessario impostare manualmente lo stile position: relative; overflow: hidden; sull'elemento padre.
order order true number

Ordine di layout di questo componente all'interno di <mdui-layout>, dal più piccolo al più grande. Il valore predefinito è 0.
### Eventi
Nome Descrizione
open

Attivato prima dell'apertura del pannello di navigazione a cassetto. È possibile impedirne l'apertura chiamando event.preventDefault().
opened

Attivato al termine dell'animazione di apertura del pannello di navigazione a cassetto.
close

Attivato prima della chiusura del pannello di navigazione a cassetto. È possibile impedirne la chiusura chiamando event.preventDefault().
closed

Attivato al termine dell'animazione di chiusura del pannello di navigazione a cassetto.
overlay-click

Attivato quando si fa clic sull'overlay.
### Slots
Nome Descrizione
(predefinito)

Contenuto all'interno del pannello di navigazione a cassetto
### CSS Parts
Nome Descrizione
overlay

Overlay
panel

Contenitore del pannello di navigazione a cassetto
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--z-index

Valore CSS z-index del componente
# Componente Navigation Rail La Navigation Rail offre l'accesso a diverse pagine principali su tablet e computer desktop. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` Importa i tipi TypeScript: ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` Esempio: (Nota: lo stile `position: relative` nell'esempio è solo a scopo dimostrativo. Rimuovilo nell'uso effettivo.) ```html Recenti Immagini Libreria ``` **Note:** Per impostazione predefinita, questo componente usa `position: fixed` e aggiunge automaticamente `padding-left` o `padding-right` al `body` per evitare che il contenuto venga oscurato. Tuttavia, usa `position: absolute` nei seguenti casi: 1. Quando la proprietà `contained` del componente `` è `true`. In questo caso, aggiunge lo stile `padding-left` o `padding-right` all'elemento padre. 2. Quando si trova all'interno del componente [``](/it/docs/2/components/layout). In questo caso, non aggiunge lo stile `padding-left` o `padding-right`. ## Esempi {#examples} ### In un contenitore {#example-contained} Per impostazione predefinita, la Navigation Rail viene visualizzata sul lato sinistro o destro della finestra corrente. Per posizionarla all'interno di un contenitore, aggiungi l'attributo `contained` al componente ``. Questo la posiziona rispetto all'elemento padre (devi aggiungere manualmente lo stile `position: relative` all'elemento padre). ```html
Recenti Immagini Libreria
Contenuto della pagina
``` ### Posizionamento a Destra {#example-placement} Imposta l'attributo `placement` del componente `` su `right` per visualizzare la Navigation Rail a destra. ```html
Recenti Immagini Libreria
Contenuto della pagina
``` ### Mostra un Divider {#example-divider} Aggiungi l'attributo `divider` al componente `` per mostrare un divider nella Navigation Rail e distinguerla dal contenuto della pagina. ```html
Recenti Immagini Libreria
Contenuto della pagina
``` ### Elementi Superiori/Inferiori {#example-top-bottom} All'interno del componente ``, puoi utilizzare gli slot `top` e `bottom` per aggiungere elementi in alto e in basso. ```html
Recenti Immagini Libreria
Contenuto della pagina
``` ### Allineamento Verticale {#example-alignment} Imposta l'attributo `alignment` del componente `` per modificare l'allineamento verticale degli elementi della Navigation Rail. ```html
Recenti Immagini Libreria
inizio centro fine
``` ### Icone {#example-icon} Usa l'attributo `icon` sul componente `` per impostare l'icona per lo stato inattivo dell'elemento della Navigation Rail. L'attributo `active-icon` imposta l'icona per lo stato attivo. Oppure, usa gli slot `icon` e `active-icon` per gli stati inattivo e attivo rispettivamente. ```html
Recenti Immagini Libreria
Contenuto della pagina
``` ### Solo Icona {#example-no-label} Il componente `` può mostrare icone senza etichette. ```html
Contenuto della pagina
``` ### Link {#example-link} Usa l'attributo `href` sul componente `` per trasformare l'elemento della Navigation Rail in un link. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html
Recenti Immagini Libreria
Contenuto della pagina
``` ### Badge {#example-badge} Aggiungi un badge al componente `` usando lo slot `badge`. ```html
Recenti 99+ Immagini Libreria
Contenuto della pagina
``` ## mdui-navigation-rail-item API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
icon icon true string

Nome dell'icona Material per lo stato non attivo. Può anche essere impostato tramite slot="icon".
active-icon activeIcon true string

Nome dell'icona Material per lo stato attivo. Può anche essere impostato tramite slot="active-icon".
value value true string

Valore dell'elemento di navigazione
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. I valori opzionali includono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. I valori opzionali includono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
### Slots
Nome Descrizione
(predefinito)

Contenuto testuale
icon

Icona
active-icon

Icona nello stato attivo
badge

Badge
### CSS Parts
Nome Descrizione
container

Contenitore dell'elemento di navigazione
indicator

Indicatore
badge

Badge
icon

Icona
active-icon

Icona nello stato attivo
label

Contenuto testuale
### CSS Custom Property
Nome Descrizione
--shape-corner-indicator

Dimensione dell'arrotondamento degli angoli dell'indicatore. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
## mdui-navigation-rail API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
value value true string

Valore del <mdui-navigation-rail-item> attualmente selezionato
placement placement true 'left' | 'right' 'left'

Posizione della barra di navigazione. I valori opzionali includono:

  • left: a sinistra
  • right: a destra
alignment alignment true 'start' | 'center' | 'end' 'start'

Allineamento degli elementi <mdui-navigation-rail-item>. I valori opzionali includono:

  • start: allineato in alto
  • center: centrato
  • end: allineato in basso
contained contained true boolean false

Per impostazione predefinita, la barra di navigazione viene visualizzata rispetto all'elemento body. Quando questo attributo è impostato su true, la barra verrà visualizzata rispetto al suo elemento padre.

Nota: quando si imposta questo attributo, è necessario impostare manualmente lo stile position: relative; sull'elemento padre.
divider divider true boolean false

Se aggiungere una linea di separazione tra la barra di navigazione e il contenuto della pagina
order order true number

Ordine di layout di questo componente all'interno di <mdui-layout>, dal più piccolo al più grande. Il valore predefinito è 0.
### Eventi
Nome Descrizione
change

Attivato quando il valore cambia
### Slots
Nome Descrizione
(predefinito)

Componente <mdui-navigation-rail-item>
top

Elemento in alto
bottom

Elemento in basso
### CSS Parts
Nome Descrizione
top

Contenitore dell'elemento in alto
bottom

Contenitore dell'elemento in basso
items

Contenitore dei componenti <mdui-navigation-rail-item>
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--z-index

Valore CSS z-index del componente
# Componente Radio Il componente Radio Group consente di selezionare una sola opzione tra più scelte. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` Importa i tipi TypeScript: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Esempio: ```html Cinese Inglese ``` ## Esempi {#examples} ### Stato Selezionato {#example-checked} La proprietà `value` del componente `` corrisponde al `value` del componente `` attualmente selezionato. Puoi modificare il pulsante radio selezionato aggiornando la proprietà `value` del componente ``. ```html Cinese Inglese ``` Il componente `` può essere usato anche da solo. In questo caso, usa la proprietà `checked` per accedere e modificare lo stato selezionato. ```html Radio ``` ### Stato Disabilitato {#example-disabled} Per disabilitare l'intero gruppo radio, aggiungi l'attributo `disabled` al componente ``. ```html Cinese Inglese ``` Per disabilitare un pulsante radio specifico, aggiungi l'attributo `disabled` al componente ``. ```html Cinese Inglese ``` ### Icone {#example-icon} Puoi impostare le Icone Material per gli stati deselezionato e selezionato del pulsante radio utilizzando rispettivamente gli attributi `unchecked-icon` e `checked-icon`. Oppure, puoi utilizzare gli slot `unchecked-icon` e `checked-icon`. ```html Cinese Inglese ``` ## mdui-radio-group API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
disabled disabled true boolean false

Se questo componente deve essere disabilitato
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.
name name true string ''

Nome del gruppo di pulsanti di opzione, verrà inviato insieme ai dati del modulo
value value true string ''

Valore attualmente selezionato nel gruppo di pulsanti di opzione, verrà inviato insieme ai dati del modulo
undefined defaultValue false string ''

Valore selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
required required true boolean false

Se è obbligatorio selezionare uno dei pulsanti di opzione al momento dell'invio del modulo
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
### Metodi
Nome Descrizione
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
change

Attivato quando il valore selezionato cambia
input

Attivato quando il valore selezionato cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
### Slots
Nome Descrizione
(predefinito)

Elementi <mdui-radio>
## mdui-radio API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
value value true string ''

Valore corrente del pulsante di opzione
disabled disabled true boolean false

Se il pulsante di opzione corrente deve essere disabilitato
checked checked true boolean false

Se il pulsante di opzione corrente è selezionato
unchecked-icon uncheckedIcon true string

Nome dell'icona Material per lo stato non selezionato. Può anche essere impostato tramite slot="unchecked-icon".
checked-icon checkedIcon true string

Nome dell'icona Material per lo stato selezionato. Può anche essere impostato tramite slot="checked-icon".
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
change

Attivato quando si seleziona questo pulsante di opzione
### Slots
Nome Descrizione
(predefinito)

Contenuto testuale
unchecked-icon

Icona nello stato non selezionato
checked-icon

Icona nello stato selezionato
### CSS Parts
Nome Descrizione
control

Contenitore dell'icona a sinistra
unchecked-icon

Icona nello stato non selezionato
checked-icon

Icona nello stato selezionato
label

Contenuto testuale
# Componente Range Slider Il componente Range Slider consente agli utenti di selezionare un intervallo da una serie di valori. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/range-slider.js'; ``` Importa il tipo TypeScript: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Valore Predefinito {#example-value} La proprietà `value` rappresenta il valore corrente del range slider. Puoi impostare il valore del range slider aggiornando la proprietà `value`. Nota che la proprietà `value` è un array e può essere accessibile e modificata solo tramite proprietà JavaScript. ```html ``` ### Stato Disabilitato {#example-disabled} Il range slider può essere disabilitato aggiungendo l'attributo `disabled`. ```html ``` ### Intervallo {#example-min-max} Gli attributi `min` e `max` consentono di impostare i valori minimo e massimo del range slider. ```html ``` ### Intervallo di Passaggio {#example-step} L'attributo `step` definisce l'intervallo di passaggio del range slider. ```html ``` ### Segni di Spunta {#example-tickmarks} I segni di spunta possono essere visualizzati sul range slider aggiungendo l'attributo `tickmarks`. ```html ``` ### Nascondi Tooltip {#example-nolabel} Il tooltip sul range slider può essere nascosto aggiungendo l'attributo `nolabel`. ```html ``` ### Modifica Tooltip {#example-labelFormatter} La proprietà `labelFormatter` consente di personalizzare il formato di visualizzazione del tooltip. Riceve il valore corrente del range slider e restituisce il testo da visualizzare. ```html ``` ## mdui-range-slider API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
undefined defaultValue false number[] []

Valore predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
undefined value false number[]

Valore dello slider, in formato array, verrà inviato insieme ai dati del modulo.

NOTA: questa proprietà non può essere impostata come valore iniziale tramite l'attributo HTML. Per modificare questo valore, è possibile farlo solo tramite la proprietà JavaScript.
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
min min true number 0

Valore minimo dello slider, il valore predefinito è 0
max max true number 100

Valore massimo dello slider, il valore predefinito è 100
step step true number 1

Intervallo di incremento, il valore predefinito è 1
tickmarks tickmarks true boolean false

Se aggiungere segni di graduazione
nolabel nolabel true boolean false

Se nascondere il testo del suggerimento
disabled disabled true boolean false

Se il componente è disabilitato
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.
name name true string ''

Nome dello slider, verrà inviato insieme ai dati del modulo
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
undefined labelFormatter false (value: number) => string

Funzione per personalizzare il formato dell'etichetta visualizzata. Il parametro della funzione è il valore corrente dello slider e il valore restituito è il testo da visualizzare.
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
change

Questo evento si attiva quando il valore cambia e il componente perde il focus
input

Attivato quando il valore cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
### CSS Parts
Nome Descrizione
track-inactive

Traccia nello stato non attivo
track-active

Traccia nello stato attivo
handle

Maniglia di controllo
label

Testo del suggerimento
tickmark

Segno di graduazione
# Componente Select Il componente Select mostra le opzioni in un menu a discesa. Questa guida si concentra sull'uso del componente ``. Per informazioni sulle voci del menu a discesa, consulta la sezione [``](/it/docs/2/components/menu#menu-item-api). ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` Importa i tipi TypeScript: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Esempio: ```html Elemento 1 Elemento 2 ``` ## Esempi {#examples} ### Varianti {#example-variant} Usa l'attributo `variant` per cambiare la variante del select. ```html Elemento 1 Elemento 2 Elemento 1 Elemento 2 ``` ### Selezione Multipla {#example-multiple} Per impostazione predefinita, il componente è a selezione singola. Il `value` del componente `` corrisponde al `value` del [``](/it/docs/2/components/menu#menu-item-api) attualmente selezionato. Per abilitare la selezione multipla, aggiungi l'attributo `multiple`. In questo caso, il `value` di `` diventa un array contenente le proprietà `value` dei componenti [``](/it/docs/2/components/menu#menu-item-api) attualmente selezionati. Nota: Quando la selezione multipla è abilitata, il `value` di `` è un array. Puoi solo leggerlo e impostarlo tramite proprietà JavaScript. ```html Elemento 1 Elemento 2 Elemento 3 ``` ### Testo di Supporto {#example-helper-text} Usa l'attributo `label` per visualizzare il testo dell'etichetta sopra il select. ```html Elemento 1 Elemento 2 ``` Usa l'attributo `placeholder` per visualizzare il testo del segnaposto quando non viene selezionato alcun valore. ```html Elemento 1 Elemento 2 ``` Usa l'attributo `helper` per visualizzare il testo di supporto nella parte inferiore del select. Oppure, usa lo slot `helper` per fornire il testo di supporto. ```html Elemento 1 Elemento 2 Elemento 1 Elemento 2 Testo di supporto ``` ### Stato Solo Lettura {#example-readonly} Per rendere il select di sola lettura, aggiungi l'attributo `readonly`. ```html Elemento 1 Elemento 2 ``` ### Stato Disabilitato {#example-disabled} Per disabilitare il select, aggiungi l'attributo `disabled`. ```html Elemento 1 Elemento 2 ``` ### Cancellabile {#example-clearable} L'attributo `clearable` aggiunge un pulsante di cancellazione a destra quando il select ha un valore. ```html Elemento 1 Elemento 2 ``` Puoi personalizzare il pulsante di cancellazione utilizzando lo slot `clear`. ```html Elemento 1 Elemento 2 ``` ### Posizione del Menu a Discesa {#example-placement} Usa l'attributo `placement` per impostare la posizione del menu a discesa. ```html Elemento 1 Elemento 2 ``` ### Allineamento del Testo {#example-end-aligned} Per allineare il testo a destra, aggiungi l'attributo `end-aligned`. ```html Elemento 1 Elemento 2 ``` ### Prefisso, Suffisso e Icone {#example-prefix-suffix} Usa gli attributi `icon` e `end-icon` per aggiungere Icone Material a sinistra e a destra del select. Oppure, usa gli slot `icon` e `end-icon` per aggiungere elementi al select. ```html Elemento 1 Elemento 2

Elemento 1 Elemento 2 ``` Usa gli attributi `prefix` e `suffix` per aggiungere testo a sinistra e a destra del select. Oppure, usa gli slot `prefix` e `suffix` per aggiungere elementi di testo. Questo testo appare quando il select è focalizzato o ha un valore. ```html Elemento 1 Elemento 2

Elemento 1 Elemento 2 $ /100 ``` ## mdui-select API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'filled' | 'outlined' 'filled'

Stile del componente Select. I valori opzionali includono:

  • filled: componente Select con colore di sfondo, effetto visivo più forte
  • outlined: componente Select con bordo, effetto visivo più debole
multiple multiple true boolean false

Se supportare la selezione multipla
name name true string ''

Nome del componente Select, verrà inviato insieme ai dati del modulo
value value false string | string[] ''

Valore del componente Select, verrà inviato insieme ai dati del modulo.

Se l'attributo multiple non è specificato, questo valore è una stringa; se l'attributo multiple è specificato, questo valore è un array di stringhe. L'attributo HTML può impostare solo valori stringa; se è necessario impostare un valore array, impostarlo tramite la proprietà JavaScript.
undefined defaultValue false string | string[] ''

Valore selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
label label true string

Testo dell'etichetta
placeholder placeholder true string

Testo del segnaposto
helper helper true string

Testo di aiuto nella parte inferiore del componente Select. Può anche essere impostato tramite slot="helper".
clearable clearable true boolean false

Se è possibile svuotare il componente Select
clear-icon clearIcon true string

Nome dell'icona Material per il pulsante di cancellazione visualizzato a destra del componente Select quando è cancellabile. Può anche essere impostato tramite slot="clear-icon".
placement placement true 'auto' | 'bottom' | 'top' 'auto'

Posizione del componente Select. I valori opzionali includono:

  • auto: determina automaticamente la posizione
  • bottom: in basso
  • top: in alto
end-aligned endAligned true boolean false

Se il testo è allineato a destra
prefix prefix true string

Testo del prefisso del componente Select. Viene visualizzato solo quando il componente riceve il focus o quando ha un valore. Può anche essere impostato tramite slot="prefix".
suffix suffix true string

Testo del suffisso del componente Select. Viene visualizzato solo quando il componente riceve il focus o quando ha un valore. Può anche essere impostato tramite slot="suffix".
icon icon true string

Nome dell'icona Material per l'icona del prefisso del componente Select. Può anche essere impostato tramite slot="icon".
end-icon endIcon true string

Nome dell'icona Material per l'icona del suffisso del componente Select. Può anche essere impostato tramite slot="end-icon".
error-icon errorIcon true string

Nome dell'icona Material visualizzata a destra del componente Select quando la convalida del campo del modulo fallisce. Può anche essere impostato tramite slot="error-icon".
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.
readonly readonly true boolean false

Se è di sola lettura
disabled disabled true boolean false

Se il componente è disabilitato
required required true boolean false

Se è obbligatorio compilare questo campo al momento dell'invio del modulo
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
change

Attivato quando il valore selezionato cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
clear

Attivato quando si fa clic sul pulsante di cancellazione generato dall'attributo clearable. È possibile impedire la cancellazione del componente Select chiamando event.preventDefault().
### Slots
Nome Descrizione
(predefinito)

Elemento <mdui-menu-item>
icon

Icona a sinistra
end-icon

Icona a destra
error-icon

Icona a destra nello stato di errore di convalida
prefix

Testo a sinistra
suffix

Testo a destra
clear-button

Pulsante di cancellazione
clear-icon

Icona nel pulsante di cancellazione
helper

Testo di aiuto in basso
### CSS Parts
Nome Descrizione
chips

In caso di selezione multipla, contenitore per i chip corrispondenti ai valori selezionati.
chip

In caso di selezione multipla, chip per ogni valore selezionato.
chip__button

Elemento <button> all'interno del chip
chip__label

Testo all'interno del chip
chip__delete-icon

Icona di eliminazione all'interno del chip
text-field

Campo di testo, cioè l'elemento <mdui-text-field>.
text-field__container

Contenitore del campo di testo all'interno di text-field.
text-field__icon

Icona a sinistra all'interno di text-field.
text-field__end-icon

Icona a destra all'interno di text-field.
text-field__error-icon

Icona a destra per lo stato di errore di convalida all'interno di text-field.
text-field__prefix

Testo a sinistra all'interno di text-field.
text-field__suffix

Testo a destra all'interno di text-field.
text-field__label

Testo dell'etichetta all'interno di text-field.
text-field__input

Elemento <input> all'interno di text-field.
text-field__clear-button

Pulsante di cancellazione all'interno di text-field.
text-field__clear-icon

Icona nel pulsante di cancellazione all'interno di text-field.
text-field__supporting

Contenitore delle informazioni di supporto nella parte inferiore di text-field, inclusi helper ed error.
text-field__helper

Testo di aiuto nella parte inferiore all'interno di text-field.
text-field__error

Testo di descrizione dell'errore nella parte inferiore all'interno di text-field.
menu

Menu a discesa, cioè l'elemento <mdui-menu>.
# Componente Segmented Button I pulsanti segmentati raggruppano un insieme di opzioni e consentono di cambiare visualizzazione o ordinare elementi. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` Importa i tipi TypeScript: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Esempio: ```html Giorno Settimana Mese ``` ## Esempi {#examples} ### Larghezza intera {#example-full-width} Per far sì che il componente occupi l'intera larghezza del contenitore, aggiungi l'attributo `full-width` al componente ``. ```html Giorno Settimana Mese ``` ### Selezione Singola {#example-selects-single} Per abilitare la modalità di selezione singola, imposta l'attributo `selects` del componente `` su `single`. In questa modalità, la proprietà `value` di `` riflette la proprietà `value` del `` attualmente selezionato. ```html Giorno Settimana Mese Giorno Settimana Mese ``` ### Selezione Multipla {#example-selects-multiple} Per abilitare la modalità di selezione multipla, imposta l'attributo `selects` del componente `` su `multiple`. In questa modalità, la proprietà `value` di `` è un array composto dalle proprietà `value` dei componenti `` attualmente selezionati. Quando è attiva la selezione multipla, la proprietà `value` di `` è un array e può essere letta e impostata solo tramite proprietà JavaScript. ```html Giorno Settimana Mese Giorno Settimana Mese ``` ### Icone {#example-icon} Per aggiungere Icone Material sui lati sinistro e destro del pulsante, usa gli attributi `icon` e `end-icon` sull'elemento ``. Oppure, usa gli slot `icon` e `end-icon` per aggiungere elementi sui lati sinistro e destro del pulsante. ```html Giorno Settimana Mese ``` Per impostare l'Icona Material per lo stato selezionato, usa l'attributo `selected-icon` sull'elemento ``. Oppure, usa lo slot `selected-icon`. ```html Giorno Settimana ``` ### Link {#example-link} Per trasformare il pulsante in un link, usa l'attributo `href` sul componente ``. Gli attributi `download`, `target` e `rel` sono disponibili per le normali funzionalità dei link. ```html Link Settimana Mese ``` ### Stato Disabilitato e in Caricamento {#example-disabled} Per disabilitare l'intero gruppo di pulsanti segmentati, aggiungi l'attributo `disabled` all'elemento ``. ```html Giorno Settimana Mese ``` Per disabilitare pulsanti specifici, aggiungi l'attributo `disabled` all'elemento ``. Per portare un pulsante nello stato di caricamento, aggiungi l'attributo `loading`. ```html Giorno Settimana Mese Anno ``` ## mdui-segmented-button-group API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
full-width fullWidth true boolean false

Se riempire l'intera larghezza dell'elemento padre
selects selects true 'single' | 'multiple'

Stato di selezione del pulsante segmentato, non selezionabile per impostazione predefinita. I valori opzionali includono:

  • single: selezione singola
  • multiple: selezione multipla
disabled disabled true boolean false

Se il componente è disabilitato
required required true boolean false

Se è obbligatorio effettuare una selezione al momento dell'invio del modulo
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.
name name true string ''

Nome da inviare con il modulo, verrà inviato insieme ai dati del modulo
value value false string | string[] ''

Valore del <mdui-segmented-button> attualmente selezionato.

Nota: l'attributo HTML di questa proprietà è sempre una stringa e può essere impostato come valore iniziale tramite l'attributo HTML solo quando selects="single". Il valore della proprietà JavaScript è una stringa quando selects="single" e un array di stringhe quando selects="multiple". Pertanto, quando selects="multiple", per modificare questo valore, è possibile farlo solo tramite la proprietà JavaScript.
undefined defaultValue false string | string[] ''

Valore selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
### Metodi
Nome Descrizione
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
change

Attivato quando il valore selezionato cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
### Slots
Nome Descrizione
(predefinito)

Componente <mdui-segmented-button>
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
## mdui-segmented-button API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
icon icon true string

Nome dell'icona Material a sinistra. Può anche essere impostato tramite slot="icon".
end-icon endIcon true string

Nome dell'icona Material a destra. Può anche essere impostato tramite slot="end-icon".
selected-icon selectedIcon true string

Nome dell'icona Material per lo stato selezionato. Può anche essere impostato tramite slot="selected-icon".
href href true string

URL di destinazione del collegamento.

Se questa proprietà è impostata, il componente viene renderizzato come elemento <a> e sarà possibile utilizzare le proprietà relative ai collegamenti.
download download true string

Destinazione del download del collegamento.

Nota: questa proprietà è valida solo se è impostato l'attributo href.
target target true '_blank' | '_parent' | '_self' | '_top'

Modalità di apertura del collegamento. Le opzioni disponibili sono:

  • _blank: apre il collegamento in una nuova finestra
  • _parent: apre il collegamento nel frame genitore
  • _self: predefinita. Apre il collegamento nel frame corrente
  • _top: apre il collegamento nell'intera finestra

Nota: questa proprietà è valida solo se è impostato l'attributo href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relazione tra il documento corrente e il documento collegato. Le opzioni disponibili sono:

  • alternate: versione alternativa del documento corrente
  • author: autore del documento o dell'articolo corrente
  • bookmark: collegamento permanente al capitolo antenato più vicino
  • external: il documento di destinazione non appartiene allo stesso sito del documento corrente
  • help: collegamento alla guida di riferimento
  • license: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione
  • me: il documento corrente rappresenta il proprietario del contenuto collegato
  • next: il documento corrente fa parte di una serie e il documento di destinazione è il successivo
  • nofollow: l'autore o l'editore del documento corrente non avalla il documento di destinazione
  • noreferrer: non include l'intestazione Referer. Simile a noopener
  • opener: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo target è _blank), crea un contesto di navigazione ausiliario
  • prev: il documento corrente fa parte di una serie e il documento di destinazione è il precedente
  • search: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate
  • tag: associa un tag al documento corrente (identificato dall'indirizzo specificato)

Nota: disponibile solo quando è specificato l'attributo href.
autofocus autofocus true boolean false

Se attivare automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Indice di tabulazione dell'elemento
disabled disabled true boolean false

Se il componente è disabilitato
loading loading true boolean false

Se il componente è in stato di caricamento
name name true string ''

Nome del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
value value true string ''

Valore iniziale del pulsante, verrà inviato insieme ai dati del modulo.

Nota: questa proprietà è valida solo se l'attributo href non è impostato.
type type true 'submit' | 'reset' | 'button' 'button'

Tipo di pulsante. Il tipo predefinito è button. Le opzioni disponibili sono:

  • submit: invia i dati del modulo al server
  • reset: reimposta tutti i campi del modulo ai valori iniziali
  • button: questo tipo di pulsante non ha un comportamento predefinito

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato.
formaction formAction true string

Specifica l'URL per l'invio del modulo.

Se questo attributo è specificato, sovrascriverà l'attributo action dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Specifica il tipo di contenuto per l'invio del modulo al server. Le opzioni disponibili sono:

  • application/x-www-form-urlencoded: valore predefinito quando questo attributo non è specificato
  • multipart/form-data: utilizzato quando il modulo contiene un elemento <input type="file">
  • text/plain: introdotto in HTML5, utilizzato per il debug

Se questo attributo è specificato, sovrascriverà l'attributo enctype dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è specificato e type="submit".
formmethod formMethod true 'post' | 'get'

Specifica il metodo HTTP da utilizzare durante l'invio del modulo. Le opzioni disponibili sono:

  • post: i dati del modulo sono inclusi nel corpo della richiesta e inviati al server
  • get: i dati del modulo vengono aggiunti all'URL del modulo con ? come separatore e l'URL generato viene inviato al server. Utilizzare questo metodo quando il modulo non ha effetti collaterali e contiene solo caratteri ASCII

Se questo attributo è impostato, sovrascriverà l'attributo method dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formnovalidate formNoValidate true boolean false

Se questo attributo è impostato, la convalida del modulo non verrà eseguita durante l'invio.

Se questo attributo è impostato, sovrascriverà l'attributo novalidate dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Dove aprire la risposta ricevuta dopo l'invio del modulo. I valori opzionali includono:

  • _self: opzione predefinita, apre nel frame corrente
  • _blank: apre in una nuova finestra
  • _parent: apre nel frame genitore
  • _top: apre nell'intera finestra

Se questo attributo è impostato, sovrascriverà l'attributo target dell'elemento <form>.

Nota: questa proprietà è valida solo se l'attributo href non è impostato e type="submit".
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
invalid

Attivato quando la convalida del campo del modulo non viene superata
### Slots
Nome Descrizione
(predefinito)

Contenuto testuale dell'elemento del pulsante segmentato
icon

Icona a sinistra dell'elemento del pulsante segmentato
selected-icon

Icona a sinistra nello stato selezionato
end-icon

Icona a destra dell'elemento del pulsante segmentato
### CSS Parts
Nome Descrizione
button

Elemento <button> o <a> interno
icon

Icona a sinistra
selected-icon

Icona a sinistra nello stato selezionato
end-icon

Icona a destra
label

Contenuto testuale
loading

Elemento <mdui-circular-progress> nello stato di caricamento
# Componente Slider Gli slider consentono agli utenti di selezionare da un intervallo di valori. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/slider.js'; ``` Importa il tipo TypeScript: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Valore Predefinito {#example-value} La proprietà `value` consente di leggere o impostare il valore dello slider. ```html ``` ### Stato Disabilitato {#example-disabled} Aggiungi l'attributo `disabled` per disabilitare lo slider. ```html ``` ### Intervallo {#example-min-max} Usa gli attributi `min` e `max` per impostare i valori minimo e massimo dello slider. ```html ``` ### Intervallo di Passaggio {#example-step} Usa l'attributo `step` per impostare l'intervallo di passaggio dello slider. ```html ``` ### Segni di Spunta {#example-tickmarks} Aggiungi l'attributo `tickmarks` per mostrare i segni di spunta sullo slider. ```html ``` ### Nascondi Tooltip {#example-nolabel} Aggiungi l'attributo `nolabel` per nascondere il tooltip dello slider. ```html ``` ### Modifica Tooltip {#example-labelFormatter} La proprietà `labelFormatter` consente di personalizzare il formato di visualizzazione del tooltip. Riceve il valore corrente dello slider e restituisce il testo da visualizzare. ```html ``` ## mdui-slider API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
value value false number 0

Valore dello slider, verrà inviato insieme ai dati del modulo
undefined defaultValue false number 0

Valore predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
min min true number 0

Valore minimo dello slider, il valore predefinito è 0
max max true number 100

Valore massimo dello slider, il valore predefinito è 100
step step true number 1

Intervallo di incremento, il valore predefinito è 1
tickmarks tickmarks true boolean false

Se aggiungere segni di graduazione
nolabel nolabel true boolean false

Se nascondere il testo del suggerimento
disabled disabled true boolean false

Se il componente è disabilitato
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.
name name true string ''

Nome dello slider, verrà inviato insieme ai dati del modulo
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
undefined labelFormatter false (value: number) => string

Funzione per personalizzare il formato dell'etichetta visualizzata. Il parametro della funzione è il valore corrente dello slider e il valore restituito è il testo da visualizzare.
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
change

Questo evento si attiva quando il valore cambia e il componente perde il focus
input

Attivato quando il valore cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
### CSS Parts
Nome Descrizione
track-inactive

Traccia nello stato non attivo
track-active

Traccia nello stato attivo
handle

Maniglia di controllo
label

Testo del suggerimento
tickmark

Segno di graduazione
# Componente Snackbar Gli snackbar forniscono brevi aggiornamenti sui processi dell'app nella parte inferiore dello schermo. Oltre all'uso diretto del componente, mdui offre anche una funzione [`mdui.snackbar`](/it/docs/2/functions/snackbar) per un modo più semplice di utilizzare il componente Snackbar. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/snackbar.js'; ``` Importa il tipo TypeScript: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Esempio: ```html Immagine archiviata Apri Snackbar ``` ## Esempi {#examples} ### Posizione {#example-placement} Puoi impostare la posizione dello snackbar utilizzando l'attributo `placement`. ```html
Immagine archiviata top-start Immagine archiviata top Immagine archiviata top-end
Immagine archiviata bottom-start Immagine archiviata bottom Immagine archiviata bottom-end
``` ### Pulsante di Azione {#example-action} L'attributo `action` aggiunge un pulsante di azione sul lato destro e ne specifica il testo. L'evento `action-click` viene attivato quando si fa clic sul pulsante di azione. L'attributo `action-loading` visualizza uno stato di caricamento sul pulsante di azione. ```html Immagine archiviata Apri Snackbar ``` Lo slot `action` può essere usato anche per aggiungere elementi sul lato destro. ```html Immagine archiviata Annulla Apri Snackbar ``` ### Chiudibile {#example-closeable} L'attributo `closeable` aggiunge un pulsante di chiusura a destra. Cliccando sul pulsante si chiude lo snackbar e viene attivato l'evento `close`. ```html Immagine archiviata Apri Snackbar ``` Lo slot `close-button` specifica il contenuto del pulsante di chiusura. ```html Immagine archiviata Apri Snackbar ``` L'attributo `close-icon` imposta l'Icona Material nel pulsante di chiusura predefinito. Lo slot `close-icon` imposta l'elemento icona nel pulsante di chiusura predefinito. ```html Immagine archiviata Apri Snackbar ``` ### Righe di Testo {#example-message-line} L'attributo `message-line` limita il numero di righe del testo del messaggio, con un massimo di `2` righe. ```html L'elemento ha già l'etichetta "viaggio". Puoi aggiungere una nuova etichetta. Puoi aggiungere una nuova etichetta. Apri Snackbar ``` ### Ritardo di Chiusura Automatica {#example-auto-close-delay} L'attributo `auto-close-delay` imposta il ritardo per la chiusura automatica, in millisecondi. Il valore predefinito è `5000` millisecondi. ```html Immagine archiviata Apri Snackbar ``` ### Chiusura al Clic Fuori {#example-close-on-outside-click} L'attributo `close-on-outside-click` chiude lo snackbar quando si fa clic al di fuori della sua area. ```html Immagine archiviata Apri Snackbar ``` ## mdui-snackbar API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
open open true boolean false

Se mostrare la Snackbar
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

Posizione della Snackbar. Il valore predefinito è bottom. I valori opzionali includono:

  • top: in alto al centro
  • top-start: in alto a sinistra
  • top-end: in alto a destra
  • bottom: in basso al centro
  • bottom-start: in basso a sinistra
  • bottom-end: in basso a destra
action action true string

Testo del pulsante di azione. Può essere impostato anche tramite slot="action".
action-loading actionLoading true boolean false

Indica se il pulsante di azione è in stato di caricamento
closeable closeable true boolean false

Se mostrare il pulsante di chiusura a destra
close-icon closeIcon true string

Nome dell'icona Material per il pulsante di chiusura. Può anche essere impostato tramite slot="close-icon".
message-line messageLine true 1 | 2

Numero massimo di righe visualizzate per il testo del messaggio. Nessun limite per impostazione predefinita. I valori opzionali includono:

  • 1: massimo una riga
  • 2: massimo due righe
auto-close-delay autoCloseDelay true number 5000

Tempo di ritardo per la chiusura automatica (in millisecondi). Impostare su 0 per non chiudere automaticamente. Il valore predefinito è 5000 millisecondi.
close-on-outside-click closeOnOutsideClick true boolean false

Se chiudere la Snackbar facendo clic o toccando un'area esterna.
### Eventi
Nome Descrizione
open

L'evento viene attivato all'inizio dell'apertura della Snackbar. È possibile impedirne l'apertura chiamando event.preventDefault().
opened

L'evento viene attivato al termine dell'animazione di apertura della Snackbar.
close

L'evento viene attivato all'inizio della chiusura della Snackbar. È possibile impedire la chiusura della Snackbar chiamando event.preventDefault().
closed

L'evento viene attivato al termine dell'animazione di chiusura della Snackbar.
action-click

Attivato quando si fa clic sul pulsante di azione
### Slots
Nome Descrizione
(predefinito)

Contenuto testuale del messaggio della Snackbar
action

Pulsante di azione a destra
close-button

Pulsante di chiusura a destra. Deve essere impostato l'attributo closeable su true per essere visualizzato.
close-icon

Icona all'interno del pulsante di chiusura
### CSS Parts
Nome Descrizione
message

Testo del messaggio
action

Pulsante di azione
close-button

Pulsante di chiusura
close-icon

Icona all'interno del pulsante di chiusura
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--z-index

Valore CSS z-index del componente
# Componente Switch Il componente Switch attiva o disattiva lo stato di una singola impostazione. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/switch.js'; ``` Importa il tipo TypeScript: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Stato Selezionato {#example-checked} L'attributo `checked` indica se l'interruttore è attivo o disattivato. Aggiungi l'attributo `checked` per attivarlo per impostazione predefinita. ```html ``` ### Stato Disabilitato {#example-disabled} Usa l'attributo `disabled` per disabilitare l'interruttore. ```html ``` ### Icone {#example-icon} Usa gli attributi `unchecked-icon` e `checked-icon` per impostare le Icone Material rispettivamente per gli stati deselezionato e selezionato. Oppure, usa gli slot `unchecked-icon` e `checked-icon` per impostare le icone per gli stati deselezionato e selezionato. ```html ``` ## mdui-switch API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
disabled disabled true boolean false

Se il componente è disabilitato
checked checked true boolean false

Se il componente è selezionato
undefined defaultChecked false boolean false

Stato selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo stato. Questa proprietà può essere impostata solo tramite JavaScript.
unchecked-icon uncheckedIcon true string

Nome dell'icona Material per lo stato non selezionato. Può anche essere impostato tramite slot="unchecked-icon".
checked-icon checkedIcon true string

Nome dell'icona Material per lo stato selezionato. Può anche essere impostato tramite slot="checked-icon".

L'icona predefinita è check, è possibile passare una stringa vuota per rimuovere l'icona predefinita.
required required true boolean false

Se è obbligatorio selezionare questo interruttore al momento dell'invio del modulo
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.
name name true string ''

Nome dell'interruttore, verrà inviato insieme ai dati del modulo
value value true string 'on'

Valore dell'interruttore, verrà inviato insieme ai dati del modulo
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
change

Attivato quando lo stato di selezione cambia
input

Attivato quando lo stato di selezione cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
### Slots
Nome Descrizione
unchecked-icon

Elemento nello stato non selezionato
checked-icon

Elemento nello stato selezionato
### CSS Parts
Nome Descrizione
track

Traccia
thumb

Contenitore dell'icona
unchecked-icon

Icona nello stato non selezionato
checked-icon

Icona nello stato selezionato
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli della traccia del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--shape-corner-thumb

Dimensione dell'arrotondamento degli angoli del contenitore dell'icona del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
# Componente Tabs Le schede organizzano il contenuto in diverse schermate e viste. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` Importa i tipi TypeScript: ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` Esempio: ```html Scheda 1 Scheda 2 Scheda 3 Pannello 1 Pannello 2 Pannello 3 ``` ## Esempi {#examples} ### Variante {#example-variant} L'attributo `variant` sul componente `` consente di impostare lo stile delle schede. ```html Scheda 1 Scheda 2 Scheda 3 Pannello 1 Pannello 2 Pannello 3 Scheda 1 Scheda 2 Scheda 3 Pannello 1 Pannello 2 Pannello 3 ``` ### Posizionamento delle Schede {#example-placement} Usa l'attributo `placement` sul componente `` per impostare la posizione delle schede. ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end Scheda 1 Scheda 2 Scheda 3 Pannello 1 Pannello 2 Pannello 3 ``` ### Larghezza intera {#example-full-width} Per far sì che le schede occupino l'intera larghezza e siano distribuite uniformemente, aggiungi l'attributo `full-width` al componente ``. ```html Scheda 1 Scheda 2 Scheda 3 Pannello 1 Pannello 2 Pannello 3 ``` ### Icone {#example-icon} Aggiungi Icone Material alle schede impostando l'attributo `icon` sul componente ``. Oppure, usa lo slot `icon` per aggiungere elementi icona. Disponi l'icona e il testo orizzontalmente aggiungendo l'attributo `inline`. ```html Scheda 1 Scheda 2 Scheda 3 Pannello 1 Pannello 2 Pannello 3 ``` ### Badge {#example-badge} Aggiungi un badge al componente `` utilizzando lo slot `badge`. ```html Scheda 1 99+ Scheda 2 Scheda 3 Pannello 1 Pannello 2 Pannello 3 ``` ### Contenuto Personalizzato {#example-custom} Usa lo slot `custom` nel componente `` per personalizzare completamente il contenuto delle schede. ```html Scheda 1 Icona Scheda 2 Scheda 3 Pannello 1 Pannello 2 Pannello 3 ``` ## mdui-tab-panel API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
value value true string

Valore dell'elemento del pannello a schede
### Slots
Nome Descrizione
(predefinito)

Contenuto dell'elemento del pannello a schede
## mdui-tab API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
value value true string

Valore dell'elemento di navigazione a schede
icon icon true string

Nome dell'icona Material. Può anche essere impostato tramite slot="icon".
inline inline true boolean false

Se disporre orizzontalmente icona e testo
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
### Slots
Nome Descrizione
(predefinito)

Contenuto testuale dell'elemento di navigazione a schede
icon

Icona nell'elemento di navigazione a schede
badge

Badge
custom

Personalizza l'intero contenuto dell'elemento di navigazione a schede
### CSS Parts
Nome Descrizione
container

Contenitore dell'elemento di navigazione a schede
icon

Icona nell'elemento di navigazione a schede
label

Testo dell'elemento di navigazione a schede
## mdui-tabs API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'primary' | 'secondary' 'primary'

Forma delle schede. I valori opzionali includono:

  • primary: adatto per scenari in cui si trova sotto <mdui-top-app-bar> e serve a cambiare la pagina principale dell'applicazione
  • secondary: adatto per scenari in cui si trova all'interno di una pagina e serve a cambiare un gruppo di contenuti correlati
value value true string

Valore del <mdui-tab> attualmente attivo
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

Posizione delle schede. Il valore predefinito è top-start. I valori opzionali includono:

  • top-start: in alto a sinistra
  • top: in alto al centro
  • top-end: in alto a destra
  • bottom-start: in basso a sinistra
  • bottom: in basso al centro
  • bottom-end: in basso a destra
  • left-start: a sinistra in alto
  • left: a sinistra al centro
  • left-end: a sinistra in basso
  • right-start: a destra in alto
  • right: a destra al centro
  • right-end: a destra in basso
full-width fullWidth true boolean false

Se riempire l'intera larghezza dell'elemento padre
### Eventi
Nome Descrizione
change

Attivato quando il valore selezionato cambia
### Slots
Nome Descrizione
(predefinito)

Elemento <mdui-tab>
panel

Elemento <mdui-tab-panel>
### CSS Parts
Nome Descrizione
container

Contenitore dell'elemento <mdui-tab>
indicator

Indicatore dello stato attivo
# Componente Text Field I campi di testo, tipicamente utilizzati in moduli e dialoghi, consentono agli utenti di inserire testo. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/text-field.js'; ``` Importa il tipo TypeScript: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Esempio: ```html ``` ## Esempi {#examples} ### Variante {#example-variant} L'attributo `variant` modifica la variante del campo di testo. ```html

``` ### Testo di Supporto {#example-helper-text} L'attributo `label` imposta il testo dell'etichetta sopra il campo di testo. ```html ``` L'attributo `placeholder` imposta il testo segnaposto quando il campo è vuoto. ```html ``` L'attributo `helper` o lo slot `helper` imposta il testo di supporto nella parte inferiore del campo di testo. Per visualizzare il testo di supporto solo quando l'input è focalizzato, usa l'attributo `helper-on-focus`. ```html Testo di supporto ``` ### Cancellabile {#example-clearable} L'attributo `clearable` aggiunge un pulsante di cancellazione a destra quando il campo di testo ha un valore. ```html ``` ### Testo Allineato a Destra {#example-end-aligned} L'attributo `end-aligned` allinea il testo a destra. ```html ``` ### Prefisso, Suffisso, Icone {#example-prefix-suffix} Gli attributi o gli slot `icon` e `end-icon` aggiungono Icone Material rispettivamente a sinistra e a destra del campo di testo. ```html

``` Gli attributi o gli slot `prefix` e `suffix` aggiungono testo a sinistra e a destra del campo di testo. Questo testo viene mostrato solo quando il campo di testo è focalizzato o ha un valore. ```html

$ /100 ``` ### Solo Lettura {#example-readonly} L'attributo `readonly` rende il campo di testo di sola lettura. ```html ``` ### Disabilitato {#example-disabled} L'attributo `disabled` disabilita il campo di testo. ```html ``` ### Campo di Testo Multiriga {#example-rows} L'attributo `rows` imposta il numero di righe per un campo di testo multiriga. ```html ``` Per regolare automaticamente l'altezza del campo di testo in base alla lunghezza dell'input, usa l'attributo `autosize`. Gli attributi `min-rows` e `max-rows` specificano il numero minimo e massimo di righe. ```html

``` ### Contatore di Caratteri {#example-counter} L'attributo `maxlength` imposta il numero massimo di caratteri per il campo di testo. Per visualizzare un contatore di caratteri sotto il campo di testo, usa l'attributo `counter`. ```html ``` ### Campo Password {#example-password} Per i campi password (`type="password"`), l'attributo `toggle-password` aggiunge un pulsante a destra per alternare la visibilità della password. ```html ``` ## mdui-text-field API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'filled' | 'outlined' 'filled'

Forma del campo di testo. Il valore predefinito è filled. I valori opzionali includono:

  • filled: campo di testo con colore di sfondo, effetto visivo più forte
  • outlined: campo di testo con bordo, effetto visivo più debole
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

Tipo di input del campo di testo. Il valore predefinito è text. I valori opzionali includono:

  • text: valore predefinito. Campo di testo
  • number: può essere inserito solo numeri. Sui dispositivi con tastiera dinamica viene mostrata la tastiera numerica
  • password: utilizzato per inserire password, il valore viene mascherato
  • url: utilizzato per inserire URL, viene convalidato il formato URL. Sui dispositivi con tastiera dinamica è disponibile una tastiera corrispondente
  • email: utilizzato per inserire indirizzi email, viene convalidato il formato email. Sui dispositivi con tastiera dinamica è disponibile una tastiera corrispondente
  • search: utilizzato per le caselle di ricerca. Sui dispositivi con tastiera dinamica, l'icona Invio si trasforma in un'icona di ricerca
  • tel: utilizzato per inserire numeri di telefono. Sui dispositivi con tastiera dinamica viene mostrata la tastiera numerica del telefono
  • hidden: nasconde il controllo, ma il suo valore viene comunque inviato al server
  • date: controllo per l'inserimento di una data (anno, mese, giorno, esclusa l'ora). Nei browser supportati, all'attivazione apre un selettore di data o una rotella numerica per anno, mese e giorno
  • datetime-local: controllo per l'inserimento di data e ora, escluso il fuso orario. Nei browser supportati, all'attivazione apre un selettore di data o una rotella numerica per anno, mese e giorno
  • month: controllo per l'inserimento di anno e mese, senza fuso orario
  • time: controllo per l'inserimento dell'ora, escluso il fuso orario
  • week: controllo per l'inserimento di una data composta da anno e numero di settimana, senza fuso orario
name name true string ''

Nome del campo di testo, verrà inviato insieme ai dati del modulo
value value false string ''

Valore del campo di testo, verrà inviato insieme ai dati del modulo
undefined defaultValue false string ''

Valore predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
label label true string

Testo dell'etichetta
placeholder placeholder true string

Testo del segnaposto
helper helper true string

Testo di aiuto nella parte inferiore del campo di testo. Può anche essere impostato tramite slot="helper".
helper-on-focus helperOnFocus true boolean false

Se mostrare il testo di aiuto nella parte inferiore solo quando si riceve il focus
clearable clearable true boolean false

Se è possibile svuotare il contenuto del campo di testo
clear-icon clearIcon true string

Nome dell'icona Material per il pulsante di cancellazione visualizzato a destra del campo di testo quando è cancellabile. Può anche essere impostato tramite slot="clear-icon".
end-aligned endAligned true boolean false

Se allineare il testo a destra
prefix prefix true string

Testo del prefisso del campo di testo. Viene visualizzato solo quando il campo di testo è in focus o ha un valore. Può anche essere impostato tramite slot="prefix".
suffix suffix true string

Testo del suffisso del campo di testo. Viene visualizzato solo quando il campo di testo è in focus o ha un valore. Può anche essere impostato tramite slot="suffix".
icon icon true string

Nome dell'icona Material per l'icona del prefisso del campo di testo. Può anche essere impostato tramite slot="icon".
end-icon endIcon true string

Nome dell'icona Material per l'icona del suffisso del campo di testo. Può anche essere impostato tramite slot="end-icon".
error-icon errorIcon true string

Nome dell'icona Material visualizzata a destra del campo di testo quando la convalida del campo del modulo fallisce. Può anche essere impostato tramite slot="error-icon".
form form true string

Elemento <form> associato. Il valore di questo attributo deve essere l'id di un elemento <form> nella stessa pagina.

Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento <form>. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento <form>.
readonly readonly true boolean false

Se è in modalità di sola lettura
disabled disabled true boolean false

Se il campo di input deve essere disabilitato
required required true boolean false

Se è obbligatorio compilare questo campo al momento dell'invio del modulo
rows rows true number

Numero di righe fisse visualizzate per il campo di testo
autosize autosize true boolean false

Se regolare automaticamente l'altezza del campo di testo in base al contenuto inserito
min-rows minRows true number

Quando autosize è true, il numero minimo di righe del campo di testo
max-rows maxRows true number

Quando autosize è true, il numero massimo di righe del campo di testo
minlength minlength true number

Numero minimo di caratteri consentito
maxlength maxlength true number

Numero massimo di caratteri consentito
counter counter true boolean false

Se mostrare il conteggio dei caratteri, valido solo quando è specificato maxlength.
min min true number

Quando type è number, il valore numerico minimo consentito
max max true number

Quando type è number, il valore numerico massimo consentito
step step true number

Quando type è number, il passo di incremento/decremento del valore
pattern pattern true string

Espressione regolare per la convalida del modulo
toggle-password togglePassword true boolean false

Quando type è password, impostando questo attributo si aggiunge un pulsante di commutazione per passare da testo in chiaro a testo mascherato.
show-password-icon showPasswordIcon true string

Icona Material per il pulsante di commutazione della password, visualizzata quando la password è in chiaro. Può anche essere impostato tramite slot="show-password-icon".
hide-password-icon hidePasswordIcon true string

Icona Material per il pulsante di commutazione della password, visualizzata quando la password è mascherata. Può anche essere impostato tramite slot="hide-password-icon".
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

Attributo non standard di iOS, utilizzato per controllare se la prima lettera del testo deve essere automaticamente in maiuscolo. Valido su iOS5 e versioni successive. I valori opzionali includono:

  • none: disabilita la maiuscola automatica
  • sentences: maiuscola all'inizio della frase
  • words: maiuscola all'inizio di ogni parola
  • characters: tutte le lettere maiuscole
autocorrect autocorrect true string

Attributo autocorrect dell'elemento input.
autocomplete autocomplete true string

Attributo autocomplete dell'elemento input.
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

Attributo enterkeyhint dell'elemento input, utilizzato per personalizzare il testo o l'icona visualizzati sul tasto Invio della tastiera virtuale. L'aspetto effettivo dipende dal dispositivo e dalla lingua utilizzati dall'utente. I valori opzionali includono:

  • enter: inserisce una nuova riga
  • done: termina l'inserimento, chiude la tastiera virtuale
  • go: passa alla destinazione del testo inserito
  • next: passa all'elemento di input successivo
  • previous: passa all'elemento di input precedente
  • search: passa ai risultati di ricerca
  • send: invia il messaggio di testo
spellcheck spellcheck true boolean false

Se abilitare il controllo ortografico
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

Attributo inputmode dell'elemento input, utilizzato per personalizzare il tipo di tastiera virtuale. I valori opzionali includono:

  • none: nessuna tastiera virtuale. Utile quando si vuole implementare un proprio controllo di input da tastiera
  • text: tastiera di input di testo standard
  • decimal: tastiera di input per numeri decimali, oltre ai numeri può avere il punto decimale . o la virgola delle migliaia ,
  • numeric: mostra la tastiera numerica 0-9
  • tel: tastiera numerica del telefono, include i numeri 0-9, l'asterisco * o il cancelletto #
  • search: tastiera virtuale ottimizzata per l'input di ricerca, il pulsante di invio di solito mostra search o "Cerca"
  • email: tastiera virtuale ottimizzata per l'input di indirizzi email, di solito include tasti come @ .
  • url: tastiera virtuale ottimizzata per l'input di URL, di solito include tasti come . / #
undefined validity false ValidityState

Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a ValidityState
undefined validationMessage false string

Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
undefined valueAsNumber false number

Ottiene il valore corrente e lo converte in tipo number; o imposta un valore di tipo number. Se il valore non può essere convertito in tipo number, restituisce NaN.
autofocus autofocus true boolean false

Se deve ricevere automaticamente il focus al caricamento della pagina
tabindex tabIndex false number

Ordine di tabulazione dell'elemento
### Metodi
Nome Descrizione
select(): void

Seleziona il testo nel campo di testo
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Seleziona un intervallo specifico di contenuto nel campo di testo
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

Sostituisce il testo in un intervallo specifico del campo di testo con un nuovo testo
checkValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true
reportValidity(): boolean

Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce false e attiva l'evento invalid; in caso affermativo, restituisce true.

Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
setCustomValidity(message: string): void

Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
click(): void

Simula un clic del mouse sull'elemento
focus(options?: FocusOptions): void

Imposta il focus sull'elemento corrente.

È possibile passare un oggetto come parametro, le cui proprietà includono:

  • preventScroll: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su true.
blur(): void

Rimuove il focus dall'elemento corrente
### Eventi
Nome Descrizione
focus

Attivato quando si riceve il focus
blur

Attivato quando si perde il focus
change

Attivato quando il valore del campo di testo cambia e si perde il focus
input

Attivato quando il valore del campo di testo cambia
invalid

Attivato quando la convalida del campo del modulo non viene superata
clear

Attivato quando si fa clic sul pulsante di cancellazione generato dall'attributo clearable. È possibile impedire la cancellazione del campo di testo chiamando event.preventDefault().
### Slots
Nome Descrizione
icon

Icona a sinistra
end-icon

Icona a destra
error-icon

Icona a destra nello stato di errore di convalida
prefix

Testo a sinistra
suffix

Testo a destra
clear-button

Pulsante di cancellazione
clear-icon

Icona nel pulsante di cancellazione
toggle-password-button

Pulsante per mostrare o nascondere la password
show-password-icon

Icona del pulsante quando la password è visibile
hide-password-icon

Icona del pulsante quando la password è nascosta
helper

Testo di aiuto in basso
### CSS Parts
Nome Descrizione
container

Contenitore del campo di testo
icon

Icona a sinistra
end-icon

Icona a destra
error-icon

Icona a destra nello stato di errore di convalida
prefix

Testo a sinistra
suffix

Testo a destra
label

Testo dell'etichetta in alto
input

Elemento <input> o <textarea> interno
clear-button

Pulsante di cancellazione
clear-icon

Icona nel pulsante di cancellazione
toggle-password-button

Pulsante per mostrare o nascondere la password
show-password-icon

Icona del pulsante quando la password è visibile
hide-password-icon

Icona del pulsante quando la password è nascosta
supporting

Contenitore delle informazioni di supporto nella parte inferiore, inclusi helper, error e counter
helper

Testo di aiuto nella parte inferiore
error

Testo di descrizione dell'errore nella parte inferiore
counter

Conteggio dei caratteri in basso a destra
# Componente Tooltip I tooltip mostrano informazioni supplementari per un elemento specifico e aiutano a spiegare cosa fa. ## Utilizzo {#usage} Importa il componente: ```js import 'mdui/components/tooltip.js'; ``` Importa il tipo TypeScript: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Esempio: ```html pulsante ``` ## Esempi {#examples} ### Tooltip di Testo Semplice {#example-plain} Per impostazione predefinita, il tooltip visualizza testo semplice. L'attributo `content` imposta il contenuto del tooltip. ```html pulsante ``` Oppure, usa lo slot `content`. ```html pulsante
titolo
contenuto
 ``` ### Tooltip Ricco {#example-rich} Per un tooltip ricco, imposta l'attributo `variant` su `rich`. Il titolo e il contenuto del tooltip possono essere specificati utilizzando rispettivamente gli attributi `headline` e `content`. ```html pulsante ``` Oppure, gli slot `headline` e `content` possono essere usati per specificare il titolo e il contenuto del tooltip. Lo slot `action` viene utilizzato per specificare il pulsante di azione del tooltip. ```html pulsante
Tooltip ricco
I tooltip ricchi attirano l'attenzione su un particolare elemento o funzionalità che merita l'attenzione dell'utente. Supportano più righe di testo informativo.
Azione ``` ### Posizionamento {#example-placement} L'attributo `placement` imposta la posizione del tooltip. ```html
``` ### Metodo di attivazione {#example-trigger} L'attributo `trigger` imposta come viene attivato il tooltip. ```html pulsante ``` ### Ritardo di apertura/chiusura {#example-delay} Quando il metodo di attivazione è `hover`, gli attributi `open-delay` e `close-delay` impostano rispettivamente i ritardi di apertura e chiusura. L'unità è in millisecondi. ```html pulsante ``` ### Stato Disabilitato {#example-disabled} L'attributo `disabled` disabilita il tooltip. ```html pulsante ``` ## mdui-tooltip API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'plain' | 'rich' 'plain'

Forma del tooltip. Il valore predefinito è plain. I valori opzionali includono:

  • plain: testo semplice, adatto per testi semplici su una riga
  • rich: testo ricco, può contenere titolo, corpo e pulsanti di azione
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Posizione del tooltip. Il valore predefinito è auto. I valori opzionali includono:

  • auto: determina automaticamente la posizione. Quando variant="plain", dà priorità a top; quando variant="rich", dà priorità a bottom-right.
  • top-left: in alto a sinistra
  • top-start: in alto a sinistra
  • top: in alto al centro
  • top-end: in alto a destra
  • top-right: in alto a destra
  • bottom-left: in basso a sinistra
  • bottom-start: in basso a sinistra
  • bottom: in basso al centro
  • bottom-end: in basso a destra
  • bottom-right: in basso a destra
  • left-start: a sinistra in alto
  • left: a sinistra al centro
  • left-end: a sinistra in basso
  • right-start: a destra in alto
  • right: a destra al centro
  • right-end: a destra in basso
open-delay openDelay true number 150

Ritardo prima della comparsa al passaggio del mouse, in millisecondi
close-delay closeDelay true number 150

Ritardo per la chiusura attivata dal passaggio del mouse, in millisecondi
headline headline true string

Titolo del tooltip. Utilizzabile solo quando variant="rich". Può anche essere impostato tramite slot="headline".
content content true string

Contenuto del tooltip. Può anche essere impostato tramite slot="content".
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Modalità di apertura. Supporta più valori separati da spazi. I valori opzionali includono:

  • click: apre al clic
  • hover: apre al passaggio del mouse
  • focus: apre al focus
  • manual: può essere aperto e chiuso solo via codice; non è possibile specificare altre modalità di apertura
disabled disabled true boolean false

Se il tooltip deve essere disabilitato
open open true boolean false

Se mostrare il tooltip
### Eventi
Nome Descrizione
open

L'evento viene attivato all'inizio dell'apertura del tooltip. È possibile impedirne l'apertura chiamando event.preventDefault().
opened

L'evento viene attivato al termine dell'animazione di apertura del tooltip.
close

L'evento viene attivato all'inizio della chiusura del tooltip. È possibile impedire la chiusura del tooltip chiamando event.preventDefault().
closed

L'evento viene attivato al termine dell'animazione di chiusura del tooltip.
### Slots
Nome Descrizione
(predefinito)

Elemento di destinazione che attiva il tooltip, solo il primo elemento nello slot default fungerà da elemento di destinazione.
headline

Titolo del tooltip, questo slot è valido solo quando variant="rich".
content

Contenuto del tooltip, può contenere HTML. Se contiene solo testo semplice, è possibile utilizzare l'attributo content come alternativa.
action

Pulsanti nella parte inferiore del tooltip, questo slot è valido solo quando variant="rich".
### CSS Parts
Nome Descrizione
popup

Contenitore del tooltip
headline

Titolo
content

Corpo
action

Pulsanti di azione
### CSS Custom Property
Nome Descrizione
--shape-corner-plain

Quando variant="plain", dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--shape-corner-rich

Quando variant="rich", dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--z-index

Valore CSS z-index del componente
# Componente Top App Bar La Top App Bar offre contesto e azioni per la schermata corrente, supportando branding, navigazione, ricerca e altre azioni. ## Utilizzo {#usage} Importa i componenti: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` Importa i tipi TypeScript: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` Esempio: (Nota: lo stile `position: relative` nell'esempio è solo a scopo dimostrativo. Rimuovilo nell'uso effettivo.) ```html Titolo
``` **Note:** Per impostazione predefinita, la Top App Bar usa `position: fixed` e aggiunge automaticamente `padding-top` al `body` per evitare che il contenuto della pagina venga oscurato. Tuttavia, usa `position: absolute` nei seguenti casi: 1. Quando è specificato l'attributo `scroll-target`. In questo caso, `padding-top` viene aggiunto all'elemento specificato da `scroll-target`. 2. Quando si trova all'interno del componente [``](/it/docs/2/components/layout). In questo caso, `padding-top` non viene aggiunto. ## Esempi {#examples} ### In un contenitore {#example-scroll-target} Per impostazione predefinita, la barra dell'applicazione superiore è posizionata rispetto alla finestra corrente e appare nella parte superiore della pagina. Per posizionare la Top App Bar all'interno di un contenitore, specifica l'attributo `scroll-target` sul componente ``. Imposta il suo valore sul selettore CSS o sull'elemento DOM del contenitore con contenuto scorrevole. In questo caso, la Top App Bar sarà posizionata rispetto all'elemento padre. Assicurati di aggiungere gli stili `position: relative; overflow: hidden` all'elemento padre. ```html
Titolo
``` ### Variante {#example-variant} L'attributo `variant` sul componente `` imposta l'aspetto della Top App Bar. ```html
Titolo
allineato al centro piccolo medio grande
``` ### Comportamento allo scorrimento {#example-scroll-behavior} L'attributo `scroll-behavior` sul componente `` definisce il comportamento della Top App Bar quando la pagina scorre. Puoi usare più comportamenti di scorrimento insieme, separandoli con spazi. I comportamenti di scorrimento includono: - `hide`: Nasconde la Top App Bar quando si scorre verso il basso e la mostra quando si scorre verso l'alto. - `shrink`: Efficace quando `variant` è `medium` o `large`. Espande la Top App Bar quando si scorre verso il basso e la restringe quando si scorre verso l'alto. - `elevate`: Aggiunge un'ombra alla Top App Bar quando si scorre verso il basso e rimuove l'ombra quando si torna in cima. L'attributo `scroll-threshold` imposta quanti pixel devono essere scorsi prima che la Top App Bar inizi a reagire. Non impostare `scroll-threshold` quando si usa `elevate`, in modo che risponda immediatamente. **Esempio: Nascondi durante lo scorrimento** ```html
Titolo
``` **Esempio: Aggiungi Ombra allo Scorrimento** ```html
Titolo
``` **Esempio: Restringi allo Scorrimento** ```html
Titolo
``` **Esempio: Restringi e Aggiungi Ombra allo Scorrimento** ```html
Titolo
``` ### Testo nella barra espansa {#label-large} Per una Top App Bar con `variant` impostato su `medium` o `large` e `scroll-behavior` impostato su `shrink`, puoi usare lo slot `label-large` all'interno del componente `` per specificare il testo mostrato quando la barra è espansa. ```html
Questo è il titolo nello stato ridotto Questo è il titolo nello stato espanso
``` ## mdui-top-app-bar-title API ### Slots
Nome Descrizione
(predefinito)

Testo del titolo della barra dell'applicazione superiore
label-large

Testo del titolo nello stato espanso
### CSS Parts
Nome Descrizione
label

Testo del titolo
label-large

Testo del titolo nello stato espanso
## mdui-top-app-bar API ### Proprietà
Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito Descrizione
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

Variante della barra dell'applicazione superiore. Il valore predefinito è small. I valori opzionali includono:

  • center-aligned: barra dell'applicazione superiore con titolo centrato
  • small: barra dell'applicazione superiore piccola
  • medium: barra dell'applicazione superiore media
  • large: barra dell'applicazione superiore grande
hide hide true boolean false

Se nascondere
shrink shrink true boolean false

Se ridurre allo stile variant="small", ha effetto solo quando variant="medium" o variant="large".
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Comportamento allo scorrimento. È possibile utilizzare più valori contemporaneamente, separati da spazi. I valori opzionali includono:

  • hide: si nasconde durante lo scorrimento
  • shrink: utilizzabile nelle barre dell'applicazione medie e grandi, durante lo scorrimento si restringe allo stile della barra dell'applicazione superiore piccola
  • elevate: aggiunge ombra durante lo scorrimento
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Elemento da monitorare per gli eventi di scorrimento. Il valore può essere un selettore CSS, un elemento DOM o un oggetto JQ. Per impostazione predefinita, ascolta l'evento di scorrimento di window.
scroll-threshold scrollThreshold true number

Distanza di scorrimento necessaria per attivare il comportamento, in px.
order order true number

Ordine di layout di questo componente all'interno di <mdui-layout>, dal più piccolo al più grande. Il valore predefinito è 0.
### Eventi
Nome Descrizione
show

L'evento viene attivato all'inizio dell'apertura. Puoi impedirne l'apertura chiamando event.preventDefault().
shown

L'evento viene attivato al termine dell'animazione di apertura.
hide

L'evento viene attivato all'inizio della chiusura. È possibile impedire la chiusura chiamando event.preventDefault().
hidden

L'evento viene attivato al termine dell'animazione di chiusura.
### Slots
Nome Descrizione
(predefinito)

Elementi all'interno della barra dell'applicazione superiore
### CSS Custom Property
Nome Descrizione
--shape-corner

Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
--z-index

Valore CSS z-index del componente
# Libreria JavaScript mdui include una libreria di utilità JavaScript leggera che fornisce un'API simile a jQuery con chiamate concatenabili con una frazione delle dimensioni di jQuery. Importa la funzione: ```js import { $ } from 'mdui/jq.js'; ``` ## Core {#api-core} ### `$()` {#dollar} Questa funzione ha diversi utilizzi: Passa un selettore CSS per ottenere un oggetto JQ contenente gli elementi corrispondenti. ```js $('.box'); ``` Passa un elemento DOM, un array, una NodeList o un oggetto JQ per ottenere un oggetto JQ contenente gli elementi specificati. ```js $(document); ``` Passa una stringa HTML per creare un oggetto JQ contenente gli elementi DOM creati dall'HTML. ```js $(`
`); ``` Passa una funzione da chiamare quando il DOM è completamente caricato. ```js $(function () { console.log('DOM Caricato'); }); ``` ## Estensione {#api-extend} ### `$.extend()` {#d-extend} Passare un singolo oggetto unisce le sue Proprietà nell'oggetto `$`, aggiungendo effettivamente nuove funzionalità allo spazio dei nomi `$`. ```js $.extend({ customFunc: function () {}, }); // Ora puoi chiamare il metodo personalizzato in questo modo $.customFunc(); ``` Passare due o più oggetti unisce tutte le proprietà di ciascun oggetto nel primo. L'oggetto unito viene restituito. Nota che le proprietà con un valore `undefined` non vengono unite. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // Sia il primo oggetto che il valore restituito sono ora { key1: val1, key2: val2, key3: val3 } ``` ### `$.fn.extend()` {#fn-extend} Questo metodo estende la catena di prototipi di `$`, aggiungendo nuovi metodi. ```js $.fn.extend({ customFunc: function () {}, }); // Ora puoi usare il metodo esteso in questo modo $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Questo metodo serializza un array o un oggetto in una stringa che può essere utilizzata come stringa di query URL. ```js $.param({ width: 1680, height: 1050 }); // Restituisce: "width=1680&height=1050" $.param({ foo: { one: 1, two: 2 } }); // Restituisce: "foo[one]=1&foo[two]=2" $.param({ ids: [1, 2, 3] }); // Restituisce: "ids[]=1&ids[]=2&ids[]=3" ``` Se il parametro passato è un array, dovrebbe essere nel formato restituito dal metodo [`.serializeArray()`](#serializeArray). ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // Restituisce: "name=mdui&password=123456" ``` ## Operazioni su Array e Oggetti {#api-array} ### `$.each()` {#d-each} Questo metodo itera su un array o un oggetto. Restituisce il primo parametro, che è l'array o l'oggetto da attraversare. Il primo parametro della funzione di callback è l'indice per gli array o la chiave per gli oggetti. Il secondo parametro è il valore nella posizione corrispondente. La parola chiave `this` nella funzione di callback si riferisce al valore corrente. Se la funzione di callback restituisce `false`, l'iterazione si interrompe. ```js // Itera su un array $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Risultato: // 0:a // 1:b // 2:c ``` ```js // Itera su un oggetto $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Risultato: // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} Questo metodo aggiunge gli elementi del secondo array al primo array e restituisce l'array unito. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} Questo metodo rimuove gli elementi duplicati da un array. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} Questo metodo itera su un array o un oggetto, applicando una funzione a ciascun elemento, e restituisce un nuovo array composto dai valori restituiti dalla funzione. Il primo parametro della funzione di callback è il valore dell'elemento corrente, e il secondo parametro è l'indice per gli array o la chiave per gli oggetti. La funzione di callback può restituire qualsiasi valore. Se restituisce un array, l'array verrà appiattito. Se restituisce `null` o `undefined`, il valore verrà ignorato. La parola chiave `this` all'interno della funzione si riferisce all'oggetto window globale. ```js // Itera su un array const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Quando la funzione di callback restituisce un array, questo verrà appiattito const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Itera su un oggetto const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Questo metodo controlla se un nodo padre contiene un nodo figlio, restituendo un valore booleano. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Controllo del Tipo di Dati {#api-type} ### `.is()` {#is} Questo metodo controlla se almeno un elemento nella collezione corrisponde al parametro specificato. Restituisce un valore booleano. Il parametro può essere un selettore CSS, un elemento DOM, un array di elementi DOM, un oggetto JQ o una funzione. Quando il parametro è una funzione, prende l'indice e l'elemento corrente come argomenti. `this` si riferisce all'elemento corrente. La funzione dovrebbe restituire `true` se l'elemento corrisponde, altrimenti `false`. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Utilizzo di una funzione per il confronto $(document).is(function (index, element) { return element === document; }); // true ``` ## Accesso agli Oggetti {#api-object} ### `.length` {#length} Questa Proprietà restituisce il numero di elementi nella collezione corrente. ```js $('body').length; // 1 ``` ### `.each()` {#each} Questo metodo itera sulla collezione corrente, eseguendo una funzione per ogni elemento. L'iterazione si interrompe se la funzione restituisce `false`. Il primo parametro della funzione è l'indice dell'elemento, il secondo è l'elemento corrente. `this` si riferisce all'elemento corrente. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Questo metodo itera sulla collezione corrente, eseguendo una funzione per ogni elemento. Restituisce una nuova collezione composta dai valori restituiti dalla funzione. La funzione può restituire un singolo valore o un array. Se restituisce un array, gli elementi vengono aggiunti alla nuova collezione. I valori `null` o `undefined` vengono ignorati. Il primo parametro della funzione è l'indice dell'elemento, il secondo è l'elemento corrente. `this` si riferisce all'elemento corrente. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result è un oggetto JQ di valori dagli elementi corrispondenti ``` ### `.eq()` {#eq} Questo metodo restituisce una collezione contenente solo l'elemento all'indice specificato. ```js $('div').eq(0); // Restituisce una collezione con il primo div $('div').eq(-1); // Restituisce una collezione con l'ultimo div $('div').eq(-2); // Restituisce una collezione con il penultimo div ``` ### `.first()` {#first} Questo metodo restituisce una collezione contenente solo il primo elemento della collezione corrente. ```js $('div').first(); // Restituisce una collezione con il primo div ``` ### `.last()` {#last} Questo metodo restituisce una collezione contenente solo l'ultimo elemento della collezione corrente. ```js $('div').last(); // Restituisce una collezione con l'ultimo div ``` ### `.get()` {#get} Questo metodo restituisce l'elemento all'indice specificato. Se non viene passato alcun parametro, restituisce un array di tutti gli elementi nella collezione. ```js $('div').get(); // Restituisce un array di tutti gli elementi div $('div').get(0); // Restituisce il primo elemento div $('div').get(-1); // Restituisce l'ultimo elemento div ``` ### `.index()` {#index} Questo metodo restituisce l'indice del primo elemento nella collezione corrente rispetto ai suoi elementi fratelli se non viene passato alcun parametro. Se viene passato un selettore CSS come parametro, restituisce l'indice rispetto agli elementi corrispondenti al selettore. Se viene passato un elemento DOM o un oggetto JQ come parametro, restituisce l'indice di quell'elemento all'interno della collezione corrente. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Questo metodo restituisce un sottoinsieme della collezione corrente. Il primo parametro è la posizione di partenza, e il secondo è la posizione finale (esclusa). Se il secondo parametro viene omesso, il metodo include tutti gli elementi dalla posizione di partenza fino alla fine della collezione. ```js $('div').slice(3); // Restituisce tutti gli elementi dalla terza posizione in poi $('div').slice(3, 5); // Restituisce gli elementi dalla terza alla quinta posizione (esclusa la quinta) ``` ### `.filter()` {#filter} Questo metodo filtra la collezione corrente in base ai criteri specificati. Il parametro può essere un selettore CSS, un elemento DOM, un array di elementi DOM o una funzione di callback che restituisce un booleano. Quando il parametro è un callback, prende l'indice dell'elemento e l'elemento corrente come argomenti. `this` si riferisce all'elemento corrente. Se la funzione restituisce `true`, l'elemento è incluso nel risultato; se `false`, viene escluso. ```js // Filtra tutti gli elementi div che contengono la classe .box $('div').filter('.box'); // Filtra tutte le opzioni selezionate $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Questo metodo esclude dalla collezione corrente gli elementi che corrispondono ai criteri specificati. Il parametro può essere un selettore CSS, un elemento DOM, un array di elementi DOM, un oggetto JQ o una funzione di callback che restituisce un booleano. Quando il parametro è un callback, il primo parametro della funzione è l'indice dell'elemento, il secondo è l'elemento corrente, e `this` si riferisce all'elemento corrente. Se la funzione restituisce `true`, l'elemento viene escluso; se `false`, viene incluso. ```js // Esclude tutti gli elementi div che contengono la classe .box $('div').not('.box'); // Esclude tutte le opzioni non selezionate $('#select option').not(function (index, element) { return element.selected; }); ``` ## Classi CSS {#api-css} ### `.hasClass()` {#hasClass} Questo metodo controlla se il primo elemento nella collezione ha la classe CSS specificata. ```js // Restituisce true se il primo div ha la classe .item $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} Questo metodo aggiunge classi CSS a ciascun elemento nella collezione. Puoi aggiungere più nomi di classe separandoli con spazi. Il parametro può essere una stringa o una funzione di callback che restituisce un nome di classe CSS. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il nome della classe CSS esistente, e `this` si riferisce all'elemento corrente. ```js // Aggiunge .item a tutti gli elementi div $('div').addClass('item'); // Aggiunge .item1 e .item2 a tutti gli elementi div $('div').addClass('item1 item2'); // Aggiunge le classi CSS restituite dalla funzione di callback a tutti gli elementi div $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Questo metodo rimuove le classi CSS specificate da ciascun elemento nella collezione. Puoi rimuovere più nomi di classe separandoli con spazi. Il parametro può essere una stringa o una funzione di callback che restituisce un nome di classe CSS. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il nome della classe CSS esistente, e `this` si riferisce all'elemento corrente. Se non viene passato alcun parametro, rimuoverà l'attributo `class` dagli elementi. ```js // Rimuove .item da tutti gli elementi div $('div').removeClass('item'); // Rimuove .item1 e .item2 da tutti gli elementi div $('div').removeClass('item1 item2'); // Rimuove le classi CSS restituite dalla funzione di callback da tutti gli elementi div $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Questo metodo attiva/disattiva le classi CSS per ciascun elemento nella collezione. Se una classe esiste, viene rimossa; se non esiste, viene aggiunta. Puoi attivare/disattivare più nomi di classe separandoli con spazi. Il parametro può essere una stringa o una funzione di callback che restituisce un nome di classe CSS. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il nome della classe CSS esistente, e `this` si riferisce all'elemento corrente. ```js // Attiva/disattiva .item su tutti gli elementi div $('div').toggleClass('item'); // Attiva/disattiva .item1 e .item2 su tutti gli elementi div $('div').toggleClass('item1 item2'); // Attiva/disattiva le classi CSS restituite dalla funzione di callback su tutti gli elementi div $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Proprietà degli Elementi {#api-attr} ### `.prop()` {#prop} Questo metodo recupera il valore della proprietà JavaScript del primo elemento nella collezione. ```js // Ottieni il valore della proprietà 'checked' del primo elemento input $('input').prop('checked'); ``` Questo metodo può anche impostare i valori delle proprietà JavaScript per tutti gli elementi nella collezione. Il valore della proprietà può essere di qualsiasi tipo o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il valore della proprietà esistente, e `this` si riferisce all'elemento corrente. Se il valore della proprietà o il valore restituito dalla funzione di callback è `undefined`, la proprietà originale rimane invariata. ```js // Imposta la proprietà 'checked' su true per tutti gli elementi input $('input').prop('checked', true); // Attiva/disattiva la proprietà 'checked' per tutti gli elementi input $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` Puoi anche impostare più Proprietà contemporaneamente passando un oggetto. ```js // Imposta più valori di Proprietà per gli elementi $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Questo metodo rimuove la proprietà JavaScript specificata da tutti gli elementi nella collezione. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Questo metodo recupera il valore dell'Attributo HTML del primo elemento nella collezione. ```js // Ottieni il valore dell'Attributo 'username' del primo elemento div $('div').attr('username'); ``` Questo metodo può anche impostare i valori degli attributi HTML per tutti gli elementi nella collezione. Il valore dell'Attributo può essere una stringa, un numero o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il valore dell'Attributo esistente, e `this` si riferisce all'elemento corrente. Se il valore dell'Attributo o il valore restituito dalla funzione di callback è `null`, l'Attributo specificato verrà rimosso. Se è `undefined`, l'Attributo originale rimane invariato. ```js // Imposta l'attributo 'username' su 'mdui' per tutti gli elementi div $('div').attr('username', 'mdui'); // Imposta l'attributo 'username' su 'mdui' per tutti gli elementi div $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` Puoi anche impostare più attributi contemporaneamente passando un oggetto. ```js // Imposta più valori di Attributo per tutti gli elementi div $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Questo metodo rimuove gli attributi specificati da tutti gli elementi nella collezione. Più nomi di Attributo possono essere separati da spazi. ```js // Rimuove l'Attributo 'username' da tutti gli elementi div $('div').removeAttr('username'); // Rimuove gli attributi 'username' e 'lastname' da tutti gli elementi div $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Questo metodo recupera il valore del primo elemento nella collezione. Per un elemento ``, ``, `` o `