Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Pole tekstowe

Pola tekstowe są zazwyczaj używane w formularzach. Pola tekstowe w mdui oferują funkcje takie jak licznik znaków i walidacja formularzy.

Może być używany z systemem układu siatki do układania formularzy.

Sposób użycia

Inicjalizowane automatycznie po załadowaniu strony. W przypadku dynamicznie generowanych pól tekstowych należy wywołać mdui.mutation() w celu inicjalizacji.

Kolor

Użyj koloru akcentu.

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Pole tekstowe

Styl

Jednowierszowe pole tekstowe

To jest przykład najprostszego pola tekstowego:

Przykład

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

Stała etykieta

Przykład

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

Pływająca etykieta

Przykład

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

Stan wyłączony

Dodaj atrybut disabled do elementu .mdui-textfield-input, aby wyłączyć pole tekstowe.

Przykład

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

<!-- Stała etykieta -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">User Name</label>
  <input class="mdui-textfield-input" type="text" disabled />
</div>

<!-- Pływająca etykieta -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Email</label>
  <input class="mdui-textfield-input" type="email" disabled />
</div>

Wielowierszowe pole tekstowe

Zastąp znacznik input jednowierszowego pola tekstowego znacznikiem textarea, aby uzyskać wielowierszowe pole tekstowe. Wielowierszowe pola tekstowe automatycznie dostosowują swoją wysokość na podstawie wysokości treści.

Przykład

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

<!-- Stała etykieta -->
<div class="mdui-textfield">
  <label class="mdui-textfield-label">Subject</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Pływająca etykieta -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Message</label>
  <textarea class="mdui-textfield-input"></textarea>
</div>

<!-- Stan wyłączony -->
<div class="mdui-textfield mdui-textfield-floating-label">
  <label class="mdui-textfield-label">Disabled</label>
  <textarea class="mdui-textfield-input" disabled></textarea>
</div>

Dodaj atrybut rows do textarea, wtedy wysokość pola tekstowego będzie stała.

Przykład

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

Z tekstem pomocniczym

Dodaj element <div class="mdui-textfield-helper"></div> na końcu wewnątrz <div class="mdui-textfield"></div>, aby dodać tekst pomocniczy.

Przykład

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

Z ikoną

Przykład

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

<!-- Stała etykieta -->
<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>

<!-- Pływająca etykieta, wielowierszowe pole tekstowe -->
<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>

<!-- Stan wyłączony -->
<div class="mdui-textfield">
  <i class="mdui-icon material-icons">lock</i>
  <input class="mdui-textfield-input" type="text" placeholder="Disabled" disabled/>
</div>

Rozwijane pole tekstowe

Przykład

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

Funkcje

Walidacja formularza

mdui używa HTML5 do walidacji formularzy. Dodaj element <div class="mdui-textfield-error"></div> na końcu wewnątrz <div class="mdui-textfield"></div>, aby dodać komunikat o błędzie.

Jeśli zawiera zarówno komunikat o błędzie, jak i tekst pomocniczy, element tekstu pomocniczego musi zostać umieszczony za elementem komunikatu o błędzie.

Przykład

<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">Nazwa użytkownika nie może być pusta</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">Nieprawidłowy format adresu e-mail</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">Hasło musi mieć co najmniej 6 znaków i zawierać wielkie oraz małe litery</div>
  <div class="mdui-textfield-helper">Wprowadź hasło składające się z co najmniej 6 znaków, zawierające wielkie i małe litery</div>
</div>

Oprócz walidacji formularzy HTML5 można również użyć JavaScript do walidacji.

Dodaj klasę .mdui-textfield-invalid do pola tekstowego, które nie przeszło walidacji, i usuń ją po przejściu walidacji.

Przykład

<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">Nazwa użytkownika już istnieje</div>
</div>

Licznik znaków

Dodaj atrybut maxlength="" do elementu input, aby ograniczyć długość wprowadzanych znaków. mdui automatycznie doda licznik znaków w czasie rzeczywistym w prawym dolnym rogu pola tekstowego.

Przykład

<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">Nieprawidłowy format adresu e-mail</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>

Pola tekstowe generowane dynamicznie

Jeśli pole tekstowe jest generowane dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.

Jeśli dynamicznie zmodyfikujesz zawartość pola tekstowego, musisz wywołać metodę mdui.updateTextFields(), aby ponownie zainicjować pole tekstowe. Metoda ta może przyjąć jako parametr selektor CSS zawierający klasę .mdui-textfield, element DOM lub tablicę elementów DOM, co oznacza ponowną inicjalizację tylko określonych pól tekstowych. Jeśli nie zostaną przekazane żadne parametry, wszystkie pola tekstowe na stronie zostaną ponownie zainicjowane.

Lista klas CSS

Nazwa klasy	Opis
`.mdui-textfield`	Definiuje pole tekstowe.
`.mdui-textfield-floating-label`	Definiuje pole tekstowe z pływającą etykietą.
`.mdui-textfield-label`	Definiuje etykietę pola tekstowego.
`.mdui-textfield-input`	Definiuje kontrolkę wejściową pola tekstowego.
`.mdui-textfield-error`	Definiuje komunikat o błędzie walidacji formularza.
`.mdui-textfield-helper`	Definiuje tekst pomocniczy pola tekstowego.

Panel zwijany

Kontrolki wyboru