SelectSeçim Kutusu

Açılır seçim bileşeni, bir açılır menü içinde çeşitli seçenekler sunarak kullanıcının istediği içeriği hızlıca seçmesini kolaylaştırır.

Bu sayfa esas olarak <mdui-select> bileşeninin kullanımını açıklamaktadır. Açılır menü öğelerinin kullanımı için <mdui-menu-item> bölümüne bakın.

Kullanım Şekli

Bileşenleri ihtiyacınıza göre içe aktarın:

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın:

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Kullanım örneği:

Öğe 1

Öğe 2

<mdui-select value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

Örnekler

Çoklu Seçim Desteği

Açılır seçim varsayılan olarak tektir. <mdui-select> bileşeninin value değeri, seçili olan <mdui-menu-item> bileşeninin value değerine eşittir.

multiple özniteliğini ekleyerek açılır seçimi çoklu seçimi destekleyecek şekilde ayarlayabilirsiniz. Bu durumda <mdui-select> bileşeninin value değeri, seçili olan <mdui-menu-item> bileşenlerinin value değerlerinden oluşan bir dizi olur.

Not: Çoklu seçim desteği etkinleştirildiğinde, <mdui-select> bileşeninin value değeri bir dizidir ve bu değeri yalnızca JavaScript özelliği aracılığıyla okuyabilir ve ayarlayabilirsiniz.

Öğe 1

Öğe 2

Öğe 3

<mdui-select multiple class="example-multiple">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
  <mdui-menu-item value="öğe-3">Öğe 3</mdui-menu-item>
</mdui-select>

<script>
  // Varsayılan olarak öğe-1 ve öğe-2'yi seçili olarak ayarla
  const select = document.querySelector(".example-multiple");
  select.value = ["öğe-1", "öğe-2"];
</script>

Kaynak Kodu

Yardımcı Metin

Açılır seçimin üzerindeki etiket metnini ayarlamak için label özniteliğini kullanın.

Öğe 1

Öğe 2

<mdui-select label="Metin Alanı" value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

Kaynak Kodu

Bir değer seçilmediğinde görünecek yer tutucu metni ayarlamak için placeholder özniteliğini kullanın.

Öğe 1

Öğe 2

<mdui-select placeholder="Yer Tutucu">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

Kaynak Kodu

Açılır seçimin altındaki yardım metnini ayarlamak için helper özniteliğini kullanın. Yardım metnini ayarlamak için helper slot'unu da kullanabilirsiniz.

Öğe 1

Öğe 2

Öğe 1

Öğe 2

Destekleyici metin

<mdui-select helper="Destekleyici metin">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

<mdui-select>
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
  <span slot="helper" style="color: blue">Destekleyici metin</span>
</mdui-select>

Kaynak Kodu

Salt Okunur Modu

readonly özniteliğini ekleyerek açılır seçimi salt okunur moda ayarlayabilirsiniz.

Öğe 1

Öğe 2

<mdui-select readonly value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

Kaynak Kodu

Devre Dışı Bırakma Modu

disabled özniteliğini ekleyerek açılır seçimi devre dışı bırakabilirsiniz.

Öğe 1

Öğe 2

<mdui-select disabled value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

Kaynak Kodu

Temizlenebilir

clearable özniteliğini ekledikten sonra, açılır seçimde bir değer seçiliyken sağ tarafta bir temizleme butonu belirir.

Öğe 1

Öğe 2

<mdui-select clearable value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

Kaynak Kodu

Ayrıca clear slot'u aracılığıyla temizleme butonunu özelleştirebilirsiniz.

Öğe 1

Öğe 2

<mdui-select clearable value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
  <mdui-icon slot="clear" name="delete"></mdui-icon>
</mdui-select>

Kaynak Kodu

Açılır Menü Konumu

placement özniteliği aracılığıyla açılır menünün konumunu ayarlayabilirsiniz.

Öğe 1

Öğe 2

<mdui-select placement="top" value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

Kaynak Kodu

Metni Sağa Hizalama

end-aligned özniteliğini ekleyerek metni sağa hizalayabilirsiniz.

Öğe 1

Öğe 2

<mdui-select end-aligned value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

Kaynak Kodu

Ön ve Arka Metin ve Simgeler

icon ve end-icon özniteliklerini ayarlayarak, açılır seçimin soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. Ayrıca icon ve end-icon slot'ları aracılığıyla da açılır seçimin soluna ve sağına öğeler ekleyebilirsiniz.

Öğe 1

Öğe 2

Öğe 1

Öğe 2

