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

Diyalog

mdui içindeki diyaloglar, kullanıcılardan bilgi istemek, onları bilgilendirmek veya uyarmak için sıkça kullanılan çok amaçlı bileşenlerdir.

Aynı anda sadece bir diyalog gösterilebilir. Mevcut diyalog henüz kapatılmadan yenisi açılırsa, yeni diyalog kuyruğa eklenir ve mevcut olan kapandıktan sonra açılır.

Kullanım

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

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Diyaloglar

Stil

Standart diyalog

Bu standart bir diyalogdur.

Örnek

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

Başlık çubuğu yok

Bu diyalog başlık çubuğu içermez.

Örnek

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

Dikey butonlar

Diyalogun altındaki butonlar varsayılan olarak yatay sıralanır. Butonları dikey sıralamak için <div class="mdui-dialog-actions"></div> üzerine .mdui-dialog-actions-stacked sınıfını eklemeniz yeterlidir.

Örnek

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

Sabit başlık ve butonlar

Diyalog içeriği diyalog yüksekliğini aştığında, .mdui-dialog-content içinde bir kaydırma çubuğu oluşur.

Eğer .mdui-dialog-title ve .mdui-dialog-actions, .mdui-dialog-content içine yerleştirilirse, başlık ve alt butonlar içerikle birlikte kayar; aksi takdirde başlık ve butonlar sırasıyla üstte ve altta sabit kalır.

Örnek

<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

Özel içerik

Diyalog içinde sadece <div class="mdui-dialog"></div> zorunludur, bu elemanın içeriği herhangi bir HTML ile değiştirilebilir.

Aşağıdaki örnekte diyalog içine bir sekme yerleştirilmiştir:

Örnek

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

Kullanım

Öznitelik ile Çağır

Bu yöntemi kullanırken JavaScript kodu yazmanıza gerek yoktur. Bir denetim öğesine (örneğin bir düğmeye) mdui-dialog="options" özniteliğini eklemeniz yeterlidir. Özel öznitelikler aracılığıyla çağrıldığında, kontrol edilen diyaloğu belirtmek için CSS seçicisi değerine sahip bir target parametresi eklenmelidir.

Örnek

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

Diyalog içindeki elemanlara olayları bağlamak için bazı öznitelikler eklenebilir. Bu öznitelikler JavaScript ile çağrıldığında da kullanılabilir.

Öznitelik	Açıklama
`mdui-dialog-close`	Bu elemana tıklandığında `close.mdui.dialog` olayı tetiklenir ve diyalog kapatılır.
`mdui-dialog-cancel`	Bu elemana tıklandığında `cancel.mdui.dialog` olayı tetiklenir.
`mdui-dialog-confirm`	Bu elemana tıklandığında `confirm.mdui.dialog` olayı tetiklenir.

JavaScript ile Çağır

Bileşeni örnekleme:

// selector: Diyalog için CSS seçicisi, DOM elemanı veya HTML dizesi
// options: Yapılandırma parametreleri, aşağıdaki parametre listesine bakın
var inst = new mdui.Dialog(selector, options);

Çalıştır

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`overlay`	`boolean`	`true`	Diyalog açıldığında maske gösterilip gösterilmeyeceği.
`history`	`boolean`	`true`	Diyalog açıldığında bir URL hash eklenip eklenmeyeceği. true ise, diyalog açıldıktan sonra tarayıcının geri butonu veya Android geri tuşu ile kapatılabilir.
`modal`	`boolean`	`false`	Diyalogun modal olup olmayacağı. false ise diyalog dışına tıklandığında kapatılır, aksi takdirde kapatılmaz.
`closeOnEsc`	`boolean`	`true`	Esc tuşuna basıldığında diyalog kapatılıp kapatılmayacağı.
`closeOnCancel`	`boolean`	`true`	İptal butonuna basıldığında diyalog kapatılıp kapatılmayacağı.
`closeOnConfirm`	`boolean`	`true`	Onay butonuna basıldığında diyalog kapatılıp kapatılmayacağı.
`destroyOnClosed`	`boolean`	`false`	Diyalog kapatıldıktan sonra otomatik olarak yok edilip edilmeyeceği.

