Basic

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.

ShowCloseButton

The close button in the corner dismisses this panel the way a click on the page behind it, the Escape key or a swipe towards the edge would.

``` ```csharp private bool isBasicPanelOpen; private BitPanel basicPanelRef = default!; private bool isCloseButtonPanelOpen; ``` \n**Header and footer**: ```razor HeaderText Header & Footer FooterText

A panel with a 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.

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.

``` ```csharp private bool isHeaderPanelOpen; private bool isHeaderTextPanelOpen; private bool isFooterTextPanelOpen; ``` \n**Position and size**: ```razor Start End Top Bottom FullSize

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 FullSize, which takes the whole of the screen. Close

``` ```csharp private double customPanelSize = 300; private bool isOpenInPositionStart; private bool isOpenPositionEnd; private bool isOpenInPositionTop; private bool isOpenInPositionBottom; private bool isFullSizePanelOpen; ``` \n**Overlay and dismissal**: ```razor Blocking ModeFull Modeless NoDismissOnEscape

Blocking

A click on the overlay does not dismiss this panel, but it is still reported: @overlayClickCount so far.

ModeFull

The page behind this panel is dimmed by the overlay instead of only being covered by it.

Modeless

There is no overlay over the page, so everything behind this panel stays usable - and the keyboard is free to leave the panel too.

NoDismissOnEscape

The Escape key does not dismiss this panel, but it is still reported: @escapeKeyCount so far. A click on the overlay still dismisses the panel.

``` ```csharp private int dismissCount; private int overlayClickCount; private int escapeKeyCount; private string lastDismissReason = "-"; private bool isBlockingPanelOpen; private bool isModeFullPanelOpen; private bool isModelessPanelOpen; private bool isNoEscapePanelOpen; private BitPanel modelessPanelRef = default!; private void HandleOnDismiss(MouseEventArgs e) { dismissCount++; } private void HandleOnDismissing(BitPanelDismissArgs args) { lastDismissReason = args.Reason.ToString(); } ``` \n**Refusing a dismissal**: ```razor Open guarded panel

OnDismissing

While the toggle is on, the overlay, the Escape key and a swipe are all turned down - only the button below gets this panel closed.

``` ```csharp private bool guardPanel = true; private bool guardedRefused; private bool isGuardedPanelOpen; private BitPanelDismissReason? guardedReason; private BitPanel guardedPanelRef = default!; private void HandleOnGuardedDismissing(BitPanelDismissArgs args) { guardedReason = args.Reason; // The Close the panel's own button asked for is let through; the gestures that could be a slip are not. args.Cancel = guardPanel && args.Reason is not BitPanelDismissReason.Programmatic; guardedRefused = args.Cancel; } ``` \n**Focus and the keyboard**: ```razor Auto focus NoAutoFocus & NoFocusTrap NoRestoreFocus

Focus

The keyboard came in with the panel and cannot leave it. Closing hands it back to the button that opened the panel.

NoAutoFocus & NoFocusTrap

The focus stayed on the button that opened this panel, and Tab walks out of it.

NoRestoreFocus

The keyboard came in with this panel as usual, but closing it leaves the focus where the panel left it rather than back on the button that opened it.

``` ```csharp private bool isFocusPanelOpen; private bool isNoFocusPanelOpen; private bool isNoRestoreFocusPanelOpen; ``` \n**Page scrolling**: ```razor Held page NoScrollLock AutoToggleScroll

Held page

The page behind this panel cannot be scrolled while it is open, and nothing on it shifted sideways when the scrollbar went away. Close the panel and it comes back.

NoScrollLock

The page behind this panel carries on scrolling while it is open.

AutoToggleScroll

This panel took the overflow off the page itself rather than taking the counted hold.

``` ```csharp private bool isScrollLockPanelOpen; private bool isNoScrollLockPanelOpen; private bool isAutoToggleScrollPanelOpen; ``` \n**Swipe to dismiss**: ```razor Swipe NoSwipe

Swipe

Drag this panel towards the end of the screen and let go.

Start: @swipeStart

Diff: @swipeDiff

NoSwipe

Dragging this panel does nothing - the gesture is left to whatever is inside it.

``` ```csharp private double swipeTrigger = 0.25; private decimal swipeStart; private decimal swipeDiff; private bool isSwipePanelOpen; private bool isNoSwipePanelOpen; ``` \n**Nested panels**: ```razor Open outer panel

Outer

This panel sits at the layer every panel shares.

Open inner panel Close

Inner

Lifted over the panel it was opened from, so its own overlay covers it.

``` ```csharp private bool isOuterPanelOpen; private bool isInnerPanelOpen; ``` \n**Inside a container**: ```razor

The panel below opens inside this box, not over the page.

Open

AbsolutePosition

``` ```csharp private bool isAbsolutePanelOpen; ``` \n**Rendering and events**: ```razor Starts over KeepMounted

Starts over

This content is built again from nothing every time the panel is opened.

KeepMounted

This content stays in the page once the panel has been opened for the first time.

``` ```csharp private int openCount; private bool lastToggleState; private bool lastSettledState; private bool isKeptPanelOpen; private bool isUnrenderPanelOpen; ``` \n**External Icons**: ```razor External close icon

The close button of this panel is drawn by FontAwesome instead of by the built-in icon set.

``` ```csharp private bool isExternalIconPanelOpen; ``` \n**Style & Class**: ```razor Open Styled panel Open Classed panel Open panel Styles Open panel Classes

BitPanel with custom style. Close

BitPanel with custom class:

Item 1

Item 2

Item 3

BitPanel with Styles to customize its elements. Close

BitPanel with Classes to customize its elements. Close

``` ```csharp private bool isStyledPanelOpen; private bool isClassedPanelOpen; private bool isPanelStylesOpen; private bool isPanelClassesOpen; ``` \n**RTL**: ```razor آغاز پایان

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. بستن

``` ```csharp private bool isRtlPanelOpenStart; private bool isRtlPanelOpenEnd; ```