<mdui-select value="öğe-1" icon="search" end-icon="mic">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-select>

Kaynak Kodu

prefix ve suffix özniteliklerini ayarlayarak, açılır seçimin soluna ve sağına metin ekleyebilirsiniz. Ayrıca prefix ve suffix slot'ları aracılığıyla da açılır seçimin soluna ve sağına metin öğeleri ekleyebilirsiniz. Bu metinler yalnızca açılır seçim odaklandığında veya bir değer seçili olduğunda görünür.

Öğe 1

Öğe 2

Öğe 1

Öğe 2

$ /100

<mdui-select value="öğe-1" prefix="$" suffix="/100">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="öğe-1">
  <mdui-menu-item value="öğe-1">Öğe 1</mdui-menu-item>
  <mdui-menu-item value="öğe-2">Öğe 2</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Seçim kutusunun stili. Olası değerler: `filled`: Arka plan renkli seçim kutusu, görsel etkisi daha güçlü `outlined`: Kenarlıklı seçim kutusu, görsel etkisi daha zayıf
`multiple`	`multiple`	`boolean`	`false`
Çoklu seçimin desteklenip desteklenmediği.
`name`	`name`	`string`	`''`
Form verileriyle birlikte gönderilen seçim kutusu adı.
`value`	`value`	`string \| string[]`	`''`
Form verileriyle birlikte gönderilen seçim kutusu değeri. `multiple` özelliği belirtilmemişse, bu değer bir dizedir; `multiple` özelliği belirtilmişse, bu değer bir dize dizisidir. HTML özelliği yalnızca dize değeri ayarlayabilir; dizi değeri ayarlamak gerekiyorsa, JavaScript özelliği ile ayarlayın.
	`defaultValue`	`string \| string[]`	`''`
Varsayılan seçili değer. Form sıfırlandığında bu varsayılan değere sıfırlanır. Bu özellik yalnızca JavaScript özelliği ile ayarlanabilir.
`label`	`label`	`string`	-
Etiket metni.
`placeholder`	`placeholder`	`string`	-
Yer tutucu metni.
`helper`	`helper`	`string`	-
Seçim kutusunun altındaki yardım metni. `slot="helper"` ile de ayarlanabilir.
`clearable`	`clearable`	`boolean`	`false`
Seçim kutusunun temizlenebilir olup olmadığı.
`clear-icon`	`clearIcon`	`string`	-
Seçim kutusu temizlenebilir olduğunda, seçim kutusunun sağ tarafında görüntülenen temizleme butonu için Material Icons simge adı. `slot="clear-icon"` ile de ayarlanabilir.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Seçim kutusunun konumu. Olası değerler: `auto`: Konumu otomatik olarak belirler `bottom`: Altta `top`: Üstte
`end-aligned`	`endAligned`	`boolean`	`false`
Metnin sağa hizalı olup olmadığı.
`prefix`	`prefix`	`string`	-
Seçim kutusunun ön ek metni. Yalnızca odaklanma durumunda veya seçim kutusunda değer olduğunda gösterilir. `slot="prefix"` ile de ayarlanabilir.
`suffix`	`suffix`	`string`	-
Seçim kutusunun son ek metni. Yalnızca odaklanma durumunda veya seçim kutusunda değer olduğunda gösterilir. `slot="suffix"` ile de ayarlanabilir.
`icon`	`icon`	`string`	-
Seçim kutusunun ön ek simgesi için Material Icons simge adı. `slot="icon"` ile de ayarlanabilir.
`end-icon`	`endIcon`	`string`	-
Seçim kutusunun son ek simgesi için Material Icons simge adı. `slot="end-icon"` ile de ayarlanabilir.
`error-icon`	`errorIcon`	`string`	-
Form alanı doğrulaması başarısız olduğunda, seçim kutusunun sağ tarafında görüntülenen Material Icons simge adı. `slot="error-icon"` ile de ayarlanabilir.
`form`	`form`	`string`	-
İlişkili `<form>` öğesi. Bu özelliğin değeri, aynı sayfadaki bir `<form>` öğesinin `id`'si olmalıdır. Bu özellik belirtilmezse, öğe bir `<form>` öğesinin alt öğesi olmalıdır. Bu özellik sayesinde öğeyi yalnızca `<form>` öğesinin alt öğesi olarak değil, sayfanın herhangi bir yerine yerleştirebilirsiniz.
`readonly`	`readonly`	`boolean`	`false`
Salt okunur durumda olup olmadığı.
`disabled`	`disabled`	`boolean`	`false`
Devre dışı durumda olup olmadığı.
`required`	`required`	`boolean`	`false`
Form gönderilirken bu alanın doldurulmasının zorunlu olup olmadığı.
	`validity`	`ValidityState`	-
