DialogPárbeszédablak

A párbeszédablak fontos értesítések megjelenítésére szolgál, amikor a felhasználó műveleteket végez.

A komponens közvetlen használata mellett az mdui négy függvényt is biztosít: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Ezek a függvények leegyszerűsítik a Dialog komponens használatát.

Használat

A komponens importálása:

import 'mdui/components/dialog.js';

A komponens TypeScript-típusának importálása:

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

Példa:

Párbeszédablak Bezárás

Párbeszédablak megnyitása

<mdui-dialog class="example-dialog">
  Párbeszédablak
  <mdui-button>Bezárás</mdui-button>
</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</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>

Példák

Kattintás a takarórétegre bezáráshoz

A close-on-overlay-click attribútummal a párbeszédablak bezárható a takarórétegre kattintva.

Párbeszédablak

Párbeszédablak megnyitása

<mdui-dialog close-on-overlay-click class="example-overlay">Párbeszédablak</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

ESC billentyű lenyomására bezárás

A close-on-esc attribútummal a párbeszédablak az ESC billentyű lenyomására bezáródik.

Párbeszédablak

Párbeszédablak megnyitása

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-esc"
>Párbeszédablak</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

Teljes képernyő

A fullscreen attribútummal a párbeszédablak teljes képernyős módban jelenik meg.

Párbeszédablak Bezárás

Párbeszédablak megnyitása

<mdui-dialog fullscreen class="example-fullscreen">
  Párbeszédablak
  <mdui-button>Bezárás</mdui-button>
</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</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>

Forrás

Ikon

Az icon attribútum beállításával Material Icons ikont adhat a párbeszédablak tetejére.

Párbeszédablak

Párbeszédablak megnyitása

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Párbeszédablak</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

Az icon sloton keresztül is hozzáadhat ikonelemet a párbeszédablak tetejére.

Párbeszédablak

Párbeszédablak megnyitása

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Párbeszédablak
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

Cím és leírás

A headline és description attribútumokkal állíthatja be a párbeszédablak címét és leírását.

Párbeszédablak megnyitása

<mdui-dialog
  headline="A kiválasztott képek törlése?"
  description="A képek véglegesen eltávolításra kerülnek a fiókjából és az összes szinkronizált eszközről."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

A headline és description slotokon keresztül is beállíthatja a párbeszédablak címelemét és leírás elemét.

A kiválasztott képek törlése? A képek véglegesen eltávolításra kerülnek a fiókjából és az összes szinkronizált eszközről.

Párbeszédablak megnyitása

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">A kiválasztott képek törlése?</span>
  <span slot="description">A képek véglegesen eltávolításra kerülnek a fiókjából és az összes szinkronizált eszközről.</span>
</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

Alsó műveleti gombok

Az action slot használatával adhat hozzá alsó műveleti gombokat.

Mégse

Törlés

Párbeszédablak megnyitása

<mdui-dialog
  close-on-overlay-click
  headline="A kiválasztott képek törlése?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Mégse</mdui-button>
  <mdui-button slot="action" variant="tonal">Törlés</mdui-button>
</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

A stacked-actions attribútummal az alsó műveleti gombok függőlegesen rendeződjenek.

Helymeghatározás bekapcsolása

Nem, köszönöm

Párbeszédablak megnyitása

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Használja a helymeghatározási szolgáltatást?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Helymeghatározás bekapcsolása</mdui-button>
  <mdui-button slot="action" variant="text">Nem, köszönöm</mdui-button>
</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

Felső tartalom

A header slot használatával adhat hozzá felső tartalmat a párbeszédablakhoz.

Cím

Mentés

Párbeszédablak megnyitása

<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>Cím</mdui-top-app-bar-title>
    <mdui-button variant="text">Mentés</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Párbeszédablak megnyitása</mdui-button>

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

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

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`icon`	`icon`	`string`	-
A felső Material Icons ikon neve. Beállítható a `slot="icon"` segítségével is.
`headline`	`headline`	`string`	-
Címsor. Beállítható a `slot="headline"` segítségével is.
`description`	`description`	`string`	-
A címsor alatti szöveg. Beállítható a `slot="description"` segítségével is.
`open`	`open`	`boolean`	`false`
A párbeszédablak nyitva van-e.
`fullscreen`	`fullscreen`	`boolean`	`false`
A párbeszédablak teljes képernyős megjelenítése.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Az ESC billentyű lenyomásával bezárható-e a párbeszédablak.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
A fedőrétegre kattintva bezárható-e a párbeszédablak.
`stacked-actions`	`stackedActions`	`boolean`	`false`
Az alsó műveleti gombok egymás alatt jelenjenek-e meg.

Események

Név
`open`
A párbeszédablak nyitásának kezdetekor aktiválódik. Az `event.preventDefault()` meghívásával megakadályozható a párbeszédablak megnyitása.
`opened`
A párbeszédablak nyitási animációjának befejezésekor aktiválódik.
`close`
A párbeszédablak zárásának kezdetekor aktiválódik. Az `event.preventDefault()` meghívásával megakadályozható a párbeszédablak bezárása.
`closed`
A párbeszédablak zárási animációjának befejezésekor aktiválódik.
`overlay-click`
A fedőrétegre kattintáskor aktiválódik.

Slots

Név
`header`
A felső elem, alapértelmezés szerint tartalmazza az `icon` és a `headline` slot-okat.
`icon`
A felső ikon.
`headline`
A felső címsor.
`description`
A címsor alatti szöveg.
(alapértelmezett)
A párbeszédablak fő tartalma.
`action`
Az alsó műveletsávban lévő elemek.

CSS Parts

Név
`overlay`
A fedőréteg.
`panel`
A párbeszédablak konténere.
`header`
A párbeszédablak fejléc része, amely tartalmazza az ikont és a címsort.
`icon`
A felső ikon, amely a fejlécben található.
`headline`
A felső címsor, amely a fejlécben található.
`body`
A párbeszédablak törzs része.
`description`
A kiegészítő szöveg része, amely a törzsben található.
`action`
Az alsó műveleti gombok.

CSS egyéni tulajdonságok

Név
`--shape-corner`
A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
`--z-index`
A komponens CSS `z-index` értéke.

Előző fejezet

Collapse Összecsukható panel

Következő fejezet

Divider Elválasztó