Completata demo card

This commit is contained in:
Samuele Locatelli
2023-09-25 18:21:24 +02:00
parent e27c9257f0
commit 96086a87e0
3 changed files with 77 additions and 18 deletions
+42 -4
View File
@@ -1,12 +1,44 @@
<div class="card shadow" style="width: 22rem">
<div class="card-header">
<h3 class="card-title">@Title</h3>
<div class="card-header @CardCss">
<h3 class="card-title">
@if (DoPlaceholder)
{
<div class="placeholder-glow">
<span class="placeholder col-6"></span>
</div>
}
else
{
@Title
}
</h3>
</div>
<div class="card-body">
<p class="card-text">@ChildContent</p>
@if (DoPlaceholder)
{
<div class="placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-7"></span>
</div>
}
else
{
<p class="card-text">@ChildContent</p>
}
</div>
<div class="card-footer">
<button class="btn btn-sm btn-dark" @onclick="OnYes">Yes!</button>
@if (DoPlaceholder)
{
<div class="placeholder-glow">
<button class="btn btn-sm btn-dark disabled placeholder col-2"></button>
</div>
}
else
{
<button class="btn btn-sm btn-dark" @onclick="OnYes">Yes!</button>
}
</div>
</div>
@@ -17,6 +49,12 @@
[Parameter]
public string? Title { get; set; }
[Parameter]
public string CardCss { get; set; } = "";
[Parameter]
public bool DoPlaceholder { get; set; } = false;
private void OnYes()
{
Console.WriteLine($"{Title} | 'Yes' button selected.");
+21 -2
View File
@@ -2,17 +2,36 @@
@if (CardTitles == null || CardTitles.Count == 0)
{
<alert class="alert alert-danger">No Data</alert>
<div class="row">
<div class="col-12 my-2 alert alert-secondary fs-3">
executing on browser
</div>
@for (int i = 0; i < 9; i++)
{
<div class="col-4 my-2">
<MP_TAB.Client.Components.CardTest Title="Loading" DoPlaceholder="true" CardCss="bg-secondary">
</MP_TAB.Client.Components.CardTest>
</div>
}
</div>
}
else
{
<div class="row">
<div class="col-12 my-2 alert alert-success fs-3">
loaded on browser
</div>
@foreach (var item in CardTitles)
{
<div class="col-4 my-2">
<MP_TAB.Client.Components.CardTest Title="@item">
Demo content page for <b>@item</b>
<div>
Demo content page for <b>@item</b>
</div>
<div>
This is an example Blazor component!
</div>
</MP_TAB.Client.Components.CardTest>
</div>
}
+14 -12
View File
@@ -5,13 +5,18 @@
<!-- Once that is implemented, the main project won't need to include this file -->
@if (ListTitle == null)
{
<MP_TAB.Client.Components.CardTest Title="Loading">
<EgwCoreLib.Razor.LoadingData DisplaySize="EgwCoreLib.Razor.LoadingData.CtrlSize.Large" DisplayCss="alert alert-primary shadow"></EgwCoreLib.Razor.LoadingData>
</MP_TAB.Client.Components.CardTest>
}
else if (ListTitle.Count == 0)
{
<div class="alert alert-warning alert-dismissible text-center w-100 fs-1 shadow">Nessun record</div>
<div class="row">
<div class="col-12 my-2 alert alert-warning fs-3">
executing on server
</div>
@for (int i = 0; i < 9; i++)
{
<div class="col-4 my-2">
<MP_TAB.Client.Components.CardTest Title="Loading" DoPlaceholder="true" CardCss="bg-warning">
</MP_TAB.Client.Components.CardTest>
</div>
}
</div>
}
else
{
@@ -25,17 +30,14 @@ else
protected override async Task OnInitializedAsync()
{
ListTitle = null;
await InvokeAsync(StateHasChanged);
await Task.Delay(1500);
ListTitle = new List<string>();
await InvokeAsync(StateHasChanged);
await Task.Delay(500);
await Task.Delay(1500);
for (int i = 0; i < 9; i++)
{
ListTitle.Add($"Card {i + 1:00}");
}
await Task.Delay(500);
await InvokeAsync(StateHasChanged);
// return base.OnInitializedAsync();
await Task.Delay(10);
}
}