Yöntem

Yöntem Adı	Açıklama
`open()`	Diyaloga açar.
`close()`	Diyalogu kapatır.
`toggle()`	Diyalogun açık durumunu değiştirir (açıksa kapatır, kapalıysa açar).
`getState()`	Diyalog durumunu alır. Toplam dört durum içerir (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Diyalogu yok eder.
`handleUpdate()`	Diyalog konumunu ve kaydırma çubuğu yüksekliğini yeniden ayarlar. Diyalog açıldıktan sonra içeriği değiştirilirse bu yöntem çağrılmalıdır.

Olay

Olay Adı	Açıklama	Hedef	Parametreler
`open.mdui.dialog`	Diyalog açılma animasyonu başladığında tetiklenen olay.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: Örnek
`opened.mdui.dialog`	Diyalog açılma animasyonu bittiğinde tetiklenen olay.
`close.mdui.dialog`	Diyalog kapanma animasyonu başladığında tetiklenen olay.
`closed.mdui.dialog`	Diyalog kapanma animasyonu bittiğinde tetiklenen olay.
`cancel.mdui.dialog`	İptal butonuna basıldığında tetiklenen olay.
`confirm.mdui.dialog`	Onay butonuna basıldığında tetiklenen olay.

Önceden tanımlanmış diyaloglar

mdui, yaygın senaryolar için birkaç önceden tanımlanmış diyalog fonksiyonu sunar. Bu diyaloglar sadece JavaScript ile çağrılır ve HTML kodu yazmanıza gerek yoktur.

Bu fonksiyonların tümü bir diyalog örneği döndürür.

mdui.dialog()

Başlık, içerik, butonlar vb.nin özelleştirilebildiği bir diyalog açar. Bu yöntem genel amaçlıdır; mdui.alert(), mdui.confirm(), mdui.prompt() yöntemleri bu yöntem üzerine inşa edilmiştir.

mdui.dialog(options)

Örnek

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'İptal'
    },
    {
      text: 'Onay',
      onClick: function(inst){
        mdui.alert('Onay butonuna tıklama geri çağırması');
      }
    }
  ]
});

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`title`	`string`		Diyalogun başlığı.
`content`	`string`		Diyalogun içeriği.
`buttons`	`array`		Buton dizisi; her buton, buton parametrelerini içeren bir nesnedir (aşağıdaki tabloya bakın).
`stackedButtons`	`boolean`	`false`	Butonların dikey sıralanıp sıralanmayacağı.
`cssClass`	`string`		`.mdui-dialog` elemanına eklenen CSS sınıfı.
`history`	`boolean`	`true`	`hashchange` olayının dinlenip dinlenmeyeceği. true ise, Android geri tuşu veya tarayıcı geri butonu ile diyalog kapatılabilir.
`overlay`	`boolean`	`true`	Diyalog açıldıktan sonra maske gösterilip gösterilmeyeceği.
`modal`	`boolean`	`false`	Diyalogun modal olup olmayacağı. false ise diyalog dışına tıklandığında kapatılır, aksi takdirde kapatılmaz.
`closeOnEsc`	`boolean`	`true`	Esc tuşuna basıldığında diyalog kapatılıp kapatılmayacağı.
`destroyOnClosed`	`boolean`	`true`	Diyalog kapatıldıktan sonra otomatik olarak yok edilip edilmeyeceği.
`onOpen`	`function`		Açılma animasyonu başladığındaki geri çağırma fonksiyonu. Parametre diyalog örneğidir.
`onOpened`	`function`		Açılma animasyonu bittiğindeki geri çağırma fonksiyonu. Parametre diyalog örneğidir.
`onClose`	`function`		Kapanma animasyonu başladığındaki geri çağırma fonksiyonu. Parametre diyalog örneğidir.
`onClosed`	`function`		Kapanma animasyonu bittiğindeki geri çağırma fonksiyonu. Parametre diyalog örneğidir.

