RadioRadyo Butonu

Radyo butonları, kullanıcının bir dizi seçenek arasından birini seçmesini sağlamak için kullanılır. Her seferinde yalnızca bir seçeneğin seçilebilmesini garanti eder.

Kullanım Şekli

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

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

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

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

Kullanım örneği:

Çince

İngilizce

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Çince</mdui-radio>
  <mdui-radio value="english">İngilizce</mdui-radio>
</mdui-radio-group>

<mdui-radio-group> bileşeninin value değeri, seçili olan <mdui-radio> bileşeninin value değerine eşittir. Ayrıca <mdui-radio-group> bileşeninin value değerini güncelleyerek seçili radyo butonunu değiştirebilirsiniz.

Çince

İngilizce

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Çince</mdui-radio>
  <mdui-radio value="english">İngilizce</mdui-radio>
</mdui-radio-group>

Kaynak Kodu

<mdui-radio> bileşenini tek başına kullanabilirsiniz. Bu durumda seçili durumu checked özniteliği aracılığıyla okuyabilir ve değiştirebilirsiniz.

Radyo Butonu

<mdui-radio checked>Radyo Butonu</mdui-radio>

Kaynak Kodu

Devre Dışı Durumu

<mdui-radio-group> bileşenine disabled özniteliğini ekleyerek tüm radyo butonu grubunu devre dışı bırakabilirsiniz.

Çince

İngilizce

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Çince</mdui-radio>
  <mdui-radio value="english">İngilizce</mdui-radio>
</mdui-radio-group>

Kaynak Kodu

Belirli bir radyo butonunu devre dışı bırakmak için <mdui-radio> bileşenine disabled özniteliğini ekleyebilirsiniz.

Çince

İngilizce

<mdui-radio-group>
  <mdui-radio value="chinese">Çince</mdui-radio>
  <mdui-radio value="english" disabled>İngilizce</mdui-radio>
</mdui-radio-group>

Kaynak Kodu

Simge

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

Çince

İngilizce

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Çince</mdui-radio>
  <mdui-radio value="english">
    <mdui-icon slot="unchecked-icon" name="check_box_outline_blank"></mdui-icon>
    <mdui-icon slot="checked-icon" name="lock"></mdui-icon>
    İngilizce
  </mdui-radio>
</mdui-radio-group>

Kaynak Kodu

`mdui-radio-group` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`disabled`	`disabled`	`boolean`	`false`
Bu bileşenin devre dışı 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 radyo butonu grubu adı.
`value`	`value`	`string`	`''`
Form verileriyle birlikte gönderilen, radyo butonu grubunun şu anda seçili olan değeri.
	`defaultValue`	`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.
`required`	`required`	`boolean`	`false`
Form gönderilirken radyo butonlarından birinin seçilmesinin 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.

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.

Olaylar

Ad
`change`
Seçili değer değiştiğinde tetiklenir.
`input`
Seçili değer değiştiğinde tetiklenir.
`invalid`
Form alanı doğrulaması başarısız olduğunda tetiklenir.

Slots

Ad
Varsayılan
`<mdui-radio>` öğeleri.

`mdui-radio` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`value`	`value`	`string`	`''`
Geçerli radyo seçeneğinin değeri.
`disabled`	`disabled`	`boolean`	`false`
Geçerli radyo seçeneğinin devre dışı olup olmadığı.
`checked`	`checked`	`boolean`	`false`
Geçerli radyo seçeneğinin seçili olup olmadığı.
`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.
`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
`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`
Bu radyo seçeneği seçildiğinde tetiklenir.

Slots

Ad
Varsayılan
Metin içeriği.
`unchecked-icon`
Seçili olmayan durumdaki simge.
`checked-icon`
Seçili durumdaki simge.

CSS Parts

Ad
`control`
Soldaki simge alanı.
`unchecked-icon`
Seçili olmayan durumdaki simge.
`checked-icon`
Seçili durumdaki simge.
`label`
Metin içeriği.

Önceki Bölüm

NavigationRail Gezinme Rayı

Sonraki Bölüm

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

RadioRadyo Butonu

Kullanım Şekli

Örnekler

Seçili Durumu

Devre Dışı Durumu

Simge

`mdui-radio-group` API

Özellikler

Yöntemler

Olaylar

Slots

`mdui-radio` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts