ProModal

ProModal is an advanced version of normal Modal with additional features tailored for more common 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

<BitButton OnClick="() => isBasicProModalOpen = true">Open ProModal</BitButton>

<BitProModal @bind-IsOpen="isBasicProModalOpen">
    <div style="max-width:40rem">
        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.
        <br />
        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.
    </div>
</BitProModal>
@code {
    private bool isBasicProModalOpen;
}

Header & Footer

<BitButton OnClick="() => isProModalWithHeaderTextOpen = true">Open ProModal with HeaderText</BitButton>

<BitProModal @bind-IsOpen="isProModalWithHeaderTextOpen" 
             HeaderText="BitProModal with HeaderText">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>


<BitButton OnClick="() => isProModalWithHeaderOpen = true">Open ProModal with Header</BitButton>

<BitProModal @bind-IsOpen="isProModalWithHeaderOpen">
    <Header>
        <div>
            <div style="margin-bottom:4px">BitProModal with Header</div>
            <BitSearchBox Placeholder="Search here..." />
        </div>
    </Header>
    <Body>
        <div style="max-width:40rem">
            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.
        </div>
    </Body>
</BitProModal>


<BitButton OnClick="() => isProModalWithFooterTextOpen = true">Open ProModal with FooterText</BitButton>

<BitProModal @bind-IsOpen="isProModalWithFooterTextOpen" 
             FooterText="BitProModal with FooterText">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>

<BitButton OnClick="() => isProModalWithFooterOpen = true">Open ProModal with Footer</BitButton>
<BitProModal @bind-IsOpen="isProModalWithFooterOpen">
    <Body>
        <div style="max-width:40rem">
            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.
        </div>
    </Body>
    <Footer>
        <h3 style="margin-bottom:4px">BitProModal with Footer</h3>
        <BitButton OnClick="() => isProModalWithFooterOpen = false">Save</BitButton>
        <BitButton OnClick="() => isProModalWithFooterOpen = false" Variant="BitVariant.Outline">Close</BitButton>
    </Footer>
</BitProModal>
@code {
    private bool isProModalWithHeaderTextOpen;
    private bool isProModalWithHeaderOpen;
    private bool isProModalWithFooterTextOpen;
    private bool isProModalWithFooterOpen;
}






NoBorder

<BitButton OnClick="() => isNoBorderProModalOpen = true">Open ProModal with NoBorder</BitButton>

<BitProModal @bind-IsOpen="isNoBorderProModalOpen"
             NoBorder
             ShowCloseButton
             HeaderText="NoBorder">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>
@code {
    private bool isNoBorderProModalOpen;
}
By default, the BitProModal has a top border. Use the NoBorder parameter to remove it.

Advanced options

<BitButton OnClick="() => bitProModalRef.Open()">Open ProModal with ShowCloseButton</BitButton>

<BitProModal @ref="bitProModalRef" 
             ShowCloseButton
             HeaderText="ShowCloseButton">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>



<BitButton OnClick="() => isBlockingProModalOpen = true">Open ProModal with Blocking</BitButton>
<BitProModal @bind-IsOpen="isBlockingProModalOpen"
             Blocking
             ShowCloseButton
             HeaderText="Blocking">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>


<BitButton OnClick="() => isModelessProModalOpen = !isModelessProModalOpen">Toggle ProModal with Modeless</BitButton>

<BitProModal @bind-IsOpen="isModelessProModalOpen"
             Modeless
             ShowCloseButton
             HeaderText="Modeless">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>


<BitButton OnClick="() => isModeFullProModalOpen = true">Open ProModal with ModeFull</BitButton>

<BitProModal @bind-IsOpen="isModeFullProModalOpen"
             ModeFull
             ShowCloseButton
             HeaderText="ModeFull">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>


<BitButton OnClick="() => isAutoToggleScrollProModalOpen = true">Open ProModal with AutoToggleScroll</BitButton>

<BitProModal @bind-IsOpen="isAutoToggleScrollProModalOpen"
             ShowCloseButton
             AutoToggleScroll
             HeaderText="AutoToggleScroll"
             ScrollerElement="appShellContainer">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>
@code {
    private bool isBlockingProModalOpen;
    private bool isModelessProModalOpen;
    private bool isModeFullProModalOpen;
    private bool isAutoToggleScrollProModalOpen;
    private BitProModal bitProModalRef = default!;
    private ElementReference appShellContainer = default!;
}
BitProModal has some advanced options to be customized.









Size

<BitButton OnClick="() => isOpenFullSize = true">Open ProModal with FullSize</BitButton>

