dialog

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

Kullanım

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

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

Kullanım örneği:

aç

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

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Diyalog Başlığı",
      description: "Diyalog açıklaması",
      actions: [
        {
          text: "İptal",
        },
        {
          text: "TAMAM",
          onClick: () => {
            console.log("onaylandı");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

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

Options

Öznitelik Adı	Tür	Varsayılan Değer
`headline`	`string`	-
dialog'un başlığı
`description`	`string`	-
dialog'un açıklama metni
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
dialog'daki body içeriği, bir HTML dizesi, DOM öğesi veya JQ nesnesi olabilir.
`icon`	`string`	-
dialog'un üst kısmındaki Material Icons simge adı
`closeOnEsc`	`boolean`	`false`
ESC tuşuna basıldığında dialog'un kapatılıp kapatılmayacağı
`closeOnOverlayClick`	`boolean`	`false`
Kaplama katmanına (overlay) tıklandığında dialog'un kapatılıp kapatılmayacağı
`actions`	`Action[]`	-
Alt işlem butonları dizisi
`stackedActions`	`boolean`	`false`
Alt işlem butonlarının dikey olarak sıralanıp sıralanmayacağı
`queue`	`string`	-
Kuyruk adı. Varsayılan olarak kuyruk etkin değildir, fonksiyon birden çok kez çağrıldığında birden fazla dialog aynı anda gösterilir. Bu parametreye bir kuyruk adı girilebilir. Aynı kuyruk adına sahip dialog fonksiyonları, bir önceki dialog kapatıldıktan sonra bir sonraki dialog'u açar. `dialog()`, `alert()`, `confirm()`, `prompt()` fonksiyonlarının kuyruk adları aynıysa, bunlar da aynı kuyruğu paylaşacaktır.
`onOpen`	`(dialog: Dialog) => void`	-
dialog açılmaya başladığındaki geri çağırma fonksiyonu. Fonksiyon parametresi dialog örneğidir, `this` de dialog örneğini işaret eder.
`onOpened`	`(dialog: Dialog) => void`	-
dialog açılma animasyonu tamamlandığındaki geri çağırma fonksiyonu. Fonksiyon parametresi dialog örneğidir, `this` de dialog örneğini işaret eder.
`onClose`	`(dialog: Dialog) => void`	-
dialog kapanmaya başladığındaki geri çağırma fonksiyonu. Fonksiyon parametresi dialog örneğidir, `this` de dialog örneğini işaret eder.
`onClosed`	`(dialog: Dialog) => void`	-
dialog kapanma animasyonu tamamlandığındaki geri çağırma fonksiyonu. Fonksiyon parametresi dialog örneğidir, `this` de dialog örneğini işaret eder.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Kaplama katmanına (overlay) tıklandığındaki geri çağırma fonksiyonu. Fonksiyon parametresi dialog örneğidir, `this` de dialog örneğini işaret eder.

Action

Öznitelik Adı	Tür	Varsayılan Değer
`text`	`string`	-
Buton metni
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Butona tıklandığındaki geri çağırma fonksiyonu. Fonksiyon parametresi dialog örneğidir, `this` de dialog örneğini işaret eder. Varsayılan olarak butona tıklandığında dialog kapanır; eğer dönüş değeri `false` ise dialog kapanmaz; eğer dönüş değeri bir promise ise, promise çözüldükten (resolve) sonra dialog kapanır.

Chapitre précédent

Bibliothèque d'utilitaires jq

Chapitre suivant

alert