TextFieldMetin Alanı

Metin alanı bileşeni, kullanıcının sayfaya metin girmesine olanak tanır. Genellikle formlar ve diyaloglar için kullanılır.

Kullanım Şekli

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

import 'mdui/components/text-field.js';

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

import type { TextField } from 'mdui/components/text-field.js';

Kullanım örneği:

<mdui-text-field label="Metin Alanı"></mdui-text-field>

Metin alanının altındaki yardım metnini helper özniteliği aracılığıyla ayarlayın. Yardım metnini ayarlamak için helper slot'unu da kullanabilirsiniz. helper-on-focus özniteliğini eklemek, yardım metnini yalnızca metin alanı odaklandığında gösterir.

Destekleyici metin

<mdui-text-field label="Metin Alanı" helper="Destekleyici metin"></mdui-text-field>

<mdui-text-field label="Metin Alanı">
  <span slot="helper" style="color: blue">Destekleyici metin</span>
</mdui-text-field>

<mdui-text-field label="Metin Alanı" helper="Destekleyici metin" helper-on-focus></mdui-text-field>

Kaynak Kodu

Temizlenebilir

clearable özniteliğini ekledikten sonra, metin alanında bir değer varken sağ tarafta bir temizleme butonu belirir.

<mdui-text-field clearable label="Metin Alanı" value="Girilen Metin"></mdui-text-field>

Kaynak Kodu

Metni Sağa Hizalama

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

<mdui-text-field end-aligned label="Metin Alanı" value="Girilen Metin"></mdui-text-field>

Kaynak Kodu

Ön ve Arka Metin ve Simgeler

icon ve end-icon özniteliklerini ayarlayarak, metin alanının soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz. Ayrıca icon ve end-icon slot'ları aracılığıyla da metin alanının soluna ve sağına öğeler ekleyebilirsiniz.

<mdui-text-field icon="search" end-icon="mic" label="Metin Alanı"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Metin Alanı">
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-text-field>

Kaynak Kodu

prefix ve suffix özniteliklerini ayarlayarak, metin alanının soluna ve sağına metin ekleyebilirsiniz. Ayrıca prefix ve suffix slot'ları aracılığıyla da metin alanının soluna ve sağına metin öğeleri ekleyebilirsiniz. Bu metinler yalnızca metin alanı odaklandığında veya bir değer girdiğinde görünür.

$ /100

<mdui-text-field prefix="$" suffix="/100" label="Metin Alanı"></mdui-text-field>

<br/><br/>

<mdui-text-field label="Metin Alanı">
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-text-field>

Kaynak Kodu

Salt Okunur Modu

readonly özniteliğini ekleyerek metin alanını salt okunur moda ayarlayabilirsiniz.

<mdui-text-field readonly label="Metin Alanı" value="Girilen Metin"></mdui-text-field>

Kaynak Kodu

Devre Dışı Durumu

disabled özniteliğini ekleyerek metin alanını devre dışı bırakabilirsiniz.

<mdui-text-field disabled label="Metin Alanı" value="Girilen Metin"></mdui-text-field>

Kaynak Kodu

Çok Satırlı Metin Alanı

rows özniteliği aracılığıyla çok satırlı metin alanının satır sayısını ayarlayabilirsiniz.

<mdui-text-field rows="3" label="Metin Alanı"></mdui-text-field>

Kaynak Kodu

Ayrıca autosize özniteliğini ekleyerek metin alanının girilen içeriğin uzunluğuna göre otomatik olarak yüksekliğini ayarlamasını sağlayabilirsiniz. Otomatik yükseklik ayarlaması sırasındaki minimum ve maksimum satır sayısını min-rows ve max-rows öznitelikleri aracılığıyla belirleyebilirsiniz.

<mdui-text-field autosize label="Metin Alanı"></mdui-text-field>

<br/><br/>

<mdui-text-field autosize min-rows="2" max-rows="5" label="Metin Alanı"></mdui-text-field>

Kaynak Kodu

