DialogDiyalog

Diyalog, kullanıcının işlem akışında önemli bildirimler sağlamak için kullanılır.

Bu bileşeni doğrudan kullanmanın yanı sıra, mdui ayrıca dört fonksiyon sunar: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Bu fonksiyonlar, Dialog bileşeninin kullanımını kolaylaştırabilir.

Kullanım Şekli

Bileşeni ihtiyacınıza göre içe aktarın:

import 'mdui/components/dialog.js';

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

import type { Dialog } from 'mdui/components/dialog.js';

Kullanım örneği:

Diyalog Kapat

Diyalogu Aç

<mdui-dialog class="example-dialog">
  Diyalog
  <mdui-button>Kapat</mdui-button>
</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Örnekler

Kaplamaya Tıklayarak Kapatma

close-on-overlay-click özniteliğini ekleyin, kaplama katmanına tıklandığında diyalog kapanacaktır.

Diyalog

Diyalogu Aç

<mdui-dialog close-on-overlay-click class="example-overlay">Diyalog</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-overlay");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

ESC Tuşuna Basarak Kapatma

close-on-esc özniteliğini ekleyin, ESC tuşuna basıldığında diyalog kapanacaktır.

Diyalog

Diyalogu Aç

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-esc"
>Diyalog</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-esc");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

Tam Ekran

fullscreen özniteliğini ekleyin, diyalog tam ekran olarak görüntülenecektir.

Diyalog Kapat

Diyalogu Aç

<mdui-dialog fullscreen class="example-fullscreen">
  Diyalog
  <mdui-button>Kapat</mdui-button>
</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-fullscreen");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Kaynak Kodu

Simge

icon özniteliğini ayarlayın, diyalogun üst kısmına bir Material Icons simgesi eklenecektir.

Diyalog

Diyalogu Aç

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Diyalog</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

Ayrıca icon slot'u aracılığıyla diyalogun üst kısmına bir simge öğesi de ekleyebilirsiniz.

Diyalog

Diyalogu Aç

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Diyalog
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

Başlık ve Açıklama

Diyalogun başlığını ve açıklamasını headline ve description öznitelikleri ile ayarlayın.

Diyalogu Aç

<mdui-dialog
  headline="Seçilen resimler silinsin mi?"
  description="Resimler, hesabınızdan ve tüm senkronize cihazlardan kalıcı olarak kaldırılacaktır."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

Ayrıca headline ve description slot'ları aracılığıyla diyalogun başlık öğesini ve açıklama öğesini de ayarlayabilirsiniz.

Seçilen resimler silinsin mi? Resimler, hesabınızdan ve tüm senkronize cihazlardan kalıcı olarak kaldırılacaktır.

Diyalogu Aç

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Seçilen resimler silinsin mi?</span>
  <span slot="description">Resimler, hesabınızdan ve tüm senkronize cihazlardan kalıcı olarak kaldırılacaktır.</span>
</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

Alt İşlem Butonları

Alt işlem butonlarını action slot'u aracılığıyla ekleyebilirsiniz.

İptal

Sil

Diyalogu Aç

<mdui-dialog
  close-on-overlay-click
  headline="Seçilen resimler silinsin mi?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">İptal</mdui-button>
  <mdui-button slot="action" variant="tonal">Sil</mdui-button>
</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-action");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

stacked-actions özniteliğini ekleyin, alt işlem butonları dikey olarak sıralanacaktır.

Hız artırmayı aç

Hayır, teşekkürler

Diyalogu Aç

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Konum servisi kullanılsın mı?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Hız artırmayı aç</mdui-button>
  <mdui-button slot="action" variant="text">Hayır, teşekkürler</mdui-button>
</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

Üst İçerik

Diyalogun üst kısmındaki içeriği header slot'u aracılığıyla ayarlayabilirsiniz.

Başlık

Kaydet

Diyalogu Aç

<mdui-dialog close-on-overlay-click class="example-header">
  <mdui-top-app-bar slot="header">
    <mdui-button-icon icon="close"></mdui-button-icon>
    <mdui-top-app-bar-title>Başlık</mdui-top-app-bar-title>
    <mdui-button variant="text">Kaydet</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Diyalogu Aç</mdui-button>

<script>
  const dialog = document.querySelector(".example-header");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`icon`	`icon`	`string`	-
Üstteki Material Icons simge adı. `slot="icon"` ile de ayarlanabilir.
`headline`	`headline`	`string`	-
Başlık. `slot="headline"` ile de ayarlanabilir.
`description`	`description`	`string`	-
Başlığın altındaki metin. `slot="description"` ile de ayarlanabilir.
`open`	`open`	`boolean`	`false`
Diyaloğun açık olup olmadığı.
`fullscreen`	`fullscreen`	`boolean`	`false`
Diyaloğun tam ekran görüntülenip görüntülenmeyeceği.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
ESC tuşuna basılarak diyaloğun kapatılmasına izin verilip verilmeyeceği.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Kaplama katmanına tıklanarak diyaloğun kapatılmasına izin verilip verilmeyeceği.
`stacked-actions`	`stackedActions`	`boolean`	`false`
Alttaki işlem butonlarının dikey olarak düzenlenip düzenlenmeyeceği.

Olaylar

Ad
`open`
Diyalog açılmaya başladığında tetiklenir. `event.preventDefault()` çağrılarak diyaloğun açılması engellenebilir.
`opened`
Diyalog açılma animasyonu tamamlandığında tetiklenir.
`close`
Diyalog kapanmaya başladığında tetiklenir. `event.preventDefault()` çağrılarak diyaloğun kapanması engellenebilir.
`closed`
Diyalog kapanma animasyonu tamamlandığında tetiklenir.
`overlay-click`
Kaplama katmanına tıklandığında tetiklenir.

Slots

Ad
`header`
Üst öğe, varsayılan olarak `icon` slotu ve `headline` slotunu içerir.
`icon`
Üst simge.
`headline`
Üst başlık.
`description`
Başlığın altındaki metin.
Varsayılan
Diyalog gövde içeriği.
`action`
Alt işlem çubuğundaki öğeler.

CSS Parts

Ad
`overlay`
Kaplama katmanı.
`panel`
Diyalog kabı.
`header`
Diyalog başlık kısmı; simge ve başlığı içerir.
`icon`
Üst simge, başlık kısmında bulunur.
`headline`
Üst başlık, başlık kısmında bulunur.
`body`
Diyalog gövde kısmı.
`description`
Alt metin kısmı, gövde kısmında bulunur.
`action`
Alt işlem butonu.

CSS Custom Property

Ad
`--shape-corner`
Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
`--z-index`
Bileşenin CSS `z-index` değeri.

Önceki Bölüm

Collapse Collapse

Sonraki Bölüm

Divider Ayırıcı