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

Przycisk

Styl przycisku może być używany na elementach <a>, <button> lub <input>.

Litery alfabetu łacińskiego w przyciskach będą automatycznie zamieniane na wielkie.

Sposób użycia

Komponent przycisku napisany jest w czystym CSS; wystarczy napisać kod HTML, aby działał.

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Przycisk

Styl

Przycisk płaski

Dodanie klasy .mdui-btn do elementu <a>, <button> lub <input> pozwala uzyskać styl płaskiego przycisku.

Przykład

<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>

Pływający przycisk

Dodanie klasy .mdui-btn-raised do płaskiego przycisku nadaje mu efekt pływania.

Przykład

<button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button>

Przycisk z ikoną

Dodanie klasy .mdui-btn-icon do płaskiego przycisku zmienia go w przycisk z ikoną.

Przykład

<button class="mdui-btn mdui-btn-icon">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

Przycisk zagęszczony

Przycisk zagęszczony jest nieco mniejszy od zwykłego przycisku i nadaje się do scenariuszy, w których głównymi sposobami wprowadzania danych są mysz i klawiatura. Wystarczy dodać klasę .mdui-btn-dense do standardowego przycisku.

Przykład

<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

Stan wyłączony

Dodaj atrybut disabled do przycisku, aby go wyłączyć.

Przykład

<button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled>
  <i class="mdui-icon material-icons">add</i>
</button>

Element blokowy

Dodanie klasy .mdui-btn-block do przycisku pozwala rozciągnąć go do 100% szerokości elementu nadrzędnego, a przycisk staje się elementem blokowym (block).

Przykład

<div class="mdui-row-xs-2">
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
</div>

Grupa przycisków

Umieszczenie wielu przycisków wewnątrz kontenera grupy przycisków .mdui-btn-group tworzy grupę przycisków. Dodanie klasy .mdui-btn-active do przycisku oznacza, że jest on w stanie zaznaczenia.

Przykład

<div class="mdui-btn-group">
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_left</i>
  </button>
  <button type="button" class="mdui-btn mdui-btn-active">
    <i class="mdui-icon material-icons">format_align_center</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_right</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_justify</i>
  </button>
</div>

Lista klas CSS

Nazwa klasy	Opis
`.mdui-btn`	Definiuje przycisk.
`.mdui-btn-raised`	Definiuje pływający przycisk.
`.mdui-btn-icon`	Definiuje przycisk z ikoną.
`.mdui-btn-block`	Ustawia przycisk jako element blokowy.
`.mdui-btn-group`	Kontener grupy przycisków.
`.mdui-btn-active`	Przycisk w grupie przycisków jest w stanie zaznaczenia.

Efekt ripple

Pływający przycisk akcji