Karakter Sayacı

maxlength özniteliği ile maksimum karakter sayısını belirlediğinizde, counter özniteliğini ekleyerek metin alanının altında karakter sayacını gösterebilirsiniz.

<mdui-text-field maxlength="20" counter label="Metin Alanı"></mdui-text-field>

Kaynak Kodu

Şifre Alanı

type="password" olduğunda, toggle-password özniteliğini ekleyerek metin alanının sağ tarafında şifre görünürlüğünü değiştiren bir buton ekleyebilirsiniz.

<mdui-text-field type="password" toggle-password label="Metin Alanı"></mdui-text-field>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Metin alanının şekli. Varsayılan `filled`'dır. Olası değerler: `filled`: Arka plan renkli metin alanı, görsel etkisi daha güçlü `outlined`: Kenarlıklı metin alanı, görsel etkisi daha zayıf
`type`	`type`	`'text' \| 'number' \| 'password' \| 'url' \| 'email' \| 'search' \| 'tel' \| 'hidden' \| 'date' \| 'datetime-local' \| 'month' \| 'time' \| 'week'`	`'text'`
Metin alanı giriş türü. Varsayılan `text`'tir. Olası değerler: `text`: Varsayılan değer. Metin alanı `number`: Yalnızca sayı girişine izin verir. Dinamik klavyeli cihazlarda sayısal klavye gösterilir `password`: Parola girişi için kullanılır, değeri maskelenir `url`: URL girişi için kullanılır, URL biçimini doğrular. Dinamik klavyeyi destekleyen cihazlarda uygun klavye bulunur `email`: E-posta adresi girişi için kullanılır, e-posta biçimini doğrular. Dinamik klavyeyi destekleyen cihazlarda uygun klavye bulunur `search`: Arama kutusu için kullanılır. Dinamik klavyeli cihazlardaki enter simgesi arama simgesine dönüşür `tel`: Telefon numarası girişi için kullanılır. Dinamik klavyeli cihazlarda telefon numarası tuş takımı gösterilir `hidden`: Bu denetimi gizler, ancak değeri sunucuya gönderilir `date`: Tarih girişi denetimi (yıl, ay, gün, saat hariç). Desteklenen tarayıcılarda etkinleştirildiğinde tarih seçici veya yıl-ay-gün sayısal tekerleği açılır `datetime-local`: Saat dilimi hariç tarih ve saat girişi denetimi. Desteklenen tarayıcılarda etkinleştirildiğinde tarih seçici veya yıl-ay-gün sayısal tekerleği açılır `month`: Yıl ve ay girişi denetimi, saat dilimi yok `time`: Saat girişi denetimi, saat dilimi yok `week`: Yıl ve hafta numarasından oluşan tarih girişi denetimi, saat dilimi yok
`name`	`name`	`string`	`''`
Form verileriyle birlikte gönderilen metin alanı adı.
`value`	`value`	`string`	`''`
Form verileriyle birlikte gönderilen metin alanı değeri.
	`defaultValue`	`string`	`''`
