MudLoading Text initialize (#36)

Author: mckaragoz

CodeBeam.MudExtensions/Components/Loading/MudLoading.razor

@@ -13,8 +13,9 @@
         else
         {
             <MudOverlay Visible="_loading" Absolute="true" DarkBackground="@Darken">
-                <div class="d-flex align-center justify-center">
+                <div class="d-flex flex-column align-center justify-center">
                     <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
+                    <MudText Class="@TextClassname">@Text</MudText>
                 </div>
             </MudOverlay>
         }
@@ -27,7 +28,10 @@
         }
         else
         {
+
             <MudProgressLinear Class="mb-2" Color="Color.Primary" Indeterminate="true" />
+            <MudText Class="@TextClassname" 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

@@ -10,6 +10,11 @@ namespace MudExtensions
     public partial class MudLoading : MudComponentBase
     {
 
+        protected string TextClassname => new CssBuilder()
+            .AddClass("mt-4")
+            .AddClass(ClassText)
+            .Build();
+
         bool _loading = true;
         /// <summary>
         /// Two way binded loading state.
@@ -43,6 +48,20 @@ public bool Loading
         [Category(CategoryTypes.FormComponent.Appearance)]
         public bool Overlap { get; set; } = false;
 
+        /// <summary>
+        /// The text shows after the loading indicator.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Appearance)]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// CSS classes for the text, seperated by space.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Appearance)]
+        public string ClassText { get; set; }
+
         /// <summary>
         /// If true, show a darken background.
         /// </summary>

ComponentViewer/Pages/Components/LoadingPage.razor

@@ -7,7 +7,7 @@
         <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" Overlap="@_overlap" LoaderType="_loaderType" Darken="_darken">
+                    <MudLoading @bind-Loading="_loading" Overlap="@_overlap" LoaderType="_loaderType" Darken="_darken" Text="@_text" ClassText="@(_darken ? "white-text" : null)">
                         <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>
@@ -25,6 +25,7 @@
                         <MudSelectItem Value="LoaderType.Circular">Circular</MudSelectItem>
                         <MudSelectItem Value="LoaderType.Linear">Linear</MudSelectItem>
                     </MudSelect>
+                    <MudTextField @bind-Value="_text" Variant="Variant.Outlined" Label="Text" />
                 </MudStack>
             </MudItem>
         </MudGrid>
@@ -69,6 +70,7 @@
     bool _loading = true;
     bool _overlap;
     bool _darken;
+    string _text;
     LoaderType _loaderType = LoaderType.Circular;
 
     bool _loading2 = true;