From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/components/tabs.html | 320 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 320 insertions(+) create mode 100644 docs/components/tabs.html (limited to 'docs/components/tabs.html') diff --git a/docs/components/tabs.html b/docs/components/tabs.html new file mode 100644 index 0000000..78346b6 --- /dev/null +++ b/docs/components/tabs.html @@ -0,0 +1,320 @@ + + + + Tabs - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Tabs

+
+
+ + + +
+
+ + +
+
+

Tabs enable quick switch between different views.

+
+
+ +
+
+ +
+
+

Add a container element with the tab class. + And add child elements with the tab-item class. + You can add the tab-block class for a full-width tab. + The tab-item or its child <a> with the active class will be highlighted. +

+ 
<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>
+
+
+
+ +
+
+ +
+
+

If you need badges on tabs, you can add badge class to the element within tab-item.

+ 
<ul class="tab tab-block">
+  <li class="tab-item active">
+    <a href="#" class="badge" data-badge="9">
+      Music
+    </a>
+  </li>
+</ul>
+
+
+
+ +
+
+

+ You could add a search box or buttons inside a tab. + Add the tab-action class to the tab-item. +

+ 
<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 -- cgit v1.3.1-23-gd82d