ChipChip

O Chip ajuda os usuários a inserir informações, fazer seleções, filtrar conteúdo ou realizar ações.

Como usar

Importe o componente quando necessário:

import 'mdui/components/chip.js';

Importe o tipo TypeScript do componente quando necessário:

import type { Chip } from 'mdui/components/chip.js';

Exemplo de uso:

Chip

<mdui-chip>Chip</mdui-chip>

Adicione os atributos icon e end-icon para adicionar ícones do Material Icons à esquerda e à direita do chip, respectivamente. Você também pode adicionar elementos pelos slots icon e end-icon.

Icon

End Icon

Slot

<mdui-chip icon="search">Icon</mdui-chip>
<mdui-chip end-icon="arrow_forward">End Icon</mdui-chip>
<mdui-chip>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-chip>

Fonte

Link

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

Link

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

Fonte

Estado desabilitado e carregando

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

Disabled

Loading & Disabled

<mdui-chip disabled>Disabled</mdui-chip>
<mdui-chip loading>Loading</mdui-chip>
<mdui-chip loading disabled>Loading & Disabled</mdui-chip>

Fonte

Selecionável

Use o atributo selectable para tornar o chip selecionável.

Chip

<mdui-chip selectable>Chip</mdui-chip>

Fonte

Use o atributo selected-icon para definir o nome do ícone do Material Icons no estado selecionado. Você também pode adicionar o elemento de ícone do estado selecionado pelo slot selected-icon.

Chip

<mdui-chip selectable selected-icon="favorite">Chip</mdui-chip>
<mdui-chip selectable>
  Chip
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-chip>

Fonte

Quando o chip é selecionado, o atributo selected torna-se true. Você também pode adicionar o atributo selected para que o chip inicie no estado selecionado.

Chip

<mdui-chip selectable selected>Chip</mdui-chip>

Fonte

Deletável

Use o atributo deletable para que um ícone de deletar apareça no lado direito do chip. Clicar neste ícone dispara o evento delete. Use o atributo delete-icon para definir o nome do ícone do Material Icons para deletar, ou o slot delete-icon para definir o elemento do ícone.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
Forma do chip. Os valores possíveis são: `assist`: Usado para exibir ações auxiliares relacionadas ao contexto atual, como compartilhar ou favoritar em uma página de pedidos. `filter`: Usado para filtrar conteúdo, como filtrar resultados de pesquisa em uma página de resultados. `input`: Usado para representar fragmentos de informação inseridos pelo usuário, como contatos no campo "Para" do Gmail. `suggestion`: Usado para fornecer recomendações geradas dinamicamente para simplificar a ação do usuário, como prever mensagens que o usuário pode querer enviar em um aplicativo de chat.
`elevated`	`elevated`	`boolean`	`false`
Define se o componente deve exibir sombra.
`selectable`	`selectable`	`boolean`	`false`
Define se o componente é selecionável.
`selected`	`selected`	`boolean`	`false`
Define se o componente está selecionado.
`deletable`	`deletable`	`boolean`	`false`
Define se o componente é removível. Quando `true`, um ícone de remoção é exibido à direita do chip.
`icon`	`icon`	`string`	-
Nome do ícone Material Icons à esquerda. Também pode ser definido via `slot="icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Nome do ícone Material Icons à esquerda no estado selecionado. Também pode ser definido via `slot="selected-icon"`.
`end-icon`	`endIcon`	`string`	-
Nome do ícone Material Icons à direita. Também pode ser definido via `slot="end-icon"`.
`delete-icon`	`deleteIcon`	`string`	-
Nome do ícone Material Icons para o ícone de remoção à direita quando removível. Também pode ser definido via `slot="delete-icon"`.
`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.
`change`
Disparado quando o estado de seleção muda.
`delete`
Disparado ao clicar no ícone de remoção.

Slots

Nome
(padrão)
Texto do chip.
`icon`
Elemento à esquerda.
`end-icon`
Elemento à direita.
`selected-icon`
Elemento à esquerda no estado selecionado.
`delete-icon`
Elemento de remoção à direita quando removível.

CSS Parts

Nome
`button`
Elemento `<button>` ou `<a>` interno.
`label`
Texto do chip.
`icon`
Ícone à esquerda.
`end-icon`
Ícone à direita.
`selected-icon`
Ícone à esquerda no estado selecionado.
`delete-icon`
Ícone de remoção à direita quando removível.
`loading`
Elemento `<mdui-circular-progress>` no estado de carregamento.

Propriedades CSS personalizadas

Nome
`--shape-corner`
Tamanho da borda arredondada do componente. Pode ser um valor em pixels, mas é recomendado usar os design tokens.

Capítulo anterior

Checkbox Checkbox

Próximo capítulo

CircularProgress Indicador de progresso circular

ChipChip

Como usar

Exemplos

Forma

Sombra

Ícone

Link

Estado desabilitado e carregando

Selecionável

Deletável

API

Propriedades

Métodos

Eventos

Slots

CSS Parts

Propriedades CSS personalizadas