ProPanel

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

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

BitProPanel has some advanced options to be customized.

<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!;
}

Position and size

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

Custom 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;
}

Events

Explore different events available in the BitProPanel component:

OnOpen:

OnDismiss:

<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!;
}

Style & Class

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

Component's Style & Class:

Styles & Classes:

<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 isStyledPanelOpen;
    private bool isClassedPanelOpen;
    private bool isPanelStylesOpen;
    private bool isPanelClassesOpen;
}

RTL

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

<BitButton OnClick="() => isRtlPanelOpenStart = true">آغاز</BitButton>
<BitButton OnClick="() => isRtlPanelOpenEnd = 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;
}

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.
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	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.

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.

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.

On this page

ProPanel

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

Usage

Basic

Header & Footer

Advanced options

Position and size

Events

Style & Class

RTL

API

BitProPanel parameters

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitProPanelClassStyles properties

Name

Type

Default value

Description

BitPanelPosition enum

Name

Value

Description

BitVisibility enum

Name

Value

Description

BitDir enum

Name

Value

Description

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.

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.