@inject BlazorDialogBox.Services.IBlazorDialogService dialogService
@using BlazorDialogBox.Data
<h2>Blazor Dialog Box Example</h2>
<p>Click the buttons to show the corresponding dialog</p>
<label>Is centered:</label>
<input type="checkbox" @bind="isCentered" />
<label>Size:</label>
<select @bind="size">
<option value="@DialogSize.Normal">@DialogSize.Normal</option>
<option value="@DialogSize.Large">@DialogSize.Large</option>
<option value="@DialogSize.Small">@DialogSize.Small</option>
</select>
<Dialog Id="simple-dialog" Size="size" Centered="isCentered">
<DialogInputProvider TInput="string">
<DialogBody>
<h4>@context.Input</h4>
</DialogBody>
<DialogFooter>
<button type="button" class="btn btn-primary" @onclick="@(() => context.Dialog.Hide("yes"))">Yes</button>
<button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
</DialogFooter>
</DialogInputProvider>
</Dialog>
<Dialog Id="simple-large-dialog" Size="size" Centered="isCentered">
<DialogInputProvider TInput="string">
<DialogBody>
<h4>@context.Input</h4>
<p>Lorem Ipsum</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis est vitae purus eleifend bibendum id et neque. Sed eu nisi commodo, sagittis neque suscipit, euismod quam. In metus turpis, pulvinar ut odio vel, vehicula congue dui. Praesent sed feugiat est. Ut ut rhoncus mi, et facilisis eros. Vivamus malesuada nulla eu tincidunt vulputate. Donec non augue aliquam, sodales est vel, varius quam. Nam vel fringilla felis.
Duis ultrices lorem id fringilla semper. Integer bibendum sagittis arcu in bibendum. Vivamus rhoncus feugiat leo accumsan bibendum. Aliquam ac turpis ut sem luctus laoreet. Donec sed tristique elit. Proin sit amet blandit dolor, eget aliquam mi. Nullam in ante aliquet, placerat turpis id, blandit enim. Donec sed ligula nisl. Ut varius vulputate suscipit. Nam at tristique odio.
</p>
</DialogBody>
<DialogFooter>
<button type="button" class="btn btn-primary" @onclick="@(()=> context.Dialog.Hide("yes"))">Yes</button>
<button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
</DialogFooter>
</DialogInputProvider>
</Dialog>
<button @onclick="DialogBoxBlazorOnClick">Blazor Dialog Box</button>
<button @onclick="DialogBoxBlazorBigOnClick">Blazor Dialog Box Big</button>
@if (dialogResult != null)
{
<div>DialogResult: @dialogResult</div>
}
@code{
string dialogResult = null;
bool isCentered;
DialogSize size;
async Task DialogBoxBlazorOnClick()
{
dialogResult = await dialogService.ShowDialog<string>("simple-dialog", "(Blazor Dialog Box) Some Text...");
}
async Task DialogBoxBlazorBigOnClick()
{
dialogResult = await dialogService.ShowDialog<string>("simple-large-dialog", "(Blazor Dialog Box Large) Some Text...");
}
}
@using BlazorDialogBox.Data
<h2>Blazor Dialog Box Example</h2>
<p>Click the buttons to show the corresponding dialog</p>
<label>Is centered:</label>
<input type="checkbox" @bind="isCentered" />
<label>Size:</label>
<select @bind="size">
<option value="@DialogSize.Normal">@DialogSize.Normal</option>
<option value="@DialogSize.Large">@DialogSize.Large</option>
<option value="@DialogSize.Small">@DialogSize.Small</option>
</select>
<Dialog Id="simple-dialog" Size="size" Centered="isCentered">
<DialogInputProvider TInput="string">
<DialogBody>
<h4>@context.Input</h4>
</DialogBody>
<DialogFooter>
<button type="button" class="btn btn-primary" @onclick="@(() => context.Dialog.Hide("yes"))">Yes</button>
<button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
</DialogFooter>
</DialogInputProvider>
</Dialog>
<Dialog Id="simple-large-dialog" Size="size" Centered="isCentered">
<DialogInputProvider TInput="string">
<DialogBody>
<h4>@context.Input</h4>
<p>Lorem Ipsum</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis est vitae purus eleifend bibendum id et neque. Sed eu nisi commodo, sagittis neque suscipit, euismod quam. In metus turpis, pulvinar ut odio vel, vehicula congue dui. Praesent sed feugiat est. Ut ut rhoncus mi, et facilisis eros. Vivamus malesuada nulla eu tincidunt vulputate. Donec non augue aliquam, sodales est vel, varius quam. Nam vel fringilla felis.
Duis ultrices lorem id fringilla semper. Integer bibendum sagittis arcu in bibendum. Vivamus rhoncus feugiat leo accumsan bibendum. Aliquam ac turpis ut sem luctus laoreet. Donec sed tristique elit. Proin sit amet blandit dolor, eget aliquam mi. Nullam in ante aliquet, placerat turpis id, blandit enim. Donec sed ligula nisl. Ut varius vulputate suscipit. Nam at tristique odio.
</p>
</DialogBody>
<DialogFooter>
<button type="button" class="btn btn-primary" @onclick="@(()=> context.Dialog.Hide("yes"))">Yes</button>
<button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
</DialogFooter>
</DialogInputProvider>
</Dialog>
<button @onclick="DialogBoxBlazorOnClick">Blazor Dialog Box</button>
<button @onclick="DialogBoxBlazorBigOnClick">Blazor Dialog Box Big</button>
@if (dialogResult != null)
{
<div>DialogResult: @dialogResult</div>
}
@code{
string dialogResult = null;
bool isCentered;
DialogSize size;
async Task DialogBoxBlazorOnClick()
{
dialogResult = await dialogService.ShowDialog<string>("simple-dialog", "(Blazor Dialog Box) Some Text...");
}
async Task DialogBoxBlazorBigOnClick()
{
dialogResult = await dialogService.ShowDialog<string>("simple-large-dialog", "(Blazor Dialog Box Large) Some Text...");
}
}
0 Comments