A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Párbeszédablak

Az mdui párbeszédablakja (dialog) egy sokoldalú komponens, amelyet gyakran használnak információk megjelenítésére, értesítések küldésére vagy a felhasználók figyelmeztetésére.

Egyszerre csak egy párbeszédablak lehet nyitva. Ha egy újabb párbeszédablakot nyit meg, mielőtt az aktuális bezárulna, az új ablak várólistára kerül, és csak az aktuális ablak bezárása után jelenik meg.

Használat

Hívás egyéni attribútumokkal
JavaScript segítségével történő hívás

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek - Párbeszédablak

Stílus

Standard párbeszédablak

Ez egy standard párbeszédablak.

Példa

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

Címsor nélkül

Ez a párbeszédablak nem tartalmaz címsort.

Példa

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

Függőleges gombok

A párbeszédablak alján elhelyezkedő gombok alapértelmezés szerint vízszintesen jelennek meg. A gombok függőleges elrendezéséhez egyszerűen adja hozzá a .mdui-dialog-actions-stacked osztályt a <div class="mdui-dialog-actions"></div> elemhez.

Példa

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

Rögzített címsor és gombok

Ha a párbeszédablak tartalma meghaladja annak magasságát, a .mdui-dialog-content elemben görgetősáv jelenik meg.

Ha a .mdui-dialog-title és .mdui-dialog-actions elemeket a .mdui-dialog-content belsejébe helyezi, a címsor és az alsó gombok a görgetősávval együtt mozognak. Ellenkező esetben a címsor és a gombok rögzítve maradnak felül, illetve alul.

Példa

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

Egyéni tartalom

A párbeszédablakon belül csak a <div class="mdui-dialog"></div> elem kötelező; az ezen belüli tartalom bármilyen HTML-re lecserélhető.

Az alábbi példában egy fülpanelt (tab) helyeztünk el a párbeszédablakban:

Példa

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

Használat

Hívás egyéni attribútumokkal

Ezzel a módszerrel nincs szükség JavaScript-kód írására. Csak adjon hozzá egy mdui-dialog="options" attribútumot egy vezérlőelemhez (például egy gombhoz). Egyéni attribútumokon keresztüli híváskor egy extra target paramétert is meg kell adni, amely a vezérelt párbeszédablak CSS-szelektorát tartalmazza.

Példa

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

A párbeszédablakon belüli elemekhez attribútumok adhatók események kötéséhez, amelyek JavaScript hívásakor is használhatók.

Attribútum	Leírás
`mdui-dialog-close`	Erre az elemre kattintva kiváltódik a `close.mdui.dialog` esemény, és a párbeszédablak bezárul.
`mdui-dialog-cancel`	Erre az elemre kattintva kiváltódik a `cancel.mdui.dialog` esemény.
`mdui-dialog-confirm`	Erre az elemre kattintva kiváltódik a `confirm.mdui.dialog` esemény.

JavaScript segítségével történő hívás

Komponens példányosítása:

// A selector a párbeszédablak CSS szeleptora, DOM eleme vagy HTML sztringje
// Az options a konfigurációs paramétereket tartalmazza, lásd az alábbi listát
var inst = new mdui.Dialog(selector, options);

Futtatás

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`overlay`	`boolean`	`true`	Megjelenjen-e a maszk (overlay) a párbeszédablak megnyitásakor.
`history`	`boolean`	`true`	Hozzáadjon-e URL hash-t a párbeszédablak megnyitásakor. Ha true, a párbeszédablak bezárható a böngésző „Vissza” gombjával vagy Androidon a visszagombbal.
`modal`	`boolean`	`false`	Legyen-e modális a párbeszédablak. Ha false, a párbeszédablakon kívüli területre kattintva az ablak bezárul, egyébként nem.
`closeOnEsc`	`boolean`	`true`	Bezáruljon-e a párbeszédablak az Esc billentyű megnyomásakor.
`closeOnCancel`	`boolean`	`true`	Bezáruljon-e a párbeszédablak a „Mégse” gomb megnyomásakor.
`closeOnConfirm`	`boolean`	`true`	Bezáruljon-e a párbeszédablak a „Megerősítés” gomb megnyomásakor.
`destroyOnClosed`	`boolean`	`false`	Automatikusan megsemmisüljön-e a párbeszédablak a bezárás után.

