Loading: Add Class/Style to the mudprogress component, and style to text (#80)

* Loading: Add Class and style for the mudprogress component, and style for the text

* Simplify ClassLoader and styles

* Rename TextStyle to StyleText and LoaderStyle to StyleLoader

Author: Aerevia

CodeBeam.MudExtensions/Components/Loading/MudLoading.razor

@@ -15,8 +15,8 @@
         {
             <MudOverlay Visible="_loading" Absolute="true" DarkBackground="@Darken">
                 <div class="d-flex flex-column align-center justify-center">
-                    <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
-                    <MudText Class="@TextClassname">@Text</MudText>
+                    <MudProgressCircular Class="@ClassLoader" Style="@StyleLoader" Color="Color.Primary" Indeterminate="true" />
+                    <MudText Class="@TextClassname" Style="@StyleText">@Text</MudText>
                 </div>
             </MudOverlay>
         }
@@ -30,8 +30,8 @@
         else
         {
 
-            <MudProgressLinear Class="mb-2" Color="Color.Primary" Indeterminate="true" />
-            <MudText Class="@TextClassname" Align="Align.Center">@Text</MudText>
+            <MudProgressLinear Class="@ClassLoader" Style="@StyleLoader" Color="Color.Primary" Indeterminate="true" />
+            <MudText Class="@TextClassname" Style="@StyleText" Align="Align.Center">@Text</MudText>
 
             <MudOverlay Visible="_loading" Absolute="true" DarkBackground="@Darken">
                 <div class="d-flex align-center justify-center">

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

@@ -16,7 +16,7 @@ public partial class MudLoading : MudComponentBase
             .AddClass("mt-4")
             .AddClass(ClassText)
             .Build();
-
+        
         bool _loading = true;
         /// <summary>
         /// Two way binded loading state.
@@ -64,6 +64,27 @@ public bool Loading
         [Category(CategoryTypes.FormComponent.Appearance)]
         public string ClassText { get; set; }
 
+        /// <summary>
+        /// CSS classes for the progress component, seperated by space.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Appearance)]
+        public string ClassLoader { get; set; }
+
+        /// <summary>
+        /// CSS style for the text.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Appearance)]
+        public string StyleText { get; set; }
+        
+        /// <summary>
+        /// CSS style for the progress component.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Appearance)]
+        public string StyleLoader { get; set; }
+
         /// <summary>
         /// If true, show a darken background.
         /// </summary>

ComponentViewer.Docs/Pages/Components/LoadingPage.razor

@@ -9,4 +9,8 @@
     <ExampleCard ExampleName="LoadingExample2" Title="Custom Loading Indicator" Description="Loading indicator can be a RenderFragment.">
         <LoadingExample2 />
     </ExampleCard>
+    
+    <ExampleCard ExampleName="LoadingExample3" Title="Custom Classes" Description="Custom classes added to the loader and text">
+        <LoadingExample3 />
+    </ExampleCard>
 </ExamplePage>

ComponentViewer.Docs/Pages/Examples/LoadingExample3.razor

@@ -0,0 +1,44 @@
+@inject ISnackbar Snackbar
+
+<MudGrid>
+    <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center flex-wrap">
+        <MudPaper Class="mud-width-full" Style="height: 300px; position: relative">
+            <MudLoading @bind-Loading="_loading" LoaderType="_loaderType" Text="@_text" ClassText="@_classText" ClassLoader="@_classLoader" StyleText="@_styleText" StyleLoader="@_styleLoader">
+                <MudStack>
+                    <MudText>This is a text inside a paper. Its the content.</MudText>
+                    <MudButton OnClick="ShowSnackbar" Variant="Variant.Filled" Color="Color.Primary">A Button Can Not Be Clickable While Loading</MudButton>
+                </MudStack>
+            </MudLoading>
+        </MudPaper>
+    </MudItem>
+
+    <MudItem xs="12" sm="4">
+        <MudStack>
+            <MudSwitch @bind-Checked="_loading" Color="Color.Primary">Loading</MudSwitch>
+            <MudSelect @bind-Value="_loaderType" Variant="Variant.Outlined" Label="Loader Type">
+                <MudSelectItem Value="LoaderType.Circular">Circular</MudSelectItem>
+                <MudSelectItem Value="LoaderType.Linear">Linear</MudSelectItem>
+            </MudSelect>
+            <MudTextField @bind-Value="_text" Variant="Variant.Outlined" Label="Text" />
+            <MudTextField @bind-Value="_classText" Variant="Variant.Outlined" Label="Text Class" />
+            <MudTextField @bind-Value="_styleText" Variant="Variant.Outlined" Label="Text Style" />
+            <MudTextField @bind-Value="_classLoader" Variant="Variant.Outlined" Label="Loader Class" />
+            <MudTextField @bind-Value="_styleLoader" Variant="Variant.Outlined" Label="Loader Style" />
+        </MudStack>
+    </MudItem>
+</MudGrid>
+
+@code {
+    bool _loading = true;
+    string _text = "Some text.";
+    string _classText;
+    string _styleText;
+    string _classLoader;
+    string _styleLoader;
+    LoaderType _loaderType = LoaderType.Circular;
+
+    private void ShowSnackbar()
+    {
+        Snackbar.Add("Button clicked.", Severity.Info);
+    }
+}