Accent color
# ProModal
## Description
ProModal is an advanced version of normal Modal with additional features tailored for more common use-cases.
## 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. |
| 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. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## Examples
\n**Basic**:
```razor
Open ProModal
```
```csharp
private bool isBasicProModalOpen;
```
\n**Header & Footer**:
```razor
Open ProModal with HeaderText
Open ProModal with Header
Open ProModal with FooterText
Open ProModal with Footer
```
```csharp
private bool isProModalWithHeaderTextOpen;
private bool isProModalWithHeaderOpen;
private bool isProModalWithFooterTextOpen;
private bool isProModalWithFooterOpen;
```
\n**NoBorder**:
```razor
Open ProModal with NoBorder
```
```csharp
private bool isNoBorderProModalOpen;
```
\n**Advanced options**:
```razor
Open ProModal with ShowCloseButton
Open ProModal with Blocking
Toggle ProModal with Modeless
Open ProModal with ModeFull
Open ProModal with AutoToggleScroll
```
```csharp
private bool isBlockingProModalOpen;
private bool isModelessProModalOpen;
private bool isModeFullProModalOpen;
private bool isAutoToggleScrollProModalOpen;
private BitProModal bitProModalRef = default!;
private ElementReference appShellContainer = default!;
```
\n**Size**:
```razor
Open ProModal with FullSize
Open ProModal with FullWidth
Open ProModal with FullHeight
```
```csharp
private bool isOpenFullSize;
private bool isFullSize;
private bool isOpenFullWidth;
private bool isFullWidth;
private bool isOpenFullHeight;
private bool isFullHeight;
```
\n**AbsolutePosition**:
```razor
Open ProModal
Open ProModal (AutoToggleScroll & ScrollerSelector)
```
```csharp
private bool isOpenAbsolutePosition;
private bool isOpenScrollerSelector;
```
\n**Position**:
```razor
Top Left
Top Center
Top Right
Center Left
Center
Center Right
Bottom Left
Bottom Center
Bottom Right
Position: @position
```
```csharp
private bool isOpenPosition;
private BitPosition position;
private void OpenModalInPosition(BitPosition positionValue)
{
isOpenPosition = true;
position = positionValue;
}
```
\n**Draggable**:
```razor
Open ProModal
Open ProModal
```
```csharp
private bool isOpenDraggable;
private bool isOpenDraggableSelector;
```
\n**Events**:
```razor
Open OnOpen ProModal
Open OnDismiss ProModal
```
```csharp
private bool isOnOpenProModalOpen;
private bool isOnDismissProModalOpen;
private BitTextField onOpenTextFieldRef = default!;
private BitTextField onDismissTextFieldRef = default!;
```
\n**Style & Class**:
```razor
Open styled ProModal
Open classed ProModal
Open ProModal Styles
Open ProModal Classes
```
```csharp
private bool isOpenStyle;
private bool isOpenClass;
private bool isOpenStyles;
private bool isOpenClasses;
```
\n**External Icon**:
```razor
Open ProModal
```
```csharp
private bool isExternalIconProModalOpen;
```
\n**RTL**:
```razor
باز کردن مُدال
```
```csharp
private bool isOpenRtl;
```
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
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.
BitProModal with Header
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
amet, vulputate in leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
amet, vulputate in leo.
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.
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.
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.
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.
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.
Draggable with DragElementSelector
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo.
The following text field will be focused on open:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
amet, vulputate in leo.
BitProModal with custom style.
BitProModal with custom class.
BitProModal with Styles to customize its elements.
BitProModal with Classes to customize its elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
amet, vulputate in leo.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.