Metódus

Metódus neve	Leírás
`open()`	Párbeszédablak megnyitása.
`close()`	Párbeszédablak bezárása.
`toggle()`	Párbeszédablak nyitott állapotának váltása.
`getState()`	Párbeszédablak állapotának lekérése. Négy állapot lehetséges (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Párbeszédablak megsemmisítése.
`handleUpdate()`	A párbeszédablak pozíciójának és a görgetősáv magasságának újraszámítása. Ezt a metódust akkor kell meghívni, ha a párbeszédablak megnyitása után módosul a tartalma.

Esemény

Esemény neve	Leírás	Célpont	Paraméterek
`open.mdui.dialog`	Az esemény akkor váltódik ki, amikor a párbeszédablak nyitási animációja elkezdődik.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: példány
`opened.mdui.dialog`	Az esemény akkor váltódik ki, amikor a párbeszédablak nyitási animációja befejeződik.
`close.mdui.dialog`	Az esemény akkor váltódik ki, amikor a párbeszédablak zárási animációja elkezdődik.
`closed.mdui.dialog`	Az esemény akkor váltódik ki, amikor a párbeszédablak zárási animációja befejeződik.
`cancel.mdui.dialog`	Az esemény akkor váltódik ki, amikor a „Mégse” gombra kattintanak.
`confirm.mdui.dialog`	Az esemény akkor váltódik ki, amikor a „Megerősítés” gombra kattintanak.

Előre definiált párbeszédablakok

Az mdui néhány előre definiált párbeszédablak-függvényt is kínál a gyakori esetekre. Ezek az ablakok csak JavaScript-tel hívhatók meg, nem szükséges HTML kódot írni hozzájuk.

Ezek a függvények mind párbeszédablak-példányt adnak vissza.

mdui.dialog()

Egy tetszőlegesen testreszabható párbeszédablak megnyitása (címsor, tartalom, gombok stb.). Ez egy általános metódus, az mdui.alert(), mdui.confirm() és mdui.prompt() is ezt használja alapként.

mdui.dialog(options)

Példa

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Mégse'
    },
    {
      text: 'Megerősítés',
      onClick: function(inst){
        mdui.alert('Visszahívás a megerősítő gombra kattintáskor');
      }
    }
  ]
});

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`title`	`string`		A párbeszédablak címsora.
`content`	`string`		A párbeszédablak tartalma.
`buttons`	`array`		Gombok tömbje, ahol minden gomb egy gomb-paramétereket tartalmazó objektum (lásd az alábbi táblázatot).
`stackedButtons`	`boolean`	`false`	Függőlegesen legyenek-e elrendezve a gombok.
`cssClass`	`string`		CSS osztályok a `.mdui-dialog` elemhez.
`history`	`boolean`	`true`	Figyelje-e a `hashchange` eseményt. Ha true, a párbeszédablak bezárható Android visszagombbal vagy böngésző „Vissza” gombjával.
`overlay`	`boolean`	`true`	Megjelenjen-e a maszk a párbeszédablak megnyitása után.
`modal`	`boolean`	`false`	Legyen-e modális a párbeszédablak. Ha false, a párbeszédablakon kívüli területre kattintva az ablak bezárul, egyébként nem.
`closeOnEsc`	`boolean`	`true`	Bezáruljon-e a párbeszédablak az Esc billentyű megnyomásakor.
`destroyOnClosed`	`boolean`	`true`	Automatikusan megsemmisüljön-e a párbeszédablak a bezárás után.
`onOpen`	`function`		Visszahívás a nyitási animáció kezdetekor. A paraméter a párbeszédablak példánya.
`onOpened`	`function`		Visszahívás a nyitási animáció végén. A paraméter a párbeszédablak példánya.
`onClose`	`function`		Visszahívás a zárási animáció kezdetekor. A paraméter a párbeszédablak példánya.
`onClosed`	`function`		Visszahívás a zárási animáció végén. A paraméter a párbeszédablak példánya.

