-
-
Notifications
You must be signed in to change notification settings - Fork 232
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Classes/Styles parameters in the BitMessageBox (#9637)
- Loading branch information
1 parent
4dd1bc0
commit 2c8d7d2
Showing
7 changed files
with
297 additions
and
52 deletions.
There are no files selected for viewing
28 changes: 19 additions & 9 deletions
28
src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.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
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
49 changes: 49 additions & 0 deletions
49
src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs
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,49 @@ | ||
| namespace Bit.BlazorUI; | ||
|
|
||
| public class BitMessageBoxClassStyles | ||
| { | ||
| /// <summary> | ||
| /// Custom CSS classes/styles for the root element of the BitMessageBox. | ||
| /// </summary> | ||
| public string? Root { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Custom CSS classes/styles for the content of the BitMessageBox. | ||
| /// </summary> | ||
| public string? Content { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Custom CSS classes/styles for the header of the BitMessageBox. | ||
| /// </summary> | ||
| public string? Header { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Custom CSS classes/styles for the title of the BitMessageBox. | ||
| /// </summary> | ||
| public string? Title { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Custom CSS classes/styles for the BitSpacer of the BitMessageBox. | ||
| /// </summary> | ||
| public string? Spacer { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Custom CSS classes/styles for the CloseButton of the BitMessageBox. | ||
| /// </summary> | ||
| public BitButtonClassStyles? CloseButton { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Custom CSS classes/styles for the body of the BitMessageBox. | ||
| /// </summary> | ||
| public string? Body { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Custom CSS classes/styles for the footer of the BitMessageBox. | ||
| /// </summary> | ||
| public string? Footer { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Custom CSS classes/styles for the OkButton of the BitMessageBox. | ||
| /// </summary> | ||
| public BitButtonClassStyles? OkButton { get; set; } | ||
| } |
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
79 changes: 79 additions & 0 deletions
79
...UI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs
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,79 @@ | ||
| namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.MessageBox; | ||
|
|
||
| public partial class BitMessageBoxDemo | ||
| { | ||
| private readonly string example1RazorCode = @" | ||
| <BitCard Style=""padding:0""> | ||
| <BitMessageBox Title=""It's a title"" Body=""It's a body."" /> | ||
| </BitCard>"; | ||
|
|
||
| private readonly string example2RazorCode = @" | ||
| <BitButton OnClick=""() => isModalOpen = true"">Show</BitButton> | ||
| <BitModal @bind-IsOpen=""isModalOpen""> | ||
| <BitMessageBox OnClose=""() => isModalOpen = false"" Title=""This is the Title"" Body=""This is the Body!"" /> | ||
| </BitModal>"; | ||
| private readonly string example2CsharpCode = @" | ||
| private bool isModalOpen;"; | ||
|
|
||
| private readonly string example3RazorCode = @" | ||
| <BitButton OnClick=""ShowMessageBox"">Show MessageBox</BitButton> | ||
| <BitModalContainer />"; | ||
| private readonly string example3CsharpCode = @" | ||
| [AutoInject] private BitModalService modalService { get; set; } = default!; | ||
| private async Task ShowMessageBox() | ||
| { | ||
| BitModalReference modalRef = default!; | ||
| Dictionary<string, object> parameters = new() | ||
| { | ||
| { nameof(BitMessageBox.Title), ""This is a title"" }, | ||
| { nameof(BitMessageBox.Body), ""This is a body."" }, | ||
| { nameof(BitMessageBox.OnClose), EventCallback.Factory.Create(this, () => modalRef.Close()) } | ||
| }; | ||
| modalRef = await modalService.Show<BitMessageBox>(parameters); | ||
| }"; | ||
|
|
||
| private readonly string example4RazorCode = @" | ||
| <BitButton OnClick=""ShowMessageBoxService"">Show MessageBox</BitButton>"; | ||
| private readonly string example4CsharpCode = @" | ||
| [AutoInject] private BitMessageBoxService messageBoxService { get; set; } = default!; | ||
| private async Task ShowMessageBoxService() | ||
| { | ||
| await messageBoxService.Show(""TITLE"", ""BODY""); | ||
| }"; | ||
|
|
||
| private readonly string example5RazorCode = @" | ||
| <style> | ||
| .custom-msg { | ||
| background: linear-gradient(180deg, #3e0f0f, transparent) #000; | ||
| } | ||
| .custom-msg-btn { | ||
| color: #fff; | ||
| font-weight: bold; | ||
| border-radius: 1rem; | ||
| border-color: #8f0101; | ||
| transition: background-color 1s; | ||
| background: linear-gradient(90deg, #d10000, transparent) #8f0101; | ||
| } | ||
| .custom-msg-btn:hover { | ||
| color: #fff; | ||
| font-weight: bold; | ||
| border-color: #8f0101; | ||
| background-color: #8f0101; | ||
| } | ||
| </style> | ||
| <BitCard Style=""padding:0""> | ||
| <BitMessageBox Title=""It's a title"" | ||
| Body=""It's a body."" | ||
| Styles=""@(new() { Root = ""background: linear-gradient(180deg, #222444, transparent) #000"", OkButton = new() { Root = ""border-radius:1rem"" } })"" /> | ||
| </BitCard> | ||
| <BitCard Style=""padding:0""> | ||
| <BitMessageBox Title=""It's a title"" | ||
| Body=""It's a body."" | ||
| Classes=""@(new() { Root = ""custom-msg"", OkButton = new() { Root = ""custom-msg-btn"" } })"" /> | ||
| </BitCard>"; | ||
| } |
Oops, something went wrong.