Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Seçim Kutusu

Seçim kutusu, kullanıcıların birden fazla seçenek arasından seçim yapmasına olanak tanır.

Kullanım

CSS sınıfı aracılığıyla çağırın
Özel öznitelikler aracılığıyla çağırın (bileşen dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağırmanız gerekir)
JavaScript ile Çağır

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Açılır Menü

Stil

Yerel tekli seçim select bileşeni

<select> öğesine .mdui-select sınıfını ekleyerek, JavaScript çağırmaya gerek kalmadan öğeye güzelleştirilmiş bir stil kazandırabilirsiniz.

Örnek

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

Yerel çoklu seçim select bileşeni

Çoklu seçime izin vermek için <select multiple> öğesine .mdui-select sınıfını da ekleyebilirsiniz. Ancak tüm tarayıcılar bu stili iyi bir şekilde görüntüleyemeyebilir.

Örnek

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

Kullanım

Öznitelik ile Çağır

Bu yöntemi kullanırken JavaScript kodu yazmaya gerek yoktur. <select> öğesine .mdui-select sınıfını ve mdui-select="options" özniteliğini eklemeniz yeterlidir.

Bileşen dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağırmanız gerekir.

Örnek

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

Örnek

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

Örnek

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

JavaScript ile Çağır

Bileşeni örnekleme:

// selector, <select> öğesinin bir CSS seçicisi, DOM öğesi veya HTML dizesidir
// options, yapılandırma parametreleridir, aşağıdaki parametre listesine bakın
var inst = new mdui.Select(selector, options);

Örnek

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

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`position`	`string`	`auto`	Seçim menüsünün konumu. `auto`, `top`, `bottom` değerlerini içerir
`gutter`	`int`	`16`	Seçim menüsünün pencerenin üst ve alt kenarlarından en az ne kadar uzakta duracağı (piksel cinsinden). Bu parametre yalnızca `position` değeri `auto` olduğunda geçerlidir.

Yöntem

Yöntem Adı	Açıklama
`open()`	Açılır menüyü açın.
`close()`	Açılır menüyü kapatın.
`toggle()`	Açılır menünün açık durumunu değiştirin.
`handleUpdate()`	`<select>` öğesinin içeriğini dinamik olarak değiştirdiğinizde, açılır menüyü yeniden oluşturmak için bu metodu çağırmanız gerekir.
`getState()`	Geçerli açılır menünün açık durumunu döndürür. Toplam dört durum içerir (`opening`, `opened`, `closing`, `closed`).

Olay

Olay Adı	Açıklama	Hedef	Parametreler
`open.mdui.select`	Açılır menü açılma animasyonuna başladığında olay tetiklenir.	`<select class="mdui-select"></select>`	`event._detail.inst`: Örnek
`opened.mdui.select`	Açılır menü açılma animasyonunu bitirdiğinde olay tetiklenir.
`close.mdui.select`	Açılır menü kapanma animasyonuna başladığında olay tetiklenir.
`closed.mdui.select`	Açılır menü kapanma animasyonunu bitirdiğinde olay tetiklenir.

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-select`	Bir Select bileşeni tanımlayın.

Yüzen İşlem Butonu

Ayırıcı