You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.6 KiB
89 lines
2.6 KiB
@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 and 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();
|
|
}
|
|
} |