Skip to content

Commit a1fabb5

Browse files
mckaragozmckaragoz
committed
MudLoader & Some Document Improvement
1 parent 89da4f1 commit a1fabb5

File tree

7 files changed

+226
-3
lines changed

7 files changed

+226
-3
lines changed

‎CodeBeam.MudExtensions/CodeBeam.MudExtensions.csproj‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
<Description>MudBlazor extensions from contributors.</Description>
1212
<Copyright>CodeBeam OpenSource MIT</Copyright>
1313
<PackageIcon>CodeBeam Purple.jpg</PackageIcon>
14+
<PackageProjectUrl>https://github.com/CodeBeamOrg/CodeBeam.MudExtensions</PackageProjectUrl>
15+
<RepositoryUrl>https://github.com/CodeBeamOrg/CodeBeam.MudExtensions</RepositoryUrl>
16+
<PackageTags>Blazor; MudBlazor; Component; Extension;</PackageTags>
1417
</PropertyGroup>
1518

1619
<ItemGroup>

‎CodeBeam.MudExtensions/Components/Loading/MudLoading.razor‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
4+
5+
@if (Loading == true)
6+
{
7+
if (LoaderType == LoaderType.Circular)
8+
{
9+
if (LoaderContent != null)
10+
{
11+
@LoaderContent
12+
}
13+
else
14+
{
15+
<MudOverlay Visible="_loading" Absolute="true" DarkBackground="@Darken">
16+
<div class="d-flex align-center justify-center">
17+
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
18+
</div>
19+
</MudOverlay>
20+
}
21+
}
22+
else if (LoaderType == LoaderType.Linear)
23+
{
24+
if (LoaderContent != null)
25+
{
26+
@LoaderContent
27+
}
28+
else
29+
{
30+
<MudProgressLinear Class="mb-2" Color="Color.Primary" Indeterminate="true" />
31+
<MudOverlay Visible="_loading" Absolute="true" DarkBackground="@Darken">
32+
<div class="d-flex align-center justify-center">
33+
34+
</div>
35+
</MudOverlay>
36+
}
37+
}
38+
}
39+
40+
@if (!Loading || Overlap)
41+
{
42+
@ChildContent
43+
}

‎CodeBeam.MudExtensions/Components/Loading/MudLoading.razor.cs‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
using System;
2+
using System.Threading.Tasks;
3+
using Microsoft.AspNetCore.Components;
4+
using Microsoft.AspNetCore.Components.Web;
5+
using MudBlazor;
6+
using MudBlazor.Utilities;
7+
8+
namespace MudExtensions
9+
{
10+
public partial class MudLoading : MudComponentBase
11+
{
12+
13+
bool _loading = true;
14+
/// <summary>
15+
/// Two way binded loading state.
16+
/// </summary>
17+
[Parameter]
18+
[Category(CategoryTypes.FormComponent.Behavior)]
19+
public bool Loading
20+
{
21+
get => _loading;
22+
set
23+
{
24+
if (_loading == value)
25+
{
26+
return;
27+
}
28+
_loading = value;
29+
LoadingChanged.InvokeAsync(_loading).AndForget();
30+
}
31+
}
32+
33+
/// <summary>
34+
/// Fires when loading changed.
35+
/// </summary>
36+
[Parameter]
37+
public EventCallback<bool> LoadingChanged { get; set; }
38+
39+
/// <summary>
40+
/// If true, the background still remain visible, but user cannot interact them.
41+
/// </summary>
42+
[Parameter]
43+
[Category(CategoryTypes.FormComponent.Appearance)]
44+
public bool Overlap { get; set; } = false;
45+
46+
/// <summary>
47+
/// If true, show a darken background.
48+
/// </summary>
49+
[Parameter]
50+
[Category(CategoryTypes.FormComponent.Appearance)]
51+
public bool Darken { get; set; } = false;
52+
53+
/// <summary>
54+
/// Set the indicator type. A middle placed circular or top placed linear progress.
55+
/// </summary>
56+
[Parameter]
57+
[Category(CategoryTypes.FormComponent.Appearance)]
58+
public LoaderType LoaderType { get; set; } = LoaderType.Circular;
59+
60+
/// <summary>
61+
/// Custom loader content. If it is set, the overlap, darken and loadertype parameters ignored.
62+
/// </summary>
63+
[Parameter]
64+
[Category(CategoryTypes.FormComponent.Appearance)]
65+
public RenderFragment LoaderContent { get; set; }
66+
67+
/// <summary>
68+
/// The child content.
69+
/// </summary>
70+
[Parameter]
71+
[Category(CategoryTypes.FormComponent.Appearance)]
72+
public RenderFragment ChildContent { get; set; }
73+
74+
}
75+
}

‎CodeBeam.MudExtensions/Enums/LoaderType.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions
4+
{
5+
public enum LoaderType
6+
{
7+
[Description("circular")]
8+
Circular,
9+
[Description("linear")]
10+
Linear
11+
}
12+
}

