From d29846e031bb1bdb47c099d08af67bee4383276f Mon Sep 17 00:00:00 2001 From: Yunus Emre Kalkan Date: Mon, 17 Dec 2018 10:39:19 +0300 Subject: [PATCH] Alerts doc --- .../Pages/Components/Alerts.cshtml | 255 +++++++++++++++--- 1 file changed, 220 insertions(+), 35 deletions(-) diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Alerts.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Alerts.cshtml index d2356bf771..2081e091e5 100644 --- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Alerts.cshtml +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Alerts.cshtml @@ -10,84 +10,269 @@ } +@section scripts { + + @* + *@ + +} + + + + +

Alerts

Based on Bootstrap Alert.

-

# Alert Example

+

Examples

- + + A simple primary alert—check it out! + + + A simple secondary alert—check it out! + + + A simple success alert—check it out! + - I'm an abp alert! + A simple danger alert—check it out! + + + A simple warning alert—check it out! + + + A simple info alert—check it out! + + + A simple light alert—check it out! + + + A simple dark alert—check it out! -
- 
+        
+            
+                

+<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 class="alert alert-primary" role="alert">
+    A simple primary alert—check it out!
+</div>
+<div class="alert alert-secondary" role="alert">
+    A simple secondary alert—check it out!
+</div>
+<div class="alert alert-success" role="alert">
+    A simple success alert—check it out!
+</div>
+<div class="alert alert-danger" role="alert">
+    A simple danger alert—check it out!
+</div>
+<div class="alert alert-warning" role="alert">
+    A simple warning alert—check it out!
+</div>
+<div class="alert alert-info" role="alert">
+    A simple info alert—check it out!
+</div>
+<div class="alert alert-light" role="alert">
+    A simple light alert—check it out!
+</div>
+<div class="alert alert-dark" role="alert">
+    A simple dark alert—check it out!
+</div>
+
+ +
-

# Dismissible Alert Example

+

Link color

- - - I'm a dismissible abp alert! + + A simple primary alert with an example link. Give it a click if you like. + + + A simple secondary alert with an example link. Give it a click if you like. + + + A simple success alert with an example link. Give it a click if you like. + + + A simple danger alert with an example link. Give it a click if you like. + + + A simple warning alert with an example link. Give it a click if you like. + + + A simple info alert with an example link. Give it a click if you like. + + + A simple light alert with an example link. Give it a click if you like. + + + A simple dark alert with an example link. Give it a click if you like. -
- 
-<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 class="alert alert-primary" role="alert">
+    A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-secondary" role="alert">
+    A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-success" role="alert">
+    A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-danger" role="alert">
+    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-warning" role="alert">
+    A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-info" role="alert">
+    A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-light" role="alert">
+    A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-dark" role="alert">
+    A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+
+ +
-

# Alert With Link Example

+

Additional content

- - - I'm an abp alert with Link! + +

Well done!

+

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.

+
+

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

 -
- 
-<abp-alert alert-type="Info">
-      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 class="alert alert-success" role="alert">
+    <h4 class="alert-heading">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>
+</div>
+
+ +
-

# Alert With Header Example

+

Dismissing

- -

Header

- I'm an abp alert! + + Holy guacamole! You should check in on some of those fields below. -
- 
-<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 class="alert alert-warning alert-dismissible fade show" role="alert">
+  Holy guacamole! You should check in on some of those fields below.
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+ +
\ No newline at end of file