O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Campo de seleção

A seleção suspensa permite que os usuários escolham entre várias opções.

Como usar

Chamada através de classe CSS
Através da chamada de atributo personalizado (se o componente for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização)
Chamar via JavaScript

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Botões suspensos

Estilo

Componente select nativo de seleção única

Adicione a classe .mdui-select ao elemento <select> para dar a ele o estilo estilizado, sem a necessidade de chamar JavaScript.

Exemplo

<select class="mdui-select">
  <option value="1" selected>State 1</option>
  <option value="2">State 2</option>
  <option value="3">State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Componente select nativo de seleção múltipla

Você também pode adicionar a classe .mdui-select ao elemento <select multiple> para permitir a seleção múltipla. No entanto, nem todos os navegadores exibem este estilo perfeitamente.

Exemplo

<select multiple size="8" class="mdui-select">
  <optgroup label="Fonts">
    <option>Roboto</option>
    <option>Calibri</option>
    <option>Courier New</option>
    <option>Verdana</option>
  </optgroup>
  <optgroup label="Size">
    <option>50%</option>
    <option>75%</option>
    <option>90%</option>
    <option>100%</option>
  </optgroup>
  <optgroup label="header">
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
    <option>h4</option>
  </optgroup>
</select>

Como usar

Chamar via atributos personalizados

Ao usar este método, não é necessário escrever código JavaScript. Basta adicionar a classe .mdui-select e o atributo mdui-select="options" ao elemento <select>.

Se o componente for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização.

Exemplo

<select class="mdui-select" mdui-select>
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Exemplo

<select class="mdui-select" mdui-select="{position: 'top'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Exemplo

<select class="mdui-select" mdui-select="{position: 'bottom'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Chamar via JavaScript

Instanciando o componente:

// selector é o seletor CSS, elemento DOM ou string HTML do elemento <select>
// options são os parâmetros de configuração, veja a lista de parâmetros abaixo
var inst = new mdui.Select(selector, options);

Exemplo

<select class="mdui-select" id="demo-js">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

<script>
  var inst = new mdui.Select('#demo-js');
</script>

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`position`	`string`	`auto`	A posição do menu de seleção. Inclui `auto`, `top` e `bottom`
`gutter`	`int`	`16`	O espaçamento mínimo que o menu de seleção deve manter das bordas superior e inferior da janela, em px. Este parâmetro só é válido quando `position` é `auto`.

Método

Nome do método	Descrição
`open()`	Abre o menu suspenso.
`close()`	Fecha o menu suspenso.
`toggle()`	Alterna o estado aberto do menu suspenso.
`handleUpdate()`	Quando você modifica dinamicamente o conteúdo do elemento `<select>`, é necessário chamar este método para regenerar o menu suspenso.
`getState()`	Retorna o estado atual do menu suspenso. Inclui quatro estados (`opening`, `opened`, `closing`, `closed`).

Evento

Nome do evento	Descrição	Alvo	Parâmetros
`open.mdui.select`	O evento será disparado quando o menu suspenso começar a animação de abertura.	`<select class="mdui-select"></select>`	`event._detail.inst`: Instância
`opened.mdui.select`	O evento será disparado quando o menu suspenso terminar a animação de abertura.
`close.mdui.select`	O evento será disparado quando o menu suspenso começar a animação de fechamento.
`closed.mdui.select`	O evento será disparado quando o menu suspenso terminar a animação de fechamento.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-select`	Define um componente Select.

Botão de ação flutuante

Divisor