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

Yüzen İşlem Butonu

Yüzen işlem butonu, UI üzerinde yüzen dairesel bir simgedir ve alt menülerin açılması, animasyonların gösterilmesi ve gizlenmesi gibi dinamik efektlere sahip olabilir.

Kullanım

Öznitelik ile Çağır
JavaScript ile Çağır

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Yüzen İşlem Butonu

Stil

Yüzen İşlem Butonu

Bir öğeye .mdui-fab sınıfını eklemek, onu bir yüzen işlem butonu yapar.

Örnek

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

Ayrıca .mdui-fab-mini sınıfını eklemek, onu mini bir yüzen işlem butonuna dönüştürür.

Örnek

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

Gizle/Göster animasyonu

Yüzen işlem butonuna .mdui-fab-hide sınıfını eklemek, butonu animasyonlu bir şekilde gizler; bu sınıfı kaldırmak ise butonu animasyonlu bir şekilde gösterir.

Örnek

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

        <button class="mdui-btn" id="fab-animation-show">show</button>
        <button class="mdui-btn" id="fab-animation-hide">hide</button>

        <script>
          var fab = document.getElementById('fab-animation');
          document
            .getElementById('fab-animation-show')
            .addEventListener('click', function () {
              fab.classList.remove('mdui-fab-hide');
            });
          document
            .getElementById('fab-animation-hide')
            .addEventListener('click', function () {
              fab.classList.add('mdui-fab-hide');
            });
        </script>

Sağ alt köşeye sabitleme

Yüzen işlem butonuna .mdui-fab-fixed sınıfını eklemek, butonu pencerenin sağ alt köşesine sabitler.

<button class="mdui-fab mdui-fab-fixed mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

Çalıştır

Hızlı seçim menüsü

HTML Yapısı

Bu buton her zaman pencerenin sağ alt köşesinde sabittir. Fareyle üzerine gelindiğinde veya tıklandığında yukarı doğru bir hızlı seçim menüsü açılır.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Varsayılan olarak gösterilen simge -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Hızlı seçim menüsü açılmaya başladığında bu simgeye sorunsuz bir şekilde geçiş yapın; simge değiştirme gerekmiyorsa bu öğe atlanabilir -->
    <i class="mdui-icon mdui-fab-opened material-icons">add</i>
  </button>
  <div class="mdui-fab-dial">
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink">
      <i class="mdui-icon material-icons">backup</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red">
      <i class="mdui-icon material-icons">bookmark</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange">
      <i class="mdui-icon material-icons">access_alarms</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue">
      <i class="mdui-icon material-icons">touch_app</i>
    </button>
  </div>
</div>

Öznitelik ile Çağır

Bu yöntemi kullanırken JavaScript kodu yazmanıza gerek yoktur. Eklentiyi etkinleştirmek için .mdui-fab-wrapper içeren öğeye mdui-fab="options" eklemeniz yeterlidir.

<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
  ......
</div>

JavaScript ile Çağır

Bileşeni örnekleme:

// selector, CSS seçicisi veya DOM öğesi veya HTML dizesidir
// options, eklentinin parametreleridir, aşağıdaki parametre listesine bakın
var inst = new mdui.Fab(selector, options);

Çalıştır

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`trigger`	`string`	`hover`	Tetikleme yöntemi. `hover`: Fareyle üzerine gelindiğinde tetiklenir. `click`: Tıklandığında tetiklenir.

Yöntem

Yöntem Adı	Açıklama
`open()`	Hızlı seçim menüsünü açar.
`close()`	Hızlı seçim menüsünü kapatır.
`toggle()`	Hızlı seçim menüsünün açılış durumunu değiştirir.
`show()`	Tüm yüzen işlem butonunu animasyonlu bir şekilde gösterir.
`hide()`	Tüm yüzen işlem butonunu animasyonlu bir şekilde gizler.
`getState()`	Hızlı seçim menüsünün mevcut açılış durumunu döndürür. Toplam dört durum içerir (`opening`, `opened`, `closing`, `closed`).

Olay

Olay Adı	Açıklama	Hedef	Parametreler
`open.mdui.fab`	Hızlı seçim menüsü açılma animasyonuna başladığında olay tetiklenir.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst`: Örnek
`opened.mdui.fab`	Hızlı seçim menüsü açılma animasyonunu tamamladığında olay tetiklenir.
`close.mdui.fab`	Hızlı seçim menüsü kapanma animasyonuna başladığında olay tetiklenir.
`closed.mdui.fab`	Hızlı seçim menüsü kapanma animasyonunu tamamladığında olay tetiklenir.

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-fab`	Yüzen işlem butonunu tanımlar.
`.mdui-fab-mini`	Mini yüzen işlem butonunu tanımlar.
`.mdui-fab-hide`	Yüzen işlem butonunu animasyonlu bir şekilde gizler.
`.mdui-fab-fixed`	Yüzen işlem butonunu sağ alt köşeye sabitler.
`.mdui-fab-wrapper`	Hızlı seçim menüsüne sahip yüzen işlem butonunun dış öğesi.
`.mdui-fab-opened`	Hızlı seçim menüsüne sahip yüzen işlem butonu menüyü açtıktan sonra bu simgeye geçer.
`.mdui-fab-dial`	Hızlı seçim menüsüne sahip yüzen işlem butonunun menü dış öğesi.

Buton

Seçim Kutusu