Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Okno dialogowe

Okno dialogowe w mdui to wszechstronny komponent, często używany do proszenia użytkownika o informacje, powiadamiania lub ostrzegania go.

W danym momencie może być wyświetlane tylko jedno okno dialogowe. Jeśli kolejne okno zostanie otwarte przed zamknięciem obecnego, zostanie ono dodane do kolejki i otwarte po zamknięciu bieżącego.

Sposób użycia

Wywołanie przez atrybuty
Wywołanie przez JavaScript

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Okna dialogowe

Styl

Standardowe okno dialogowe

To jest standardowe okno dialogowe.

Przykład

<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>

Bez paska tytułu

To okno dialogowe nie zawiera paska tytułu.

Przykład

<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>

Przyciski w pionie

Przyciski na dole okna dialogowego są domyślnie ułożone poziomo. Wystarczy dodać klasę .mdui-dialog-actions-stacked do elementu <div class="mdui-dialog-actions"></div>, aby ułożyć przyciski pionowo.

Przykład

<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>

Stały tytuł i przyciski

Gdy zawartość okna dialogowego przekracza jego wysokość, w .mdui-dialog-content pojawi się pasek przewijania.

Jeśli umieścisz .mdui-dialog-title i .mdui-dialog-actions wewnątrz .mdui-dialog-content, tytuł i przyciski dolne będą przewijane wraz z zawartością; w przeciwnym razie tytuł i przyciski zostaną odpowiednio przypięte do góry i dołu.

Przykład

<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>

Niestandardowa zawartość

W oknie dialogowym wymagany jest jedynie element <div class="mdui-dialog"></div>; jego zawartość można zastąpić dowolnym kodem HTML.

Poniższy przykład pokazuje, jak umieścić zakładkę w oknie dialogowym:

Przykład

<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>

Sposób użycia

Wywołanie przez atrybuty

Ta metoda nie wymaga pisania kodu JavaScript. Wystarczy dodać atrybut mdui-dialog="options" do elementu sterującego (np. przycisku). Przy wywoływaniu za pomocą atrybutów niestandardowych należy dodać dodatkowy parametr target, aby określić docelowe okno dialogowe za pomocą selektora CSS.

Przykład

<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>

Do elementów wewnątrz okna dialogowego można dodać atrybuty wiążące zdarzenia, które są również dostępne przy wywoływaniu przez JavaScript.

Atrybut	Opis
`mdui-dialog-close`	Kliknięcie tego elementu wywoła zdarzenie `close.mdui.dialog` i zamknie okno dialogowe.
`mdui-dialog-cancel`	Kliknięcie tego elementu wywoła zdarzenie `cancel.mdui.dialog`.
`mdui-dialog-confirm`	Kliknięcie tego elementu wywoła zdarzenie `confirm.mdui.dialog`.

Wywołanie przez JavaScript

Instancjonowanie komponentu:

// selector to selektor CSS okna dialogowego, element DOM lub ciąg HTML.
// options to parametry konfiguracyjne, patrz lista poniżej.
var inst = new mdui.Dialog(selector, options);

Uruchom

Parametr

Nazwa parametru	Typ	Wartość domyślna	Opis
`overlay`	`boolean`	`true`	Czy wyświetlać maskę podczas otwierania okna dialogowego.
`history`	`boolean`	`true`	Czy dodawać hash URL podczas otwierania okna dialogowego. Jeśli true, okno można zamknąć za pomocą przycisku wstecz w przeglądarce lub przycisku wróć w systemie Android.
`modal`	`boolean`	`false`	Czy okno dialogowe ma być modalne. Jeśli false, kliknięcie poza obszarem okna spowoduje jego zamknięcie.
`closeOnEsc`	`boolean`	`true`	Czy zamykać okno dialogowe po naciśnięciu klawisza Esc.
`closeOnCancel`	`boolean`	`true`	Czy zamykać okno dialogowe po naciśnięciu przycisku anuluj.
`closeOnConfirm`	`boolean`	`true`	Czy zamykać okno dialogowe po naciśnięciu przycisku potwierdź.
`destroyOnClosed`	`boolean`	`false`	Czy automatycznie niszczyć okno dialogowe po jego zamknięciu.