<BitProModal @bind-IsOpen="isOpenFullSize"
             ShowCloseButton
             FullSize="isFullSize"
             HeaderText="FullSize ProModal">
    <div style="max-width:40rem">
        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.
        <hr />
        <BitToggleButton @bind-IsChecked="isFullSize" OnText="Restore" OffText="FullSize" />
    </div>
</BitProModal>


<BitButton OnClick="() => isOpenFullWidth = true">Open ProModal with FullWidth</BitButton>

<BitProModal @bind-IsOpen="isOpenFullWidth"
             ShowCloseButton
             FullWidth="isFullWidth"
             HeaderText="FullWidth ProModal">
    <div style="max-width:40rem">
        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.
        <hr />
        <BitToggleButton @bind-IsChecked="isFullWidth" OnText="Restore" OffText="FullWidth" />
    </div>
</BitProModal>


<BitButton OnClick="() => isOpenFullHeight = true">Open ProModal with FullHeight</BitButton>

<BitProModal @bind-IsOpen="isOpenFullHeight"
             ShowCloseButton
             FullHeight="isFullHeight"
             HeaderText="FullHeight ProModal">
    <div style="max-width:40rem">
        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.
        <hr />
        <BitToggleButton @bind-IsChecked="isFullHeight" OnText="Restore" OffText="FullHeight" />
    </div>
</BitProModal>
@code {
    private bool isOpenFullSize;
    private bool isFullSize;
    private bool isOpenFullWidth;
    private bool isFullWidth;
    private bool isOpenFullHeight;
    private bool isFullHeight;
}
BitProModal has size related parameters to make it occupy available screen width/height or both.






AbsolutePosition

<BitButton OnClick="() => isOpenAbsolutePosition = true">Open ProModal</BitButton>
<BitButton OnClick="() => isOpenScrollerSelector = true">Open ProModal (AutoToggleScroll & ScrollerSelector)</BitButton>

<div class="relative-container" id="modal-scroller">
    <BitProModal @bind-IsOpen="isOpenAbsolutePosition"
                 ShowCloseButton
                 AbsolutePosition
                 HeaderText="AbsolutePosition">
        <div style="max-width:40rem">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
            amet, vulputate in leo.
        </div>
    </BitProModal>

    <BitProModal @bind-IsOpen="isOpenScrollerSelector"
                 ShowCloseButton
                 AbsolutePosition
                 AutoToggleScroll
                 ScrollerSelector="#modal-scroller"
                 HeaderText="AbsolutePosition with AutoToggleScroll and ScrollerSelector">
        <div style="max-width:40rem">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
            amet, vulputate in leo.
        </div>
    </BitProModal>

    <div>
        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.
    </div>
</div>
@code {
    private bool isOpenAbsolutePosition;
    private bool isOpenScrollerSelector;
}
BitProModal has an absolute position option to further customize its location.





Position

<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopLeft)">Top Left</BitButton>
<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopCenter)">Top Center</BitButton>
<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopRight)">Top Right</BitButton>
        
<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterLeft)">Center Left</BitButton>
<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.Center)">Center</BitButton>
<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterRight)">Center Right</BitButton>

<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomLeft)">Bottom Left</BitButton>
<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomCenter)">Bottom Center</BitButton>
<BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomRight)">Bottom Right</BitButton>


<BitProModal @bind-IsOpen="isOpenPosition" Position="position" ShowCloseButton>
    <Header>
        Position: @position
    </Header>
    <Body>
        <div style="max-width:40rem">
            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.
        </div>
    </Body>
</BitProModal>
@code {
    private bool isOpenPosition;
    private BitPosition position;
    
    private void OpenModalInPosition(BitPosition positionValue)
    {
        isOpenPosition = true;
        position = positionValue;
    }
}
To set the ProModal position on the page you can use the Position parameter.

Draggable

<BitButton OnClick="() => isOpenDraggable = true">Open ProModal</BitButton>

<BitProModal @bind-IsOpen="isOpenDraggable"
             Draggable
             ShowCloseButton
             HeaderText="Draggable">
    <div style="max-width:40rem">
        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.
    </div>
</BitProModal>


<BitButton OnClick="() => isOpenDraggableSelector = true">Open ProModal</BitButton>

<BitProModal @bind-IsOpen="isOpenDraggableSelector"
             Draggable
             ShowCloseButton
             DragElementSelector="#modal-drag-element">
    <div style="max-width:40rem">
        <h3 id="modal-drag-element" style="color:white; background:brown; padding:1rem">
            Draggable with DragElementSelector
        </h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
        amet, vulputate in leo.
    </div>
</BitProModal>
@code {
    private bool isOpenDraggable;
    private bool isOpenDraggableSelector;
}
The Draggable parameter of the BitProModal allows users to move the modal around the screen.