Varsayılan 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`	-
Metin alanının altındaki yardım metni. `slot="helper"` ile de ayarlanabilir.
`helper-on-focus`	`helperOnFocus`	`boolean`	`false`
Yardım metninin yalnızca odaklanıldığında gösterilip gösterilmeyeceği.
`clearable`	`clearable`	`boolean`	`false`
Metin alanı içeriğinin temizlenebilir olup olmadığı.
`clear-icon`	`clearIcon`	`string`	-
Metin alanı temizlenebilir olduğunda, metin alanının sağ tarafında görüntülenen temizleme butonu için Material Icons simge adı. `slot="clear-icon"` ile de ayarlanabilir.
`end-aligned`	`endAligned`	`boolean`	`false`
Metnin sağa hizalı olup olmadığı.
`prefix`	`prefix`	`string`	-
Metin alanının ön ek metni. Yalnızca metin alanı odaklandığında veya değer olduğunda gösterilir. `slot="prefix"` ile de ayarlanabilir.
`suffix`	`suffix`	`string`	-
Metin alanının son ek metni. Yalnızca metin alanı odaklandığında veya değer olduğunda gösterilir. `slot="suffix"` ile de ayarlanabilir.
`icon`	`icon`	`string`	-
Metin alanının ön ek simgesi için Material Icons simge adı. `slot="icon"` ile de ayarlanabilir.
`end-icon`	`endIcon`	`string`	-
Metin alanının 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, metin alanının 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 modda olup olmadığı.
`disabled`	`disabled`	`boolean`	`false`
Giriş kutusunun devre dışı olup olmadığı.
`required`	`required`	`boolean`	`false`
Form gönderilirken bu alanın doldurulmasının zorunlu olup olmadığı.
`rows`	`rows`	`number`	-
Metin alanının sabit görüntülenme satır sayısı.
`autosize`	`autosize`	`boolean`	`false`
Metin alanı yüksekliğinin giriş içeriğine göre otomatik ayarlanıp ayarlanmayacağı.
`min-rows`	`minRows`	`number`	-
`autosize` `true` olduğunda metin alanının minimum satır sayısı.
`max-rows`	`maxRows`	`number`	-
`autosize` `true` olduğunda metin alanının maksimum satır sayısı.
`minlength`	`minlength`	`number`	-
İzin verilen minimum karakter sayısı.
`maxlength`	`maxlength`	`number`	-
İzin verilen maksimum karakter sayısı.
`counter`	`counter`	`boolean`	`false`
Karakter sayısının gösterilip gösterilmeyeceği, yalnızca `maxlength` belirtildiğinde geçerlidir.
`min`	`min`	`number`	-
`type` `number` olduğunda izin verilen minimum sayısal değer.
`max`	`max`	`number`	-
`type` `number` olduğunda izin verilen maksimum sayısal değer.
`step`	`step`	`number`	-
`type` `number` olduğunda sayısal artış/azalış adımı.
`pattern`	`pattern`	`string`	-
Form doğrulaması için kullanılan düzenli ifade.
`toggle-password`	`togglePassword`	`boolean`	`false`
`type` `password` olduğunda, bu özellik ayarlanırsa, düz metin ve gizli metin arasında geçiş yapmak için bir geçiş butonu eklenir.
`show-password-icon`	`showPasswordIcon`	`string`	-
Parola geçiş butonunun Material Icons simgesi, parola düz metin olduğunda gösterilir. `slot="show-password-icon"` ile de ayarlanabilir.
`hide-password-icon`	`hidePasswordIcon`	`string`	-
Parola geçiş butonunun Material Icons simgesi, parola gizli olduğunda gösterilir. `slot="hide-password-icon"` ile de ayarlanabilir.
`autocapitalize`	`autocapitalize`	`'none' \| 'sentences' \| 'words' \| 'characters'`	-
iOS'un standart olmayan özelliği, metnin ilk harfinin otomatik olarak büyük harf yapılıp yapılmayacağını kontrol eder. iOS5 ve sonraki sürümlerde geçerlidir. Olası değerler: `none`: İlk harf büyütmeyi devre dışı bırakır `sentences`: Cümlelerin ilk harfi büyük yapılır `words`: Kelimelerin ilk harfi büyük yapılır `characters`: Tüm harfler büyük yapılır
`autocorrect`	`autocorrect`	`string`	-
`input` öğesinin `autocorrect` özelliği.
`autocomplete`	`autocomplete`	`string`	-
`input` öğesinin `autocomplete` özelliği.
`enterkeyhint`	`enterkeyhint`	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
`input` öğesinin `enterkeyhint` özelliği, sanal klavyedeki Enter tuşunun görüntülenen metnini veya simgesini özelleştirmek için kullanılır. Görüntülenme etkisi kullanıcının cihazına ve diline bağlıdır. Olası değerler: `enter`: Yeni satır ekler `done`: Girişi tamamlar, sanal klavyeyi kapatır `go`: Giriş metninin hedefine gider `next`: Sonraki giriş öğesine gider `previous`: Önceki giriş öğesine gider `search`: Arama sonuçlarına gider `send`: Metin bilgisini gönderir
`spellcheck`	`spellcheck`	`boolean`	`false`
Yazım denetiminin etkinleştirilip etkinleştirilmeyeceği.
`inputmode`	`inputmode`	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
`input` öğesinin `inputmode` özelliği, sanal klavyenin türünü özelleştirmek için kullanılır. Olası değerler: `none`: Sanal klavye yok. Kendi klavye giriş denetimini uygularken kullanışlıdır `text`: Standart metin giriş klavyesi `decimal`: Ondalık sayı giriş klavyesi, sayıların yanı sıra ondalık nokta `.` veya binlik ayırıcı virgül `,` olabilir `numeric`: 0-9 arası sayıların gösterildiği sayısal klavye `tel`: Telefon numarası klavyesi, 0-9 arası sayılar, yıldız `*` veya kare `#` tuşlarını içerir `search`: Arama girişi için optimize edilmiş sanal klavye, gönder butonu genellikle `search` veya "Ara" olarak gösterilir `email`: E-posta adresi girişi için optimize edilmiş sanal klavye, genellikle `@ .` gibi tuşlar bulunur `url`: URL girişi için optimize edilmiş sanal klavye, genellikle `. / #` gibi tuşlar bulunur
	`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.
	`valueAsNumber`	`number`	-
Geçerli değeri alır ve `number` türüne dönüştürür; veya bir `number` türünde değer ayarlar. Değer `number` türüne dönüştürülemezse `NaN` döndürür.
`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
`select`		`void`
Metin alanındaki metni seçer.
`setSelectionRange`	`start: number` `end: number` `direction: 'forward' \| 'backward' \| 'none'`	`void`
Metin alanında belirli bir aralığı seçer.
`setRangeText`	`replacement: string` `start: number` `end: number` `selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`	`void`
Metin alanında belirli bir aralıktaki metni yeni metinle değiştirir.
`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`
Metin alanının değeri değiştiğinde ve odak kaybedildiğinde tetiklenir.
`input`
Metin alanının değeri 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 metin alanının temizlenmesi engellenebilir.

