snackbar

snackbar fonksiyonu, <mdui-snackbar> bileşeninin bir sarmalayıcısıdır. Bu fonksiyonu kullanarak, bileşenin HTML kodunu yazmanıza gerek kalmadan bir snackbar açabilirsiniz.

Kullanım

Fonksiyonu ihtiyacınıza göre içe aktarın:

import { snackbar } from 'mdui/functions/snackbar.js';

Kullanım örneği:

aç

<mdui-button class="example-button">aç</mdui-button>

<script type="module">
  import { snackbar } from "mdui/functions/snackbar.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    snackbar({
      message: "Fotoğraf arşivlendi",
      action: "Geri Al",
      onActionClick: () => console.log("işlem butonuna tıklandı")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

Fonksiyon bir Options nesnesini parametre olarak alır; dönüş değeri <mdui-snackbar> bileşen örneğidir.

Options

Öznitelik Adı	Tür	Varsayılan Değer
`message`	`string`	-
Snackbar'daki mesaj metni içeriği
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Snackbar'ın görüneceği konum. Varsayılan değer `bottom`'dur. Olası değerler: `top`: Üstte, ortalanmış `top-start`: Üstte, sola dayalı `top-end`: Üstte, sağa dayalı `bottom`: Altta, ortalanmış `bottom-start`: Altta, sola dayalı `bottom-end`: Altta, sağa dayalı
`action`	`string`	-
İşlem butonunun metni
`closeable`	`boolean`	`false`
Sağ tarafta kapatma butonu gösterilip gösterilmeyeceği
`messageLine`	`1 \| 2`	-
Mesaj metninin en fazla kaç satır gösterileceği. Varsayılan olarak satır sınırı yoktur. Olası değerler: `1`: Mesaj metni en fazla bir satır gösterilir `2`: Mesaj metni en fazla iki satır gösterilir
`autoCloseDelay`	`number`	`5000`
Ne kadar süre sonra otomatik olarak kapatılacağı (milisaniye cinsinden). 0 olarak ayarlanırsa, otomatik kapanmaz. Varsayılan olarak 5 saniye sonra otomatik kapanır.
`closeOnOutsideClick`	`boolean`	`false`
Snackbar dışındaki bir alana tıklandığında veya dokunulduğunda Snackbar'ın kapatılıp kapatılmayacağı
`queue`	`string`	-
Kuyruk adı. Varsayılan olarak kuyruk etkin değildir, fonksiyon birden çok kez çağrıldığında birden fazla snackbar aynı anda gösterilir. Bu parametreye bir kuyruk adı girilebilir. Aynı kuyruk adına sahip snackbar fonksiyonları, bir önceki snackbar kapatıldıktan sonra bir sonraki snackbar'ı açar.
`onClick`	`(snackbar: Snackbar) => void`	-
Snackbar'a tıklandığındaki geri çağırma fonksiyonu. Fonksiyon parametresi snackbar örneğidir, `this` snackbar örneğini işaret eder.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
İşlem butonuna tıklandığındaki geri çağırma fonksiyonu. Fonksiyon parametresi snackbar örneğidir, `this` snackbar örneğini işaret eder. Varsayılan olarak tıklandığında snackbar kapanır; eğer dönüş değeri `false` ise snackbar kapanmaz; eğer dönüş değeri bir promise ise, promise çözüldükten (resolve) sonra snackbar kapanır.
`onOpen`	`(snackbar: Snackbar) => void`	-
Snackbar görünmeye başladığındaki geri çağırma fonksiyonu. Fonksiyon parametresi snackbar örneğidir, `this` snackbar örneğini işaret eder.
`onOpened`	`(snackbar: Snackbar) => void`	-
Snackbar görünme animasyonu tamamlandığındaki geri çağırma fonksiyonu. Fonksiyon parametresi snackbar örneğidir, `this` snackbar örneğini işaret eder.
`onClose`	`(snackbar: Snackbar) => void`	-
Snackbar gizlenmeye başladığındaki geri çağırma fonksiyonu. Fonksiyon parametresi snackbar örneğidir, `this` snackbar örneğini işaret eder.
`onClosed`	`(snackbar: Snackbar) => void`	-
Snackbar gizlenme animasyonu tamamlandığındaki geri çağırma fonksiyonu. Fonksiyon parametresi snackbar örneğidir, `this` snackbar örneğini işaret eder.

Önceki Bölüm

prompt

Sonraki Bölüm

getTheme