SegmentedButton세그먼트 버튼

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>

소스

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>

소스

Í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>

소스

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>

소스

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>

소스

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>

소스

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>

소스

`mdui-segmented-button-group` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`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.

메서드

이름	매개변수	반환값
`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.

이벤트

이름
`change`
Disparado quando o valor selecionado muda.
`invalid`
Disparado quando a validação do campo do formulário falha.

Slots

이름
기본
Componentes `<mdui-segmented-button>`.

CSS 사용자 정의 속성

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

`mdui-segmented-button` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`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.

메서드

이름	매개변수	반환값
`click`		`void`
Simula um clique do mouse no elemento.
`focus`	`options: FocusOptions` (선택사항)	`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.

이벤트

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

Slots

이름
기본
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

이름
`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.

이전 장

Select 셀렉트

다음 장

Slider 슬라이더

SegmentedButton세그먼트 버튼

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

속성

메서드

이벤트

Slots

CSS 사용자 정의 속성

`mdui-segmented-button` API

속성

메서드

이벤트

Slots

CSS Parts