Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Metin Alanı

Metin alanları genellikle formlarda kullanılır. mdui metin alanları karakter sayma ve form doğrulama gibi özelliklere sahiptir.

Form düzeni için ızgara sistemi (grid layout system) ile birlikte kullanılabilir.

Kullanım

Sayfa yüklendikten sonra otomatik olarak başlatılacaktır. Dinamik olarak oluşturulan metin alanları için başlatma işlemi için mdui.mutation() çağrılması gerekir.

Renk

Vurgu rengini kullan.

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Metin Alanları

Stil

Tek satırlı metin alanı

İşte en basit metin alanı örneği:

Örnek

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" placeholder="User Name"/>
</div>

Sabit etiket

Örnek

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text"/>
</div>

Kayan etiket

Örnek

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" />
</div>

Devre dışı bırakılmış durum

.mdui-textfield-input öğesine disabled özniteliği ekleyerek metin alanını devre dışı bırakabilirsiniz.

Örnek

<div class="mdui-textfield">
  <input class="mdui-textfield-input" type="text" disabled placeholder="User Name"/>
</div>

<!-- Sabit etiket -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Kayan etiket -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Çok satırlı metin alanı

Tek satırlı metin alanının input etiketini textarea etiketi ile değiştirerek çok satırlı metin alanına dönüştürebilirsiniz. Çok satırlı metin alanı, içeriğin yüksekliğine göre otomatik olarak yüksekliğini ayarlayacaktır.

Örnek

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" placeholder="Description"></textarea>
</div>

<!-- Sabit etiket -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Kayan etiket -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Devre dışı bırakılmış durum -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

textarea üzerine rows özniteliği eklendiğinde, metin alanının yüksekliği sabit kalacaktır.

Örnek

<div class="mdui-textfield">
  <textarea class="mdui-textfield-input" rows="4" placeholder="Message"></textarea>
</div>

Yardımcı metin içerir

<div class="mdui-textfield"></div> öğesinin sonuna <div class="mdui-textfield-helper"></div> öğesi ekleyerek yardımcı metin ekleyebilirsiniz.

Örnek

<div class="mdui-textfield">
  <input type="email" class="mdui-textfield-input" placeholder="Email" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

Simge içerir

Örnek

<div class="mdui-textfield">
  <i class="mdui-icon material-icons">email</i>
  <input class="mdui-textfield-input" type="email" placeholder="Email"/>
</div>

<!-- Sabit etiket -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">account_circle</i>
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-helper">Helper Text</div>
</div>

<!-- Kayan etiket, çok satırlı metin alanı -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <i class="mdui-icon material-icons">textsms</i>
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Devre dışı bırakılmış durum -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Genişletilebilir metin alanı

Örnek

<div class="mdui-textfield mdui-textfield-expandable">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

<div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
  <button class="mdui-textfield-icon mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </button>
  <input class="mdui-textfield-input" type="text" placeholder="Search"/>
  <button class="mdui-textfield-close mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">close</i>
  </button>
</div>

Özellikler

Form doğrulama

mdui, form doğrulama için HTML5 kullanır. Hata mesajı eklemek için <div class="mdui-textfield"></div> öğesinin sonuna <div class="mdui-textfield-error"></div> öğesi ekleyebilirsiniz.

Aynı anda hem hata mesajı hem de yardımcı metin içeriyorsa, yardımcı metin öğesinin hata mesajı öğesinden sonra yerleştirilmesi gerekir.

Örnek

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" required />
  <div class="mdui-textfield-error">Kullanıcı adı boş olamaz</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" required />
  <div class="mdui-textfield-error">Geçersiz e-posta formatı</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Password</label>
  <input
    class="mdui-textfield-input"
    type="text"
    pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$$"
    required
  />
  <div class="mdui-textfield-error">Şifre en az 6 karakter olmalı ve büyük-küçük harf içermelidir</div>
  <div class="mdui-textfield-helper">Lütfen en az 6 karakterden oluşan ve hem büyük hem de küçük harf içeren bir şifre girin</div>
</div>

HTML5 form doğrulamasına ek olarak, doğrulama için JavaScript de kullanabilirsiniz.

Doğrulamadan geçemeyen metin alanına .mdui-textfield-invalid sınıfını ekleyin ve doğrulama başarılı olduğunda bu sınıfı kaldırın.

Örnek

<div class="mdui-textfield mdui-textfield-invalid">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" />
  <div class="mdui-textfield-error">Kullanıcı adı zaten var</div>
</div>

Karakter sayımı

Giriş karakter uzunluğunu sınırlamak için input öğesine maxlength="" özniteliği ekleyebilirsiniz; mdui metin alanının sağ alt köşesine otomatik olarak gerçek zamanlı karakter sayacı ekleyecektir.

Örnek

<div class="mdui-textfield">
  <label class="mdui-textfield-label">User name</label>
  <input class="mdui-textfield-input" type="text" maxlength="20" />
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" maxlength="60" />
  <div class="mdui-textfield-error">Geçersiz e-posta formatı</div>
</div>

<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input" maxlength="140"></textarea>
</div>

Dinamik olarak oluşturulan metin alanları

Metin alanınız dinamik olarak oluşturulmuşsa, başlatma işlemi için mdui.mutation() çağrılması gerekir.

Metin alanı içeriğini dinamik olarak değiştirdiyseniz, metin alanlarını yeniden başlatmak için mdui.updateTextFields() yöntemini çağırmanız gerekir. Bu yöntem parametre olarak .mdui-textfield sınıfına sahip bir CSS seçicisi, bir DOM öğesi veya DOM öğelerinden oluşan bir dizi kabul edebilir; bu, yalnızca belirtilen metin alanlarının yeniden başlatılacağı anlamına gelir. Eğer parametre girilmezse, sayfadaki tüm metin alanları yeniden başlatılır.

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-textfield`	Bir metin alanı tanımlar.
`.mdui-textfield-floating-label`	Kayan etiketli bir metin alanı tanımlar.
`.mdui-textfield-label`	Metin alanının etiketini tanımlar.
`.mdui-textfield-input`	Metin alanının giriş kutusunu tanımlar.
`.mdui-textfield-error`	Form doğrulaması için hata mesajını tanımlar.
`.mdui-textfield-helper`	Metin alanının yardımcı metnini tanımlar.

Collapse Paneli

Seçim Kontrolleri