Metoda

Nazwa metody	Opis
`open()`	Otwiera okno dialogowe.
`close()`	Zamyka okno dialogowe.
`toggle()`	Przełącza stan otwarcia okna dialogowego.
`getState()`	Pobiera stan okna dialogowego. Zawiera cztery stany (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Niszczy okno dialogowe.
`handleUpdate()`	Ponownie dostosowuje pozycję okna dialogowego i wysokość paska przewijania. Należy wywołać tę metodę po zmodyfikowaniu zawartości otwartego okna.

Zdarzenie

Nazwa zdarzenia	Opis	Cel	Parametry
`open.mdui.dialog`	Zdarzenie wyzwalane przed rozpoczęciem animacji otwierania okna dialogowego.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: Instancja
`opened.mdui.dialog`	Zdarzenie wyzwalane po zakończeniu animacji otwierania okna dialogowego.
`close.mdui.dialog`	Zdarzenie wyzwalane przed rozpoczęciem animacji zamykania okna dialogowego.
`closed.mdui.dialog`	Zdarzenie wyzwalane po zakończeniu animacji zamykania okna dialogowego.
`cancel.mdui.dialog`	Zdarzenie wyzwalane po naciśnięciu przycisku anuluj.
`confirm.mdui.dialog`	Zdarzenie wyzwalane po naciśnięciu przycisku potwierdź.

Predefiniowane okna dialogowe

mdui zawiera kilka predefiniowanych funkcji okien dialogowych dla typowych scenariuszy. Te okna są wywoływane tylko przez JavaScript i nie wymagają pisania kodu HTML.

Wszystkie te funkcje zwracają Instancję okna dialogowego.

mdui.dialog()

Otwiera okno dialogowe, w którym można dostosować tytuł, zawartość, przyciski itp. Ta metoda jest ogólna i stanowi podstawę dla mdui.alert(), mdui.confirm() oraz mdui.prompt().

mdui.dialog(options)

Przykład

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Anuluj'
    },
    {
      text: 'Potwierdź',
      onClick: function(inst){
        mdui.alert('Wywołanie zwrotne po kliknięciu przycisku potwierdź');
      }
    }
  ]
});

Parametr

Nazwa parametru	Typ	Wartość domyślna	Opis
`title`	`string`		Tytuł okna dialogowego.
`content`	`string`		Zawartość okna dialogowego.
`buttons`	`array`		Tablica przycisków, gdzie każdy przycisk jest obiektem z parametrami (patrz tabela poniżej).
`stackedButtons`	`boolean`	`false`	Czy przyciski mają być ułożone pionowo.
`cssClass`	`string`		Klasy CSS dodawane do `.mdui-dialog`.
`history`	`boolean`	`true`	Czy nasłuchiwać zdarzenia `hashchange`. Jeśli true, okno można zamknąć za pomocą przycisku wróć w systemie Android lub wstecz w przeglądarce.
`overlay`	`boolean`	`true`	Czy wyświetlać warstwę maski po otwarciu okna dialogowego.
`modal`	`boolean`	`false`	Czy okno dialogowe ma być modalne. Jeśli false, kliknięcie poza obszarem okna spowoduje jego zamknięcie.
`closeOnEsc`	`boolean`	`true`	Czy zamykać okno dialogowe po naciśnięciu klawisza Esc.
`destroyOnClosed`	`boolean`	`true`	Czy automatycznie niszczyć okno dialogowe po jego zamknięciu.
`onOpen`	`function`		Wywołanie zwrotne na początku animacji otwierania. Parametrem jest Instancja okna dialogowego.
`onOpened`	`function`		Wywołanie zwrotne na końcu animacji otwierania. Parametrem jest Instancja okna dialogowego.
`onClose`	`function`		Wywołanie zwrotne na początku animacji zamykania. Parametrem jest Instancja okna dialogowego.
`onClosed`	`function`		Wywołanie zwrotne na końcu animacji zamykania. Parametrem jest Instancja okna dialogowego.

