The bound value is currently @boundExpanded.

Toggle This section starts open because DefaultExpanded is set, and nothing on the page holds its state.

@defaultChangeLog

Expand Collapse Toggle ExpandAsync, CollapseAsync and ToggleAsync go through the same path a bound value does, so the change is reported once through both ExpandedChanged and OnChange. ``` ```csharp private bool boundExpanded = true; private string defaultChangeLog = string.Empty; private BitCollapse? defaultCollapseRef; private BitCollapse? imperativeCollapseRef; private void HandleDefaultChange(bool value) { defaultChangeLog = $"OnChange reported {value}."; } ``` \n**Horizontal**: ```razor

This panel opens sideways.

``` ```csharp private bool horizontalExpanded = true; ``` \n**Collapsed size**: ```razor 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. @(peekExpanded ? "Show less" : "Show more") ``` ```csharp private bool peekExpanded; ``` \n**Transition**: ```razor A thousand milliseconds after a two hundred millisecond wait, on an easing that overshoots at both ends. Nine hundred milliseconds to open, two hundred to close. The size opens and closes this section; the content never changes its opacity. There is no transition here at all, which is what a section that toggles as part of a larger change wants. ``` ```csharp private bool transitionExpanded = true; private bool paceExpanded = true; private bool noFadeExpanded = true; private bool noAnimationExpanded = true; ``` \n**Transition events**: ```razor @(eventsExpanded ? "Collapse" : "Expand") OnChange and the -ing callback land as soon as the button is pressed; the -ed one arrives six hundred milliseconds later, when this section has stopped moving. @foreach (var entry in eventsLog) {

@entry

} ``` ```csharp private bool eventsExpanded = true; private BitCollapse? eventsCollapseRef; private readonly List eventsLog = []; private void HandleEventsChange(bool value) => LogCollapseEvent($"OnChange({value.ToString().ToLower()})"); private void HandleEventsExpanding() => LogCollapseEvent("OnExpanding"); private void HandleEventsCollapsing() => LogCollapseEvent("OnCollapsing"); private void HandleEventsExpanded() => LogCollapseEvent("OnExpanded"); private void HandleEventsCollapsed() => LogCollapseEvent("OnCollapsed"); private void LogCollapseEvent(string name) { eventsLog.Insert(0, name); if (eventsLog.Count > 8) { eventsLog.RemoveAt(eventsLog.Count - 1); } } ``` \n**Padding & background**: ```razor The padding and the primary background of the component. A background of the secondary color kind. Content that carries its own surface and its own insets. ``` ```csharp private bool surfaceExpanded = true; ``` \n**Overflow**: ```razor

The glow around this card is cut off at the edge of the collapse.

The same glow is drawn in full once the section has finished opening.

``` ```csharp private bool clipExpanded = true; ``` \n**Rendering**: ```razor

This content was built the first time the section was opened, and has stayed since; the section has been opened @lazyOpenCount time(s).

``` ```csharp private bool lazyExpanded; private int lazyOpenCount; private bool unmountExpanded = true; ``` \n**Find in page**: ```razor The passphrase kept in this section is marmalade skies. Close the section, press Ctrl+F, search for it, and watch the browser open the collapse around the match. ``` ```csharp private bool findExpanded = true; ``` \n**Accessibility**: ```razor Open and focus The focus ring around this section was put here by FocusAsync at the end of the expand transition, so the reader carries on inside the section rather than back at the button. ``` ```csharp private bool a11yExpanded; private bool focusExpanded; private BitCollapse? focusCollapseRef; private async Task HandleFocusExpanded() { if (focusCollapseRef is not null) { await focusCollapseRef.FocusAsync(); } } ``` \n**Style & Class**: ```razor 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. 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. ``` ```csharp private bool expandedClass = true; private bool expandedStyle = true; ``` \n**RTL**: ```razor لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

این بخش به سمت راست باز می شود.

``` ```csharp private bool expandedRtl = true; private bool expandedRtlHorizontal = true; ```