imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Alerts doc

Browse Source
pull/670/head
Yunus Emre Kalkan 6 years ago
parent ea0a6edccc
commit d29846e031
1 changed files with 220 additions and 35 deletions
Show Stats Download Patch File Download Diff File

255
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Alerts.cshtml
Unescape View File

@ -10,84 +10,269 @@
</abp-style-bundle>
}
@section scripts {
<abp-script-bundle>
@*<abp-script src="/libs/highlight.js/lib/highlight.js" />
<abp-script src="/Pages/Components/highlightCode.js" />*@
</abp-script-bundle>
}
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<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>
<h4>Examples</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-alert alert-type="Primary">
A simple primary alert—check it out!
</abp-alert>
<abp-alert alert-type="Secondary">
A simple secondary alert—check it out!
</abp-alert>
<abp-alert alert-type="Success">
A simple success alert—check it out!
</abp-alert>
<abp-alert alert-type="Danger">
I'm an abp alert!
A simple danger alert—check it out!
</abp-alert>
<abp-alert alert-type="Warning">
A simple warning alert—check it out!
</abp-alert>
<abp-alert alert-type="Info">
A simple info alert—check it out!
</abp-alert>
<abp-alert alert-type="Light">
A simple light alert—check it out!
</abp-alert>
<abp-alert alert-type="Dark">
A simple dark alert—check it out!
</abp-alert>
</div>
<div class="code-area">
<pre>
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-alert alert-type=&quot;Primary&quot;&gt;
A simple primary alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Secondary&quot;&gt;
A simple secondary alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Success&quot;&gt;
A simple success alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Danger&quot;&gt;
I&#39;m an abp alert!
A simple danger alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Warning&quot;&gt;
A simple warning alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Info&quot;&gt;
A simple info alert&mdash;check it out!
&lt;/abp-alert&gt;
</pre>
&lt;abp-alert alert-type=&quot;Light&quot;&gt;
A simple light alert&mdash;check it out!
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Dark&quot;&gt;
A simple dark alert&mdash;check it out!
&lt;/abp-alert&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
A simple primary alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-secondary&quot; role=&quot;alert&quot;&gt;
A simple secondary alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
A simple success alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
A simple danger alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
A simple warning alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
A simple info alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-light&quot; role=&quot;alert&quot;&gt;
A simple light alert&mdash;check it out!
&lt;/div&gt;
&lt;div class=&quot;alert alert-dark&quot; role=&quot;alert&quot;&gt;
A simple dark alert&mdash;check it out!
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4># Dismissible Alert Example</h4>
<h4>Link color</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 alert-type="Primary">
A simple primary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
<abp-alert alert-type="Secondary">
A simple secondary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
<abp-alert alert-type="Success">
A simple success alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
<abp-alert alert-type="Danger">
A simple danger alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
<abp-alert alert-type="Warning">
A simple warning alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
<abp-alert alert-type="Info">
A simple info alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
<abp-alert alert-type="Light">
A simple light alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
<abp-alert alert-type="Dark">
A simple dark alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
</div>
<div class="code-area">
<pre>
&lt;abp-alert alert-type=&quot;Warning&quot; dismissible=&quot;true&quot;&gt;
I&#39;m a dismissible abp alert!
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-alert alert-type=&quot;Primary&quot;&gt;
A simple primary alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Secondary&quot;&gt;
A simple secondary alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Success&quot;&gt;
A simple success alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Danger&quot;&gt;
A simple danger alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
</pre>
&lt;abp-alert alert-type=&quot;Warning&quot;&gt;
A simple warning alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Info&quot;&gt;
A simple info alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Light&quot;&gt;
A simple light alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
&lt;abp-alert alert-type=&quot;Dark&quot;&gt;
A simple dark alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/abp-alert&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;alert alert-primary&quot; role=&quot;alert&quot;&gt;
A simple primary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-secondary&quot; role=&quot;alert&quot;&gt;
A simple secondary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
A simple success alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
A simple danger alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-warning&quot; role=&quot;alert&quot;&gt;
A simple warning alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-info&quot; role=&quot;alert&quot;&gt;
A simple info alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-light&quot; role=&quot;alert&quot;&gt;
A simple light alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
&lt;div class=&quot;alert alert-dark&quot; role=&quot;alert&quot;&gt;
A simple dark alert with &lt;a href=&quot;#&quot; class=&quot;alert-link&quot;&gt;an example link&lt;/a&gt;. Give it a click if you like.
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4># Alert With Link Example</h4>
<h4>Additional content</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 alert-type="Success">
<h4>Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</abp-alert>
</div>
<div class="code-area">
<pre>
&lt;abp-alert alert-type=&quot;Info&quot;&gt;
I&#39;m an abp alert with &lt;a abp-alert-link href=&quot;#&quot;&gt;Link&lt;/a&gt;!
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-alert alert-type=&quot;Success&quot;&gt;
&lt;h4&gt;Well done!&lt;/h4&gt;
&lt;p&gt;Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.&lt;/p&gt;
&lt;hr&gt;
&lt;p class=&quot;mb-0&quot;&gt;Whenever you need to, be sure to use margin utilities to keep things nice and tidy.&lt;/p&gt;
&lt;/abp-alert&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
&lt;h4 class=&quot;alert-heading&quot;&gt;Well done!&lt;/h4&gt;
&lt;p&gt;Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.&lt;/p&gt;
&lt;hr&gt;
&lt;p class=&quot;mb-0&quot;&gt;Whenever you need to, be sure to use margin utilities to keep things nice and tidy.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4># Alert With Header Example</h4>
<h4>Dismissing</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-alert alert-type="Primary">
<h4>Header</h4>
I'm an abp alert!
<abp-alert alert-type="Warning" dismissible="true">
Holy guacamole! You should check in on some of those fields below.
</abp-alert>
</div>
<div class="code-area">
<pre>
&lt;abp-alert alert-type=&quot;Primary&quot;&gt;
&lt;h4&gt;Header&lt;/h4&gt;
I&#39;m an abp alert!
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-alert alert-type=&quot;Warning&quot; dismissible=&quot;true&quot;&gt;
Holy guacamole! You should check in on some of those fields below.
&lt;/abp-alert&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;alert alert-warning alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
Holy guacamole! You should check in on some of those fields below.
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;
&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
Write Preview
Loading…
Cancel
Save