From b777a03857cba6322929e3f11a4bb14d0338d160 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 14 Nov 2018 14:43:30 +0800
Subject: Update Docs examples

---
 docs/src/elements/code.pug   | 13 ++++++++++
 docs/src/elements/forms.pug  | 12 +++++++++
 docs/src/elements/labels.pug |  2 ++
 docs/src/elements/tables.pug | 59 +++++++++++++++++++++++++++++++++++++++++---
 4 files changed, 82 insertions(+), 4 deletions(-)

(limited to 'docs/src/elements')

diff --git a/docs/src/elements/code.pug b/docs/src/elements/code.pug
index 894b617..920fea9 100644
--- a/docs/src/elements/code.pug
+++ b/docs/src/elements/code.pug
@@ -11,8 +11,21 @@ block docs-content
     include ../_layout/_ad-g.pug
 
     p Code is used for styling inline and multiline code snippets.
+
+    +docs-subheading('code-inline', 'Inline code')
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- inline code -->
+          <code>code</code>
+
     p
       | For inline code, you can use the #{'<code>'} element. 
+
+    +docs-subheading('code-snippet', 'Code snippet')
+
+    p
       | For multiline code snippet blocks, you can use #{'<pre>'} with the #[code code] class as a container, and add #{'<code>'} inside it.
       | The #[code data-lang] attribute is rendered as the language name in the top right.
 
diff --git a/docs/src/elements/forms.pug b/docs/src/elements/forms.pug
index 5532860..cf39916 100644
--- a/docs/src/elements/forms.pug
+++ b/docs/src/elements/forms.pug
@@ -13,6 +13,8 @@ block docs-content
     p
       | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.
 
+    +docs-subheading('forms-input', 'Form input')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -31,6 +33,8 @@ block docs-content
             <input class="form-input" type="text" id="input-example-1" placeholder="Name">
           </div>
 
+    +docs-subheading('forms-textarea', 'Form textarea')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -46,6 +50,8 @@ block docs-content
             <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
           </div>
 
+    +docs-subheading('forms-select', 'Form select')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -74,6 +80,8 @@ block docs-content
             </select>
           </div>
 
+    +docs-subheading('forms-radio', 'Form radio')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         form
@@ -104,6 +112,8 @@ block docs-content
             </label>
           </div>
 
+    +docs-subheading('forms-switch', 'Form switch')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
@@ -128,6 +138,8 @@ block docs-content
             </label>
           </div>
 
+    +docs-subheading('forms-checkbox', 'Form checkbox')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
         .form-group
diff --git a/docs/src/elements/labels.pug b/docs/src/elements/labels.pug
index 7232d42..7c6c55b 100644
--- a/docs/src/elements/labels.pug
+++ b/docs/src/elements/labels.pug
@@ -32,6 +32,8 @@ block docs-content
           <span class="label">default label</span>
           <span class="label label-primary">primary label</span>
 
+    +docs-subheading('labels-rounded', 'Rounded labels')
+    
     .docs-demo.columns
       .column
         span.label.label-rounded.mr-1 default label
diff --git a/docs/src/elements/tables.pug b/docs/src/elements/tables.pug
index 3e087d9..5eec15d 100644
--- a/docs/src/elements/tables.pug
+++ b/docs/src/elements/tables.pug
@@ -14,7 +14,7 @@ block docs-content
 
     .docs-demo.columns
       .column.col-12
-        table.table.table-striped
+        table.table
           thead
             tr
               th Name
@@ -40,7 +40,57 @@ block docs-content
 
     p
       | Add the #[code table] class to any #{'<table>'} element. 
-      | The class will add padding, border and emphasized table header. 
+      | The class will add padding, border and emphasized table header.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <table class="table">
+            <thead>
+              <tr>
+                <th>name</th>
+                <th>genre</th>
+                <th>release date</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="active">
+                <td>The Shawshank Redemption</td>
+                <td>Crime, Drama</td>
+                <td>14 October 1994</td>
+              </tr>
+            </tbody>
+          </table>
+    
+    +docs-subheading('tables-striped', 'Striped tables')
+
+    .docs-demo.columns
+      .column.col-12
+        table.table.table-striped.table-hover
+          thead
+            tr
+              th Name
+              th Genre
+              th Release date
+          tbody
+            tr
+              td The Shawshank Redemption
+              td Crime, Drama
+              td 14 October 1994
+            tr.active
+              td The Godfather
+              td Crime, Drama
+              td 24 March 1972
+            tr
+              td Schindler's List
+              td Biography, Drama, History
+              td 4 February 1994
+            tr
+              td Se7en
+              td Crime, Drama, Mystery
+              td 22 September 1995
+
+    p
       | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style.
       | For hoverable table rows, you can add the #[code table-hover] class to enable hover style.
     p
@@ -66,10 +116,11 @@ block docs-content
             </tbody>
           </table>
 
+    +docs-subheading('tables-scroll', 'Scrollable tables')
 
     .docs-demo.columns
       .column.col-12
-        table.table.table-striped.table-scroll
+        table.table.table-scroll
           thead
             tr
               th Name
@@ -114,7 +165,7 @@ block docs-content
     pre.code(data-lang='HTML')
       code
         :highlight(lang="html")
-          <table class="table table-striped table-scroll">
+          <table class="table table-scroll">
             ...
           </table>
 
-- 
cgit v1.3.1-23-gd82d