SegmentedButtonBotão segmentado

O componente de botão segmentado encapsula um grupo de botões, usado para fornecer opções, alternar visualizações ou ordenar elementos, entre outros.

Como usar

Importe os componentes conforme necessário:

import 'mdui/components/segmented-button-group.js';
import 'mdui/components/segmented-button.js';

Importe os tipos TypeScript dos componentes conforme necessário:

import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';
import type { SegmentedButton } from 'mdui/components/segmented-button.js';

Exemplo de uso:

Day

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

Defina o atributo selects como single no elemento <mdui-segmented-button-group> para habilitar o modo de seleção única. Assim, o valor do atributo value do <mdui-segmented-button-group> será o valor value do <mdui-segmented-button> atualmente selecionado.

Day

Week

Month

Day

Week

Month

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

Fonte

Modo de seleção múltipla

Defina o atributo selects como multiple no elemento <mdui-segmented-button-group> para habilitar o modo de seleção múltipla. Assim, o valor do atributo value do <mdui-segmented-button-group> será um array dos valores value dos <mdui-segmented-button> atualmente selecionados.

Nota: No modo de seleção múltipla, o valor do atributo value do <mdui-segmented-button-group> é um array e só pode ser lido e definido por propriedades JavaScript.

Day

Week

Month

Day

Week

Month

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // Define a seleção padrão para week e month
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Fonte

Ícone

No elemento <mdui-segmented-button>, use os atributos icon e end-icon para adicionar ícones do Material Icons à esquerda e à direita do botão, respectivamente. Você também pode adicionar elementos pelos slots icon e end-icon.

Day

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Day</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Week</mdui-segmented-button>
  <mdui-segmented-button>
    Month
    <mdui-icon slot="icon" name="downloading"></mdui-icon>
    <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
  </mdui-segmented-button>
</mdui-segmented-button-group>

Fonte

No elemento <mdui-segmented-button>, adicione o atributo selected-icon para definir o ícone do Material Icons no estado selecionado. Você também pode usar o slot selected-icon.

Day

Week

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Week
  </mdui-segmented-button>
</mdui-segmented-button-group>

Fonte

Link

No elemento <mdui-segmented-button>, defina o atributo href para transformar o botão em um link. Assim, você também pode usar os atributos relacionados a links: download, target, rel.

Link

Week

Month

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

Fonte

Estado desabilitado e carregando

Use o atributo disabled no elemento <mdui-segmented-button-group> para desabilitar todo o grupo de botões segmentados.

Day

Week

Month

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

Fonte

No elemento <mdui-segmented-button>, adicione o atributo disabled para desabilitar um botão específico; adicione o atributo loading para adicionar um estado de carregamento a um botão específico.

Day

Week

Month

Year

<mdui-segmented-button-group>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button disabled>Week</mdui-segmented-button>
  <mdui-segmented-button loading>Month</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Year</mdui-segmented-button>
</mdui-segmented-button-group>

Fonte

`mdui-segmented-button-group` API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`full-width`	`fullWidth`	`boolean`	`false`
Define se deve preencher a largura do elemento pai.
`selects`	`selects`	`'single' \| 'multiple'`	-
Estado de seleção dos botões segmentados. O padrão é não selecionável. Os valores possíveis são: `single`: Seleção única. `multiple`: Seleção múltipla.
`disabled`	`disabled`	`boolean`	`false`
Define se o componente está desabilitado.
`required`	`required`	`boolean`	`false`
Define se, ao enviar o formulário, é obrigatório que algum botão esteja selecionado.
`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>`.
`name`	`name`	`string`	`''`
O nome usado ao enviar o formulário, que será enviado com os dados do formulário.
`value`	`value`	`string \| string[]`	`''`
O valor do `<mdui-segmented-button>` atualmente selecionado. Nota: O atributo HTML desta propriedade é sempre uma string e só pode definir o valor inicial via atributo HTML quando `selects="single"`. O valor da propriedade JavaScript é uma string quando `selects="single"`, e um array de strings quando `selects="multiple"`. Portanto, quando `selects="multiple"`, para modificar este valor, só é possível alterando a propriedade JavaScript.
	`defaultValue`	`string \| string[]`	`''`
O valor selecionado por padrão. Ao redefinir o formulário, será restaurado para este valor padrão. Esta propriedade só pode ser definida via propriedade JavaScript.
	`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
`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
`change`
Disparado quando o valor selecionado muda.
`invalid`
Disparado quando a validação do campo do formulário falha.

Slots

Nome
(padrão)
Componentes `<mdui-segmented-button>`.

Propriedades CSS personalizadas

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

`mdui-segmented-button` API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`icon`	`icon`	`string`	-
Nome do ícone Material Icons à esquerda. Também pode ser definido via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome do ícone Material Icons à direita. Também pode ser definido via `slot="end-icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Nome do ícone Material Icons para o estado selecionado. Também pode ser definido via `slot="selected-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.

Slots

Nome
(padrão)
Conteúdo de texto do item de botão segmentado.
`icon`
Ícone à esquerda do item de botão segmentado.
`selected-icon`
Ícone à esquerda no estado selecionado.
`end-icon`
Ícone à direita do item de botão segmentado.

CSS Parts

Nome
`button`
Elemento `<button>` ou `<a>` interno.
`icon`
Ícone à esquerda.
`selected-icon`
Ícone à esquerda no estado selecionado.
`end-icon`
Ícone à direita.
`label`
Conteúdo de texto.
`loading`
Elemento `<mdui-circular-progress>` no estado de carregamento.

Capítulo anterior

Select Campo de seleção

Próximo capítulo

Slider Slider

SegmentedButtonBotão segmentado

Como usar

Exemplos

Largura total

Modo de seleção única

Modo de seleção múltipla

Ícone

Link

Estado desabilitado e carregando

`mdui-segmented-button-group` API

Propriedades

Métodos

Eventos

Slots

Propriedades CSS personalizadas

`mdui-segmented-button` API

Propriedades

Métodos

Eventos

Slots

CSS Parts