Compare commits
2 Commits
d6ee4bc164
...
3331105811
| Author | SHA1 | Date |
|---|---|---|
markosteger
|
3331105811 | 2 years ago |
|
markosteger
|
a9282b9b0a | 2 years ago |
@ -0,0 +1,29 @@
|
||||
@page "/formwizard"
|
||||
@using Connected.Classes.FormWizard;
|
||||
@using Connected.Components;
|
||||
@using Connected.Enums;
|
||||
@using Connected.Models.Modal;
|
||||
@using Connected.Models;
|
||||
@using Connected.Services;
|
||||
@using Connected.Utilities;
|
||||
|
||||
<h1 style="text-align:center;">FORM WIZARD EXAMPLE</h1>
|
||||
|
||||
<FormWizard Options="@options">
|
||||
<FormWizardStep>
|
||||
Step 1
|
||||
</FormWizardStep>
|
||||
<FormWizardStep>
|
||||
Step2
|
||||
</FormWizardStep>
|
||||
<FormWizardStep>
|
||||
Step3
|
||||
</FormWizardStep>
|
||||
<FormWizardStep>
|
||||
Step4
|
||||
</FormWizardStep>
|
||||
</FormWizard>
|
||||
|
||||
@code {
|
||||
FormWizardOptions options = new(false, "Naslednji", "Prejšnji", "Končaj", "Prekliči");
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
@page "/toggleglyph"
|
||||
@using Connected.Components;
|
||||
@using Connected.Enums;
|
||||
@using Connected.Models.Modal;
|
||||
@using Connected.Models;
|
||||
@using Connected.Services;
|
||||
@using Connected.Utilities;
|
||||
|
||||
@inject ModalDialogService modalDialog;
|
||||
|
||||
|
||||
<h1 style="text-align:center;">DATE PICKER EXAMPLE</h1>
|
||||
|
||||
|
||||
<ToggleGlyphButton Glyph="@Icons.Material.Filled.Close" ToggledGlyph="@Icons.Material.Filled.Check" @bind-Toggled=toggle>
|
||||
TGB
|
||||
</ToggleGlyphButton>
|
||||
|
||||
|
||||
<h4>Toggled: @toggle</h4>
|
||||
|
||||
|
||||
@code {
|
||||
bool toggle = false;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
@inherits ComponentBase
|
||||
|
||||
@*Base class for all components
|
||||
It contains unique ID for the component used in
|
||||
saving state of the component*@
|
||||
@ -0,0 +1,20 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Connected.Components
|
||||
{
|
||||
public partial class Base : ComponentBase
|
||||
{
|
||||
/// <summary>
|
||||
/// Unique ID for the component used in state management
|
||||
/// Every component should inherit from Base class
|
||||
/// </summary>
|
||||
[Parameter, EditorRequired]
|
||||
public string Id { get; set; } = Guid.NewGuid().ToString();
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
if (string.IsNullOrEmpty(Id))
|
||||
Id = Guid.NewGuid().ToString();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,29 @@
|
||||
<CascadingValue Value="this">
|
||||
<section id="@Id" class="@ClassList" style="@StyleList">
|
||||
<div class="form-outer ">
|
||||
@ChildContent
|
||||
</div>
|
||||
@inherits Base
|
||||
|
||||
<div class="btn-content justify-space-between">
|
||||
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
|
||||
<div class="btn-group">
|
||||
<button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished"><i class='bx bx-chevron-left'></i>@PreviousBtnText</button>
|
||||
<button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>
|
||||
@if (loaded)
|
||||
{
|
||||
<CascadingValue Value="this">
|
||||
<section id="@Id" class="@ClassList" style="@StyleList">
|
||||
<div class="form-outer ">
|
||||
@ChildContent
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dots d-flex justify-center gap-3">
|
||||
@foreach (var step in Steps)
|
||||
{
|
||||
<div class="dot @step.DotClass"></div>
|
||||
}
|
||||
</div>
|
||||
<div class="btn-content justify-space-between">
|
||||
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@NavigationDisabled" @onclick="CancelClick">@Options.CancelButtonText</button>
|
||||
<div class="btn-group">
|
||||
<button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@NavigationDisabled"><i class='bx bx-chevron-left'></i>@Options.PreviousButtonText</button>
|
||||
<button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@NavigationDisabled">@NextBtnText<i class='bx bx-chevron-right'></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dots d-flex justify-center gap-3">
|
||||
@foreach (var step in Steps)
|
||||
{
|
||||
<div class="dot @step.DotClass"></div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</CascadingValue>
|
||||
</CascadingValue>
|
||||
} else {
|
||||
<p>@LoadingText</p>
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
<div class="@ClassList" style="@StyleList">
|
||||
@inherits Base
|
||||
|
||||
<div class="@ClassList" style="@StyleList">
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
|
||||
@inherits Base
|
||||
|
||||
<svg viewBox="0 0 24 24" class="@GlyphClassList" @onclick="@OnClick">
|
||||
@((MarkupString)SVG)
|
||||
</svg>
|
||||
|
||||
@ -1,21 +1,12 @@
|
||||
@inherits Button
|
||||
@inherits GlyphButton
|
||||
|
||||
<button type="button"
|
||||
@onclick="@Clicked"
|
||||
disabled=@Disabled
|
||||
style="@StyleList"
|
||||
class="@ClassList">
|
||||
<div class="@ContentClassList">
|
||||
<div style="align-items:center">
|
||||
@if (GlyphPosition == Position.Top)
|
||||
{
|
||||
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
||||
}
|
||||
<div class="@ContentClassList">
|
||||
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
||||
@ChildContent
|
||||
@if (GlyphPosition == Position.Bottom)
|
||||
{
|
||||
<Glyph SVG="@_ShownGlyph" Color="@GlyphColor" />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
Loading…
Reference in new issue