- bit BlazorUI
Home Docs

Dialog

Dialogs are temporary pop-ups that take focus from the page or app and require people to interact with them. Unlike a dialog box (Dialog), a Dialog should be used for hosting lengthy content, such as privacy statements or license agreements, or for asking people to perform complex or multiple actions, such as changing settings.

Usage

Basic
Result


Result is:
Events
Custom content


Result is:


Advanced options
BitDialog has some advanced options to be customized .
Absolute positioning
BitDialog has an abosolute position option to further customize it's location.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur.
Position
To set the Dialog position on the page you can use the Position parameter.
Draggable

Using custom drag element.
RTL

API

BitDialog parameters
Name
Type
Default value
Description
AutoToggleScroll bool false Enables the auto scrollbar toggle behavior of the Dialog.
AbsolutePosition bool false When true, the Dialog will be positioned absolute instead of fixed.
Body RenderFragment? null Alias for child content.
CancelText string? Cancel The text of the cancel button.
ChildContent RenderFragment? null The content of the Dialog, it can be any custom tag or text.
Classes BitDialogClassStyles? null Custom CSS classes for different parts of the BitDialog component.
DragElementSelector string? null The CSS selector of the drag element. By default, it's the Dialog container.
FooterTemplate RenderFragment? null Used to customize how the footer inside the Dialog is rendered.
IsAlert bool? null Determines the ARIA role of the Dialog (alertdialog/dialog). If this is set, it will override the ARIA role determined by IsBlocking and IsModeless.
IsBlocking bool false Whether the Dialog can be light dismissed by clicking outside the Dialog (on the overlay).
IsDraggable bool false Whether the Dialog can be dragged around.
IsModeless bool false Whether the Dialog should be modeless (e.g. not dismiss when focusing/clicking outside of the Dialog). If true, IsBlocking is ignored, and there will be no overlay.
IsOpen bool false Whether the Dialog is displayed.
IsOpenChanged EventCallback<bool> null A callback function for when the Dialog is opened or closed.
Message string? null The message to display in the dialog.
OkText string? Ok The text of the ok button.
OnCancel EventCallback<MouseEventArgs> null A callback function for when the Cancel button is clicked.
OnClose EventCallback<MouseEventArgs> null A callback function for when the Close button is clicked.
OnDismiss EventCallback<MouseEventArgs> null A callback function for when the the dialog is dismissed (closed).
OnOk EventCallback<MouseEventArgs> null A callback function for when the Ok button is clicked.
Position BitDialogPosition BitDialogPosition.Center Position of the Dialog on the screen.
ScrollerSelector string body Set the element selector for which the Dialog disables its scroll if applicable.
ShowCancelButton bool true Shows or hides the cancel button of the Dialog.
ShowCloseButton bool true Shows or hides the close button of the Dialog.
ShowOkButton bool true Shows or hides the ok button of the Dialog.
Styles BitDialogClassStyles? null Custom CSS styles for different parts of the BitDialog component.
SubtitleAriaId string? null ARIA id for the subtitle of the Dialog, if any.
Title string? null The title text to display at the top of the dialog.
TitleAriaId string? null ARIA id for the title of the Dialog, if any.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitDialogClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitDialog.
Overlay string? null Custom CSS classes/styles for the overlay of the BitDialog.
Container string? null Custom CSS classes/styles for the container of the BitDialog.
Header string? null Custom CSS classes/styles for the header of the BitDialog.
Body string? null Custom CSS classes/styles for the body of the BitDialog.
Title string? null Custom CSS classes/styles for the title of the BitDialog.
Message string? null Custom CSS classes/styles for the message of the BitDialog.
ButtonsContainer string? null Custom CSS classes/styles for the buttons container of the BitDialog.
Spinner string? null Custom CSS classes/styles for the spinner of the ok button of the BitDialog.
OkButton string? null Custom CSS classes/styles for the ok button of the BitDialog.
CancelButton string? null Custom CSS classes/styles for the cancel button of the BitDialog.
BitDialogPosition enum
Name
Value
Description
Center 0
TopLeft 1
TopCenter 2
TopRight 3
CenterLeft 4
CenterRight 5
BottomLeft 6
BottomCenter 7
BottomRight 8
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.
  • On this page