-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[wip] Implementing demo app, fixing some bugs
- Loading branch information
1 parent
bdcc9e4
commit 58b34be
Showing
29 changed files
with
365 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| @using Microsoft.AspNetCore.Components.Web | ||
| @using Microsoft.AspNetCore.Components.Forms | ||
| @using Microsoft.AspNetCore.Components.Routing | ||
| @using Microsoft.JSInterop |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
DemoApp/BlazorDialog.DemoApp/Client/Pages/Customization.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| @page "/Customization" | ||
|
|
||
| @{ | ||
| var tabItems = new List<TabItem>() | ||
| { | ||
| new TabItem | ||
| { | ||
| HeaderText = "Demo", | ||
| Contents = @<BlazorDialog.DemoApp.Client.Sources.Customization /> | ||
| }, | ||
| new TabItem | ||
| { | ||
| HeaderText = "<> Source", | ||
| Contents = @<div> | ||
| <SourceFileLoader SourceFilePath="Sources/Customization.razor" /> | ||
| <SourceFileLoader SourceFilePath="wwwroot/css/custom-modal.css" /> | ||
| </div> | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| <TabStrip Title="Using a custom dialog" TabItems="tabItems" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| @page "/NoService" | ||
| @{ | ||
| var tabItems = new List<TabItem>() | ||
| { | ||
| new TabItem | ||
| { | ||
| HeaderText = "Demo", | ||
| Contents = @<BlazorDialog.DemoApp.Client.Sources.NoService /> | ||
| }, | ||
| new TabItem | ||
| { | ||
| HeaderText = "<> Source", | ||
| Contents = @<SourceFileLoader SourceFilePath="Sources/NoService.razor" /> | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| <TabStrip Title="Using a dialog as a component" TabItems="tabItems" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
DemoApp/BlazorDialog.DemoApp/Client/Sources/Customization.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <ul> | ||
| <li>If you don't want to use the opinionated build-in dialog styling/css you don't have to!</li> | ||
| <li>Use any markup/css you want and the dialog will render that when showing itself.</li> | ||
| <li>There are some caveats though. You have to provide every bit of css and html that makes the dialog appear | ||
| and behave as a dialog (e.g. modal/with backdrop etc).</li> | ||
| <li>This approach is well suited when you want to use a dialog as a service but you want to use completely custom html/css.</li> | ||
| <li>Dialog parameters such as <code>Centered</code> and <code>Side</code> are ignored in custom dialogs.</li> | ||
| </ul> | ||
|
|
||
| <Dialog IsShowing="isShowing" IsCustom="true" > | ||
|
|
||
| <!-- all dialog markup and css must be provided. This example is taken from https://www.w3schools.com/howto/howto_css_modals.asp --> | ||
| <div class="mymodal"> | ||
| <div class="mymodal-content"> | ||
| <div class="mymodal-header"> | ||
| <span class="mymodal-close" @onclick="@(()=> { dialogResult = null; isShowing = false; } )">×</span> | ||
| <h2>@question</h2> | ||
| </div> | ||
| <div class="mymodal-body"> | ||
| <p>Some text in the Modal Body</p> | ||
| <p>Some other text...</p> | ||
| </div> | ||
| <div class="mymodal-footer"> | ||
| <button type="button" class="btn btn-primary" @onclick="@(()=> { dialogResult = "yes"; isShowing = false; })">Yes</button> | ||
| <button type="button" class="btn btn-danger" @onclick="@(()=> { dialogResult = "no"; isShowing = false; })">No</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </Dialog> | ||
|
|
||
| <div class="mt-4"> | ||
| <button class="btn btn-primary" @onclick="ButtonOnClick">Show Custom Dialog</button> | ||
| </div> | ||
|
|
||
| @if (dialogResult != null) | ||
| { | ||
| <div class="mt-3">DialogResult: @dialogResult</div> | ||
| } | ||
|
|
||
| @code{ | ||
| string dialogResult = null; | ||
| bool isShowing = false; | ||
| string question = "Do you agree ?"; | ||
|
|
||
| void ButtonOnClick() | ||
| { | ||
| dialogResult = null; | ||
| isShowing = true; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,38 @@ | ||
| @inject IBlazorDialogService dialogService | ||
|
|
||
| <ul> | ||
| <li>You can use the IBlazorDialogService to call a dialog and await for the result.</li> | ||
| <li>You can use the <code>IBlazorDialogService</code> to call a dialog and await for the result.</li> | ||
| <li>You can pass and receive any object as input or output.</li> | ||
| <li>The dialog is searched by id, so it just has to exist somewhere in the app.</li> | ||
| <li>The dialog is searched by id, so it can exist anywhere in the app.</li> | ||
| <li>There are some optional build-in helper components like <code>DialogHeader</code>, <code>DialogBody</code>, <code>DialogFooter</code>. </li> | ||
| <li>Use the <code>DialogInputProvider</code> component to access the input passed when the dialog is called.</li> | ||
| </ul> | ||
| <div> | ||
| <div class="form-inline"> | ||
| <label for="size" class="mr-sm-3">Size</label> | ||
| <select class="form-control mr-sm-3" id="size" @bind="size"> | ||
| <option value="@DialogSize.Normal">@DialogSize.Normal</option> | ||
| <option value="@DialogSize.Large">@DialogSize.Large</option>k | ||
| <option value="@DialogSize.Small">@DialogSize.Small</option> | ||
| </select> | ||
| <div class="form-check mb-2 mr-sm-2"> | ||
| <input class="form-check-input" id="isCentered" type="checkbox" @bind="isCentered" /> | ||
| <label class="form-check-label" for="isCentered">Is centered</label> | ||
|
|
||
| </div> | ||
| <label for="question" class="mr-sm-3">Question:</label> | ||
| <input @bind="@question" /> | ||
| </div> | ||
| </div> | ||
| <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"> | ||
| <DialogHeader> | ||
| <h4>@context.Input</h4> | ||
| </DialogHeader> | ||
| <DialogBody> | ||
| <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. | ||
|
|
||
| Cras tincidunt ex arcu, quis luctus felis aliquet non. Morbi eget eleifend elit, quis molestie est. Sed vitae nulla non massa efficitur vulputate condimentum condimentum mauris. Suspendisse potenti. Suspendisse potenti. Ut ornare, odio a lacinia accumsan, ante ante accumsan elit, sit amet fringilla nulla felis quis arcu. Vestibulum eget erat non leo fringilla fringilla. Cras sed massa ac sapien mollis congue at non lorem. Vivamus ut justo id turpis iaculis pretium. Fusce leo odio, fringilla id ante sit amet, viverra vehicula neque. Phasellus maximus nisi elit. Aenean vitae rutrum ex. | ||
|
|
||
| Donec nibh ex, fringilla non tempus vel, rutrum feugiat orci. Donec diam massa, varius sit amet consequat scelerisque, congue ut nisl. Pellentesque scelerisque massa nisl, id aliquet justo facilisis nec. Donec consequat sapien ut quam eleifend, et laoreet tellus vehicula. Integer facilisis mauris nec pulvinar cursus. In quis magna elit. Praesent scelerisque, libero sed faucibus auctor, leo lectus blandit nisl, sit amet mattis dolor lacus vitae diam. Donec vitae neque eu ipsum porttitor facilisis. Sed a sagittis enim. | ||
|
|
||
| Curabitur ac purus quis purus dictum aliquam at nec diam. Fusce est felis, auctor ut ex et, lobortis lacinia urna. Fusce egestas mi lorem, vel sagittis enim euismod dignissim. Nam porta nec sem sed malesuada. Ut non sollicitudin ex. Nam luctus sem a elit volutpat, in iaculis massa ultrices. Aliquam congue magna sem. Quisque mi elit, volutpat et mauris non, pellentesque commodo tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras tincidunt a odio non scelerisque. Duis tincidunt a quam a lacinia. Vivamus nec justo gravida dui commodo vulputate. Nulla risus ante, vehicula id enim sit amet, vestibulum pellentesque nibh. Morbi a lectus semper, blandit mauris sed, tristique nibh. | ||
| </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> | ||
|
|
||
| <div class="mt-4"> | ||
| <button class="btn btn-primary" @onclick="SimpleDialogOnClick">Simple Dialog</button> | ||
| <button class="btn btn-secondary" @onclick="SimpleDialogBigOnClick">Simple Dialog Big</button> | ||
| <button class="btn btn-primary" @onclick="ButtonOnClick">Show Dialog</button> | ||
| </div> | ||
|
|
||
| @if (dialogResult != null) | ||
| { | ||
| <div>DialogResult: @dialogResult</div> | ||
| <div class="mt-3">DialogResult: @dialogResult</div> | ||
| } | ||
|
|
||
| @code{ | ||
| string dialogResult = null; | ||
| bool isCentered; | ||
| DialogSize size; | ||
| string question = "Do you agree ?"; | ||
|
|
||
| async Task SimpleDialogOnClick() | ||
| async Task ButtonOnClick() | ||
| { | ||
| dialogResult = await dialogService.ShowDialog<string>("simple-dialog", "(Simple Dialog) Are you sure?"); | ||
| } | ||
| dialogResult = null; | ||
|
|
||
| async Task SimpleDialogBigOnClick() | ||
| { | ||
| dialogResult = await dialogService.ShowDialog<string>("simple-large-dialog", "(Simple Dialog Large) Are you sure?"); | ||
| //The dialog exists in App.razor | ||
| dialogResult = await dialogService.ShowDialog<string>("simple-dialog", question); | ||
| } | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.