Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Dialog

Komponenta dialogu v mdui je velmi univerzální a běžně se používá k dotazování uživatelů nebo k jejich informování a varování.

Pouze jeden dialog je zobrazen najednou. Pokud je otevřen další dialog, než se zavře aktuální, je zařazen do fronty a otevřen po zavření aktuálního.

Způsob volání

Volání přes atributy
Volání přes JavaScript

Související čtení

Designové zásady Material Design: Komponenty - Dialog

Styl

standardní dialog

Toto je standardní dialog.

Příklad

<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 záhlaví

Tento dialog nemá záhlaví.

Příklad

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

skládaná tlačítka

Tlačítka v dolní části dialogu jsou standardně zarovnána vodorovně. Jednoduše přidejte třídu .mdui-dialog-actions-stacked do <div class="mdui-dialog-actions"></div>, aby se tlačítka skládala svisle.

Příklad

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

pevné záhlaví a tlačítka

Když obsah dialogu překročí výšku dialogu, zobrazí se posuvník v .mdui-dialog-content.

Pokud umístíte .mdui-dialog-title a .mdui-dialog-actions do .mdui-dialog-content, záhlaví a tlačítka se budou posouvat s obsahem; jinak budou záhlaví a tlačítka zůstávat pevně nahoře a dole a nebudou se posunovat.

Příklad

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

vlastní obsah

V dialogu je vyžadován pouze <div class="mdui-dialog"></div>; obsah uvnitř tohoto elementu lze nahradit libovolným HTML.

V níže uvedeném příkladu je uvnitř dialogu umístěna záložka:

Příklad

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

Způsob volání

Volání přes atributy

Při tomto přístupu není potřeba psát JavaScript. Stačí přidat atribut mdui-dialog="options" k ovládacímu prvku (například tlačítku). Při volání pomocí vlastních atributů je vyžadován dodatečný parametr target pro určení dialogu, který se má ovládat; jeho hodnota by měla být CSS selektor ovládaného dialogu.

Příklad

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

Můžete přidat atributy k elementům uvnitř dialogu, abyste propojili události, které také fungují při volání pomocí JavaScriptu.

Atribut	Popis
`mdui-dialog-close`	Kliknutí na tento element spustí událost `close.mdui.dialog` a zavře dialog.
`mdui-dialog-cancel`	Kliknutí na tento element spustí událost `cancel.mdui.dialog`.
`mdui-dialog-confirm`	Kliknutí na tento element spustí událost `confirm.mdui.dialog`.

Volání přes JavaScript

Instance komponenty:

// selector je CSS selektor, DOM element nebo HTML řetězec dialogu
// options jsou konfigurační parametry, viz seznam parametrů níže
var inst = new mdui.Dialog(selector, options);

Spustit

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`overlay`	`boolean`	`true`	Zda se má zobrazit překrytí při otevření dialogu.
`history`	`boolean`	`true`	Zda se má přidat hash URL při otevření dialogu. Pokud je true, lze dialog zavřít pomocí tlačítka Zpět v prohlížeči nebo tlačítka Zpět na Androidu poté, co je otevřen.
`modal`	`boolean`	`false`	Zda má být dialog modální. Pokud je false, kliknutí na oblast mimo dialog jej zavře; jinak se nezavře.
`closeOnEsc`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí klávesy Esc.
`closeOnCancel`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí tlačítka Zrušit.
`closeOnConfirm`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí tlačítka Potvrdit.
`destroyOnClosed`	`boolean`	`false`	Zda se má automaticky zničit dialog po jeho zavření.

Metoda