Gomb paraméterei:

Paraméter neve	Típus	Alapértelmezett	Leírás
`text`	`string`		Gomb szövege.
`bold`	`boolean`	`false`	Legyen-e félkövér a gomb szövege.
`close`	`boolean`	`true`	Bezáruljon-e a párbeszédablak a gombra kattintás után.
`onClick`	`function`		A gombra kattintáskor lefutó visszahívási függvény.

mdui.alert()

Egy figyelmeztető ablak (alert) megnyitása, amely címsort, tartalmat és egy megerősítő gombot tartalmazhat:

mdui.alert(text, onConfirm, options)

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

Példa

// Csak szöveg
mdui.alert('content');

// Címsor és szöveg
mdui.alert('content', 'title');

// Visszahívással
mdui.alert('content', 'title', function() {
  mdui.alert('Megerősítés gombra kattintva');
});

// Szöveggel és visszahívással
mdui.alert('content', function() {
  mdui.alert('Megerősítés gombra kattintva');
});

text: szöveg
title: (opcionális) címsor
onConfirm: (opcionális) visszahívás a megerősítő gombra kattintáskor. A paraméter a párbeszédablak példánya.
options: (opcionális) paraméterek, lásd az alábbi táblázatot.

Paraméter neve	Típus	Alapértelmezett	Leírás
`confirmText`	`string`	`ok`	A megerősítő gomb szövege.
`history`	`boolean`	`true`	Figyelje-e a `hashchange` eseményt. Ha true, a párbeszédablak bezárható Android visszagombbal vagy böngésző „Vissza” gombjával.
`modal`	`boolean`	`false`	Legyen-e modális a párbeszédablak. Ha false, a párbeszédablakon kívüli területre kattintva az ablak bezárul, egyébként nem.
`closeOnEsc`	`boolean`	`true`	Bezáruljon-e a párbeszédablak az Esc billentyű megnyomásakor.
`closeOnConfirm`	`boolean`	`true`	Bezáruljon-e a párbeszédablak a megerősítő gomb megnyomásakor.

mdui.confirm()

Egy megerősítő ablak (confirm) megnyitása, amely címsort, tartalmat, egy megerősítő és egy mégse gombot tartalmazhat:

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

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

Példa

// Szöveggel és megerősítési visszahívással
mdui.confirm('content', function(){
  mdui.alert('Megerősítés gombra kattintva');
});

// Szöveggel, megerősítési és elutasítási visszahívással
mdui.confirm('content',
  function(){
    mdui.alert('Megerősítés gombra kattintva');
  },
  function(){
    mdui.alert('Mégse gombra kattintva');
  }
);

// Szöveggel, címsorral és megerősítési visszahívással
mdui.confirm('content', 'title', function(){
  mdui.alert('Megerősítés gombra kattintva');
});

// Szöveggel, címsorral, megerősítési és elutasítási visszahívással
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Megerősítés gombra kattintva');
  },
  function(){
    mdui.alert('Mégse gombra kattintva');
  }
);

text: szöveg
title: (opcionális) címsor
onConfirm: (opcionális) visszahívás a megerősítő gombra kattintáskor. A paraméter a párbeszédablak példánya.
onCancel: (opcionális) visszahívás a mégse gombra kattintáskor. A paraméter a párbeszédablak példánya.
options: (opcionális) paraméterek, lásd az alábbi táblázatot.

Paraméter neve	Típus	Alapértelmezett	Leírás
`confirmText`	`string`	`ok`	A megerősítő gomb szövege.
`cancelText`	`string`	`cancel`	A mégse gomb szövege.
`history`	`boolean`	`true`	Figyelje-e a `hashchange` eseményt. Ha true, a párbeszédablak bezárható Android visszagombbal vagy böngésző „Vissza” gombjával.
`modal`	`boolean`	`false`	Legyen-e modális a párbeszédablak. Ha false, a párbeszédablakon kívüli területre kattintva az ablak bezárul, egyébként nem.
`closeOnEsc`	`boolean`	`true`	Bezáruljon-e a párbeszédablak az Esc billentyű megnyomásakor.
`closeOnCancel`	`boolean`	`true`	Bezáruljon-e a párbeszédablak a mégse gomb megnyomásakor.
`closeOnConfirm`	`boolean`	`true`	Bezáruljon-e a párbeszédablak a megerősítő gomb megnyomásakor.