‎ComponentViewer/Pages/Components/LoadingPage.razor‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
@page "/mudloading"
2+
3+
@inject ISnackbar Snackbar
4+
5+
<ExamplePage Title="MudLoading">
6+
<ExampleCard Title="Usage" Description="MudLoading is very useful to create loading conditions faster.">
7+
<MudGrid>
8+
<MudItem xs="12" sm="8" Class="d-flex gap-4 align-center flex-wrap">
9+
<MudPaper Class="mud-width-full" Style="height: 300px; position: relative">
10+
<MudLoading @bind-Loading="_loading" Overlap="@_overlap" LoaderType="_loaderType" Darken="_darken">
11+
<MudStack>
12+
<MudText>This is a text inside a paper. Its the content.</MudText>
13+
<MudButton OnClick="ShowSnackbar" Variant="Variant.Filled" Color="Color.Primary">A Button Can Not Be Clickable While Loading</MudButton>
14+
</MudStack>
15+
</MudLoading>
16+
</MudPaper>
17+
</MudItem>
18+
19+
<MudItem xs="12" sm="4">
20+
<MudStack>
21+
<MudSwitch @bind-Checked="_loading" Color="Color.Primary">Loading</MudSwitch>
22+
<MudCheckBox @bind-Checked="_overlap" Label="Overlap" Color="Color.Primary" />
23+
<MudCheckBox @bind-Checked="_darken" Label="Darken" Color="Color.Primary" />
24+
<MudSelect @bind-Value="_loaderType" Variant="Variant.Outlined" Label="Loader Type">
25+
<MudSelectItem Value="LoaderType.Circular">Circular</MudSelectItem>
26+
<MudSelectItem Value="LoaderType.Linear">Linear</MudSelectItem>
27+
</MudSelect>
28+
</MudStack>
29+
</MudItem>
30+
</MudGrid>
31+
</ExampleCard>
32+
33+
<ExampleCard Title="Custom Loading Indicator" Description="Loading indicator can be a RenderFragment.">
34+
<MudGrid>
35+
<MudItem xs="12" sm="8" Class="d-flex gap-4 align-center flex-wrap">
36+
<MudPaper Class="mud-width-full" Style="height: 300px; position: relative">
37+
<MudLoading @bind-Loading="_loading2">
38+
<LoaderContent>
39+
<div class="mud-width-full mud-height-full d-flex flex-column align-center justify-center">
40+
<MudProgressLinear Color="Color.Primary" Indeterminate="true" />
41+
<MudStack Row="true" Spacing="2">
42+
<MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Tertiary" Size="Size.Small" />
43+
<MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Secondary" Size="Size.Medium" />
44+
<MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Primary" Size="Size.Large" />
45+
<MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Secondary" Size="Size.Medium" />
46+
<MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Tertiary" Size="Size.Small" />
47+
</MudStack>
48+
49+
</div>
50+
</LoaderContent>
51+
<ChildContent>
52+
<MudText>This is a text inside a paper.</MudText>
53+
</ChildContent>
54+
55+
</MudLoading>
56+
</MudPaper>
57+
</MudItem>
58+
59+
<MudItem xs="12" sm="4">
60+
<MudStack>
61+
<MudSwitch @bind-Checked="_loading2" Color="Color.Primary">Loading</MudSwitch>
62+
</MudStack>
63+
</MudItem>
64+
</MudGrid>
65+
</ExampleCard>
66+
</ExamplePage>
67+
68+
@code{
69+
bool _loading = true;
70+
bool _overlap;
71+
bool _darken;
72+
LoaderType _loaderType = LoaderType.Circular;
73+
74+
bool _loading2 = true;
75+
76+
77+
private void ShowSnackbar()
78+
{
79+
Snackbar.Add("Button clicked.", Severity.Info);
80+
}
81+
}

‎ComponentViewer/Pages/Components/PasswordFieldPage.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<ExampleCard Title="Usage" Description="MudPasswordField is a specialized textfield that has PasswordMode parameter.">
55
<MudGrid>
66
<MudItem Class="d-flex gap-4 align-center flex-wrap">
7-
<MudPasswordField @bind-Value="@_password" @bind-PasswordMode="@_passwordMode" />
7+
<MudPasswordField @bind-Value="@_password" @bind-PasswordMode="@_passwordMode" Variant="Variant.Outlined" />
88

99
<MudSwitch @bind-Checked="_passwordMode" Color="Color.Primary">Password Mode</MudSwitch>
1010
</MudItem>

‎ComponentViewer/Pages/Index.razor‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
@page "/"
22

3-
<MudScrollbar Width="8" Color="info" />
3+
<MudScrollbar Width="2" HoverWidth="8" Color="primary" />
44

55
<MudContainer Class="pa-4" Style="min-height: 100vh; background: var(--mud-palette-background-grey);" MaxWidth="MaxWidth.False">
6+
<div class="d-flex">
7+
<MudText Class="my-6 d-flex" Style="font-weight: 900" Typo="Typo.h5">The <MudText Style="font-weight: 900" Color="Color.Secondary" Typo="Typo.h5">Secondary</MudText>NeedsFor<MudText Style="font-weight: 900" Color="Color.Primary" Typo="Typo.h5">Mud</MudText></MudText>
8+
</div>
9+
610
<MudGrid>
11+
<MudItem xs="12" sm="6" lg="4">
12+
<ComponentCard Title="MudLoading"
13+
Description="Loading indicator for a whole page or a specific component." />
14+
</MudItem>
15+
716
<MudItem xs="12" sm="6" lg="4">
817
<ComponentCard Title="MudPage & MudSection" ComponentName="MudPage"
9-
Description="A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan" />
18+
Description="A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan" />
1019
</MudItem>
1120

1221
<MudItem xs="12" sm="6" lg="4">

0 commit comments

Comments
 (0)