Form doğrulama durumu nesnesi. Ayrıntılar için `ValidityState`'e bakın.
	`validationMessage`	`string`	-
Form doğrulaması başarısız olduğunda bu özellik bir bilgilendirme mesajı içerir. Doğrulama başarılı olduğunda ise boş bir dize olur.
`autofocus`	`autofocus`	`boolean`	`false`
Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
`tabindex`	`tabIndex`	`number`	-
Sekme tuşu ile odak geçişi yapılırken öğenin sırası.

Yöntemler

Ad	Parametreler	Dönüş Değeri
`checkValidity`		`boolean`
Form alanının doğrulamayı geçip geçmediğini kontrol eder. Geçmezse `false` döndürür ve `invalid` olayını tetikler; geçerse `true` döndürür.
`reportValidity`		`boolean`
Form alanının doğrulamayı geçip geçmediğini kontrol eder. Geçmezse `false` döndürür ve `invalid` olayını tetikler; geçerse `true` döndürür. Doğrulama başarısız olduğunda, bileşen üzerinde doğrulama başarısızlığına dair bir ipucu da gösterir.
`setCustomValidity`	`message: string`	`void`
Özel bir hata ipucu metni ayarlar. Bu metin boş değilse, alanın doğrulamayı geçmediği anlamına gelir.
`click`		`void`
Öğeye fare tıklamasını simüle eder.
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Odağı geçerli öğeye ayarlar. Parametre olarak bir nesne iletilebilir. Nesnenin özellikleri şunlardır: `preventScroll`: Varsayılan olarak, öğe odaklandıktan sonra sayfa, öğeyi görünüme getirmek için kayar. Sayfanın kaydırılmasını istemiyorsanız, bu özelliği `true` olarak ayarlayabilirsiniz.
`blur`		`void`
Odağı geçerli öğeden kaldırır.

Olaylar

Ad
`focus`
Odak alındığında tetiklenir.
`blur`
Odak kaybedildiğinde tetiklenir.
`change`
Seçili değer değiştiğinde tetiklenir.
`invalid`
Form alanı doğrulaması başarısız olduğunda tetiklenir.
`clear`
`clearable` özelliği tarafından oluşturulan temizleme butonuna tıklandığında tetiklenir. `event.preventDefault()` çağrılarak seçim kutusunun temizlenmesi engellenebilir.

Slots

Ad
Varsayılan
`<mdui-menu-item>` öğeleri.
`icon`
Soldaki simge.
`end-icon`
Sağdaki simge.
`error-icon`
Doğrulama başarısız durumundaki sağdaki simge.
`prefix`
Soldaki metin.
`suffix`
Sağdaki metin.
`clear-button`
Temizleme butonu.
`clear-icon`
Temizleme butonundaki simge.
`helper`
Alttaki yardım metni.

CSS Parts

Ad
`chips`
Çoklu seçimde, seçili değerlere karşılık gelen chiplerin kabı.
`chip`
Çoklu seçimde, her bir seçili değere karşılık gelen chip.
`chip__button`
Chip içindeki `<button>` öğesi.
`chip__label`
Chip içindeki metin.
`chip__delete-icon`
Chip içindeki silme simgesi.
`text-field`
Metin kutusu, yani `<mdui-text-field>` öğesi.
`text-field__container`
text-field içindeki metin kutusu kabı.
`text-field__icon`
text-field içindeki soldaki simge.
`text-field__end-icon`
text-field içindeki sağdaki simge.
`text-field__error-icon`
text-field içindeki doğrulama başarısız durumundaki sağdaki simge.
`text-field__prefix`
text-field içindeki soldaki metin.
`text-field__suffix`
text-field içindeki sağdaki metin.
`text-field__label`
text-field içindeki etiket metni.
`text-field__input`
text-field içindeki `<input>` öğesi.
`text-field__clear-button`
text-field içindeki temizleme butonu.
`text-field__clear-icon`
text-field içindeki temizleme butonundaki simge.
`text-field__supporting`
text-field içindeki alt yardımcı bilgi kabı, helper ve error'u içerir.
`text-field__helper`
text-field içindeki alt yardım metni.
`text-field__error`
text-field içindeki alt hata açıklama metni.
`menu`
Açılır menü, yani `<mdui-menu>` öğesi.

Önceki Bölüm

RangeSlider Aralık Kaydırıcısı

Sonraki Bölüm

SegmentedButton Segmentli Buton