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/components/tabs.pug |  4 +--
 docs/src/elements/code.pug   | 13 ++++++++++
 docs/src/elements/forms.pug  | 12 +++++++++
 docs/src/elements/labels.pug |  2 ++
 docs/src/elements/tables.pug | 59 +++++++++++++++++++++++++++++++++++++++++---
 docs/src/layout/grid.pug     |  3 +++
 docs/src/layout/hero.pug     |  4 +--
 7 files changed, 89 insertions(+), 8 deletions(-)

(limited to 'docs/src')

diff --git a/docs/src/components/tabs.pug b/docs/src/components/tabs.pug
index 0050682..27f5644 100644
--- a/docs/src/components/tabs.pug
+++ b/docs/src/components/tabs.pug
@@ -119,7 +119,7 @@ block docs-content
               | Store
           li.tab-item.tab-action
             .input-group.input-inline
-              input.form-input.input-sm(type="text" placeholder="search")
+              input.form-input.input-sm(type="text")
               button.btn.btn-primary.btn-sm.input-group-btn Search
 
     p
@@ -137,7 +137,7 @@ block docs-content
             </li>
             <li class="tab-item tab-action">
               <div class="input-group input-inline">
-                <input class="form-input input-sm" type="text" placeholder="search">
+                <input class="form-input input-sm" type="text">
                 <button class="btn btn-primary btn-sm input-group-btn">Search</button>
               </div>
             </li>
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>
 
diff --git a/docs/src/layout/grid.pug b/docs/src/layout/grid.pug
index f9725a4..4c35009 100644
--- a/docs/src/layout/grid.pug
+++ b/docs/src/layout/grid.pug
@@ -68,6 +68,9 @@ block docs-content
       | Add the #[code columns] class to a container with the #[code container] class. 
       | And add any element you want with the #[code column] class inside the container. These columns will take up the space equally.
       | You can specific the width of each column by adding class #[code col-<1-12>].
+    
+    +docs-subheading('grid-gapless', 'Gapless grid')
+
     p
       | And you can add the #[code col-gapless] class to the #[code columns] to have gapless columns.
 
diff --git a/docs/src/layout/hero.pug b/docs/src/layout/hero.pug
index b095b7e..36d765d 100644
--- a/docs/src/layout/hero.pug
+++ b/docs/src/layout/hero.pug
@@ -28,14 +28,14 @@ block docs-content
 
     .docs-demo.columns
       .column
-        .hero.hero-sm.bg-gray
+        .hero.hero-sm.bg-dark
           .hero-body
             h1 Hero title
             p This is a hero example
             
     .docs-demo.columns
       .column
-        .hero.hero-lg.bg-gray
+        .hero.hero-lg.bg-primary
           .hero-body
             h1 Hero title
             p This is a hero example
-- 
cgit v1.3.1-26-gb76a