mirror of https://github.com/abpframework/abp
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.0 KiB
87 lines
2.0 KiB
@page
|
|
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.AlertsModel
|
|
@{
|
|
ViewData["Title"] = "Alerts";
|
|
}
|
|
|
|
<h2>Alerts</h2>
|
|
|
|
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/alerts/" target="_blank"> Bootstrap Alert</a>.</p>
|
|
|
|
<h4># Alert Example</h4>
|
|
|
|
<div class="demo-with-code">
|
|
<div class="demo-area">
|
|
|
|
<abp-alert alert-type="Danger">
|
|
I'm an abp alert!
|
|
</abp-alert>
|
|
|
|
</div>
|
|
<div class="code-area">
|
|
<pre>
|
|
<abp-alert alert-type="Danger">
|
|
I'm an abp alert!
|
|
</abp-alert>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h4># Dismissible Alert Example</h4>
|
|
|
|
<div class="demo-with-code">
|
|
<div class="demo-area">
|
|
|
|
<abp-alert alert-type="Warning" dismissible="true">
|
|
I'm a dismissible abp alert!
|
|
</abp-alert>
|
|
|
|
</div>
|
|
<div class="code-area">
|
|
<pre>
|
|
<abp-alert alert-type="Warning" dismissible="true">
|
|
I'm a dismissible abp alert!
|
|
</abp-alert>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h4># Alert With Link Example</h4>
|
|
|
|
<div class="demo-with-code">
|
|
<div class="demo-area">
|
|
|
|
<abp-alert alert-type="Secondary">
|
|
I'm an abp alert with <a abp-alert-link href="#">Link</a>!
|
|
</abp-alert>
|
|
|
|
</div>
|
|
<div class="code-area">
|
|
<pre>
|
|
<abp-alert alert-type="Info">
|
|
I'm an abp alert with <a abp-alert-link href="#">Link</a>!
|
|
</abp-alert>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h4># Alert With Header Example</h4>
|
|
|
|
<div class="demo-with-code">
|
|
<div class="demo-area">
|
|
|
|
<abp-alert alert-type="Primary">
|
|
<abp-alert-header size="h4">Header</abp-alert-header>
|
|
I'm an abp alert!
|
|
</abp-alert>
|
|
|
|
</div>
|
|
<div class="code-area">
|
|
<pre>
|
|
<abp-alert alert-type="Primary">
|
|
<abp-alert-header size="h3">Header</abp-alert-header>
|
|
I'm an abp alert!
|
|
</abp-alert>
|
|
</pre>
|
|
</div>
|
|
</div> |