Parametry przycisku:

Nazwa parametru	Typ	Wartość domyślna	Opis
`text`	`string`		Tekst przycisku.
`bold`	`boolean`	`false`	Czy tekst przycisku ma być pogrubiony.
`close`	`boolean`	`true`	Czy zamykać okno dialogowe po kliknięciu przycisku.
`onClick`	`function`		Funkcja zwrotna po kliknięciu przycisku.

mdui.alert()

Otwiera okno ostrzegawcze (alert), które może zawierać tytuł, treść i przycisk potwierdzenia:

mdui.alert(text, onConfirm, options)

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

Przykład

// Tylko tekst
mdui.alert('content');

// Z tytułem i tekstem
mdui.alert('content', 'title');

// Z wywołaniem zwrotnym
mdui.alert('content', 'title', function() {
  mdui.alert('Kliknięto przycisk potwierdź');
});

// Z tekstem i wywołaniem zwrotnym
mdui.alert('content', function() {
  mdui.alert('Kliknięto przycisk potwierdź');
});

text: Tekst
title: (opcjonalnie) Tytuł
onConfirm: (opcjonalnie) Wywołanie zwrotne po kliknięciu przycisku potwierdź. Parametrem jest Instancja okna dialogowego.
options: (opcjonalnie) Parametry, patrz tabela poniżej.

Nazwa parametru	Typ	Wartość domyślna	Opis
`confirmText`	`string`	`ok`	Tekst przycisku potwierdź.
`history`	`boolean`	`true`	Czy nasłuchiwać zdarzenia `hashchange`. Jeśli true, okno można zamknąć za pomocą przycisku wróć w systemie Android lub wstecz w przeglądarce.
`modal`	`boolean`	`false`	Czy okno ma być modalne. Jeśli false, kliknięcie poza obszarem spowoduje jego zamknięcie.
`closeOnEsc`	`boolean`	`true`	Czy zamykać po naciśnięciu Esc.
`closeOnConfirm`	`boolean`	`true`	Czy zamykać po naciśnięciu przycisku potwierdź.

mdui.confirm()

Otwiera okno potwierdzenia (confirm), które może zawierać tytuł, treść, przycisk potwierdzenia i przycisk anulowania:

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

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

Przykład

// Z tekstem i wywołaniem potwierdzenia
mdui.confirm('content', function(){
  mdui.alert('Kliknięto przycisk potwierdź');
});

// Z tekstem oraz wywołaniami potwierdzenia i anulowania
mdui.confirm('content',
  function(){
    mdui.alert('Kliknięto przycisk potwierdź');
  },
  function(){
    mdui.alert('Kliknięto przycisk anuluj');
  }
);

// Z tekstem, tytułem i wywołaniem potwierdzenia
mdui.confirm('content', 'title', function(){
  mdui.alert('Kliknięto przycisk potwierdź');
});

// Z tekstem, tytułem oraz wywołaniami potwierdzenia i anulowania
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Kliknięto przycisk potwierdź');
  },
  function(){
    mdui.alert('Kliknięto przycisk anuluj');
  }
);

text: Tekst
title: (opcjonalnie) Tytuł
onConfirm: (opcjonalnie) Wywołanie zwrotne po kliknięciu przycisku potwierdź. Parametrem jest Instancja okna dialogowego.
onCancel: (opcjonalnie) Wywołanie zwrotne po kliknięciu przycisku anuluj. Parametrem jest Instancja okna dialogowego.
options: (opcjonalnie) Parametry, patrz tabela poniżej.

Nazwa parametru	Typ	Wartość domyślna	Opis
`confirmText`	`string`	`ok`	Tekst przycisku potwierdź.
`cancelText`	`string`	`cancel`	Tekst przycisku anuluj.
`history`	`boolean`	`true`	Czy nasłuchiwać zdarzenia `hashchange`. Jeśli true, okno można zamknąć za pomocą przycisku wróć w systemie Android lub wstecz w przeglądarce.
`modal`	`boolean`	`false`	Czy okno ma być modalne. Jeśli false, kliknięcie poza obszarem spowoduje jego zamknięcie.
`closeOnEsc`	`boolean`	`true`	Czy zamykać po naciśnięciu Esc.
`closeOnCancel`	`boolean`	`true`	Czy zamykać po naciśnięciu przycisku anuluj.
`closeOnConfirm`	`boolean`	`true`	Czy zamykać po naciśnięciu przycisku potwierdź.

