CheckboxOnay Kutusu

Onay kutuları, kullanıcının bir dizi seçenekten bir veya daha fazlasını seçmesine veya tek bir seçeneğin açık/kapalı durumunu değiştirmesine olanak tanır.

Kullanım Şekli

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

import 'mdui/components/checkbox.js';

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

import type { Checkbox } from 'mdui/components/checkbox.js';

Kullanım örneği:

Onay Kutusu

<mdui-checkbox>Onay Kutusu</mdui-checkbox>

unchecked-icon, checked-icon, indeterminate-icon özniteliklerini ayarlayarak, sırasıyla seçilmemiş, seçili ve belirsiz durumlardaki onay kutusunun Material Icons simgelerini belirleyebilirsiniz. Ayrıca unchecked-icon, checked-icon, indeterminate-icon slot'ları aracılığıyla da ayarlayabilirsiniz.

Onay Kutusu

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Onay Kutusu</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Onay Kutusu</mdui-checkbox>

<br/>

<mdui-checkbox>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Onay Kutusu
</mdui-checkbox>

<mdui-checkbox indeterminate>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Onay Kutusu
</mdui-checkbox>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`disabled`	`disabled`	`boolean`	`false`
Devre dışı durumda olup olmadığı.
`checked`	`checked`	`boolean`	`false`
Seçili durumda olup olmadığı.
	`defaultChecked`	`boolean`	`false`
Varsayılan seçili durumu. Form sıfırlandığında bu duruma geri döner. Bu özellik yalnızca JavaScript özelliği ile ayarlanabilir.
`indeterminate`	`indeterminate`	`boolean`	`false`
Belirsiz durumda olup olmadığı.
`required`	`required`	`boolean`	`false`
Form gönderilirken bu onay kutusunun işaretlenmesinin zorunlu olup olmadığı.
`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.
`name`	`name`	`string`	`''`
Form verileriyle birlikte gönderilen onay kutusu adı.
`value`	`value`	`string`	`'on'`
Form verileriyle birlikte gönderilen onay kutusu değeri.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Seçili olmayan durumdaki Material Icons simge adı. `slot="unchecked-icon"` ile de ayarlanabilir.
`checked-icon`	`checkedIcon`	`string`	-
Seçili durumdaki Material Icons simge adı. `slot="checked-icon"` ile de ayarlanabilir.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Belirsiz durumdaki Material Icons simge adı. `slot="indeterminate-icon"` ile de ayarlanabilir.
	`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çim durumu değiştiğinde tetiklenir.
`input`
Seçim durumu değiştiğinde tetiklenir.
`invalid`
Form alanı doğrulaması başarısız olduğunda tetiklenir.

Slots

Ad
Varsayılan
Onay kutusu metni.
`unchecked-icon`
Seçili olmayan durumdaki simge.
`checked-icon`
Seçili durumdaki simge.
`indeterminate-icon`
Belirsiz durumdaki simge.

CSS Parts

Ad
`control`
Soldaki simge alanı.
`unchecked-icon`
Seçili olmayan durumdaki simge.
`checked-icon`
Seçili durumdaki simge.
`indeterminate-icon`
Belirsiz durumdaki simge.
`label`
Onay kutusu metni.

Önceki Bölüm

Card Kart

Sonraki Bölüm

Chip Chip

CheckboxOnay Kutusu

Kullanım Şekli

Örnekler

Seçili Durumu

Devre Dışı Durumu

Belirsiz Durumu

Simge

API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts