Accent color
# ProPanel
## Description
ProPanel is an advanced version of normal Panel with additional features tailored for more common use-cases.
## 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). |
| 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
### 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. |
## Examples
\n**Basic**:
```razor
Open ProPanel
```
```csharp
private bool isBasicProPanelOpen;
```
\n**Header & Footer**:
```razor
Open ProPanel with HeaderText
Open ProPanel with Header
Open ProPanel with FooterText
Open ProPanel with Footer
```
```csharp
private bool isProPanelWithHeaderTextOpen;
private bool isProPanelWithHeaderOpen;
private bool isProPanelWithFooterTextOpen;
private bool isProPanelWithFooterOpen;
```
\n**Advanced options**:
```razor
Open ProPanel with ShowCloseButton
Open ProPanel with Blocking
Toggle ProPanel with Modeless
Open ProPanel with ModeFull
Open ProPanel with AutoToggleScroll
```
```csharp
private bool isBlockingProPanelOpen;
private bool isModelessProPanelOpen;
private bool isModeFullProPanelOpen;
private bool isAutoToggleScrollProPanelOpen;
private BitProPanel bitProPanelRef = default!;
```
\n**Position and size**:
```razor
Start
End
Top
Bottom
BitProPanel with Start position and 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 with End position and 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 with Top position and 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 with Bottom position and 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.
```
```csharp
private double customPanelSize = 300;
private bool isOpenInPositionStart;
private bool isOpenPositionEnd;
private bool isOpenInPositionTop;
private bool isOpenInPositionBottom;
```
\n**Events**:
```razor
Open OnOpen ProPanel
Open OnDismiss ProPanel
```
```csharp
private bool isOnOpenProPanelOpen;
private bool isOnDismissProPanelOpen;
private BitTextField onOpenTextFieldRef = default!;
private BitTextField onDismissTextFieldRef = default!;
```
\n**Style & Class**:
```razor
Open Styled ProPanel
BitProPanel with custom style.
Open Classed ProPanel
BitProPanel with custom class:
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.
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.
BitProPanel with Header
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.
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.
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.
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.
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.
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.
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.
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.
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.
The following text field will be focused on open:
The following text field will be focused on open:
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.
Item 1
Item 2
Item 3
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.
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.
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.
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.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
```
```csharp
private bool isRtlProPanelOpenStart;
private bool isRtlProPanelOpenEnd;
```