Compare commits
No commits in common. '909cfd0d8179345fbfcaf64b90f994d134a2f38e' and 'e4b246a8bc6615c02c63bc3c463df5339e917f31' have entirely different histories.
909cfd0d81
...
e4b246a8bc
@ -1,28 +0,0 @@
|
||||
@page "/button"
|
||||
@using Connected.Components;
|
||||
@using Connected.Enums;
|
||||
@using Connected.Models.Modal;
|
||||
@using Connected.Models;
|
||||
@using Connected.Services;
|
||||
@using Connected.Utilities;
|
||||
|
||||
<h1 style="text-align:center;">BUTTON EXAMPLE</h1>
|
||||
|
||||
<Button OnClick="(()=>TextChange())">Change text default</Button>
|
||||
|
||||
<Button OnClick="(()=>TextChange(Hello))">Change text to - Hello my friend</Button>
|
||||
|
||||
<p>Text: <h4>@text</h4></p>
|
||||
|
||||
@code {
|
||||
string text = "Some random text";
|
||||
|
||||
string Hello = "Hello my friend";
|
||||
|
||||
private void TextChange(string new_text="Some random text.. but new")
|
||||
{
|
||||
text = new_text;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
@page "/modal"
|
||||
@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;">MODAL DIALOG EXAMPLE</h1>
|
||||
|
||||
|
||||
<Button OnClick="OpenModalDialog">Open dialog</Button>
|
||||
|
||||
<p>Modal result: @test_modal_result</p>
|
||||
|
||||
<h4>Value: @value.ToString()</h4>
|
||||
|
||||
|
||||
@code {
|
||||
int value = 0;
|
||||
|
||||
string test_modal_result = string.Empty;
|
||||
|
||||
ModalOptions options = new ModalOptions();
|
||||
|
||||
|
||||
public void OpenModalDialog()
|
||||
{
|
||||
modalDialog.ShowDialog(
|
||||
/*
|
||||
MODAL TITLE
|
||||
*
|
||||
*/
|
||||
"Title",
|
||||
|
||||
/*
|
||||
MODAL CONTENT !!!starting with @
|
||||
*
|
||||
*/
|
||||
@<div>
|
||||
<div>Change the number input aand watch the value variable behind the modal change</div>
|
||||
<NumberInput @bind-Value=@value></NumberInput>
|
||||
</div>,
|
||||
|
||||
/*
|
||||
MODAL BUTTONS WITH ACTIONS
|
||||
*
|
||||
*/
|
||||
new List<ModalButton>()
|
||||
{
|
||||
new ModalButton(
|
||||
new Event(ChangeText, new object[]{"OK clicked"}), //event triggered on button click
|
||||
"OK", //button text
|
||||
ModalButtonType.OkButton, //button type: OK, Cancel, Regular
|
||||
true //close modal on click
|
||||
),
|
||||
new ModalButton(
|
||||
new Event(ChangeText, new object[]{"Cancel clicked"}), //event triggered on button click - first parameter = method name, second parameter = method parameters --> array of objects
|
||||
"Cancel", //button text
|
||||
ModalButtonType.CancelButton, //button type: OK, Cancel, Regular
|
||||
true //close modal on click
|
||||
),
|
||||
new ModalButton(
|
||||
new Event(ChangeText, new object[]{"Regular clicked"}), //event triggered on button click - first parameter = method name, second parameter = method parameters --> array of objects
|
||||
"Click me", //button text
|
||||
ModalButtonType.RegularButton, //button type: OK, Cancel, Regular
|
||||
true //close modal on click
|
||||
)
|
||||
},
|
||||
|
||||
/*
|
||||
MODAL OPTIONS
|
||||
*
|
||||
*/
|
||||
new ModalOptions(false,true,false)); //modal dialog options - optional
|
||||
}
|
||||
|
||||
private void ChangeValue(int val)
|
||||
{
|
||||
value = val;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
public void ChangeText(string some_parameter)
|
||||
{
|
||||
test_modal_result = some_parameter;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,49 @@
|
||||
@page "/"
|
||||
@using Connected.Components;
|
||||
@using Connected.Enums;
|
||||
@using Connected.Models.Modal;
|
||||
@using Connected.Models;
|
||||
@using Connected.Services;
|
||||
@using Connected.Utilities;
|
||||
@using Connected.Components;
|
||||
|
||||
<h1 style="text-align:center;">Component Example page</h1>
|
||||
|
||||
<ul>
|
||||
<li><Link Class="m-1" Url="modal" Text="Modal dialog" Target="Target.Self" /></li>
|
||||
<li><Link Class="m-1" Url="button" Text="Button" Target="Target.Self" /></li>
|
||||
</ul>
|
||||
<h1 style="text-align:center;">Component Sandbox</h1>
|
||||
|
||||
<Grid>
|
||||
@for (int i = 0; i < 5; i++)
|
||||
{
|
||||
int num = i;
|
||||
<GridRow>
|
||||
<GridRowContent>
|
||||
Fixed content @num.ToString()
|
||||
</GridRowContent>
|
||||
<GridRowContent Collapsable=true>
|
||||
Collapsable content @num.ToString()
|
||||
</GridRowContent>
|
||||
</GridRow>
|
||||
}
|
||||
</Grid>
|
||||
|
||||
<p>Izbran datum je: @date</p>
|
||||
|
||||
@code {
|
||||
<FormWizard Id="Wizard1">
|
||||
<FormWizardStep Name="Step1">
|
||||
Step1
|
||||
</FormWizardStep>
|
||||
<FormWizardStep Name="Step2">
|
||||
Step2
|
||||
</FormWizardStep>
|
||||
<FormWizardStep Name="Step3">
|
||||
Step3
|
||||
</FormWizardStep>
|
||||
<FormWizardStep Name="Step4">
|
||||
Step4
|
||||
</FormWizardStep>
|
||||
</FormWizard>
|
||||
<DatePicker
|
||||
CloseOnDateSelect=true
|
||||
@bind-SelectedDate=@date>
|
||||
|
||||
</DatePicker>
|
||||
|
||||
<p>Selected date is @date.ToString()</p>
|
||||
|
||||
@code {
|
||||
DateTime date = DateTime.Today;
|
||||
}
|
||||
@ -1,25 +1,25 @@
|
||||
@using Connected.Models.Modal;
|
||||
@if (IsVisible)
|
||||
{
|
||||
<div class="@ClassList" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root">
|
||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||
<div class="modal-content" @onclick="PreventClose">
|
||||
@if (!ModalOptions.NoHeader)
|
||||
{
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">@Title</h3>
|
||||
</div>
|
||||
}
|
||||
<div class="modal-body">
|
||||
@Content
|
||||
<div class="modal fade show" @onclick="@CloseIfEnabled" @onkeydown="@(e => CheckEscape(e))" tabindex="-1" @ref="@root">
|
||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||
<div class="modal-content" @onclick="PreventClose">
|
||||
@if (!ModalOptions.NoHeader)
|
||||
{
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">@Title</h3>
|
||||
</div>
|
||||
}
|
||||
<div class="modal-body">
|
||||
@Content
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@foreach (ModalButton button in buttons)
|
||||
{
|
||||
<button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@foreach (ModalButton button in buttons)
|
||||
{
|
||||
<button type="button" class="btn @button.GetButtonClass" @onclick="@(()=>CloseModal(button))">@button.ButtonText</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
@typeparam ReturnType
|
||||
|
||||
@using Connected.Models.Modal;
|
||||
@if (Visible)
|
||||
{
|
||||
<div class="modal fade show" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">@Title</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ChildContent
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-sm btn-core" @onclick="@(()=>CloseModal())">Zapri</button>
|
||||
<button type="button" class="btn btn-sm btn-info" @onclick="@(()=>CloseModal(true))">Ok</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
Loading…
Reference in new issue