Dialog

shadow

Element Dialog zobrazuje dialógové okno s prispôsobiteľným obsahom. Je možné ho využiť napríklad na jednoduché zobrazenie informácie používateľovi alebo tiež vyžiadať jeho potvrdenie alebo zrušenie ním vykonanej akcie. Nachádza sa nad obsahom aplikácie a používateľ ho musí ručne zrušiť, aby mohol pokračovať v interakcii s aplikáciou. Dialógové okno je možné zobraziť v rôznych veľkostiach a pozíciách obrazovky.

Základné použitie

Na zobrazenie komponentu Dialog sa používa komponent Button s atribútom dialog. Pre viac informácii prejdite na stránku Button.

Placement (Umiestnenie)

Vlastnosť placement určuje umiestnenie dialógového okna na obrazovke. Predvolená je hodnota slide-up. Ďalšie možnosti sú "stick-up", "fill-in", "slide-left", "slide-right".

Size (Veľkosť)

Vlastnosť size upravuje veľkosť dialógového okna na obrazovke. Predvolená je veľkosť "small". Ďalšie možnosti sú "medium", "large" a "ex-large".

Atribúty a Vlastnosti

placement

Description	Specifies the location of the dialog box on the screen. Possible values include "slide-up", "slide-down" and others.
Attribute	placement
Type	"slide-up" ｜ "slide-down" ｜ "slide-left" ｜ "slide-right" ｜ "fill-in" ｜ string & Record<never, never> ｜ undefined
Default	slide-up

size

Description	Specifies the size of the dialog box on the screen. Possible values include "small", "medium" and others.
Attribute	size
Type	"small" ｜ "medium" ｜ "large" ｜ "ex-large" ｜ string & Record<never, never> ｜ undefined
Default	small

Eventy

No events available for this component.

Metódy

No public methods available for this component.

CSS Shadow Parts

Name	Description
bodies	Refers to the main content of the dialog
header	Refers to the header of the dialog box
footer	Refers to the footer of the dialog box

CSS Custom Vlastnosti

Name	Description
--wj-backdrop	Background (backdrop) colour
--wj-backdrop-opacity	Backdrop transparency
--wj-dialog-border-color	The colour of the edges of the dialog box
--wj-dialog-border-radius	Rounding the edges of the dialog box
--wj-dialog-border-style	Dialog box border style
--wj-dialog-border-width	Dialog box border thickness
--wj-dialog-height	Height of the dialog box
--wj-dialog-margin-bottom	Bottom outer indent of the dialog window
--wj-dialog-margin-end	Left outer indent of the dialog box
--wj-dialog-margin-start	Right outer indent of the dialog box
--wj-dialog-margin-top	Top outer indent of the dialog box
--wj-dialog-padding	Internal dialog box indentation
--wj-dialog-width	Dialog window width

Sloty

Name	Description
header	The content is placed in the header of the dialog box.
footer	The content is placed in the footer of the dialog box.