Panel - bit BlazorUI
Home Docs

Panel

Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences. For example, viewing details about an item in a list or editing settings.

Usage

Basic
Header
Footer
Advanced options
BitPanel has some advanced options to be customized.
Position and size
To set the Panel position on the page you can use the Position parameter.

Implementation

BitPanel parameters
Name
Type
Default value
Description
AutoToggleScroll bool true Enables the auto scrollbar toggle behavior of the Panel.
ChildContent RenderFragment? null The content of Panel, It can be Any custom tag or a text.
ClassStyles BitPanelClassStyles? null Custom CSS classes/styles for different parts of the BitPanel component.
FooterTemplate RenderFragment? null Used to customize how the footer inside the Panel is rendered.
HeaderTemplate RenderFragment? null Used to customize how the header inside the Panel is rendered.
HeaderText string? null Header text of Panel.
IsBlocking bool false Whether the dialog can be light dismissed by clicking outside the dialog (on the overlay).
IsModeless bool false Whether the dialog should be modeless (e.g. not dismiss when focusing/clicking outside of the dialog). if true: IsBlocking is ignored, there will be no overlay.
IsOpen bool false Whether the dialog is displayed.
OnDismiss EventCallback<MouseEventArgs> A callback function for when the Panel is dismissed.
Position BitPanelPosition BitPanelPosition.Right Position of the modal on the screen.
Size double 0 Provides Height or Width for the Panel.
ScrollerSelector string body Set the element selector for which the Panel disables its scroll if applicable.
ShowCloseButton bool true Shows or hides the close button of the Panel.
SubtitleAriaId string? null ARIA id for the subtitle of the Panel, if any.
TitleAriaId string? null ARIA id for the title of the Panel, if any.
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.
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.
BitPanelClassStyles properties
Name
Type
Default value
Description
Container BitClassStylePair? Custom CSS classes/styles for the Panel container.
Header BitClassStylePair? Custom CSS classes/styles for the panel header.
Body BitClassStylePair? Custom CSS classes/styles for the panel body.
Footer BitClassStylePair? Custom CSS classes/styles for the panel footer.
BitClassStylePair properties
Name
Type
Default value
Description
Class string? Custom CSS class.
Style string? Custom CSS style.
BitPanelPosition enum
Name
Value
Description
Right 0
Left 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).