From 8d23b96490ab2de9255b176884f914c1200f1ec7 Mon Sep 17 00:00:00 2001 From: Yunus Emre Kalkan Date: Mon, 17 Dec 2018 15:07:45 +0300 Subject: [PATCH] card docs --- .../Pages/Components/Cards.cshtml | 608 +++++++++++++++--- 1 file changed, 535 insertions(+), 73 deletions(-) diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml index feefc2c04a..0d51658b5f 100644 --- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml @@ -10,135 +10,597 @@ } +@section scripts { + + @* + *@ + +} + + + + +

Cards

Based on Bootstrap card.

-

# Example

+

Example

- - Card header - Card body + + + + + Card Title + Some quick example text to build on the card title and make up the bulk of the card's content. + Go somewhere + +
- 
<abp-card>
-    <abp-card-header>Card header</abp-card-header>
-    <abp-card-body>Card body</abp-card-body>
-</abp-card>
+ + + 

+<abp-card style="width: 18rem;">
+  <img abp-card-image="Top" src="~/imgs/demo/300x200.png"/>
+  <abp-card-body>
+    <abp-card-title>Card Title</abp-card-title>
+    <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+    <a abp-button="Primary" href="#"> Go somewhere</a>
+  </abp-card-body>
+</abp-card>
+
+ + + 

+<div class="card" style="width: 18rem;">
+  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+
+ +
-

# Example

+

Titles, text, and links

+ - - - This is a sample card component built by - ABP bootstrap card tag helper. - + + Card title + Card subtitle + Some quick example text to build on the card title and make up the bulk of the card's content. Card link Another link +
- 
-<abp-card style="width: 18rem;">
-    <abp-card-body title="Card title" subtitle="Card subtitle">
-        <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
-        <a abp-card-link href="#">Card link</a>
-        <a abp-card-link href="#">Another link</a>
+        
+            
+                

+<abp-card style="width: 18rem;">
+    <abp-card-body>
+<abp-card-title>Card title</abp-card-title>
+<abp-card-subtitle class="mb-2 text-muted">Card subtitle</abp-card-subtitle>
+<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+<a abp-card-link href="#">Card link</a>
+<a abp-card-link href="#">Another link</a>
     </abp-card-body>
 </abp-card>
-

+
+ + + 

+<div class="card" style="width: 18rem;">
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+
+ +
-

# Example

+

List groups

+ + + + Cras justo odio + Dapibus ac facilisis in + Vestibulum at eros + + + +
+
+ + + 

+<abp-card style="width: 18rem;">
+    <abp-list-group flush="true">
+<abp-list-group-item>Cras justo odio</abp-list-group-item>
+<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+    </abp-list-group>
+</abp-card>
+
+ + + 

+<div class="card" style="width: 18rem;">
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+</div>
+
+ + +
+
+ +
+
+ + + Featured + + Cras justo odio + Dapibus ac facilisis in + Vestibulum at eros + + + +
+
+ + + 

+<abp-card style="width: 18rem;">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-list-group flush="true">
+<abp-list-group-item>Cras justo odio</abp-list-group-item>
+<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+    </abp-list-group>
+</abp-card>
+
+ + + 

+<div class="card" style="width: 18rem;">
+  <div class="card-header">
+    Featured
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+</div>
+
+ + +
+
+ +

Kitchen sink

+ +
+
+ - + - Card title - - This is a sample card component built by - ABP bootstrap card tag helper. - - Go somewhere → + Card Title + Some quick example text to build on the card title and make up the bulk of the card's content. + + + Cras justo odio + Dapibus ac facilisis in + Vestibulum at eros + + + Card link + Another link +
- 
-<abp-card style="width: 18rem;">
-    <img abp-card-image="Top" src="~/imgs/demo/300x200.png" alt="Card image cap">
+        
+            
+                

+<abp-card style="width: 18rem;">
+    <img abp-card-image="Top" src="~/imgs/demo/300x200.png" />
     <abp-card-body>
-        <abp-card-title>Card title</abp-card-title>
-        <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
-        <a href="#" class="btn btn-primary">Go somewhere</a>
+<abp-card-title>Card Title</abp-card-title>
+<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+    </abp-card-body>
+    <abp-list-group flush="true">
+<abp-list-group-item>Cras justo odio</abp-list-group-item>
+<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+    </abp-list-group>
+    <abp-card-body>
+<a abp-card-link href="#">Card link</a>
+<a abp-card-link href="#">Another link</a>
     </abp-card-body>
 </abp-card>
-

+
+ + + 

+<div class="card" style="width: 18rem;">
+  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-body">
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+
+ +
-

# Example

+

Header and footer

+ +
+
+ + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + Go somewhere + + + +
+
+ + + 

+<abp-card style="width: 18rem;">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-card-body>
+<abp-card-title> Special title treatment</abp-card-title>
+<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+<a abp-button="Primary" href="#"> Go somewhere</a>
+    </abp-card-body>
+</abp-card>
+
+ + + 

+<div class="card">
+  <div class="card-header">
+    Featured
+  </div>
+  <div class="card-body">
+    <h5 class="card-title">Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+
+ + +
+
+ +
+
+ + + Quote + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+
Someone famous in Source Title
+ + + + +
+
+ + + 