Název metody	Popis
`open()`	Otevřít dialog.
`close()`	Zavřít dialog.
`toggle()`	Přepnout stav otevření dialogu.
`getState()`	Získat stav dialogu. Obsahuje čtyři stavy (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Zničit dialog.
`handleUpdate()`	Znovu nastavit pozici dialogu a výšku posuvníku. Pokud je obsah dialogu změněn po otevření dialogu, měla by být zavolána tato metoda.

Událost

Název události	Popis	Cíl	Parametry
`open.mdui.dialog`	Událost bude spuštěna, když dialog začne animaci otevírání.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: Instance
`opened.mdui.dialog`	Událost bude spuštěna, když dialog skončí animaci otevírání.
`close.mdui.dialog`	Událost bude spuštěna, když dialog začne animaci zavírání.
`closed.mdui.dialog`	Událost bude spuštěna, když dialog skončí animaci zavírání.
`cancel.mdui.dialog`	Událost bude spuštěna, když je stisknuto tlačítko Zrušit.
`confirm.mdui.dialog`	Událost bude spuštěna, když je stisknuto tlačítko Potvrdit.

předdefinované dialogy

mdui má zapouzdřeno několik předdefinovaných funkcí dialogu pro běžné scénáře. Tyto předdefinované dialogy se volají pouze přes JavaScript a nevyžadují psaní HTML kódu.

Tyto funkce všechny vrací instanci dialogu.

mdui.dialog()

Otevře dialog, kde lze přizpůsobit všechno - název, obsah, tlačítka atd. Tato metoda je obecná a mdui.alert(), mdui.confirm() a mdui.prompt() jsou implementovány prostřednictvím ní.

mdui.dialog(options)

Příklad

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Zrušit'
    },
    {
      text: 'Potvrdit',
      onClick: function(inst){
        mdui.alert('Zpětné volání pro kliknutí na tlačítko Potvrdit');
      }
    }
  ]
});

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`title`	`string`		Název dialogu.
`content`	`string`		Obsah dialogu.
`buttons`	`array`		Pole tlačítek, kde každé tlačítko je objekt s parametry tlačítka (viz tabulka níže).
`stackedButtons`	`boolean`	`false`	Zda jsou tlačítka skládána svisle.
`cssClass`	`string`		CSS třídy přidané do `.mdui-dialog`.
`history`	`boolean`	`true`	Zda poslouchat událost `hashchange`. Pokud je true, lze dialog zavřít pomocí tlačítka Zpět na Androidu nebo tlačítka Zpět v prohlížeči.
`overlay`	`boolean`	`true`	Zda se má zobrazit překrytí po otevření dialogu.
`modal`	`boolean`	`false`	Zda má být dialog modální. Pokud je false, kliknutí na oblast mimo dialog jej zavře; jinak se nezavře.
`closeOnEsc`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí klávesy Esc.
`destroyOnClosed`	`boolean`	`true`	Zda se má automaticky zničit dialog po jeho zavření.
`onOpen`	`function`		Zpětné volání, když začíná animace otevírání. Argumentem je instance dialogu.
`onOpened`	`function`		Zpětné volání, když končí animace otevírání. Argumentem je instance dialogu.
`onClose`	`function`		Zpětné volání, když začíná animace zavírání. Argumentem je instance dialogu.
`onClosed`	`function`		Zpětné volání, když končí animace zavírání. Argumentem je instance dialogu.

Parametry tlačítka:

Název parametru	Typ	Výchozí hodnota	Popis
`text`	`string`		Text tlačítka.
`bold`	`boolean`	`false`	Zda má být text tlačítka tučný.
`close`	`boolean`	`true`	Zda se má zavřít dialog po kliknutí na tlačítko.
`onClick`	`function`		Zpětná volání funkce při kliknutí na tlačítko.

mdui.alert()

Otevře okno s výstrahou, které může obsahovat název, obsah a tlačítko Potvrdit:

mdui.alert(text, onConfirm, options)

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

Příklad

// Pouze text
mdui.alert('content');

// Obsahuje název a text
mdui.alert('content', 'title');

// Obsahuje zpětné volání
mdui.alert('content', 'title', function() {
  mdui.alert('Kliknuto tlačítko Potvrdit');
});

// Obsahuje text a zpětné volání
mdui.alert('content', function() {
  mdui.alert('Kliknuto tlačítko Potvrdit');
});

text: Text
title: (Volitelné) název
onConfirm: (Volitelné) zpětné volání pro kliknutí na tlačítko Potvrdit. Argumentem je instance dialogu.
options: (Volitelné) parametry, viz tabulka níže.

Název parametru	Typ	Výchozí hodnota	Popis
`confirmText`	`string`	`ok`	Text tlačítka Potvrdit.
`history`	`boolean`	`true`	Zda poslouchat událost `hashchange`. Pokud je true, lze dialog zavřít pomocí tlačítka Zpět na Androidu nebo tlačítka Zpět v prohlížeči.
`modal`	`boolean`	`false`	Zda má být dialog modální. Pokud je false, kliknutí na oblast mimo dialog jej zavře; jinak se nezavře.
`closeOnEsc`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí klávesy Esc.
`closeOnConfirm`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí tlačítka Potvrdit.

mdui.confirm()

Otevře potvrzovací pole, které může obsahovat název, obsah, tlačítko Potvrdit a tlačítko Zrušit:

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

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

Příklad

// Obsahuje text a zpětné volání potvrzení
mdui.confirm('content', function(){
  mdui.alert('Kliknuto tlačítko Potvrdit');
});

// Obsahuje text, zpětné volání potvrzení a zrušení
mdui.confirm('content',
  function(){
    mdui.alert('Kliknuto tlačítko Potvrdit');
  },
  function(){
    mdui.alert('Kliknuto tlačítko Zrušit');
  }
);

// Obsahuje text, název a zpětné volání potvrzení
mdui.confirm('content', 'title', function(){
  mdui.alert('Kliknuto tlačítko Potvrdit');
});

