From 887557c54c5dc2f7b97327b52631187717af6492 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 28 Feb 2017 15:06:20 +0800 Subject: ADD: Bars component experimental support and badges for buttons --- docs/components.html | 90 ++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 69 insertions(+), 21 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 4e4662e..1b280e8 100644 --- a/docs/components.html +++ b/docs/components.html @@ -52,6 +52,9 @@
  • Badges
    • +
  • + Bars +
  • Cards
    • @@ -176,7 +179,6 @@

    Add a container element with the class form-autocomplete. There are 2 parts of it, one is form-autocomplete-input, another is menu component. You may add the class is-focused to form-autocomplete-input to make it appear as focus state.

    Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.

    - 
     <div class="form-autocomplete">
@@ -254,12 +256,10 @@
               
    
             
           
-
           
    
             
    Add the class avatar to <img> element. There are 4 additional sizes available, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.
    
             
    For users who don't have profile pictures, you may use their initials for avatars. Add the class avatar and avatar size class to <div> element. The attribute data-initial is the name appear inside the avatar.
    
           
    
-
           
    
             
    
               
    
@@ -284,7 +284,6 @@
               
    
             
    
           
    
-
 
 
     <!-- Basic avatar examples -->
@@ -337,16 +336,78 @@
             
    Add the class badge to non self closing elements. And add the attribute data-badge to define the content of a badge. The badge will appear in the top-right direction of the element. 
    
             
    If there is no data-badge or the attribute is empty, the badge will appear as a dot.
    
           
-
+          
    
+            
    
+              
+            
    
+            
    
+              
+            
    
+            
    
+              
+            
    
+            
    
+              
+            
    
+          
    
+          
    
+            
    Badges support button elements as well. 
    
+          
    
 
 
     <span class="badge" data-badge="">
   Notifications
 </span>
 
-<span class="badge" data-badge="99">
+<span class="badge" data-badge="88">
   Notifications
-</span>
+</span>
+
+<button class="btn badge" data-badge="88">
+  Button
+</button>
+
    
+        
+
+        
    
+          
    Bars experimental
    
+          
    
+            
    Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 progress and meter elements.
    
+          
    
+          
    
+            
    
+              
    
+                
    
+              
    
+            
    
+            
    
+              
    
+                
    
+              
    
+            
    
+            
    
+              
    
+                
    25%
    
+                
    15%
    
+                
    10%
    
+                
    25%
    
+              
    
+            
    
+          
    
+          
    
+            
    Add a container element with the class bar. And add child elements with the class bar-item. The width value is needed for every bar-item.
    
+            
    There is a class bar-sm for thinner Bars. Also, you could use Tooltips for each bar-item.
    
+          
    
+
+
    +<div class="bar bar-sm">
+  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<div class="bar">
+  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
+  <div class="bar-item" style="width:15%;background:#818BD5;">15%</div>
+</div>
 
    
         
    
 
@@ -424,7 +485,6 @@
                 
    
                   Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
                 
    
-
               
             
             
    
@@ -519,11 +579,9 @@
               
    
             
           
-
           
    
             
    Add a container element with the class chip. And add child text element, buttons or avatars with the class avatar.
    
           
    
-
 
 
     <div class="chip">
@@ -537,7 +595,6 @@
   <button class="btn btn-clear"></button>
 </div>
 
    
-
         
 
         
-
 
 
     <div class="tile">
@@ -1452,7 +1504,6 @@
   </div>
 </div>
 
    
-
           
    
             
    There is compact version of Tiles component, which is often used as contact and file info blocks.
    
             
    Add the class tile-centered to the container tile. The tile-icon, tile-content and tile-action will be vertically centered.
    
@@ -1475,7 +1526,6 @@
               
             
           
-
 
 
     <div class="tile tile-centered">
@@ -1536,7 +1586,6 @@
           
    
             
    And you can add the class toast-primary, toast-success or toast-danger for additional toast colors.
    
           
    
-
 
 
     <div class="toast">
@@ -1572,10 +1621,9 @@
             
           
           
    
-            
    Tooltip component is built entirely in CSS.
    
+            
    Tooltips component is built entirely in CSS.
    
             
    Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.
    
           
    
-
 
 
     <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
-- 
cgit v1.3.1-26-gb76a