Fab

Il Floating Action Button (FAB) è un pulsante di azione principale per azioni chiave, e offre un accesso rapido.

Utilizzo

Importa il componente:

import 'mdui/components/fab.js';

Importa il tipo TypeScript:

import type { Fab } from 'mdui/components/fab.js';

Esempio:

<mdui-fab icon="edit"></mdui-fab>

Esempi

Icona

Usa l'attributo icon per impostare il nome dell'Icona Material, oppure usa lo slot icon.

<mdui-fab icon="edit"></mdui-fab>
<mdui-fab>
  <mdui-icon slot="icon" name="edit"></mdui-icon>
</mdui-fab>

Sorgente

Stato Esteso

Usa extended per mostrare il testo dello slot predefinito nello stato esteso.

Componi

<mdui-fab extended icon="edit">Componi</mdui-fab>

Sorgente

Variante

Usa l'attributo variant per impostare la variante del FAB.

<mdui-fab variant="primary" icon="edit"></mdui-fab>
<mdui-fab variant="surface" icon="edit"></mdui-fab>
<mdui-fab variant="secondary" icon="edit"></mdui-fab>
<mdui-fab variant="tertiary" icon="edit"></mdui-fab>

Sorgente

Dimensione

Usa l'attributo size per impostare la dimensione del FAB.

<mdui-fab size="small" icon="edit"></mdui-fab>
<mdui-fab size="normal" icon="edit"></mdui-fab>
<mdui-fab size="large" icon="edit"></mdui-fab>

Sorgente

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.

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

Sorgente

Stato Disabilitato e in Caricamento

Usa disabled per disabilitare il FAB. Usa loading per mostrare uno stato di caricamento.

<mdui-fab disabled icon="edit"></mdui-fab>
<mdui-fab loading icon="edit"></mdui-fab>
<mdui-fab loading disabled icon="edit"></mdui-fab>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`variant`	`variant`	`'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`	`'normal' \| 'small' \| 'large'`	`'normal'`
Dimensione del FAB. I valori opzionali includono: `normal`: FAB di dimensioni normali `small`: FAB piccolo `large`: FAB grande
`icon`	`icon`	`string`	-
Nome dell'icona Material. Può essere specificato anche tramite `slot="icon"`.
`extended`	`extended`	`boolean`	`false`
Se il componente è espanso
`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
`icon`
Icona

CSS Parts

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

Capitolo precedente

Dropdown

Capitolo successivo

Icon