Button

I pulsanti sono componenti interattivi che consentono agli utenti di eseguire azioni come inviare email, condividere documenti o esprimere preferenze.

Utilizzo

Importa il componente:

import 'mdui/components/button.js';

Importa il tipo TypeScript:

import type { Button } from 'mdui/components/button.js';

Esempio:

Pulsante

<mdui-button>Pulsante</mdui-button>

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.

Icona

Slot

<mdui-button icon="search" end-icon="arrow_forward">Icona</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>

Sorgente

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.

Link

<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>

Sorgente

Stato Disabilitato e in Caricamento

Usa l'attributo disabled per disabilitare il pulsante. L'attributo loading visualizza uno stato di caricamento.

Disabilitato

Caricamento

Caricamento e Disabilitato

<mdui-button disabled>Disabilitato</mdui-button>
<mdui-button loading>Caricamento</mdui-button>
<mdui-button loading disabled>Caricamento e Disabilitato</mdui-button>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`variant`	`variant`	`'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`	`boolean`	`false`
Se deve occupare l'intera larghezza dell'elemento padre
`icon`	`icon`	`string`	-
Nome dell'icona Material a sinistra. Può essere specificato anche tramite `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome dell'icona Material a destra. Può essere specificato anche tramite `slot="end-icon"`.
`href`	`href`	`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`	`string`	-
Destinazione del download del collegamento. Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`target`	`target`	`'_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`	`'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`	`boolean`	`false`
Se attivare automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Indice di tabulazione dell'elemento
`disabled`	`disabled`	`boolean`	`false`
Se il componente è disabilitato
`loading`	`loading`	`boolean`	`false`
Se il componente è in stato di caricamento
`name`	`name`	`string`	`''`
Nome del pulsante, verrà inviato insieme ai dati del modulo. Nota: questa proprietà è valida solo se l'attributo `href` non è impostato.
`value`	`value`	`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`	`'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`	`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`	`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`	`'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`	`'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`	`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`	`'_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"`.
	`validity`	`ValidityState`	-
Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a `ValidityState`
	`validationMessage`	`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	Parametri	Restituisce
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`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
`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
(predefinito)
Testo del pulsante
`icon`
Elemento a sinistra del pulsante
`end-icon`
Elemento a destra del pulsante

CSS Parts

Nome
`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
`--shape-corner`
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.

Capitolo precedente

BottomAppBar

Capitolo successivo

ButtonIcon