mirror of https://github.com/abpframework/abp.git
Ilkay Ilknur
5 years ago
59 changed files with 603 additions and 306 deletions
@ -1,3 +1,38 @@ |
|||
# Blazor UI: Managing Global Scripts & Styles |
|||
|
|||
TODO |
|||
Some modules may require additional styles or scripts that need to be referenced in **index.html** file. It's not easy to find and update these types of references in Blazor apps. ABP offers a simple, powerful, and modular way to manage global style and scripts in Blazor apps. |
|||
|
|||
To update script & style references without worrying about dependencies, ordering, etc in a project, you can use the [bundle command](../../CLI.md#bundle). |
|||
|
|||
You can also add custom styles and scripts and let ABP manage them for you. In your Blazor project, you can create a class implementing `IBundleContributer` interface. |
|||
|
|||
`IBundleContributer` interface contains two methods. |
|||
|
|||
* `AddScripts(...)` |
|||
* `AddStyles(...)` |
|||
|
|||
Both methods get `BundleContext` as a parameter. You can add scripts and styles to the `BundleContext` and run [bundle command](../../CLI.md#bundle). Bundle command detects custom styles and scripts with module dependencies and updates `index.html` file. |
|||
|
|||
## Example Usage |
|||
```csharp |
|||
namespace MyProject.Blazor |
|||
{ |
|||
public class MyProjectBundleContributer : IBundleContributer |
|||
{ |
|||
public void AddScripts(BundleContext context) |
|||
{ |
|||
context.Add("site.js"); |
|||
} |
|||
|
|||
public void AddStyles(BundleContext context) |
|||
{ |
|||
context.Add("main.css"); |
|||
context.Add("custom-styles.css"); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
> There is a BundleContributer class implementing `IBundleContributer` interface coming by default with the startup templates. So, most of the time, you don't need to add it manually. |
|||
|
|||
> Bundle command adds style and script references individually. Bundling and minification support will be added to incoming releases. |
|||
@ -1,3 +1,62 @@ |
|||
# Blazor UI: Page Alerts |
|||
|
|||
TODO |
|||
It is common to show error, warning or information alerts to inform the user. An example *Service Interruption* alert is shown below: |
|||
|
|||
 |
|||
|
|||
## Quick Example |
|||
|
|||
Simply [inject](../../Dependency-Injection.md) `IAlertManager` to your page or component and call the `Alerts.Warning` method to show a success message. |
|||
|
|||
```csharp |
|||
namespace MyProject.Blazor.Pages |
|||
{ |
|||
public partial class Index |
|||
{ |
|||
private readonly IAlertManager _alertManager; |
|||
|
|||
public Index(IAlertManager alertManager) |
|||
{ |
|||
this._alertManager = alertManager; |
|||
} |
|||
|
|||
protected override void OnInitialized() |
|||
{ |
|||
_alertManager.Alerts.Warning( |
|||
"We will have a service interruption between 02:00 AM and 04:00 AM at October 23, 2023!", |
|||
"Service Interruption"); |
|||
base.OnInitialized(); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
If you inherit your page or component from the `AbpComponentBase` class, you can use the `Alerts` property to add alerts. |
|||
|
|||
```csharp |
|||
namespace MyProject.Blazor.Pages |
|||
{ |
|||
public partial class Index : AbpComponentBase |
|||
{ |
|||
protected override void OnInitialized() |
|||
{ |
|||
Alerts.Warning( |
|||
"We will have a service interruption between 02:00 AM and 04:00 AM at October 23, 2023!", |
|||
"Service Interruption"); |
|||
base.OnInitialized(); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
> You typically use `@inherits AbpComponentBase` in the `.razor` file to inherit from the `AbpComponentBase`, instead of inheriting in the code behind file. |
|||
|
|||
### Alert Types |
|||
|
|||
`Warning` is used to show a warning alert. Other common methods are `Info`, `Danger` and `Success`. |
|||
|
|||
Beside the standard methods, you can use the `Alerts.Add` method by passing an `AlertType` `enum` with one of these values: `Default`, `Primary`, `Secondary`, `Success`, `Danger`, `Warning`, `Info`, `Light`, `Dark`. |
|||
|
|||
### Dismissible |
|||
|
|||
All alert methods gets an optional `dismissible` parameter. Default value is `true` which makes the alert box dismissible. Set it to `false` to create a sticky alert box. |
|||
|
|||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 187 KiB |
@ -1,7 +0,0 @@ |
|||
namespace Volo.Abp.AspNetCore.Components.WebAssembly.Alerts |
|||
{ |
|||
public interface IAlertManager |
|||
{ |
|||
AlertList Alerts { get; } |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
using System; |
|||
using System.Collections.Generic; |
|||
using System.Linq; |
|||
using System.Text; |
|||
using System.Threading.Tasks; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Components.Alerts |
|||
{ |
|||
public interface IAlertManager |
|||
{ |
|||
AlertList Alerts { get; } |
|||
} |
|||
} |
|||
@ -1,18 +1,16 @@ |
|||
<ul class="navbar-nav"> |
|||
<ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn"> |
|||
<li |
|||
class="nav-item d-flex align-items-center" |
|||
*ngIf="item.visible()" |
|||
[abpPermission]="item.requiredPolicy" |
|||
> |
|||
<ng-container |
|||
*ngIf="item.component; else htmlTemplate" |
|||
[ngComponentOutlet]="item.component" |
|||
></ng-container> |
|||
<ng-container *ngIf="item.visible()"> |
|||
<li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy"> |
|||
<ng-container |
|||
*ngIf="item.component; else htmlTemplate" |
|||
[ngComponentOutlet]="item.component" |
|||
></ng-container> |
|||
|
|||
<ng-template #htmlTemplate> |
|||
<div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div> |
|||
</ng-template> |
|||
</li> |
|||
<ng-template #htmlTemplate> |
|||
<div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div> |
|||
</ng-template> |
|||
</li> |
|||
</ng-container> |
|||
</ng-container> |
|||
</ul> |
|||
|
|||
@ -1,18 +1,20 @@ |
|||
<div class="row justify-content-end mx-n1" id="AbpContentToolbar"> |
|||
<div class="col-auto px-1 pt-2" *ngFor="let action of actionList; trackBy: trackByFn"> |
|||
<ng-container *ngIf="action.visible(data)" [abpPermission]="action.permission"> |
|||
<ng-container *ngIf="action.component as component; else button"> |
|||
<ng-container |
|||
*ngComponentOutlet="component; injector: createInjector(action)" |
|||
></ng-container> |
|||
</ng-container> |
|||
<ng-container *ngIf="action.visible(data)"> |
|||
<ng-container *abpPermission="action.permission"> |
|||
<ng-container *ngIf="action.component as component; else button"> |
|||
<ng-container |
|||
*ngComponentOutlet="component; injector: createInjector(action)" |
|||
></ng-container> |
|||
</ng-container> |
|||
|
|||
<ng-template #button> |
|||
<button (click)="action.action(data)" type="button" class="btn btn-primary btn-sm"> |
|||
<i [ngClass]="action.icon" [class.mr-1]="action.icon"></i> |
|||
{{ action.text | abpLocalization }} |
|||
</button> |
|||
</ng-template> |
|||
<ng-template #button> |
|||
<button (click)="action.action(data)" type="button" class="btn btn-primary btn-sm"> |
|||
<i [ngClass]="action.icon" [class.mr-1]="action.icon"></i> |
|||
{{ action.text | abpLocalization }} |
|||
</button> |
|||
</ng-template> |
|||
</ng-container> |
|||
</ng-container> |
|||
</div> |
|||
</div> |
|||
|
|||
Loading…
Reference in new issue