SwitchAnahtar

Anahtar bileşeni, tek bir seçeneğin açık veya kapalı durumunu değiştirmek için kullanılır. Sezgisel etkileşim tasarımı sayesinde kullanıcıların ayarları kolayca değiştirmesini sağlar.

Kullanım Şekli

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

import 'mdui/components/switch.js';

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

import type { Switch } from 'mdui/components/switch.js';

Kullanım örneği:

<mdui-switch></mdui-switch>

Seçilmemiş durumdaki Material Icons simgesini ayarlamak için unchecked-icon özniteliğini, seçili durumdaki simgeyi ayarlamak için checked-icon özniteliğini kullanabilirsiniz. Ayrıca unchecked-icon ve checked-icon slot'ları aracılığıyla da seçilmemiş ve seçili durumlardaki simge öğelerini özelleştirebilirsiniz.

<mdui-switch unchecked-icon="remove_moderator" checked-icon="verified_user"></mdui-switch>
<mdui-switch>
  <mdui-icon slot="unchecked-icon" name="remove_moderator"></mdui-icon>
  <mdui-icon slot="checked-icon" name="verified_user"></mdui-icon>
</mdui-switch>

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 sıfırlanır. Bu özellik yalnızca JavaScript özelliği ile ayarlanabilir.
`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. Varsayılan olarak `check` simgesidir; varsayılan simgeyi kaldırmak için boş dize iletilebilir.
`required`	`required`	`boolean`	`false`
Form gönderilirken bu anahtarın seçilmesinin 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 anahtar adı.
`value`	`value`	`string`	`'on'`
Form verileriyle birlikte gönderilen anahtar değeri.
	`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
`unchecked-icon`
Seçili olmayan durumdaki öğe.
`checked-icon`
Seçili durumdaki öğe.

CSS Parts

Ad
`track`
İz.
`thumb`
Simge alanı.
`unchecked-icon`
Seçili olmayan durumdaki simge.
`checked-icon`
Seçili durumdaki simge.

CSS Custom Property

Ad
`--shape-corner`
Bileşen izinin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
`--shape-corner-thumb`
Bileşen simge alanının köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.

Önceki Bölüm

Snackbar Snackbar

Sonraki Bölüm

Tabs Sekme

SwitchAnahtar

Kullanım Şekli

Örnekler

Seçili Durumu

Devre Dışı Durumu

Simge