- bit BlazorUI
Home Docs

ProPanel

ProPanel is an advanced version of normal Panel with additional features that tailored to more usual use-cases.

Usage

Basic
Header & Footer





Advanced options
BitProPanel has some advanced options to be customized.














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


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


Component's Style & Class:






Styles & Classes:



RTL
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.
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.
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.
  • On this page