Home Docs

ProModal

ProModal is an advanced version of normal Modal with additional features that tailored to more usual use-cases.

Notes

To use this component, you need to install the
Bit.BlazorUI.Extras
 nuget package, as described in the Optional steps of the Getting started page.

There are two different modal components available for different purposes: BitProModal is an advanced modal with extra features such as dragging, blocking, modeless, positioning, full-size and scroll handling, while BitModal is a basic, lightweight modal for simple pop-up content. Pick the one that fits your use-case.

Usage

Basic
Header & Footer






Advanced options
BitProModal has some advanced options to be customized.











Size
BitProModal has size related parameters to make it occupy available screen width/height or both.






AbsolutePosition
BitProModal has an absolute position option to further customize its location.





Position
To set the ProModal position on the page you can use the Position parameter.

Draggable
The Draggable parameter of the BitProModal allows users to move the modal around the screen.



Using custom drag element:

Events
Explore different events available in the BitProModal component:


OnOpen:



OnDismiss:



Style & Class
Using css related parameters users can further customize the modal based on their needs.


Component's Style & Class:






Styles & Classes:



External Icon
Use icons from external libraries like FontAwesome to customize the close button icon with the CloseIcon parameter.


RTL
Use BitProModal in right-to-left (RTL).

API

BitProModal parameters
Name
Type
Default value
Description
AbsolutePosition bool false When true, the Modal will be positioned absolute instead of fixed.
AutoToggleScroll bool false Enables the auto scrollbar toggle behavior of the Modal.
Blocking bool false When enabled, prevents the Modal from being light dismissed by clicking outside the Modal (on the overlay).
Body RenderFragment? null The alias of the ChildContent.
ChildContent RenderFragment? null The content of the Modal, it can be any custom tag or text.
Classes BitProModalClassStyles? null Custom CSS classes for different parts of the BitProModal component.
CloseButtonTitle string Close The title (and aria-label) of the close button for accessibility and localization.
CloseIcon BitIconInfo? null Gets or sets the icon to display in the close button using custom CSS classes for external icon libraries. Takes precedence over CloseIconName when both are set.
CloseIconName string? null Gets or sets the name of the icon to display in the close button from the built-in Fluent UI icons.
DragElementSelector string? null The CSS selector of the drag element. by default it's the Modal container.
Draggable bool false Whether the Modal can be dragged around.
Footer RenderFragment? null The template used to render the footer section of the Modal.
FooterText string? null The text of the footer section of the Modal.
FullHeight bool false Makes the Modal height 100% of its parent container.
FullSize bool false Makes the Modal width and height 100% of its parent container.
FullWidth bool false Makes the Modal width 100% of its parent container.
Header RenderFragment? null The template used to render the header section of the Modal.
HeaderText string? null The text of the header section of the Modal.
IsAlert bool? null Determines the ARIA role of the Modal (alertdialog/dialog). If this is set, it will override the ARIA role determined by Blocking and Modeless.
IsOpen bool false Whether the Modal is displayed.
ModeFull bool false Renders the overlay in full mode that gives it an opaque background.
Modeless bool false Whether the Modal should be modeless. if true: Blocking is ignored, there will be no overlay.
NoBorder bool false Removes the default top border of the Modal.
OnDismiss EventCallback<MouseEventArgs> A callback function for when the Modal is dismissed.
OnOpen EventCallback A callback function for when the Modal is opened.
OnOverlayClick EventCallback<MouseEventArgs> A callback function for when somewhere on the overlay element of the Modal is clicked.
Position BitPosition? null Position of the Modal on the screen.
ScrollerElement ElementReference? null Set the element reference for which the Modal disables its scroll if applicable.
ScrollerSelector string? null Set the element selector for which the Modal disables its scroll if applicable.
ShowCloseButton bool false Shows the close button of the Modal.
SubtitleAriaId string? null ARIA id for the subtitle of the Modal, if any.
Styles BitProModalClassStyles? null Custom CSS styles for different parts of the BitProModal component.
TitleAriaId string? null ARIA id for the title of the Modal, if any.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.
BitProModalClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the BitProModal.
Overlay string? null Custom CSS classes/styles for the overlay of the BitProModal.
Content string? null Custom CSS classes/styles for the content of the BitProModal.
HeaderContainer string? null Custom CSS classes/styles for the header container of the BitProModal.
Header string? null Custom CSS classes/styles for the header of the BitProModal.
CloseButton string? null Custom CSS classes/styles for the close button of the BitProModal.
CloseIcon string? null Custom CSS classes/styles for the close icon of the BitProModal.
Body string? null Custom CSS classes/styles for the body of the BitProModal.
Footer string? null Custom CSS classes/styles for the footer of the BitProModal.
BitIconInfo properties
Name
Type
Default value
Description
Name string? null Gets or sets the name of the icon.
BaseClass string? null Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix string? null Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.
BitPosition enum
Name
Value
Description
TopLeft 0
TopCenter 1
TopRight 2
TopStart 3
TopEnd 4
CenterLeft 5
Center 6
CenterRight 7
CenterStart 8
CenterEnd 9
BottomLeft 10
BottomCenter 11
BottomRight 12
BottomStart 13
BottomEnd 14
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.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page