Slots

Ad
`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.
`toggle-password-button`
Parola gösterim durumu geçiş butonu.
`show-password-icon`
Parola göster durumunda, parola gösterim durumu geçiş butonundaki simge.
`hide-password-icon`
Parola gizle durumunda, parola gösterim durumu geçiş butonundaki simge.
`helper`
Alttaki yardım metni.

CSS Parts

Ad
`container`
Metin alanı kabı.
`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.
`label`
Üstteki etiket metni.
`input`
İçteki `<input>` veya `<textarea>` öğesi.
`clear-button`
Temizleme butonu.
`clear-icon`
Temizleme butonundaki simge.
`toggle-password-button`
Parola gösterim durumu geçiş butonu.
`show-password-icon`
Parola göster durumunda, parola gösterim durumu geçiş butonundaki simge.
`hide-password-icon`
Parola gizle durumunda, parola gösterim durumu geçiş butonundaki simge.
`supporting`
Alt yardımcı bilgi kabı; helper, error ve counter'ı içerir.
`helper`
Alttaki yardım metni.
`error`
Alttaki hata açıklama metni.
`counter`
Alttaki sağdaki karakter sayısı.

Önceki Bölüm

Tabs Sekme

Sonraki Bölüm

Tooltip Tooltip

TextFieldMetin Alanı

Kullanım Şekli

Örnekler

Şekil

Yardımcı Metin

Temizlenebilir

Metni Sağa Hizalama

Ön ve Arka Metin ve Simgeler

Salt Okunur Modu

Devre Dışı Durumu

Çok Satırlı Metin Alanı

Karakter Sayacı

Şifre Alanı

API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts