ProPanel is an advanced version of normal Panel 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.

ForceAnimation (whole page)

Usage

Basic

<BitButton OnClick="() => isBasicProPanelOpen = true">Open ProPanel</BitButton>
<BitProPanel @bind-IsOpen="isBasicProPanelOpen">
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>
@code {
    private bool isBasicProPanelOpen;
}

Header & Footer

<BitButton OnClick="() => isProPanelWithHeaderTextOpen = true">Open ProPanel with HeaderText</BitButton>
<BitProPanel @bind-IsOpen="isProPanelWithHeaderTextOpen" HeaderText="BitProPanel with HeaderText">
    <div style="max-width:300px">
        Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
        These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape. 
        Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
        inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
        spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
        in potential-the quiet magic of beginnings, where everything is still to come, and the possibilities 
        are boundless. This space is yours to craft, yours to shape, yours to bring to life.
    </div>
</BitProPanel>

<BitButton OnClick="() => isProPanelWithHeaderOpen = true">Open ProPanel with Header</BitButton>
<BitProPanel @bind-IsOpen="isProPanelWithHeaderOpen">
    <Header>
        <div>
            <div style="margin-bottom:4px">BitProPanel with Header</div>
            <BitSearchBox Placeholder="Search here..." />
        </div>
    </Header>
    <Body>
        <div style="max-width:300px">
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. 
            These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape. 
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and 
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought, 
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty 
            in potential-the quiet magic of beginnings, where everything is still to come, and the possibilities 
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </Body>
</BitProPanel>


<BitButton OnClick="() => isProPanelWithFooterTextOpen = true">Open ProPanel with FooterText</BitButton>
<BitProPanel @bind-IsOpen="isProPanelWithFooterTextOpen" FooterText="BitProPanel with FooterText">
    <div style="max-width:300px">
        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.
    </div>
</BitProPanel>

<BitButton OnClick="() => isProPanelWithFooterOpen = true">Open ProPanel with Footer</BitButton>
<BitProPanel @bind-IsOpen="isProPanelWithFooterOpen">
    <Body>
        <div style="max-width:300px">
            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.
        </div>
    </Body>
    <Footer>
        <h3 style="margin-bottom:4px">BitProPanel with Footer</h3>
        <BitButton OnClick="() => isProPanelWithFooterOpen = false">Save</BitButton>
        <BitButton OnClick="() => isProPanelWithFooterOpen = false" Variant="BitVariant.Outline">Close</BitButton>
    </Footer>
</BitProPanel>
@code {
    private bool isProPanelWithHeaderTextOpen;
    private bool isProPanelWithHeaderOpen;
    private bool isProPanelWithFooterTextOpen;
    private bool isProPanelWithFooterOpen;
}

Advanced options

<BitButton OnClick="() => bitProPanelRef.Open()">Open ProPanel with ShowCloseButton</BitButton>
<BitProPanel @ref="bitProPanelRef" HeaderText="ShowCloseButton" ShowCloseButton>
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>

<BitButton OnClick="() => isBlockingProPanelOpen = true">Open ProPanel with Blocking</BitButton>
<BitProPanel @bind-IsOpen="isBlockingProPanelOpen" HeaderText="Blocking" ShowCloseButton Blocking>
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>

<BitButton OnClick="() => isModelessProPanelOpen = !isModelessProPanelOpen">Toggle ProPanel with Modeless</BitButton>
<BitProPanel @bind-IsOpen="isModelessProPanelOpen" HeaderText="Modeless" ShowCloseButton Modeless>
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>

<BitButton OnClick="() => isModeFullProPanelOpen = true">Open ProPanel with ModeFull</BitButton>
<BitProPanel @bind-IsOpen="isModeFullProPanelOpen" HeaderText="ModeFull" ShowCloseButton ModeFull>
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>

<BitButton OnClick="() => isAutoToggleScrollProPanelOpen = true">Open ProPanel with AutoToggleScroll</BitButton>
<BitProPanel @bind-IsOpen="isAutoToggleScrollProPanelOpen" HeaderText="AutoToggleScroll" AutoToggleScroll>
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>
@code {
    private bool isBlockingProPanelOpen;
    private bool isModelessProPanelOpen;
    private bool isModeFullProPanelOpen;
    private bool isAutoToggleScrollProPanelOpen;
    private BitProPanel bitProPanelRef = default!;
}

BitProPanel has some advanced options to be customized.

Position and size

<BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />

<BitButton OnClick="() => isStartProPanelOpen = true">Start</BitButton>
<BitButton OnClick="() => isEndProPanelOpen = true">End</BitButton>

<BitButton OnClick="() => isTopProPanelOpen = true">Top</BitButton>
<BitButton OnClick="() => isBottomProPanelOpen = true">Bottom</BitButton>


<BitProPanel @bind-Size="customProPanelSize"
             @bind-IsOpen="isStartProPanelOpen"
             HeaderText="Start BitProPanel"
             Position="BitPanelPosition.Start">
    BitProPanel with Start position and custom Size.
    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
    for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
</BitProPanel>

<BitProPanel @bind-Size="customProPanelSize"
             @bind-IsOpen="isEndProPanelOpen"
             HeaderText="End BitProPanel"
             Position="BitPanelPosition.End">
    BitProPanel with End position and custom Size.
    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
    for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
</BitProPanel>

<BitProPanel @bind-Size="customProPanelSize"
             @bind-IsOpen="isTopProPanelOpen"
             HeaderText="Top BitProPanel"
             Position="BitPanelPosition.Top">
    BitProPanel with Top position and custom Size.
    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
    for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
</BitProPanel>

<BitProPanel @bind-Size="customProPanelSize"
             @bind-IsOpen="isBottomProPanelOpen"
             HeaderText="Bottom BitProPanel"
             Position="BitPanelPosition.Bottom">
    BitProPanel with Bottom position and custom Size.
    <BitNumberField @bind-Value="customProPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
    Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
    Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
    when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
    for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
</BitProPanel>
@code {
    private double customPanelSize = 300;
    private bool isOpenInPositionStart;
    private bool isOpenPositionEnd;
    private bool isOpenInPositionTop;
    private bool isOpenInPositionBottom;
}

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

Custom size

Events

<BitButton OnClick="() => isOnOpenProPanelOpen = true">Open OnOpen ProPanel</BitButton>
<BitProPanel @bind-IsOpen="isOnOpenProPanelOpen" OnOpen="() => onOpenTextFieldRef.FocusAsync()">
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
        <br /><br />
        The following text field will be focused on open:
        <br /><br />
        <BitTextField @ref="onOpenTextFieldRef" />
    </div>
</BitProPanel>


<BitButton OnClick="() => isOnDismissProPanelOpen = true">Open OnDismiss ProPanel</BitButton>
<BitTextField @ref="onDismissTextFieldRef" Placeholder="This will be focused on dismiss..." />
<BitProPanel @bind-IsOpen="isOnDismissProPanelOpen" OnDismiss="() => onDismissTextFieldRef.FocusAsync()">
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>
@code {
    private bool isOnOpenProPanelOpen;
    private bool isOnDismissProPanelOpen;
    private BitTextField onOpenTextFieldRef = default!;
    private BitTextField onDismissTextFieldRef = default!;
}

Explore different events available in the BitProPanel component:

OnOpen:

OnDismiss:

Style & Class

<style>
    .custom-class .item {
        color: black;
        padding: 1rem;
        margin: 0.5rem;
        border-radius: 0.5rem;
        background-color: brown;
    }

    .custom-container {
        border: 0.25rem solid #0054C6;
    }

    .custom-overlay {
        background-color: #ffbd5a66;
    }

    .custom-header-container {
        padding: 1.5rem;
        background-color: tomato;
    }

    .custom-header {
        font-size: 2rem;
    }

    .custom-body {
        color: black;
        background-color: lightseagreen;
    }

    .custom-footer {
        color: brown;
        padding: 1.5rem;
        font-size: 1.5rem;
        background-color: tomato;
    }
</style>

<BitButton OnClick="() => isStyledProPanelOpen = true">Open Styled ProPanel</BitButton>
<BitProPanel @bind-IsOpen="isStyledProPanelOpen" HeaderText="Style" ShowCloseButton Style="font-size: 3rem;">
    BitProPanel with custom style.
</BitProPanel>

<BitButton OnClick="() => isClassedProPanelOpen = true">Open Classed ProPanel</BitButton>
<BitProPanel @bind-IsOpen="isClassedProPanelOpen" HeaderText="Class" ShowCloseButton Class="custom-class">
    BitProPanel with custom class:
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>

<BitButton OnClick="() => isProPanelStylesOpen = true">Open ProPanel Styles</BitButton>
<BitProPanel @bind-IsOpen="isProPanelStylesOpen"
             HeaderText="Styles" ShowCloseButton
             Styles="@(new() { Overlay = "background-color: #4776f433;",
                               Container = "box-shadow: 0 0 1rem tomato;" })">
    BitProPanel with <b>Styles</b> to customize its elements.
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>