// Obsahuje text, název, zpětné volání potvrzení a zrušení
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Kliknuto tlačítko Potvrdit');
  },
  function(){
    mdui.alert('Kliknuto tlačítko Zrušit');
  }
);

text: Text
title: (Volitelné) název
onConfirm: (Volitelné) zpětné volání pro kliknutí na tlačítko Potvrdit. Argumentem je instance dialogu.
onCancel: (Volitelné) zpětné volání pro kliknutí na tlačítko Zrušit. Argumentem je instance dialogu.
options: (Volitelné) parametry, viz tabulka níže.

Název parametru	Typ	Výchozí hodnota	Popis
`confirmText`	`string`	`ok`	Text tlačítka Potvrdit.
`cancelText`	`string`	`cancel`	Text tlačítka Zrušit.
`history`	`boolean`	`true`	Zda poslouchat událost `hashchange`. Pokud je true, lze dialog zavřít pomocí tlačítka Zpět na Androidu nebo tlačítka Zpět v prohlížeči.
`modal`	`boolean`	`false`	Zda má být dialog modální. Pokud je false, kliknutí na oblast mimo dialog jej zavře; jinak se nezavře.
`closeOnEsc`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí klávesy Esc.
`closeOnCancel`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí tlačítka Zrušit.
`closeOnConfirm`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí tlačítka Potvrdit.

mdui.prompt()

Otevře dialog, který vyzve uživatele k zadání, který může obsahovat název, obsah, textové pole, tlačítko Potvrdit a tlačítko Zrušit:

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

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

Příklad

// Jednořádkové textové pole
mdui.prompt('Toto je jednořádkové textové pole',
  function (value) {
    mdui.alert('Zadal jste:' + value + ', Kliknuto tlačítko Potvrdit');
  },
  function (value) {
    mdui.alert('Zadal jste:' + value + ', Kliknuto tlačítko Zrušit');
  }
);

// Víceřádkové textové pole
mdui.prompt('Toto je víceřádkové textové pole',
  function (value) {
    mdui.alert('Zadal jste:' + value + ', Kliknuto tlačítko Potvrdit');
  },
  function (value) {
    mdui.alert('Zadal jste:' + value + ', Kliknuto tlačítko Zrušit');
  },
  {
    type: 'textarea'
  }
);

// Obsahuje název
mdui.prompt('Prosím zadejte text', 'title',
  function (value) {
    mdui.alert('Zadal jste:' + value + ', Kliknuto tlačítko Potvrdit');
  },
  function (value) {
    mdui.alert('Zadal jste:' + value + ', Kliknuto tlačítko Zrušit');
  }
);

label: text plovoucího štítku pro textové pole
title: (Volitelné) název
onConfirm: (Volitelné) zpětné volání pro kliknutí na tlačítko Potvrdit. Obsahuje dva parametry: hodnota textového pole a instance dialogu.
onCancel: (Volitelné) zpětné volání pro kliknutí na tlačítko Zrušit. Obsahuje dva parametry: hodnota textového pole a instance dialogu.
options: (Volitelné) parametry, viz tabulka níže

Název parametru	Typ	Výchozí hodnota	Popis
`confirmText`	`string`	`ok`	Text tlačítka Potvrdit
`cancelText`	`string`	`cancel`	Text tlačítka Zrušit
`history`	`boolean`	`true`	Zda poslouchat událost `hashchange`. Pokud je true, lze dialog zavřít pomocí tlačítka Zpět na Androidu nebo tlačítka Zpět v prohlížeči.
`modal`	`boolean`	`false`	Zda má být dialog modální. Pokud je false, kliknutí na oblast mimo dialog jej zavře; jinak se nezavře.
`closeOnEsc`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí klávesy Esc.
`closeOnCancel`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí tlačítka Zrušit
`closeOnConfirm`	`boolean`	`true`	Zda se má zavřít dialog po stisknutí tlačítka Potvrdit
`confirmOnEnter`	`boolean`	`false`	Spustí funkci zpětného volání `onConfirm`, když je stisknuta klávesa Enter.
`type`	`string`	`text`	Typ textového pole. `text`: jednořádkové textové pole `textarea`: víceřádkové textové pole
`maxlength`	`int`	`0`	Maximální počet znaků zadávaného textu
`defaultValue`	`string`	`''`	Výchozí hodnota textového pole

Seznam CSS tříd

Název třídy	Popis
`.mdui-dialog`	Definuje komponentu Dialog.
`.mdui-dialog-title`	Definuje název dialogu.
`.mdui-dialog-content`	Definuje obsah dialogu.
`.mdui-dialog-actions`	Definuje akční lištu dialogu.
`.mdui-dialog-actions-stacked`	Skládá tlačítka v akční liště dialogu svisle.

Tabulka

Nabídka