Egalware/egwcorelib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aggiunta componente progBar, esempi

Browse Source
This commit is contained in:
Samuele Locatelli
2023-06-13 08:16:16 +02:00
parent 2636f1eb2f
commit e270b3fd08
3 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
EgwCoreLib.BlazorTest/Pages/Test.razor
+39
View File
@@ -8,6 +8,8 @@
<div class="row">
<div class="col-2">
<img src="_content/EgwCoreLib.Razor/images/LogoEgw.png" class="img-fluid" width="200" height="200" />
<PasswordBox></PasswordBox>
<PasswordBox ItemLabel="pwd"></PasswordBox>
</div>
<div class="col-10">
<TestJsInterop></TestJsInterop>
@@ -55,9 +57,46 @@
</div>
</div>
<div class="row bg-secondary py-2">
<div class="col">
<ProgBar singleLine="true" baseUM="$" currVal="@(rnd.Next(50,250))" maxVal="1000" redLim="200" yelLim="400" />
</div>
<div class="col">
<ProgBar singleLine="true" baseUM="gg" currVal="@(rnd.Next(200,450))" maxVal="1000" redLim="200" yelLim="400" />
</div>
<div class="col">
<ProgBar singleLine="true" baseUM="min" currVal="@(rnd.Next(400,650))" maxVal="1000" redLim="200" yelLim="400" />
</div>
<div class="col">
<ProgBar singleLine="true" baseUM="px" currVal="@(rnd.Next(600,900))" maxVal="1000" redLim="200" yelLim="400" />
</div>
<div class="col">
<ProgBar singleLine="true" baseUM="h" currVal="@(rnd.Next(500,1000))" maxVal="1000" redLim="200" yelLim="400" />
</div>
</div>
<div class="row bg-dark py-2">
<div class="col">
<ProgBar singleLine="false" baseUM="$" currVal="@(rnd.Next(50,250))" maxVal="1000" redLim="200" yelLim="400" />
</div>
<div class="col">
<ProgBar singleLine="false" baseUM="gg" currVal="@(rnd.Next(200,450))" maxVal="1000" redLim="200" yelLim="400" />
</div>
<div class="col">
<ProgBar singleLine="false" baseUM="min" currVal="@(rnd.Next(400,650))" maxVal="1000" redLim="200" yelLim="400" />
</div>
<div class="col">
<ProgBar singleLine="false" baseUM="px" currVal="@(rnd.Next(600,900))" maxVal="1000" redLim="200" yelLim="400" />
</div>
<div class="col">
<ProgBar singleLine="false" baseUM="h" currVal="@(rnd.Next(500,1000))" maxVal="1000" redLim="200" yelLim="400" />
</div>
</div>
@code {
private int currentCount = 0;
protected Random rnd = new Random();
private void IncrementCount()
{
currentCount++;
EgwCoreLib.Razor/ProgBar.razor
+51
View File
@@ -0,0 +1,51 @@
@if (singleLine)
{
<div class="progress">
<div class="progress-bar @bgStyle" style="width:@(percWidthNum)%">
@if (percWidthNum > redLimNum || percWidthNum <= 0)
{
<div class="px-1">
@if (showPerc)
{
@($"{percWidthNum}%")
}
@if (showAct)
{
<spam class="small">@($" ({currVal:N0}{baseUM})")</spam>
}
</div>
}
</div>
@if (percWidthNum <= redLimNum && percWidthNum > 0)
{
<div class="px-1">
@if (showPerc)
{
@($"{percWidthNum}%")
}
@if (showAct)
{
<spam class="small">@($" ({currVal:N0}{baseUM})")</spam>
}
</div>
}
</div>
}
else
{
<div class="text-center @textStyle">
<span class="@warnClass px-1"><i class="bi bi-exclamation-triangle-fill"></i></span> <b>@currVal.ToString("N0")</b> <sup>(@($"{maxVal:N0}"))</sup><span class="@warnClass px-1"><i class="bi bi-exclamation-triangle-fill"></i></span>
</div>
<div class="progress">
<div class="progress-bar @bgStyle" style="width:@(percWidh)%;">
@if (percWidthNum > redLimNum || percWidthNum <= 0)
{
<div class="px-1">@(percWidthNum)%</div>
}
</div>
@if (percWidthNum <= redLimNum && percWidthNum > 0)
{
<div class="px-1">@(percWidthNum)%</div>
}
</div>
}
EgwCoreLib.Razor/ProgBar.razor.cs
+94
View File
@@ -0,0 +1,94 @@
using Microsoft.AspNetCore.Components;
namespace EgwCoreLib.Razor
{
public partial class ProgBar
{
#region Public Properties
[Parameter]
public string baseUM { get; set; } = "h";
[Parameter]
public double currVal { get; set; } = 50;
[Parameter]
public double maxVal { get; set; } = 100;
[Parameter]
public int redLim { get; set; } = 10;
[Parameter]
public bool showAct { get; set; } = true;
[Parameter]
public bool showPerc { get; set; } = true;
[Parameter]
public bool singleLine { get; set; } = false;
[Parameter]
public int yelLim { get; set; } = 20;
#endregion Public Properties
#region Private Properties
private string bgStyle
{
get => $"bg-{currStyle}";
}
private string currStyle
{
get
{
string answ = "dark";
if (currVal <= redLim)
{
answ = "danger";
}
else if (currVal <= yelLim)
{
answ = "warning";
}
else
{
answ = "success";
}
return answ;
}
}
private int percWidh
{
get
{
int answ = percWidthNum;
if (answ <= 0)
{
answ = 100;
}
return answ;
}
}
private int percWidthNum { get => (int)(100 * currVal / maxVal); }
private string textStyle
{
get => $"text-{currStyle}";
}
private string warnClass
{
get => currVal > 0 ? "d-none" : "text-danger";
}
private int yelLimNum { get => (int)(100 * yelLim / maxVal); }
private int redLimNum { get => (int)(100 * redLim / maxVal); }
#endregion Private Properties
}
}