<BitButton OnClick="() => isProPanelClassesOpen = true">Open ProPanel Classes</BitButton>
<BitProPanel @bind-IsOpen="isProPanelClassesOpen"
             HeaderText="Classes" ShowCloseButton
             FooterText="This is a footer text!"
             Classes="@(new() { Container = "custom-container",
                                Overlay = "custom-overlay",
                                HeaderContainer = "custom-header-container",
                                Header = "custom-header",
                                Body = "custom-body",
                                Footer = "custom-footer" })">
    BitProPanel with <b>Classes</b> to customize its elements.
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>
@code {
    private bool isStyledProPanelOpen;
    private bool isClassedProPanelOpen;
    private bool isProPanelStylesOpen;
    private bool isProPanelClassesOpen;
}

Explore styling and class customization for BitProPanel, including component styles, custom classes, and detailed styles.

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="() => isExternalIconProPanelOpen = true">Open ProPanel</BitButton>
<BitProPanel @bind-IsOpen="isExternalIconProPanelOpen"
             ShowCloseButton
             HeaderText="External Close Icon"
             CloseIcon="@BitIconInfo.Fa("solid xmark")">  
    <div style="max-width:300px">
        Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. 
        Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment 
        when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, 
        for ideas that change minds and spark emotions. This is where the journey begins-your words will lead the way.
    </div>
</BitProPanel>
@code {
    private bool isExternalIconProPanelOpen;
}

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

RTL

<BitButton OnClick="() => isRtlProPanelOpenStart = true">آغاز</BitButton>
<BitButton OnClick="() => isRtlProPanelOpenEnd = true">پایان</BitButton>

<BitProPanel @bind-IsOpen="isRtlProPanelOpenStart"
             Dir="BitDir.Rtl"
             HeaderText="سرصفحه ی آغاز"
             Position="BitPanelPosition.Start">
    <div style="max-width:300px">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    </div>
</BitProPanel
<BitProPanel @bind-IsOpen="isRtlProPanelOpenEnd"
             Dir="BitDir.Rtl"
             HeaderText="سرصفحه ی پایان"
             Position="BitPanelPosition.End">
    <div style="max-width:300px">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    </div>
</BitProPanel>
@code {
    private bool isRtlProPanelOpenStart;
    private bool isRtlProPanelOpenEnd;
}

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

API

BitProPanel parameters

Name	Type	Default value	Description
AutoToggleScroll	bool	false	Enables the auto scrollbar toggle behavior of the panel.
Body	RenderFragment?	null	The alias of the ChildContent.
Blocking	bool	false	Whether the panel can be dismissed by clicking outside of it on the overlay.
ChildContent	RenderFragment?	null	The content of the panel.
Classes	BitProPanelClassStyles?	null	Custom CSS classes for different parts of the panel.
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.
Footer	RenderFragment?	null	The template used to render the footer section of the panel.
FooterText	string?	null	The text of the footer section of the panel.
Header	RenderFragment?	null	The template used to render the header section of the panel.
HeaderText	string?	null	The text of the header section of the panel.
IsOpen	bool	false	Determines the openness of the panel.
ModeFull	bool	false	Renders the overlay in full mode that gives it an opaque background.
Modeless	bool	false	Removes the overlay element of the panel.
OnDismiss	EventCallback<MouseEventArgs>		A callback function for when the panel is dismissed.
OnOpen	EventCallback		A callback function for when the panel is opened.
OnSwipeStart	EventCallback<decimal>		The event callback for when the swipe action starts on the container of the panel.
OnSwipeMove	EventCallback<decimal>		The event callback for when the swipe action moves on the container of the panel.
OnSwipeEnd	EventCallback<decimal>		The event callback for when the swipe action ends on the container of the panel.
Position	BitPanelPosition?	null	The position of the panel to show on the screen.
Size	double?	null	The value of the height or width (based on the position) of the panel.
ScrollerSelector	string	null	Specifies the element selector for which the panel disables its scroll if applicable.
ShowCloseButton	bool	false	Shows the close button of the panel.
Styles	BitProPanelClassStyles?	null	Custom CSS styles for different parts of the panel component.
SwipeTrigger	decimal?	null	The swiping point (difference percentage) based on the width of the panel container to trigger the close action (default is 0.25m).

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.

BitProPanelClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitProPanel.
Overlay	string?	null	Custom CSS classes/styles for the overlay of the BitProPanel.
Container	string?	null	Custom CSS classes/styles for the container of the BitProPanel.
HeaderContainer	string?	null	Custom CSS classes/styles for the header container of the BitProPanel.
Header	string?	null	Custom CSS classes/styles for the header of the BitProPanel.
CloseButton	string?	null	Custom CSS classes/styles for the close button of the BitProPanel.
CloseIcon	string?	null	Custom CSS classes/styles for the close icon of the BitProPanel.
Body	string?	null	Custom CSS classes/styles for the body of the BitProPanel.
Footer	string?	null	Custom CSS classes/styles for the footer container of the BitProPanel.

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.

BitPanelPosition enum

Name	Value	Description
Start	0
End	1
Top	2
Bottom	3

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.