mirror of https://github.com/abpframework/abp.git
Enis Necipoglu
2 years ago
committed by
GitHub
GitHub
23 changed files with 219 additions and 12 deletions
@ -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. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors |
|||
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: |
|||
|
|||
 |
|||
|
|||
Then you can use `_blockUiService.UnBlock()` to re-enable the busy area/page. |
|||
@ -0,0 +1,27 @@ |
|||
using System.Threading.Tasks; |
|||
using Microsoft.JSInterop; |
|||
using Volo.Abp.AspNetCore.Components.BlockUi; |
|||
using Volo.Abp.DependencyInjection; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Components.Web.BlockUi; |
|||
|
|||
[Dependency(ReplaceServices = true)] |
|||
public class AbpBlockUiService : IBlockUiService, IScopedDependency |
|||
{ |
|||
public IJSRuntime JsRuntime { get; } |
|||
|
|||
public AbpBlockUiService(IJSRuntime jsRuntime) |
|||
{ |
|||
JsRuntime = jsRuntime; |
|||
} |
|||
|
|||
public async Task Block(string? selectors, bool busy = false) |
|||
{ |
|||
await JsRuntime.InvokeVoidAsync("abp.ui.block", selectors, busy); |
|||
} |
|||
|
|||
public async Task UnBlock() |
|||
{ |
|||
await JsRuntime.InvokeVoidAsync("abp.ui.unblock"); |
|||
} |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
@keyframes spin { |
|||
0% { |
|||
transform: translateZ(0) rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: translateZ(0) rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.abp-block-area { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 102; |
|||
background-color: #fff !important; |
|||
opacity: .8; |
|||
transition: opacity .25s; |
|||
} |
|||
|
|||
.abp-block-area.abp-block-area-disappearing { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.abp-block-area.abp-block-area-busy:after { |
|||
content: attr(data-text); |
|||
display: block; |
|||
max-width: 125px; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 20px; |
|||
font-family: sans-serif; |
|||
color: #343a40; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
.abp-block-area.abp-block-area-busy:before { |
|||
content: ""; |
|||
display: block; |
|||
width: 150px; |
|||
height: 150px; |
|||
border-radius: 50%; |
|||
border-width: 2px; |
|||
border-style: solid; |
|||
border-color: transparent #228ae6 #228ae6 #228ae6; |
|||
position: absolute; |
|||
top: calc(50% - 75px); |
|||
left: calc(50% - 75px); |
|||
will-change: transform; |
|||
animation: spin .75s infinite ease-in-out; |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
using System.Threading.Tasks; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Components.BlockUi; |
|||
|
|||
public interface IBlockUiService |
|||
{ |
|||
Task Block(string? selectors, bool busy = false); |
|||
|
|||
Task UnBlock(); |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
using System.Threading.Tasks; |
|||
using Volo.Abp.DependencyInjection; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Components.BlockUi; |
|||
|
|||
public class NullBlockUiService : IBlockUiService, ISingletonDependency |
|||
{ |
|||
public Task Block(string? selectors, bool busy = false) |
|||
{ |
|||
return Task.CompletedTask; |
|||
} |
|||
|
|||
public Task UnBlock() |
|||
{ |
|||
return Task.CompletedTask; |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue