-
-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
303 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| @page "/busybutton/index" | ||
|
|
||
| <h1>BusyButton</h1> | ||
|
|
||
| <p>Busy Button Control</p> | ||
|
|
||
| <Instructions></Instructions> | ||
|
|
||
| <h2 class="mb-3">Examples</h2> | ||
|
|
||
| <h3>Basic</h3> | ||
|
|
||
| <p>Example of using BusyButton</p> | ||
|
|
||
| <div class="m-1"> | ||
| <div class="form-check m-1"> | ||
| <input type="checkbox" class="form-check-input" id="busy-check" @bind="IsBusy"> | ||
| <label class="form-check-label" for="busy-check">Loading</label> | ||
| </div> | ||
| <div class="form-check m-1"> | ||
| <input type="checkbox" class="form-check-input" id="busy-check" @bind="IsDisabled"> | ||
| <label class="form-check-label" for="busy-check">Disabled</label> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="m-1"> | ||
| <BusyButton Busy="@IsBusy" | ||
| Disabled="@IsDisabled" | ||
| id="save-button" | ||
| type="submit" | ||
| class="btn btn-primary"> | ||
| Save | ||
| </BusyButton> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <div class="m-1"> | ||
| <BusyButton Busy="@IsBusy" | ||
| Disabled="@IsDisabled" | ||
| id="save-button" | ||
| type="submit" | ||
| class="btn btn-primary"> | ||
| <BusyTemplate> | ||
| Saving ... | ||
| </BusyTemplate> | ||
| <ChildContent> | ||
| Save | ||
| </ChildContent> | ||
| </BusyButton> | ||
| </div> | ||
|
|
||
| @code { | ||
| [Parameter] | ||
| public bool IsBusy { get; set; } = true; | ||
|
|
||
| [Parameter] | ||
| public bool IsDisabled { get; set; } = false; | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| @page "/conditional/index" | ||
|
|
||
| <h1>Contional</h1> | ||
|
|
||
| <p>Conditional Control</p> | ||
|
|
||
| <Instructions></Instructions> | ||
|
|
||
| <h2 class="mb-3">Examples</h2> | ||
|
|
||
| <h3>Basic</h3> | ||
|
|
||
| <p>Example of using Conditional</p> | ||
|
|
||
| <div class="m-1"> | ||
| <div class="form-check m-1"> | ||
| <input type="checkbox" class="form-check-input" id="busy-check" @bind="IsCondition"> | ||
| <label class="form-check-label" for="busy-check">Condition</label> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="m-1"> | ||
| <Conditional Condition="@IsCondition"> | ||
| This can be seen when condition is true | ||
| </Conditional> | ||
| </div> | ||
|
|
||
| <div class="m-1"> | ||
| <Conditional Condition="@IsCondition"> | ||
| <Passed> | ||
| This can be seen when condition passed | ||
| </Passed> | ||
| <Failed> | ||
| This can be seen when condition failed | ||
| </Failed> | ||
| </Conditional> | ||
| </div> | ||
|
|
||
| @code { | ||
| [Parameter] | ||
| public bool IsCondition { get; set; } = true; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| @page "/repeater/index" | ||
|
|
||
| <h1>Repeater</h1> | ||
|
|
||
| <p>Repeater Control</p> | ||
|
|
||
| <Instructions></Instructions> | ||
|
|
||
| <h2 class="mb-3">Examples</h2> | ||
|
|
||
| <h3>Basic</h3> | ||
|
|
||
| <p>Repeat Items for Dropdown</p> | ||
|
|
||
| <div class="m-1"> | ||
| <select name="color"> | ||
| <Repeater Items="Colors"> | ||
| <Row> | ||
| <option value="@context">@context</option> | ||
| </Row> | ||
| </Repeater> | ||
| </select> | ||
| </div> | ||
|
|
||
| <p>Repeat Items for Table</p> | ||
|
|
||
| <div class="m-1"> | ||
| <table class="table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Email</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <Repeater Items="People"> | ||
| <Row Context="person"> | ||
| <tr> | ||
| <td>@person.Name</td> | ||
| <td>@person.Email</td> | ||
| </tr> | ||
| </Row> | ||
| </Repeater> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| @code { | ||
| public List<string> Colors = ["Red", "Green", "Blue"]; | ||
|
|
||
| public List<Person> People = [new("Jim", "jim@email.com"), new("Bob", "bob@email.com")]; | ||
|
|
||
| public record Person(string Name, string Email); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| using Microsoft.AspNetCore.Components; | ||
| using Microsoft.AspNetCore.Components.Rendering; | ||
|
|
||
| namespace LoreSoft.Blazor.Controls; | ||
|
|
||
| public class BusyButton : ComponentBase | ||
| { | ||
| [Parameter] | ||
| public bool Busy { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool Disabled { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment BusyTemplate { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment ChildContent { get; set; } | ||
|
|
||
| [Parameter(CaptureUnmatchedValues = true)] | ||
| public Dictionary<string, object> Attributes { get; set; } = new Dictionary<string, object>(); | ||
|
|
||
| /// <inheritdoc /> | ||
| protected override void BuildRenderTree(RenderTreeBuilder builder) | ||
| { | ||
| builder.OpenElement(0, "button"); | ||
| builder.AddMultipleAttributes(1, Attributes); | ||
| builder.AddAttribute(2, "disabled", Disabled || Busy); | ||
|
|
||
| if (Busy) | ||
| { | ||
| builder.AddContent(3, BusyTemplate); | ||
| } | ||
| else | ||
| { | ||
| builder.AddContent(3, ChildContent); | ||
| } | ||
|
|
||
| builder.CloseElement(); // button | ||
| } | ||
|
|
||
| /// <inheritdoc /> | ||
| protected override void OnParametersSet() | ||
| { | ||
| base.OnParametersSet(); | ||
|
|
||
| BusyTemplate ??= builder => builder.AddContent(0, "Busy..."); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| using Microsoft.AspNetCore.Components; | ||
| using Microsoft.AspNetCore.Components.Rendering; | ||
|
|
||
| namespace LoreSoft.Blazor.Controls; | ||
|
|
||
| public class Conditional : ComponentBase | ||
| { | ||
| [Parameter] | ||
| public bool Condition { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment ChildContent { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment Passed { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment Failed { get; set; } | ||
|
|
||
| /// <inheritdoc /> | ||
| protected override void BuildRenderTree(RenderTreeBuilder builder) | ||
| { | ||
| if (Condition) | ||
| { | ||
| if (Passed != null) | ||
| { | ||
| builder.AddContent(1, Passed); | ||
| } | ||
| else if (ChildContent != null) | ||
| { | ||
| builder.AddContent(1, ChildContent); | ||
| } | ||
| } | ||
| else if (Failed != null) | ||
| { | ||
| builder.AddContent(1, Failed); | ||
| } | ||
| } | ||
|
|
||
| /// <inheritdoc /> | ||
| protected override void OnParametersSet() | ||
| { | ||
| base.OnParametersSet(); | ||
|
|
||
| if (ChildContent != null && Passed != null) | ||
| { | ||
| throw new InvalidOperationException($"Do not specify both '{nameof(Passed)}' and '{nameof(ChildContent)}'."); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| using Microsoft.AspNetCore.Components; | ||
| using Microsoft.AspNetCore.Components.Rendering; | ||
|
|
||
| namespace LoreSoft.Blazor.Controls; | ||
|
|
||
| public class Repeater<TItem> : ComponentBase | ||
| { | ||
| private int _sequence = 0; | ||
|
|
||
| [Parameter, EditorRequired] | ||
| public IEnumerable<TItem> Items { get; set; } | ||
|
|
||
| [Parameter, EditorRequired] | ||
| public RenderFragment<TItem> Row { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment Empty { get; set; } | ||
|
|
||
| /// <inheritdoc /> | ||
| protected override void BuildRenderTree(RenderTreeBuilder builder) | ||
| { | ||
| if (Items?.Any() == true) | ||
| { | ||
| foreach (var item in Items) | ||
| { | ||
| builder.AddContent(Next(), Row, item); | ||
| } | ||
| } | ||
| else if (Empty != null) | ||
| { | ||
| builder.AddContent(Next(), Empty); | ||
| } | ||
| } | ||
|
|
||
| protected int Next() => _sequence++; | ||
|
|
||
| } |