FabBotão de ação flutuante

O botão de ação flutuante (FAB) destaca a ação principal na página, colocando-a em um local de fácil acesso.

Como usar

Importe o componente quando necessário:

import 'mdui/components/fab.js';

Importe o tipo TypeScript do componente quando necessário:

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

Exemplo de uso:

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

Exemplos

Ícone

Use o atributo icon para definir o nome do ícone do Material Icons. Você também pode adicionar o elemento do ícone pelo slot icon.

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

Fonte

Estado estendido

Use o atributo extended para colocar o FAB no estado estendido. Assim, o texto no slot padrão será exibido.

Compose

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

Fonte

Forma

Use o atributo variant para definir a forma do 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>

Fonte

Tamanho

Use o atributo size para definir o tamanho do 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>

Fonte

Link

Use o atributo href para transformar o FAB em um link. Assim, você também pode usar os atributos relacionados a links: download, target, rel.

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

Fonte

Estado desabilitado e carregando

Use o atributo disabled para desabilitar o FAB; adicione o atributo loading para adicionar um estado de carregamento ao FAB.

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

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'primary' \| 'surface' \| 'secondary' \| 'tertiary'`	`'primary'`
Forma do FAB. As variantes deste componente diferem apenas na cor. Os valores possíveis são: `primary`: Usa a cor de fundo do contêiner primário. `surface`: Usa a cor de fundo alta do contêiner de superfície. `secondary`: Usa a cor de fundo do contêiner secundário. `tertiary`: Usa a cor de fundo do contêiner terciário.
`size`	`size`	`'normal' \| 'small' \| 'large'`	`'normal'`
Tamanho do FAB. Os valores possíveis são: `normal`: Tamanho normal. `small`: Tamanho pequeno. `large`: Tamanho grande.
`icon`	`icon`	`string`	-
Nome do ícone Material Icons. Também pode ser definido via `slot="icon"`.
`extended`	`extended`	`boolean`	`false`
Define se o componente está no estado expandido.
`href`	`href`	`string`	-
A URL de destino do link. Ao definir esta propriedade, o componente será renderizado internamente como um elemento `<a>` e poderá usar atributos de link.
`download`	`download`	`string`	-
O nome do arquivo para download. Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Define como o link será aberto. Os valores possíveis são: `_blank`: Abre o link em uma nova janela `_parent`: Abre o link no frame pai `_self`: Padrão. Abre o link no frame atual `_top`: Abre o link na janela inteira Nota: Esta propriedade só é válida quando o atributo `href` está definido.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
A relação entre o documento atual e o documento vinculado. Os valores possíveis são: `alternate`: Versão alternativa do documento atual `author`: Autor do documento atual ou artigo `bookmark`: Link permanente para a seção ancestral mais próxima `external`: O documento referenciado não está no mesmo site do documento atual `help`: Link para documentação de ajuda relacionada `license`: O conteúdo principal do documento atual está coberto pela licença de direitos autorais do arquivo referenciado `me`: O documento atual representa o proprietário do conteúdo vinculado `next`: O documento atual faz parte de uma série, e o documento referenciado é o próximo da série `nofollow`: O autor ou editor do documento atual não endossa o arquivo referenciado `noreferrer`: Não inclui o cabeçalho `Referer`. Tem efeito semelhante ao `noopener` `opener`: Se o hiperlink criar um contexto de navegação de nível superior (ou seja, o valor do atributo `target` for `_blank`), cria um contexto de navegação auxiliar `prev`: O documento atual faz parte de uma série, e o documento referenciado é o anterior da série `search`: Fornece um link para um recurso que pode ser usado para pesquisar o arquivo atual e suas páginas relacionadas `tag`: Fornece uma tag (identificada pelo endereço fornecido) aplicável ao documento atual Nota: Disponível apenas quando o atributo `href` é especificado.
`autofocus`	`autofocus`	`boolean`	`false`
Define se o elemento deve receber foco automaticamente após o carregamento da página.
`tabindex`	`tabIndex`	`number`	-
A ordem do elemento ao navegar com a tecla Tab.
`disabled`	`disabled`	`boolean`	`false`
Define se o componente está desabilitado.
`loading`	`loading`	`boolean`	`false`
Define se o componente está em estado de carregamento.
`name`	`name`	`string`	`''`
O nome do botão, que será enviado com os dados do formulário. Nota: Esta propriedade só é válida quando o atributo `href` não está definido.
`value`	`value`	`string`	`''`
O valor inicial do botão, que será enviado com os dados do formulário. Nota: Esta propriedade só é válida quando o atributo `href` não está definido.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
O tipo do botão. O tipo padrão é `button`. Os tipos possíveis são: `submit`: Clicar no botão envia os dados do formulário para o servidor `reset`: Clicar no botão redefine todos os campos do formulário para seus valores iniciais `button`: Este tipo de botão não tem comportamento padrão Nota: Esta propriedade só é válida quando o atributo `href` não é especificado.
`form`	`form`	`string`	-
O elemento `<form>` associado. O valor deste atributo deve ser o `id` de um elemento `<form>` na mesma página. Se este atributo não for especificado, o elemento precisa ser um elemento filho de um `<form>`. Com este atributo, você pode colocar o elemento em qualquer lugar da página, não apenas como filho do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é especificado.
`formaction`	`formAction`	`string`	-
Especifica a URL para envio do formulário. Se este atributo for especificado, ele substituirá o atributo `action` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é especificado e `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Especifica o tipo de conteúdo ao enviar o formulário para o servidor. Os valores possíveis são: `application/x-www-form-urlencoded`: Valor padrão quando o atributo não é especificado `multipart/form-data`: Usado quando o formulário contém um elemento `<input type="file">` `text/plain`: Novo no HTML5, usado para depuração Se este atributo for especificado, ele substituirá o atributo `enctype` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é especificado e `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Especifica o método HTTP a ser usado ao enviar o formulário. Os valores possíveis são: `post`: Os dados do formulário são incluídos no corpo do formulário e enviados ao servidor `get`: Os dados do formulário são anexados à URI do formulário com `?` como separador, e a URI resultante é enviada ao servidor. Use este método quando o formulário não tiver efeitos colaterais e contiver apenas caracteres ASCII Se este atributo for definido, ele substituirá o atributo `method` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é definido e `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Se este atributo for definido, a validação do formulário não será executada ao enviar. Se este atributo for definido, ele substituirá o atributo `novalidate` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é definido e `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Onde exibir a resposta recebida após o envio do formulário. Os valores possíveis são: `_self`: Opção padrão, abre no frame atual `_blank`: Abre em uma nova janela `_parent`: Abre no frame pai `_top`: Abre na janela inteira Se este atributo for definido, ele substituirá o atributo `target` do elemento `<form>`. Nota: Esta propriedade só é válida quando o atributo `href` não é definido e `type="submit"`.
	`validity`	`ValidityState`	-
Objeto que representa o estado de validação do formulário. Consulte `ValidityState` para mais detalhes.
	`validationMessage`	`string`	-
Se a validação do formulário falhar, esta propriedade conterá uma mensagem de erro. Se a validação for bem-sucedida, esta propriedade será uma string vazia.

Métodos

Nome	Parâmetros	Retorno
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Define o foco no elemento atual. Você pode passar um objeto como argumento, com as seguintes propriedades: `preventScroll`: Por padrão, após o elemento receber o foco, a página é rolada para que ele fique visível. Se você não quiser que a página role, defina esta propriedade como `true`.
`blur`		`void`
Remove o foco do elemento atual.
`checkValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`.
`reportValidity`		`boolean`
Verifica se o campo do formulário passou na validação. Se não passou, retorna `false` e dispara o evento `invalid`; se passou, retorna `true`. Se a validação falhar, também exibe uma mensagem de erro no componente.
`setCustomValidity`	`message: string`	`void`
Define um texto de erro personalizado. Enquanto este texto não estiver vazio, indica que o campo não passou na validação.

Eventos

Nome
`focus`
Disparado ao receber foco.
`blur`
Disparado ao perder o foco.
`invalid`
Disparado quando a validação do campo do formulário falha.

Slots

Nome
(padrão)
Texto.
`icon`
Ícone.

CSS Parts

Nome
`button`
Elemento `<button>` ou `<a>` interno.
`label`
Texto à direita.
`icon`
Ícone à esquerda.
`loading`
Elemento `<mdui-circular-progress>` no estado de carregamento.

Propriedades CSS personalizadas

Nome
`--shape-corner-small`
Tamanho da borda arredondada do componente quando `size="small"`. Pode ser um valor em pixels, mas é recomendado usar os design tokens.
`--shape-corner-normal`
Tamanho da borda arredondada do componente quando `size="normal"`. Pode ser um valor em pixels, mas é recomendado usar os design tokens.
`--shape-corner-large`
Tamanho da borda arredondada do componente quando `size="large"`. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

Dropdown Dropdown

Próximo capítulo

Icon Ícone