diff --git a/docs/en/UI/Blazor/Block-Busy.md b/docs/en/UI/Blazor/Block-Busy.md new file mode 100644 index 0000000000..39296e2280 --- /dev/null +++ b/docs/en/UI/Blazor/Block-Busy.md @@ -0,0 +1,38 @@ +# Blazor UI: Block/Busy Service + +UI Block disables (blocks) the page or a part of the page. + +## Quick Example + +Simply [inject](../../Dependency-Injection.md) `IBlockUiService` to your page or component and call the `Block/UnBlock` method to disables (blocks) the element. + +```csharp +namespace MyProject.Blazor.Pages +{ + public partial class Index + { + private readonly IBlockUiService _blockUiService; + + public Index(IBlockUiService _blockUiService) + { + _blockUiService = blockUiService; + } + + public async Task BlockForm() + { + /* + Parameters of Block method: + selectors: A string containing one or more selectors to match + busy : Set to true to show a progress indicator on the blocked area. + */ + await _blockUiService.Block(selectors: "#MySelectors", busy: true); + } + } +} +``` + +The resulting UI will look like below: + +![ui-busy](../../images/ui-busy.png) + +Then you can use `_blockUiService.UnBlock()` to re-enable the busy area/page. diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index ff85feae58..8abc246509 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -958,6 +958,10 @@ { "text": "Page Progress", "path": "UI/Blazor/Page-Progress.md" + }, + { + "text": "Block/Busy", + "path": "UI/Blazor/Block-Busy.md" } ] }, diff --git a/framework/src/Volo.Abp.AspNetCore.Components.Web/wwwroot/libs/abp/css/abp.css b/framework/src/Volo.Abp.AspNetCore.Components.Web/wwwroot/libs/abp/css/abp.css index ddf9cae5b2..aa92b7499f 100644 --- a/framework/src/Volo.Abp.AspNetCore.Components.Web/wwwroot/libs/abp/css/abp.css +++ b/framework/src/Volo.Abp.AspNetCore.Components.Web/wwwroot/libs/abp/css/abp.css @@ -15,7 +15,7 @@ width: 100%; height: 100%; z-index: 102; - background-color: #fff; + background-color: #fff !important; opacity: .8; transition: opacity .25s; }