mdui.prompt()

Otwiera okno dialogowe z prośbą o wprowadzenie danych (prompt), które może zawierać tytuł, treść, pole tekstowe, przycisk potwierdzenia i przycisk anulowania:

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

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

Przykład

// Jednowierszowe pole tekstowe
mdui.prompt('To jest jednowierszowe pole tekstowe',
  function (value) {
    mdui.alert('Wpisano: ' + value + ', Kliknięto przycisk potwierdź');
  },
  function (value) {
    mdui.alert('Wpisano: ' + value + ', Kliknięto przycisk anuluj');
  }
);

// Wielowierszowe pole tekstowe
mdui.prompt('To jest wielowierszowe pole tekstowe',
  function (value) {
    mdui.alert('Wpisano: ' + value + ', Kliknięto przycisk potwierdź');
  },
  function (value) {
    mdui.alert('Wpisano: ' + value + ', Kliknięto przycisk anuluj');
  },
  {
    type: 'textarea'
  }
);

// Z tytułem
mdui.prompt('Wprowadź tekst', 'title',
  function (value) {
    mdui.alert('Wpisano: ' + value + ', Kliknięto przycisk potwierdź');
  },
  function (value) {
    mdui.alert('Wpisano: ' + value + ', Kliknięto przycisk anuluj');
  }
);

label: Tekst pływającej etykiety pola tekstowego
title: (opcjonalnie) Tytuł
onConfirm: (opcjonalnie) Wywołanie zwrotne po kliknięciu przycisku potwierdź. Przyjmuje dwa parametry: wartość pola tekstowego i Instancję okna dialogowego.
onCancel: (opcjonalnie) Wywołanie zwrotne po kliknięciu przycisku anuluj. Przyjmuje dwa parametry: wartość pola tekstowego i Instancję okna dialogowego.
options: (opcjonalnie) Parametry, patrz tabela poniżej

Nazwa parametru	Typ	Wartość domyślna	Opis
`confirmText`	`string`	`ok`	Tekst przycisku potwierdź
`cancelText`	`string`	`cancel`	Tekst przycisku anuluj
`history`	`boolean`	`true`	Czy nasłuchiwać zdarzenia `hashchange`. Jeśli true, okno można zamknąć za pomocą przycisku wróć w systemie Android lub wstecz w przeglądarce.
`modal`	`boolean`	`false`	Czy okno ma być modalne. Jeśli false, kliknięcie poza obszarem spowoduje jego zamknięcie.
`closeOnEsc`	`boolean`	`true`	Czy zamykać po naciśnięciu Esc.
`closeOnCancel`	`boolean`	`true`	Czy zamykać po naciśnięciu przycisku anuluj
`closeOnConfirm`	`boolean`	`true`	Czy zamykać po naciśnięciu przycisku potwierdź
`confirmOnEnter`	`boolean`	`false`	Wyzwala funkcję zwrotną `onConfirm` po naciśnięciu klawisza Enter.
`type`	`string`	`text`	Typ pola tekstowego. `text`: Jednowierszowe pole tekstowe `textarea`: Wielowierszowe pole tekstowe
`maxlength`	`int`	`0`	Maksymalna liczba znaków
`defaultValue`	`string`	`''`	Domyślna wartość pola tekstowego

Lista klas CSS

Nazwa klasy	Opis
`.mdui-dialog`	Definiuje komponent okna dialogowego.
`.mdui-dialog-title`	Definiuje tytuł okna dialogowego.
`.mdui-dialog-content`	Definiuje zawartość okna dialogowego.
`.mdui-dialog-actions`	Definiuje pasek akcji okna dialogowego.
`.mdui-dialog-actions-stacked`	Układa przyciski paska akcji pionowo.

Tabela