Accent color
# Panel
## Description
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.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AutoToggleScroll | `bool` | false | Enables the auto scrollbar toggle behavior of the panel. |
| 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 | `BitPanelClassStyles?` | null | Custom CSS classes for different parts of the panel. |
| IsOpen | `bool` | false | Determines the openness of the panel. |
| 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. |
| Styles | `BitPanelClassStyles?` | 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). |
| 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. |
## 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. |
## Enums
### 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. |
## Sub Classes
### BitPanelClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitPanel. |
| Overlay | `string?` | null | Custom CSS classes/styles for the overlay of the BitPanel. |
| Container | `string?` | null | Custom CSS classes/styles for the container of the BitPanel. |
## Examples
\n**Basic**:
```razor
Open Panel
```
```csharp
private bool isBasicPanelOpen;
```
\n**Advanced options**:
```razor
Open Panel
Close
Open Panel
Close
Open Panel
```
```csharp
private bool isBlockingPanelOpen;
private bool isModelessPanelOpen;
private BitPanel modelessPanelRef = default!;
private bool isAutoToggleScrollPanelOpen;
```
\n**Position and size**:
```razor
Start
End
Top
Bottom
```
```csharp
private double customPanelSize = 300;
private bool isOpenInPositionStart;
private bool isOpenPositionEnd;
private bool isOpenInPositionTop;
private bool isOpenInPositionBottom;
```
\n**Style & Class**:
```razor
Open Styled panel
Open Classed panel
Open panel Styles
BitPanel with Styles to customize its elements.
Open panel Classes
BitPanel with Classes to customize its elements.
```
```csharp
private bool isStyledPanelOpen;
private bool isClassedPanelOpen;
private bool isPanelStylesOpen;
private bool isPanelClassesOpen;
```
\n**RTL**:
```razor
آغاز
پایان
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.
Blocking
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.
Modeless
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.
AutoToggleScroll
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.
BitPanel with Start position and custom Size.
BitPanel with End position and custom Size.
BitPanel with Top position and custom Size.
BitPanel with Bottom position and custom Size.
BitPanel with custom style.
BitPanel with custom class:
Item 1
Item 2
Item 3
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
```
```csharp
private bool isRtlPanelOpenStart;
private bool isRtlPanelOpenEnd;
```