Update old docs to new Pug templates

1 files changed, 132 insertions, 0 deletions

diff --git a/docs/src/contents/tabs.pug b/docs/src/contents/tabs.pug
new file mode 100644
index 0000000..f89005d
--- /dev/null
+++ b/docs/src/contents/tabs.pug
@@ -0,0 +1,132 @@
+p Tabs enable quick switch between different views.
+      
+.columns
+  .column.col-6.col-sm-12
+    ul.tab
+      li.tab-item.active
+        a(href="#tabs")
+          | Music
+      li.tab-item
+        a(href="#tabs")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+      li.tab-item
+        a(href="#tabs")
+          | Store
+  .column.col-6.col-sm-12
+    ul.tab.tab-block
+      li.tab-item.active
+        a(href="#tabs")
+          | Music
+      li.tab-item
+        a(href="#tabs")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+
+p
+  | Add a container element with the #[code tab] class. 
+  | And add child elements with the #[code tab-item] class. 
+  | You can add the #[code tab-block] class for a full-width tab.
+  | The #[code tab-item] or its child #{'<a>'} with the #[code active] class will be highlighted.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <ul class="tab tab-block">
+        <li class="tab-item active">
+          <a href="#">Music</a>
+        </li>
+        <li class="tab-item">
+          <a href="#" class="active">Playlists</a>
+        </li>
+        <li class="tab-item">
+          <a href="#">Radio</a>
+        </li>
+        <li class="tab-item">
+          <a href="#">Connect</a>
+        </li>
+      </ul>
+
+.columns
+  .column.col-sm-12
+    ul.tab
+      li.tab-item.active
+        a.badge(href="#tabs" data-badge="999")
+          | Music
+      li.tab-item
+        a(href="#tabs")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+  .column.col-sm-12
+    ul.tab.tab-block
+      li.tab-item.active
+        a.badge(href="#tabs" data-badge="9")
+          | Music
+      li.tab-item
+        a.badge(href="#tabs" data-badge="99")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+
+p
+  | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <ul class="tab tab-block">
+        <li class="tab-item active">
+          <a href="#" class="badge" data-badge="9">
+            Music
+          </a>
+        </li>
+      </ul>
+
+.columns
+  .column.col-12
+    ul.tab
+      li.tab-item.active
+        a(href="#tabs")
+          | Music
+          span.btn.btn-clear
+      li.tab-item
+        a(href="#tabs")
+          | Playlists
+      li.tab-item
+        a(href="#tabs")
+          | Radio
+      li.tab-item
+        a(href="#tabs")
+          | Store
+      li.tab-item.tab-action
+        .input-group.input-inline
+          input.form-input.input-sm(type="text" placeholder="search")
+          button.btn.btn-primary.btn-sm.input-group-btn Search
+
+p
+  | You could add a search box or buttons inside a tab.
+  | Add the #[code tab-action] class to the #[code tab-item].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <ul class="tab">
+        <li class="tab-item active">
+          <a href="#">
+            Music
+          </a>
+        </li>
+        <li class="tab-item tab-action">
+          <div class="input-group input-inline">
+            <input class="form-input input-sm" type="text" placeholder="search">
+            <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+          </div>
+        </li>
+      </ul>
\ No newline at end of file