Buton parametreleri:

Parametre Adı	Tür	Varsayılan	Açıklama
`text`	`string`		Buton metni.
`bold`	`boolean`	`false`	Buton metninin kalın (bold) olup olmayacağı.
`close`	`boolean`	`true`	Butona tıklandıktan sonra diyalog kapatılıp kapatılmayacağı.
`onClick`	`function`		Butonun geri çağırma fonksiyonu.

mdui.alert()

Başlık, içerik ve bir onay butonu içerebilen bir uyarı kutusu açar:

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

Örnek

// Sadece metin
mdui.alert('content');

// Başlık ve metin
mdui.alert('content', 'title');

// Geri çağırma ile
mdui.alert('content', 'title', function() {
  mdui.alert('Onay butonuna tıklandı');
});

// Metin ve geri çağırma ile
mdui.alert('content', function() {
  mdui.alert('Onay butonuna tıklandı');
});

text: Metin
title: (İsteğe bağlı) Başlık
onConfirm: (İsteğe bağlı) Onay butonuna tıklandığında geri çağırma. Parametre diyalog örneğidir.
options: (İsteğe bağlı) Parametreler, aşağıdaki tabloya bakın.

Parametre Adı	Tür	Varsayılan	Açıklama
`confirmText`	`string`	`ok`	Onay butonunun metni.
`history`	`boolean`	`true`	`hashchange` olayının dinlenip dinlenmeyeceği. true ise, Android geri tuşu veya tarayıcı geri butonu ile diyalog kapatılabilir.
`modal`	`boolean`	`false`	Diyalogun modal olup olmayacağı. false ise diyalog dışına tıklandığında kapatılır, aksi takdirde kapatılmaz.
`closeOnEsc`	`boolean`	`true`	Esc tuşuna basıldığında diyalog kapatılıp kapatılmayacağı.
`closeOnConfirm`	`boolean`	`true`	Onay butonuna basıldığında diyalog kapatılıp kapatılmayacağı.

mdui.confirm()

Başlık, içerik, bir onay butonu ve bir iptal butonu içerebilen bir onay kutusu açar:

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

Örnek

// Metin ve onay geri çağırması ile
mdui.confirm('content', function(){
  mdui.alert('Onay butonuna tıklandı');
});

// Metin, onay butonu ve iptal butonu geri çağırması ile
mdui.confirm('content',
  function(){
    mdui.alert('Onay butonuna tıklandı');
  },
  function(){
    mdui.alert('İptal butonuna tıklandı');
  }
);

// Metin, başlık ve onay butonu geri çağırması ile
mdui.confirm('content', 'title', function(){
  mdui.alert('Onay butonuna tıklandı');
});

// Metin, başlık, onay butonu ve iptal butonu geri çağırması ile
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Onay butonuna tıklandı');
  },
  function(){
    mdui.alert('İptal butonuna tıklandı');
  }
);

text: Metin
title: (İsteğe bağlı) Başlık
onConfirm: (İsteğe bağlı) Onay butonuna tıklandığında geri çağırma. Parametre diyalog örneğidir.
onCancel: (İsteğe bağlı) İptal butonuna tıklandığında geri çağırma. Parametre diyalog örneğidir.
options: (İsteğe bağlı) Parametreler, aşağıdaki tabloya bakın.

Parametre Adı	Tür	Varsayılan	Açıklama
`confirmText`	`string`	`ok`	Onay butonunun metni.
`cancelText`	`string`	`cancel`	İptal butonunun metni.
`history`	`boolean`	`true`	`hashchange` olayının dinlenip dinlenmeyeceği. true ise, Android geri tuşu veya tarayıcı geri butonu ile diyalog kapatılabilir.
`modal`	`boolean`	`false`	Diyalogun modal olup olmayacağı. false ise diyalog dışına tıklandığında kapatılır, aksi takdirde kapatılmaz.
`closeOnEsc`	`boolean`	`true`	Esc tuşuna basıldığında diyalog kapatılıp kapatılmayacağı.
`closeOnCancel`	`boolean`	`true`	İptal butonuna basıldığında diyalog kapatılıp kapatılmayacağı.
`closeOnConfirm`	`boolean`	`true`	Onay butonuna basıldığında diyalog kapatılıp kapatılmayacağı.

