From cdaa2cd708311a771f1f2d966eee4c4f5013e33f Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Fri, 24 Feb 2017 15:43:05 +0800 Subject: CHG: Lots of good fixes --- docs/components.html | 172 +++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 146 insertions(+), 26 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 8accdec..c21c079 100644 --- a/docs/components.html +++ b/docs/components.html @@ -116,7 +116,7 @@ Tony Stark -
+
Natasha Romanoff
@@ -148,7 +148,7 @@ Steve Rogers
- Steve Rogers + Steve Rogers
@@ -158,7 +158,7 @@
- Tony Stark + Tony Stark
@@ -179,7 +179,7 @@ <!-- autocomplete input container --> <div class="form-autocomplete-input"> <!-- autocomplete chips --> - <div class="chip is-selected"> + <div class="chip"> <img src="img/avatar-1.png" class="avatar" alt="Thor Odinson" /> Thor Odinson <button class="btn btn-clear"></button> @@ -439,16 +439,13 @@
+
+ +
-
-
-
Google I/O
-
Software and hardware
-
-
- -
-
+ +
Google I/O
+
Software and hardware
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. @@ -485,7 +482,7 @@

Chips are complex entities in small blocks.

-
+
Crime @@ -503,20 +500,20 @@
-
+
Tony Stark - + Iron Man
Thor Odinson -
Steve Rogers + American Captain
@@ -667,7 +664,7 @@

A menu is a vertical list of links or buttons for actions and navigation.

-
+
  • @@ -698,7 +695,7 @@
-
+
  • @@ -906,7 +903,7 @@

    Breadcrumbs

    -
    +
    +
    +
    + @@ -944,16 +954,14 @@ </a> </li> <li class="breadcrumb-item"> - <a href="#"> - Change avatar - </a> + Change avatar </li> </ul>

    Tabs

    -
    +
    -
    +
    • @@ -1065,6 +1078,58 @@ </a> </li> </ul> + + +
      +
      + +
      +
      +
      +

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

      +
      + +
      +<ul class="tab">
+  <li class="tab-item active">
+    <a href="#" class="badge" data-badge="9">
+      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>

      Pagination

      @@ -1154,6 +1219,43 @@ <a href="#">Next</a> </li> </ul> + +
      +
      + +
      +
      +
      +

      You could use previous and next pagination to navigate.

      +
      + +
      +<ul class="pagination">
+  <li class="page-item page-prev">
+    <a href="#">
+      <p class="page-item-meta">Previous</p>
+      <h3 class="page-item-title">Getting started</h3>
+    </a>
+  </li>
+  <li class="page-item page-next">
+    <a href="#">
+      <p class="page-item-meta">Next</p>
+      <h3 class="page-item-title">Layout</h3>
+    </a>
+  </li>

      Navs

      @@ -1475,6 +1577,24 @@ <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button> + +
      +
      + +
    -- cgit v1.3.1-23-gd82d