Using custom drag element:

Events

<BitButton OnClick="() => isOnOpenProModalOpen = true">Open OnOpen ProModal</BitButton>

<BitProModal @bind-IsOpen="isOnOpenProModalOpen"
             ShowCloseButton
             HeaderText="OnOpen"
             OnOpen="() => onOpenTextFieldRef.FocusAsync()">
    <div style="max-width:40rem">
        The following text field will be focused on open:
        <br /><br />
        <BitTextField @ref="onOpenTextFieldRef" />
    </div>
</BitProModal>


<BitButton OnClick="() => isOnDismissProModalOpen = true">Open OnDismiss ProModal</BitButton>
<BitTextField @ref="onDismissTextFieldRef" Placeholder="This will be focused on dismiss..." />

<BitProModal @bind-IsOpen="isOnDismissProModalOpen"
             ShowCloseButton
             HeaderText="OnDismiss"
             OnDismiss="() => onDismissTextFieldRef.FocusAsync()">
    <div style="max-width:40rem">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
        amet, vulputate in leo.
    </div>
</BitProModal>
@code {
    private bool isOnOpenProModalOpen;
    private bool isOnDismissProModalOpen;
    private BitTextField onOpenTextFieldRef = default!;
    private BitTextField onDismissTextFieldRef = default!;
}
Explore different events available in the BitProModal component:


OnOpen:



OnDismiss:



Style & Class

<BitButton OnClick="() => isOpenStyle = true">Open styled ProModal</BitButton>

<BitProModal @bind-IsOpen="isOpenStyle"
             ShowCloseButton
             HeaderText="Style"
             Style="box-shadow:inset 0 0 1.5rem 1.5rem palevioletred;">
    <div style="max-width:40rem">
        BitProModal with custom style.
    </div>
</BitProModal>


<BitButton OnClick="() => isOpenClass = true">Open classed ProModal</BitButton>

<BitProModal @bind-IsOpen="isOpenClass"
             ShowCloseButton
             HeaderText="Class"
             Class="custom-class">
    <div style="max-width:40rem">
        BitProModal with custom class.
    </div>
</BitProModal>


<BitButton OnClick="() => isOpenStyles = true">Open ProModal Styles</BitButton>

<BitProModal @bind-IsOpen="isOpenStyles"
             ShowCloseButton
             HeaderText="Styles"
             Styles="@(new()
             {
                 Overlay = "background-color:#4776f433;",
                 Content = "box-shadow: 0 0 1rem tomato;"
             })">
    <div style="max-width:40rem">
        BitProModal with <b>Styles</b> to customize its elements.
    </div>
</BitProModal>


<BitButton OnClick="() => isOpenClasses = true">Open ProModal Classes</BitButton>

<BitProModal @bind-IsOpen="isOpenClasses"
             ShowCloseButton
             HeaderText="Classes"
             FooterText="This is a footer text!"
             Classes="@(new()
             {
                 Root = "custom-root",
                 Overlay = "custom-overlay",
                 Content = "custom-content",
                 HeaderContainer = "custom-header-container",
                 Header = "custom-header",
                 Body = "custom-body",
                 Footer = "custom-footer"
             })">
    <div style="max-width:40rem">
        BitProModal with <b>Classes</b> to customize its elements.
    </div>
</BitProModal>
@code {
    private bool isOpenStyle;
    private bool isOpenClass;
    private bool isOpenStyles;
    private bool isOpenClasses;
}
Using css related parameters users can further customize the modal based on their needs.


Component's Style & Class:






Styles & Classes:



External Icon

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />


<BitButton OnClick="() => isExternalIconProModalOpen = true">Open ProModal</BitButton>

<BitProModal @bind-IsOpen="isExternalIconProModalOpen"
             ShowCloseButton
             HeaderText="External Close Icon"
             CloseIcon="@BitIconInfo.Fa("solid xmark")">
    <div style="max-width:40rem">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit
        amet, vulputate in leo.
    </div>
</BitProModal>
@code {
    private bool isExternalIconProModalOpen;
}
Use icons from external libraries like FontAwesome to customize the close button icon with the CloseIcon parameter.


RTL

<BitButton Dir="BitDir.Rtl" OnClick="() => isOpenRtl = true">باز کردن مُدال</BitButton>

<BitProModal @bind-IsOpen="isOpenRtl"
             ShowCloseButton
             Dir="BitDir.Rtl"
             HeaderText="مدال راست به چپ">
    <div style="max-width:40rem">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
    </div>
</BitProModal>
@code {
    private bool isOpenRtl;
}
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.
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.

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.