mdui.prompt()

Başlık, içerik, metin kutusu, onay butonu ve iptal butonu içerebilen, kullanıcıdan girdi isteyen bir diyalog açar:

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

Örnek

// Tek satırlı metin kutusu
mdui.prompt('Bu tek satırlı bir metin kutusudur',
  function (value) {
    mdui.alert('Şunu girdiniz:' + value + ', Onay butonuna tıklandı');
  },
  function (value) {
    mdui.alert('Şunu girdiniz:' + value + ', İptal butonuna tıklandı');
  }
);

// Çok satırlı metin kutusu
mdui.prompt('Bu çok satırlı bir metin kutusudur',
  function (value) {
    mdui.alert('Şunu girdiniz:' + value + ', Onay butonuna tıklandı');
  },
  function (value) {
    mdui.alert('Şunu girdiniz:' + value + ', İptal butonuna tıklandı');
  },
  {
    type: 'textarea'
  }
);

// Başlık ile
mdui.prompt('Lütfen metin girin', 'title',
  function (value) {
    mdui.alert('Şunu girdiniz:' + value + ', Onay butonuna tıklandı');
  },
  function (value) {
    mdui.alert('Şunu girdiniz:' + value + ', İptal butonuna tıklandı');
  }
);

label: Metin kutusunun yüzen etiket metni
title: (İsteğe bağlı) Başlık
onConfirm: (İsteğe bağlı) Onay butonuna tıklandığında geri çağırma. Metin kutusunun değeri ve diyalog örneği olmak üzere iki parametre alır.
onCancel: (İsteğe bağlı) İptal butonuna tıklandığında geri çağırma. Metin kutusunun değeri ve diyalog örneği olmak üzere iki parametre alır.
options: (İsteğe bağlı) Parametreler, aşağıdaki tabloya bakın

Parametre Adı	Tür	Varsayılan	Açıklama
`confirmText`	`string`	`ok`	Onay butonunun metni
`cancelText`	`string`	`cancel`	İptal butonunun metni
`history`	`boolean`	`true`	`hashchange` olayının dinlenip dinlenmeyeceği. true ise, Android geri tuşu veya tarayıcı geri butonu ile diyalog kapatılabilir.
`modal`	`boolean`	`false`	Diyalogun modal olup olmayacağı. false ise diyalog dışına tıklandığında kapatılır, aksi takdirde kapatılmaz.
`closeOnEsc`	`boolean`	`true`	Esc tuşuna basıldığında diyalog kapatılıp kapatılmayacağı.
`closeOnCancel`	`boolean`	`true`	İptal butonuna basıldığında diyalog kapatılıp kapatılmayacağı
`closeOnConfirm`	`boolean`	`true`	Onay butonuna basıldığında diyalog kapatılıp kapatılmayacağı
`confirmOnEnter`	`boolean`	`false`	Enter tuşuna basıldığında `onConfirm` geri çağırma fonksiyonunu tetikler.
`type`	`string`	`text`	Metin kutusunun türü. `text`: Tek satırlı metin kutusu `textarea`: Çok satırlı metin kutusu
`maxlength`	`int`	`0`	Maksimum karakter sayısı
`defaultValue`	`string`	`''`	Metin kutusunun varsayılan değeri

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-dialog`	Bir diyalog bileşeni tanımlar.
`.mdui-dialog-title`	Diyalog başlığını tanımlar.
`.mdui-dialog-content`	Diyalog içeriğini tanımlar.
`.mdui-dialog-actions`	Diyalog işlem çubuğunu tanımlar.
`.mdui-dialog-actions-stacked`	Diyalog işlem çubuğundaki butonları dikey sıralar.

Tablo

Menü