Accent color

AutoLoading click count: @autoLoadCount

Reclickable

Re-clickable AutoLoading click count: @reclickableAutoLoadCount

``` ```csharp private bool fillIsLoading; private bool outlineIsLoading; private bool textIsLoading; private async Task LoadingFillClick() { fillIsLoading = true; await Task.Delay(3000); fillIsLoading = false; } private async Task LoadingOutlineClick() { outlineIsLoading = true; await Task.Delay(3000); outlineIsLoading = false; } private async Task LoadingTextClick() { textIsLoading = true; await Task.Delay(3000); textIsLoading = false; } private int autoLoadCount; private async Task AutoLoadingClick() { autoLoadCount++; await Task.Delay(3000); } private int reclickableAutoLoadCount; private TaskCompletionSource clickTsc = new(); private CancellationTokenSource delayCts = new(); private Task AutoLoadingReclick(bool isLoading) { if (isLoading) { clickTsc.TrySetException(new TaskCanceledException()); delayCts.Cancel(); } delayCts = new(); clickTsc = new(); reclickableAutoLoadCount++; _ = Task.Delay(3000, delayCts.Token).ContinueWith(async delayTask => { await delayTask; clickTsc.TrySetResult(); }); return clickTsc.Task; } ``` \n**Loading Label**: ```razor End Start Bottom Top ``` \n**Href**: ```razor Open bitplatform.dev Go to bitplatform GitHub Download the bit logo ``` \n**Rel**: ```razor Open bitplatform.dev with a rel attribute (nofollow) Open bitplatform.dev with a rel attribute (nofollow & noreferrer) ``` \n**Float & Draggable**: ```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.
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.

``` ```csharp private string? floatOffset = "63px"; private BitPosition floatPosition = BitPosition.BottomRight; [Inject] private IJSRuntime _js { get; set; } = default!; private async Task ScrollToFloat() => await _js.ScrollToElement("example12"); private readonly List> floatPositionList = Enum.GetValues() .Cast() .Select(enumValue => new BitDropdownItem { Value = enumValue, Text = enumValue.ToString() }) .ToList(); ``` \n**Button Type**: ```razor @if (formIsValidSubmit is false) {

Submit Reset Button

} else { The form submitted successfully. } @if (externalFormSubmitted is false) { External submit } else { The external form submitted successfully. } ``` ```csharp public class ButtonValidationModel { [Required] public string RequiredText { get; set; } = string.Empty; public string? NonRequiredText { get; set; } } private bool formIsValidSubmit; private ButtonValidationModel buttonValidationModel = new(); private async Task HandleValidSubmit() { formIsValidSubmit = true; await Task.Delay(2000); buttonValidationModel = new(); formIsValidSubmit = false; StateHasChanged(); } private void HandleInvalidSubmit() { formIsValidSubmit = false; } private bool externalFormSubmitted; private ButtonValidationModel externalFormModel = new(); private async Task HandleExternalFormValidSubmit() { externalFormSubmitted = true; await Task.Delay(2000); externalFormModel = new(); externalFormSubmitted = false; StateHasChanged(); } ``` \n**Templates**: ```razor A primary template Primary text A secondary template A primary template A secondary template Click me

Wait...

``` ```csharp private bool templateIsLoading; private async Task LoadingTemplateClick() { templateIsLoading = true; await Task.Delay(3000); templateIsLoading = false; } ``` \n**Events**: ```razor Click me (@clickCounter)

With StopPropagation Without StopPropagation

Button clicks: @buttonClickCounter, Parent clicks: @parentClickCounter

Focus target Focus the other button ``` ```csharp private int clickCounter; private int parentClickCounter; private int buttonClickCounter; private BitButton focusButtonRef = default!; ``` \n**Size**: ```razor Fill Fill Outline Outline Text Text Fill Outline Text Fill Fill Outline Outline Text Text Fill Outline Text Fill Fill Outline Outline Text Text Fill Outline Text ``` \n**FullWidth**: ```razor Full Width Button ``` \n**FixedColor**: ```razor ``` \n**Color**: ```razor Primary Primary Primary Secondary Secondary Secondary Tertiary Tertiary Tertiary Info Info Info Success Success Success Warning Warning Warning SevereWarning SevereWarning SevereWarning Error Error Error

PrimaryBackground PrimaryBackground PrimaryBackground SecondaryBackground SecondaryBackground SecondaryBackground TertiaryBackground TertiaryBackground TertiaryBackground

Disabled:

Primary Primary Primary Secondary Secondary Secondary Tertiary Tertiary Tertiary Info Info Info Success Success Success Warning Warning Warning SevereWarning SevereWarning SevereWarning Error Error Error

PrimaryBackground PrimaryBackground PrimaryBackground SecondaryBackground SecondaryBackground SecondaryBackground TertiaryBackground TertiaryBackground TertiaryBackground

PrimaryForeground PrimaryForeground PrimaryForeground SecondaryForeground SecondaryForeground SecondaryForeground TertiaryForeground TertiaryForeground TertiaryForeground PrimaryBorder PrimaryBorder PrimaryBorder SecondaryBorder SecondaryBorder SecondaryBorder TertiaryBorder TertiaryBorder TertiaryBorder ``` \n**External Icons**: ```razor House (Icon="@@("fa-solid fa-house")") Heart (Icon="@@BitIconInfo.Css("fa-solid fa-heart")") GitHub (Icon="@@BitIconInfo.Fa("brands github")") Rocket (Icon="@@BitIconInfo.Fa("solid rocket")") House (Icon="@@("bi bi-house-fill")") Heart (Icon="@@BitIconInfo.Css("bi bi-heart-fill")") GitHub (Icon="@@BitIconInfo.Bi("github")") Gear (Icon="@@BitIconInfo.Bi("gear-fill")") ``` \n**Style & Class**: ```razor Styled Button Classed Button Click me Click me ``` ```csharp private bool stylesIsLoading; private bool classesIsLoading; private async Task LoadingStylesClick() { stylesIsLoading = true; await Task.Delay(3000); stylesIsLoading = false; } private async Task LoadingClassesClick() { classesIsLoading = true; await Task.Delay(3000); classesIsLoading = false; } ``` \n**RTL**: ```razor دکمه با آیکن دکمه با آیکن دکمه با آیکن دکمه با آیکن دکمه با آیکن دکمه با آیکن ```