A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Szövegmező

A szövegmezőket jellemzően űrlapokon használják. Az mdui szövegmezői olyan funkciókkal rendelkeznek, mint a karakterszámlálás és az űrlapellenőrzés.

Az űrlap elrendezéséhez használható a rácsrendszerrel.

Használat

Az oldal betöltése után automatikusan inicializálódnak. Dinamikusan létrehozott szövegmezők esetén hívni kell az mdui.mutation() metódust az inicializáláshoz.

Színek

A kiemelő szín használata.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Szövegmező (Text Fields)

Stílus

Egysoros szövegmező

Íme egy egyszerű szövegmező példa:

Példa

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

Rögzített címke

Példa

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

Lebegő címke

Példa

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

Letiltott állapot

Adja hozzá a disabled attribútumot az .mdui-textfield-input elemhez a szövegmező letiltásához.

Példa

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

<!-- Rögzített címke -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Lebegő címke -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Többsoros szövegmező

Cserélje le az egysoros szövegmező input címkéjét textarea címkére a többsoros szövegmezőhöz. A többsoros szövegmező automatikusan beállítja a magasságát a tartalom alapján.

Példa

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

<!-- Rögzített címke -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Lebegő címke -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Letiltott állapot -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

Adja hozzá a rows attribútumot a textarea elemhez a rögzített magasságú szövegmezőhöz.

Példa

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

Súgószöveggel

Súgószöveg hozzáadásához adjon hozzá egy <div class="mdui-textfield-helper"></div> elemet a <div class="mdui-textfield"></div> belső végéhez.

Példa

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

Ikonnal

Példa

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

<!-- Rögzített címke -->
<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>

<!-- Lebegő címke, többsoros szövegmező -->
<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>

<!-- Letiltott állapot -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Kiterjeszthető szövegmező

Példa

<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>

Funkciók

Űrlapellenőrzés

Az mdui a HTML5-öt használja az űrlapellenőrzéshez. Hibaüzenet megjelenítéséhez adjon hozzá egy <div class="mdui-textfield-error"></div> elemet a <div class="mdui-textfield"></div> belső végéhez.

Ha hibaüzenet és súgószöveg is szerepel, a súgószöveg elemet a hibaüzenet elem után kell elhelyezni.

Példa

<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">Felhasználónév nem lehet üres</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">Érvénytelen e-mail formátum</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">A jelszónak legalább 6 karakterből kell állnia, és tartalmaznia kell kis- és nagybetűket</div>
  <div class="mdui-textfield-helper">Kérjük, adjon meg egy legalább 6 karakter hosszú jelszót, amely tartalmaz kis- és nagybetűket</div>
</div>

A HTML5 űrlapellenőrzés mellett JavaScriptet is használhat az ellenőrzéshez.

Adja hozzá az .mdui-textfield-invalid osztályt az érvénytelen szövegmezőhöz, majd távolítsa el az osztályt az ellenőrzés sikere után.

Példa

<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">A felhasználónév már létezik</div>
</div>

Karakterszámlálás

Adja hozzá a maxlength="" attribútumot az input elemhez a beviteli hossz korlátozásához. Az mdui automatikusan valós idejű karakterszámlálót jelenít meg a szövegmező jobb alsó sarkában.

Példa

<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">Érvénytelen e-mail formátum</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>

Dinamikusan létrehozott szövegmező

Ha a szövegmező dinamikusan jön létre, az inicializáláshoz hívni kell az mdui.mutation() metódust.

Ha dinamikusan módosítja a szövegmező tartalmát, hívja meg az mdui.updateTextFields() metódust a szövegmező újrainicializálásához. Ez a metódus egy .mdui-textfield osztályú CSS-szelektort, egy DOM-elemet vagy DOM-elemek tömbjét is elfogadhat paraméterként. Ha nem ad meg paramétert, az oldal összes szövegmezője újrainicializálódik.

CSS osztályok listája

Osztálynév	Leírás
`.mdui-textfield`	Szövegmező meghatározása.
`.mdui-textfield-floating-label`	Lebegő címkés szövegmező meghatározása.
`.mdui-textfield-label`	Szövegmező címkéjének meghatározása.
`.mdui-textfield-input`	Szövegmező beviteli mezőjének meghatározása.
`.mdui-textfield-error`	Űrlapellenőrzési hibaüzenet meghatározása.
`.mdui-textfield-helper`	Szövegmező súgószövegének meghatározása.

Összecsukható panel

Választó vezérlők