Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Textové pole

Textová pole se obvykle používají ve formulářích. Textová pole v mdui podporují funkce, jako je počítání znaků, validace formuláře a další.

Lze je kombinovat se systémem mřížky pro rozvržení formuláře.

Způsob volání

Textová pole se po načtení stránky inicializují automaticky. U dynamicky generovaných textových polí musíte pro inicializaci zavolat mdui.mutation().

Barva

Použít akcentní barvu.

Související čtení

Designové zásady Material Design: Komponenty - Textové pole

Styl

Jednořádkové textové pole

Toto je příklad nejjednoduššího textového pole:

Příklad

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

Pevný štítek

Příklad

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

Plovoucí štítek

Příklad

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

Zakázaný stav

Přidáním atributu disabled k prvku .mdui-textfield-input textové pole zakážete.

Příklad

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

<!-- Pevný štítek -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Plovoucí štítek -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Víceřádkové textové pole

Nahrazením tagu input u jednořádkového textového pole tagem textarea vytvoříte víceřádkové textové pole. To automaticky přizpůsobí svou výšku obsahu.

Příklad

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

<!-- Pevný štítek -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Plovoucí štítek -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Zakázaný stav -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

Přidáním atributu rows k textarea zajistíte, že výška textového pole zůstane pevná.

Příklad

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

S pomocným textem

Pomocný text přidáte vložením prvku <div class="mdui-textfield-helper"></div> na konec uvnitř <div class="mdui-textfield"></div>.

Příklad

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

S ikonou

Příklad

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

<!-- Pevný štítek -->
<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>

<!-- Plovoucí štítek, víceřádkové textové pole -->
<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>

<!-- Zakázaný stav -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Rozbalitelné textové pole

Příklad

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

Funkce

Ověřování formuláře

mdui využívá pro ověřování formulářů HTML5. Chybovou zprávu přidáte vložením prvku <div class="mdui-textfield-error"></div> na konec uvnitř <div class="mdui-textfield"></div>.

Pokud textové pole obsahuje jak chybovou zprávu, tak pomocný text, musí být prvek s pomocným textem umístěn až za prvkem s chybovou zprávou.

Příklad

<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">Uživatelské jméno nesmí být prázdné</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">Nesprávný formát e-mailu</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">Heslo musí mít alespoň 6 znaků a obsahovat velká i malá písmena</div>
  <div class="mdui-textfield-helper">Zadejte prosím heslo o délce alespoň 6 znaků obsahující velká i malá písmena</div>
</div>

Kromě ověřování pomocí HTML5 můžete k validaci použít i JavaScript.

Na textové pole, které neprošlo validací, přidejte třídu .mdui-textfield-invalid. Po úspěšném ověření tuto třídu odstraňte.

Příklad

<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">Uživatelské jméno již existuje</div>
</div>

Počítání znaků

Přidáním atributu maxlength="" k prvku input omezíte délku zadávaného textu. mdui v takovém případě automaticky zobrazí počítadlo znaků v pravém dolním rohu.

Příklad

<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">Nesprávný formát e-mailu</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>

Dynamicky generovaná textová pole

Pokud je vaše textové pole dynamicky generováno, musíte pro inicializaci zavolat mdui.mutation().

Pokud jste dynamicky změnili obsah textového pole, musíte pro jeho znovu inicializaci zavolat metodu mdui.updateTextFields(). Tato metoda přijímá jako parametr CSS selektor obsahující třídu .mdui-textfield, DOM prvek nebo pole DOM prvků, což znamená, že se znovu inicializují pouze zadaná pole. Pokud není předán žádný parametr, budou znovu inicializována všechna textová pole na stránce.

Seznam CSS tříd

Název třídy	Popis
`.mdui-textfield`	Definuje textové pole.
`.mdui-textfield-floating-label`	Definuje textové pole s plovoucím štítkem.
`.mdui-textfield-label`	Definuje štítek textového pole.
`.mdui-textfield-input`	Definuje vstupní pole textového pole.
`.mdui-textfield-error`	Definuje chybovou zprávu pro ověřování formuláře.
`.mdui-textfield-helper`	Definuje pomocný text textového pole.

Sbalovací panel

Ovládací prvky výběru