<BitButton OnClick="() => isBasicPanelOpen = true">Open Panel</BitButton>
<BitPanel @bind-IsOpen="isBasicPanelOpen">
    <div style="max-width:300px;padding:1rem">
        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.
    </div>
</BitPanel>
@code {
    private bool isBasicPanelOpen;
}
                    

<BitButton OnClick="() => isBlockingPanelOpen = true">Open Panel</BitButton>
<BitPanel @bind-IsOpen="isBlockingPanelOpen" Blocking>
    <div style="max-width:300px;padding:1rem">
        <h3>Blocking</h3>
        <div>
            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.
        </div>
        <BitButton OnClick="() => isBlockingPanelOpen = false">Close</BitButton>
    </div>
</BitPanel>

<BitButton OnClick="() => isModelessPanelOpen = true">Open Panel</BitButton>
<BitPanel @bind-IsOpen="isModelessPanelOpen" @ref="modelessPanelRef" Modeless>
    <div style="max-width:300px;padding:1rem">
        <h3>Modeless</h3>
        <div>
            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.
        </div>
        <BitButton OnClick="() => modelessPanelRef.Close()">Close</BitButton>
    </div>
</BitPanel>

<BitButton OnClick="() => isAutoToggleScrollPanelOpen = true">Open Panel</BitButton>
<BitPanel @bind-IsOpen="isAutoToggleScrollPanelOpen" AutoToggleScroll>
    <div style="max-width:300px;padding:1rem">
        <h3>AutoToggleScroll</h3>
        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.
    </div>
</BitPanel>
@code {
    private bool isBlockingPanelOpen;
    private bool isModelessPanelOpen;
    private BitPanel modelessPanelRef = default!;
    private bool isAutoToggleScrollPanelOpen;
}
                    

<BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />

<BitButton OnClick="() => isOpenInPositionStart = true">Start</BitButton>
<BitButton OnClick="() => isOpenPositionEnd = true">End</BitButton>
<BitButton OnClick="() => isOpenInPositionTop = true">Top</BitButton>
<BitButton OnClick="() => isOpenInPositionBottom = true">Bottom</BitButton>

<BitPanel @bind-Size="customPanelSize"
            @bind-IsOpen="isOpenInPositionStart"
            Position="BitPanelPosition.Start">
    <div style="padding:1rem">
        BitPanel with Start position and custom Size.
        <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
    </div>
</BitPanel>

<BitPanel @bind-Size="customPanelSize"
            @bind-IsOpen="isOpenPositionEnd"
            Position="BitPanelPosition.End">
    <div style="padding:1rem">
        BitPanel with End position and custom Size.
        <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
    </div>
</BitPanel>

<BitPanel @bind-Size="customPanelSize" @bind-IsOpen="isOpenInPositionTop" Position="BitPanelPosition.Top">
    <div style="padding:1rem">
        BitPanel with Top position and custom Size.
        <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
    </div>
</BitPanel>

<BitPanel @bind-Size="customPanelSize"
            @bind-IsOpen="isOpenInPositionBottom"
            Position="BitPanelPosition.Bottom">
    <div style="padding:1rem">
        BitPanel with Bottom position and custom Size.
        <BitNumberField @bind-Value="customPanelSize" Mode="BitSpinButtonMode.Inline" Label="Custom size" />
    </div>
</BitPanel>
@code {
    private double customPanelSize = 300;
    private bool isOpenInPositionStart;
    private bool isOpenPositionEnd;
    private bool isOpenInPositionTop;
    private bool isOpenInPositionBottom;
}
                    

<BitButton OnClick="() => isStyledPanelOpen = true">Open Styled panel</BitButton>
<BitPanel @bind-IsOpen="isStyledPanelOpen" Style="font-size: 3rem;">
    <div style="padding:1rem">
        BitPanel with custom style.
    </div>
</BitPanel>

<BitButton OnClick="() => isClassedPanelOpen = true">Open Classed panel</BitButton>
<BitPanel @bind-IsOpen="isClassedPanelOpen" Class="custom-class">
    <div style="padding:1rem">
        BitPanel with custom class:
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</BitPanel>

<BitButton OnClick="() => isPanelStylesOpen = true">Open panel Styles</BitButton>
<BitPanel @bind-IsOpen="isPanelStylesOpen"
          Styles="@(new() { Overlay = "background-color: #4776f433;",
                            Container = "padding: 1rem; box-shadow: 0 0 1rem tomato;" })">
    BitPanel with <b>Styles</b> to customize its elements.
</BitPanel>

<BitButton OnClick="() => isPanelClassesOpen = true">Open panel Classes</BitButton>
<BitPanel @bind-IsOpen="isPanelClassesOpen"
          Classes="@(new() { Container = "custom-container",
                             Overlay = "custom-overlay" })">
    BitPanel with <b>Classes</b> to customize its elements.
</BitPanel>
@code {
    private bool isStyledPanelOpen;
    private bool isClassedPanelOpen;
    private bool isPanelStylesOpen;
    private bool isPanelClassesOpen;
}
                    

<BitButton OnClick="() => isRtlPanelOpenStart = true">آغاز</BitButton>
<BitButton OnClick="() => isRtlPanelOpenEnd = true">پایان</BitButton>

<BitPanel @bind-IsOpen="isRtlPanelOpenStart"
          Dir="BitDir.Rtl"
          Position="BitPanelPosition.Start">
    <div style="max-width:300px;padding:1rem">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    </div>
</BitPanel
<BitPanel @bind-IsOpen="isRtlPanelOpenEnd"
          Dir="BitDir.Rtl"
          Position="BitPanelPosition.End">
    <div style="max-width:300px;padding:1rem">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    </div>
</BitPanel>
@code {
    private bool isRtlPanelOpenStart;
    private bool isRtlPanelOpenEnd;
}