Blazor Server で使える、使い勝手の良い MessageBox で実装したメッセージボックスのボタンを、右寄せに修正しました。
ソースコードはGitHubで公開しています。
ソースコード変更内容を解説
Modal/ModalMessageBox.razor
・classで使っているCSSを text-right へ変更。
・バグ修正。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
@using WebApplication1; @inject IModalService ModalService <div> <table> <tbody> <tr> <td width="90"> @if (Icon == MessageBoxIcon.Information) { <img width="70" src="img/MessageIcon/Information.jpg" /> } else if (Icon == MessageBoxIcon.Question) { <img width="70" src="img/MessageIcon/Question.jpg" /> } else if (Icon == MessageBoxIcon.Warning) { <img width="70" src="img/MessageIcon/Warning.jpg" /> } else if (Icon == MessageBoxIcon.Error) { <img width="70" src="img/MessageIcon/Error.jpg" /> } </td> <td> @if (Message.IndexOf("\r\n") < 0) { <p>@Message</p> } else { <p> @foreach (var textRow in Message.Split("\r\n")) { <span>@textRow</span><br> } </p> } @if (!string.IsNullOrEmpty(MessageDetail)) { <div class="messagebox-detailmessage"> @if (MessageDetail.IndexOf("\r\n") < 0) { <p>@MessageDetail</p> } else { <p> @foreach (var textRow in MessageDetail.Split("\r\n")) { <span>@textRow</span><br> } </p> } </div> } </td> </tr> </tbody> </table> <p><br></p> <div class="text-right"> @if (Buttons == MessageBoxButtons.YesNo) { <button @onclick="Yes" class="btn btn-primary"> はい </button> <button @onclick="No" class="btn btn-secondary ml-3"> いいえ </button> } else if (Buttons == MessageBoxButtons.OK) { <button @onclick="Ok" class="btn btn-primary messagebox-btn"> OK </button> } </div> </div> @code { [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } [Parameter] public string Message { get; set; } [Parameter] public string MessageDetail { get; set; } [Parameter] public MessageBoxButtons Buttons { get; set; } [Parameter] public MessageBoxIcon Icon { get; set; } async Task Yes() => await BlazoredModal.CloseAsync(ModalResult.Ok(true)); async Task No() => await BlazoredModal.CancelAsync(); async Task Ok() => await BlazoredModal.CancelAsync(); } |
コメント