+<abp-card>
+    <abp-card-header>Quote</abp-card-header>
+    <abp-card-body>
+<abp-blockquote>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+    <footer>Someone famous in Source Title</footer>
+</abp-blockquote>
+    </abp-card-body>
+</abp-card>
+
+ + + 

+<div class="card">
+  <div class="card-header">
+    Quote
+  </div>
+  <div class="card-body">
+    <blockquote class="blockquote mb-0">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+      <footer class="blockquote-footer">Someone famous in Source Titl</footer>
+    </blockquote>
+  </div>
+</div>
+
+ + +
+
+ - - - - + Featured + + Special title treatment With supporting text below as a natural lead-in to additional content. - Go somewhere + Go somewhere + 2 days ago +
- 
-<abp-card class="text-center">
-    <abp-card-header>
-        <ul class="nav nav-tabs card-header-tabs">
-            <li class="nav-item">
-                <a class="nav-link active" href="#">Active</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="#link">Link</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link disabled" href="#disabledlink">Disabled</a>
-            </li>
-        </ul>
-    </abp-card-header>
-    <abp-card-body title="Special title treatment">
-        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
-        <a href="#" class="btn btn-primary">Go somewhere</a>
+        
+            
+                

+<abp-card class="text-center">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-card-body>
+<abp-card-title> Special title treatment</abp-card-title>
+<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+<a abp-button="Primary" href="#"> Go somewhere</a>
     </abp-card-body>
+    <abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
 </abp-card>
-

+
+ + + 

+<div class="card text-center">
+  <div class="card-header">
+    Featured
+  </div>
+  <div class="card-body">
+    <h5 class="card-title">Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+  <div class="card-footer text-muted">
+    2 days ago
+  </div>
+</div>
+
+ +
-
+

Card styles

+ +
Background and color
-< back \ No newline at end of file +
+
+ + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + + + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + + + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + + + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + + + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + + + + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + + + + + Featured + + Special title treatment + With supporting text below as a natural lead-in to additional content. + + + +
+
+ + + 

+<abp-card background="Primary" class="mb-3" style="max-width: 18rem;">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-card-body>
+        <abp-card-title> Special title treatment</abp-card-title>
+        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+    </abp-card-body>
+</abp-card>
+
+<abp-card background="Success" text-color="Danger" border="Dark" class="mb-3" style="max-width: 18rem;">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-card-body>
+        <abp-card-title> Special title treatment</abp-card-title>
+        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+    </abp-card-body>
+</abp-card>
+
+<abp-card background="Warning" text-color="Secondary" class="mb-3" style="max-width: 18rem;">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-card-body>
+        <abp-card-title> Special title treatment</abp-card-title>
+        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+    </abp-card-body>
+</abp-card>
+
+<abp-card background="Light" text-color="Dark" border="Success" class="mb-3"  style="max-width: 18rem;">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-card-body>
+        <abp-card-title> Special title treatment</abp-card-title>
+        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+    </abp-card-body>
+</abp-card>
+
+<abp-card background="Dark" text-color="White" border="Danger" class="mb-3" style="max-width: 18rem;">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-card-body>
+        <abp-card-title> Special title treatment</abp-card-title>
+        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+    </abp-card-body>
+</abp-card>
+
+<abp-card background="Danger" class="mb-3" style="max-width: 18rem;">
+    <abp-card-header text-color="Primary">Featured</abp-card-header>
+    <abp-card-body>
+        <abp-card-title> Special title treatment</abp-card-title>
+        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+    </abp-card-body>
+</abp-card>
+
+<abp-card background="Info" border="Danger" class="mb-3" style="max-width: 18rem;">
+    <abp-card-header>Featured</abp-card-header>
+    <abp-card-body text-color="Danger">
+        <abp-card-title> Special title treatment</abp-card-title>
+        <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+    </abp-card-body>
+</abp-card>
+
+ + + 

+<div class="card bg-primary mb-3" style="max-width: 18rem;">
+  <div class="card-header">Featured</div>
+  <div class="card-body">
+    <h5 class="card-title"> Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  </div>
+</div>
+
+<div class="card text-danger bg-success border-dark mb-3" style="max-width: 18rem;">
+  <div class="card-header">Featured</div>
+  <div class="card-body">
+    <h5 class="card-title"> Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  </div>
+</div>
+
+<div class="card text-secondary bg-warning mb-3" style="max-width: 18rem;">
+  <div class="card-header">Featured</div>
+  <div class="card-body">
+    <h5 class="card-title"> Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  </div>
+</div>
+
+<div class="card text-dark bg-light border-success mb-3" style="max-width: 18rem;">
+  <div class="card-header">Featured</div>
+  <div class="card-body">
+    <h5 class="card-title"> Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  </div>
+</div>
+
+<div class="card text-white bg-dark border-danger mb-3" style="max-width: 18rem;">
+  <div class="card-header">Featured</div>
+  <div class="card-body">
+    <h5 class="card-title"> Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  </div>
+</div>
+
+<div class="card bg-danger mb-3" style="max-width: 18rem;">
+  <div class="card-header text-primary">Featured</div>
+  <div class="card-body">
+    <h5 class="card-title"> Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  </div>
+</div>
+
+<div class="card bg-info border-danger mb-3" style="max-width: 18rem;">
+  <div class="card-header">Featured</div>
+  <div class="card-body text-danger">
+    <h5 class="card-title"> Special title treatment</h5>
+    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+  </div>
+</div>
+
+ + +
+
\ No newline at end of file