mdui.prompt()

Egy adatbekérő ablak (prompt) megnyitása, amely címsort, tartalmat, szövegmezőt, egy megerősítő és egy mégse gombot tartalmazhat:

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

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

Példa

// Egysoros szövegmező
mdui.prompt('Ez egy egysoros szövegmező',
  function (value) {
    mdui.alert('Ezt írta be:' + value + ', Megerősítés gombra kattintva');
  },
  function (value) {
    mdui.alert('Ezt írta be:' + value + ', Mégse gombra kattintva');
  }
);

// Többsoros szövegmező
mdui.prompt('Ez egy többsoros szövegmező',
  function (value) {
    mdui.alert('Ezt írta be:' + value + ', Megerősítés gombra kattintva');
  },
  function (value) {
    mdui.alert('Ezt írta be:' + value + ', Mégse gombra kattintva');
  },
  {
    type: 'textarea'
  }
);

// Címsorral
mdui.prompt('Kérjük, írjon be szöveget', 'title',
  function (value) {
    mdui.alert('Ezt írta be:' + value + ', Megerősítés gombra kattintva');
  },
  function (value) {
    mdui.alert('Ezt írta be:' + value + ', Mégse gombra kattintva');
  }
);

label: a szövegmező lebegő címkéjének szövege
title: (opcionális) címsor
onConfirm: (opcionális) visszahívás a megerősítő gombra kattintáskor. Két paramétert kap: a szövegmező értékét és a párbeszédablak példányát.
onCancel: (opcionális) visszahívás a mégse gombra kattintáskor. Két paramétert kap: a szövegmező értékét és a párbeszédablak példányát.
options: (opcionális) paraméterek, lásd az alábbi táblázatot

Paraméter neve	Típus	Alapértelmezett	Leírás
`confirmText`	`string`	`ok`	A megerősítő gomb szövege
`cancelText`	`string`	`cancel`	A mégse gomb szövege
`history`	`boolean`	`true`	Figyelje-e a `hashchange` eseményt. Ha true, a párbeszédablak bezárható Android visszagombbal vagy böngésző „Vissza” gombjával.
`modal`	`boolean`	`false`	Legyen-e modális a párbeszédablak. Ha false, a párbeszédablakon kívüli területre kattintva az ablak bezárul, egyébként nem.
`closeOnEsc`	`boolean`	`true`	Bezáruljon-e a párbeszédablak az Esc billentyű megnyomásakor.
`closeOnCancel`	`boolean`	`true`	Bezáruljon-e a párbeszédablak a mégse gomb megnyomásakor
`closeOnConfirm`	`boolean`	`true`	Bezáruljon-e a párbeszédablak a megerősítő gomb megnyomásakor
`confirmOnEnter`	`boolean`	`false`	Kiváltódjon-e az `onConfirm` visszahívás az Enter billentyű megnyomásakor.
`type`	`string`	`text`	A szövegmező típusa. `text`: egysoros szövegmező `textarea`: többsoros szövegmező
`maxlength`	`int`	`0`	Maximális bevihető karakterek száma
`defaultValue`	`string`	`''`	A szövegmező alapértelmezett értéke

CSS osztályok listája

Osztálynév	Leírás
`.mdui-dialog`	Párbeszédablak-komponens definiálása.
`.mdui-dialog-title`	A párbeszédablak címsorának definiálása.
`.mdui-dialog-content`	A párbeszédablak tartalmának definiálása.
`.mdui-dialog-actions`	A párbeszédablak műveleti sávjának definiálása.
`.mdui-dialog-actions-stacked`	A párbeszédablak műveleti sávjának gombjait függőlegesen rendezi el.

Táblázat

Menü