Grid, GridRow, GridRowContent
This commit is contained in:
parent
602c61568c
commit
516c4f337e
5
.gitignore
vendored
5
.gitignore
vendored
@ -431,3 +431,8 @@ FodyWeavers.xsd
|
||||
**.Runner/**
|
||||
|
||||
**.DS_Store
|
||||
/src/Connected.Components/Models/Alert/AlertOptions.cs
|
||||
/src/Connected.Components/Components/DatePicker.razor.cs
|
||||
/src/Connected.Components/Components/FormWizard.razor
|
||||
/src/Connected.Components/Components/FormWizard.razor.cs
|
||||
/src/Connected.Components.Showcase.Runner/Program.cs
|
||||
|
@ -906,12 +906,12 @@
|
||||
<!-- TO DO when modal is open add class to body .scroll-disabled-->
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" @onclick="ToggleNav" data-bs-target="#staticBackdrop">
|
||||
<button type="button" class="btn btn-primary" @onclick="ToggleModal" data-bs-target="#staticBackdrop">
|
||||
Launch backdrop modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade @NavClosed" tabindex="-1">
|
||||
<div class="modal fade @ModalShown" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@ -922,7 +922,7 @@
|
||||
ssss
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @onclick="ToggleNav">Close</button>
|
||||
<button type="button" class="btn btn-secondary" @onclick="ToggleModal">Close</button>
|
||||
<button type="button" class="btn btn-core">Understood</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -1119,6 +1119,13 @@
|
||||
NavClosed = string.IsNullOrWhiteSpace(NavClosed) ? "show" : "";
|
||||
}
|
||||
|
||||
private string ModalShown { get; set; } = "";
|
||||
|
||||
private void ToggleModal()
|
||||
{
|
||||
ModalShown = string.IsNullOrWhiteSpace(ModalShown) ? "show" : "";
|
||||
}
|
||||
|
||||
|
||||
private string NextSlide { get; set; } = "";
|
||||
|
||||
|
@ -1,20 +0,0 @@
|
||||
using Connected.Components.Showcase.Runner;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Connected.Services;
|
||||
|
||||
internal class Program
|
||||
{
|
||||
private static async global::System.Threading.Tasks.Task Main(string[] args)
|
||||
{
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddModalDialogService();
|
||||
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
5
src/Connected.Components/Components/Grid.razor
Normal file
5
src/Connected.Components/Components/Grid.razor
Normal file
@ -0,0 +1,5 @@
|
||||
<CascadingValue Value="this">
|
||||
<div class="@GridClass">
|
||||
@ChildContent
|
||||
</div>
|
||||
</CascadingValue>
|
41
src/Connected.Components/Components/Grid.razor.cs
Normal file
41
src/Connected.Components/Components/Grid.razor.cs
Normal file
@ -0,0 +1,41 @@
|
||||
using Connected.Utilities;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Connected.Components;
|
||||
public partial class Grid: ComponentBase
|
||||
{
|
||||
public List<GridRow> Rows { get; set; } = new();
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool Dense { get; set; } = true;
|
||||
|
||||
[Parameter]
|
||||
public bool ContainsImage { get; set; } = true;
|
||||
|
||||
[Parameter]
|
||||
public bool ShowSelect { get; set; } = true;
|
||||
|
||||
[Parameter]
|
||||
public bool Collapsable { get; set; } = true;
|
||||
|
||||
[Parameter]
|
||||
public string Class { get; set; } = string.Empty;
|
||||
|
||||
private string GridClass
|
||||
{
|
||||
get
|
||||
{
|
||||
return new CssBuilder("data-grid")
|
||||
.AddClass("dense", Dense)
|
||||
.AddClass("image", ContainsImage)
|
||||
.AddClass("select", ShowSelect)
|
||||
.AddClass("collapse", Collapsable)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
23
src/Connected.Components/Components/GridRow.razor
Normal file
23
src/Connected.Components/Components/GridRow.razor
Normal file
@ -0,0 +1,23 @@
|
||||
<CascadingValue Value="this">
|
||||
<div class="@GridRowClass">
|
||||
<div class="data-grid-select">
|
||||
<label class="toggle-group m-0" for="toggle-s11">
|
||||
<input class="toggle-input" id="toggle-s11" name="toggle" type="checkbox">
|
||||
<div class="toggle-fill"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="data-grid-img">
|
||||
<img class="img-fluid" src="https://source.unsplash.com/random?face" />
|
||||
</div>
|
||||
|
||||
<!-- Row content -->
|
||||
<div class="data-grid-container">
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<div class="data-grid-collapse-cta" @onclick="ToggleNav">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowDown" class="icon-root svg-icon icon-size-md" />
|
||||
</div>
|
||||
</div>
|
||||
</CascadingValue>
|
48
src/Connected.Components/Components/GridRow.razor.cs
Normal file
48
src/Connected.Components/Components/GridRow.razor.cs
Normal file
@ -0,0 +1,48 @@
|
||||
using Connected.Utilities;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Connected.Components;
|
||||
public partial class GridRow : ComponentBase
|
||||
{
|
||||
|
||||
[CascadingParameter]
|
||||
public Grid Parent { get; set; }
|
||||
|
||||
public List<GridRowContent> Children { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool CollapsedItemShown { get; set; } = false;
|
||||
|
||||
private void ToggleNav()
|
||||
{
|
||||
CollapsedItemShown = !CollapsedItemShown;
|
||||
}
|
||||
|
||||
[Parameter]
|
||||
public string Class { get; set; } = string.Empty;
|
||||
|
||||
[Parameter]
|
||||
public GridRowTemplate? Template { get; set; } = null;
|
||||
|
||||
private string GridRowClass
|
||||
{
|
||||
get
|
||||
{
|
||||
return new CssBuilder("data-grid-row-content")
|
||||
.AddClass("show",CollapsedItemShown)
|
||||
.AddClass(Class)
|
||||
.Build();
|
||||
}
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
if (Parent.Rows is null) Parent.Rows = new();
|
||||
Parent.Rows.Add(this);
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
|
||||
}
|
3
src/Connected.Components/Components/GridRowContent.razor
Normal file
3
src/Connected.Components/Components/GridRowContent.razor
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="@GeneratedRowContentClass">
|
||||
@ChildContent
|
||||
</div>
|
46
src/Connected.Components/Components/GridRowContent.razor.cs
Normal file
46
src/Connected.Components/Components/GridRowContent.razor.cs
Normal file
@ -0,0 +1,46 @@
|
||||
using Connected.Utilities;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Connected.Components;
|
||||
public partial class GridRowContent : ComponentBase
|
||||
{
|
||||
[CascadingParameter]
|
||||
public GridRow? Parent { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Text shown inside the button
|
||||
/// Options: any string variable
|
||||
/// Default: string.Empty
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Disabled or enabled.
|
||||
/// Default: false
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool Collapsable { get; set; } = false;
|
||||
|
||||
private string GeneratedRowContentClass
|
||||
{
|
||||
get
|
||||
{
|
||||
return new CssBuilder("row")
|
||||
.AddClass("collapsed", Collapsable)
|
||||
.AddClass("show", (Collapsable ? Parent?.CollapsedItemShown : false))
|
||||
.Build();
|
||||
}
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
if (Parent is not null)
|
||||
{
|
||||
if (Parent.Children is null) Parent.Children = new();
|
||||
Parent.Children.Add(this);
|
||||
}
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
}
|
||||
|
21
src/connected.components/Models/Alert/AlertOptions.cs
Normal file
21
src/connected.components/Models/Alert/AlertOptions.cs
Normal file
@ -0,0 +1,21 @@
|
||||
namespace Connected.Models.Alert;
|
||||
public class AlertOptions
|
||||
{
|
||||
Severity Severity { get; set; } = Severity.Info;
|
||||
public bool ShowHeader { get; set; } = true;
|
||||
public bool Cancelable { get; set; } = true;
|
||||
|
||||
public AlertOptions()
|
||||
{
|
||||
Severity = Severity.Info;
|
||||
ShowHeader = true;
|
||||
Cancelable = true;
|
||||
}
|
||||
|
||||
public AlertOptions(Severity severity, bool showHeader, bool cancelable)
|
||||
{
|
||||
Severity = severity;
|
||||
ShowHeader = showHeader;
|
||||
Cancelable = cancelable;
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user