ButtonIcon

I pulsanti icona vengono utilizzati per eseguire piccole azioni con un solo clic.

Utilizzo

Importa il componente:

import 'mdui/components/button-icon.js';

Importa il tipo TypeScript:

import type { ButtonIcon } from 'mdui/components/button-icon.js';

Esempio:

<mdui-button-icon icon="search"></mdui-button-icon>

Esempi

Icona

Usa l'attributo icon per specificare il nome di un'icona Material. Oppure, puoi inserire direttamente l'icona nello slot predefinito.

<mdui-button-icon icon="search"></mdui-button-icon>
<mdui-button-icon>
  <mdui-icon name="search"></mdui-icon>
</mdui-button-icon>

Sorgente

Variante

L'attributo variant determina la variante del pulsante icona.

<mdui-button-icon variant="standard" icon="search"></mdui-button-icon>
<mdui-button-icon variant="filled" icon="search"></mdui-button-icon>
<mdui-button-icon variant="tonal" icon="search"></mdui-button-icon>
<mdui-button-icon variant="outlined" icon="search"></mdui-button-icon>

Sorgente

Selezionabile

Aggiungi l'attributo selectable per rendere selezionabile il pulsante icona.

<mdui-button-icon selectable icon="favorite_border"></mdui-button-icon>

Sorgente

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.

<mdui-button-icon selectable icon="favorite_border" selected-icon="favorite"></mdui-button-icon>
<mdui-button-icon selectable icon="favorite_border">
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-button-icon>

Sorgente

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.

<mdui-button-icon selectable selected icon="favorite_border" selected-icon="favorite"></mdui-button-icon>

Sorgente

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.

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

Sorgente

Stato Disabilitato e in Caricamento

Usa l'attributo disabled per disabilitare il pulsante icona. L'attributo loading mostra lo stato di caricamento.

<mdui-button-icon disabled icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading disabled icon="search" variant="tonal"></mdui-button-icon>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`variant`	`variant`	`'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`	`string`	-
Nome dell'icona Material. Può essere specificato anche tramite lo slot predefinito.
`selected-icon`	`selectedIcon`	`string`	-
Nome dell'icona Material per lo stato selezionato. Può essere specificato anche tramite `slot="selected-icon"`.
`selectable`	`selectable`	`boolean`	`false`
Se selezionabile
`selected`	`selected`	`boolean`	`false`
Se il componente è selezionato
`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
`change`
Attivato quando lo stato di selezione cambia
`invalid`
Attivato quando la convalida del campo del modulo non viene superata

Slots

Nome
(predefinito)
Componente icona
`selected-icon`
Elemento icona visualizzato nello stato selezionato

CSS Parts

Nome
`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
`--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

Button

Capitolo successivo

Card