From fb064a959d20e9b40c05d112014ea02cce5caef4 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 1 Mar 2017 09:50:27 +0800 Subject: CHG: Split Codes and improve docs codes --- docs/components.html | 191 ++++++++++++++++++++++++++++----------------------- 1 file changed, 104 insertions(+), 87 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index cf2a2ec..46fc50a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -179,9 +179,9 @@

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">
+
<div class="form-autocomplete">
   <!-- autocomplete input container -->
   <div class="form-autocomplete-input">
     <!-- autocomplete chips -->
@@ -221,8 +221,9 @@
       </a>
     </li>
   </ul>
-</div>
-

+</div>
+
+
@@ -284,9 +285,9 @@ + -
-<!-- Basic avatar examples -->
+
<!-- Basic avatar examples -->
 <figure class="avatar avatar-xl">
   <img src="img/avatar-1.png" />
 </figure>
@@ -301,8 +302,9 @@
 <!-- Show initals when avatar image is unavailable or not fully loaded -->
 <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
   <img src="img/avatar-1.png" />
-</figure>
-

+</figure>
+
+
@@ -353,9 +355,9 @@

Badges support button elements as well.

+ -
-<span class="badge" data-badge="">
+
<span class="badge" data-badge="">
   Notifications
 </span>
 
@@ -365,8 +367,9 @@
 
 <button class="btn badge" data-badge="88">
   Button
-</button>
-

+</button>
+
+
@@ -398,19 +401,20 @@

Add a container element with the class bar. And add child elements with the class bar-item. The width percentage 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.

+

There is a class bar-sm for thinner Bars. Also, you could use Tooltips for any bar-item.

+ -
-<div class="bar bar-sm">
+
<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>
-

+</div>
+
+
@@ -522,9 +526,9 @@

Add a container element with the class card. And add child elements with the class name card-image, card-header, card-content and/or card-footer. The card-image can be placed in any position.

+ -
-<div class="card">
+
<div class="card">
   <div class="card-image">
     <img src="img/osx-el-capitan.jpg" class="img-responsive" />
   </div>
@@ -538,8 +542,9 @@
   <div class="card-footer">
     <button class="btn btn-primary">Do</button>
   </div>
-</div>
-

+</div>
+
+
@@ -584,9 +589,9 @@

Add a container element with the class chip. And add child text element, buttons or avatars with the class avatar.

+ -
-<div class="chip">
+
<div class="chip">
   Crime
   <button class="btn btn-clear"></button>
 </div>
@@ -597,6 +602,7 @@
   <button class="btn btn-clear"></button>
 </div>
 

+
@@ -860,9 +868,9 @@

Add a container element with the class modal. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the class name modal-header, modal-content and modal-footer - any or all of them.

Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class active to the modal container.

+ -
-<div class="modal active">
+
<div class="modal active">
   <div class="modal-overlay"></div>
   <div class="modal-container">
     <div class="modal-header">
@@ -879,8 +887,8 @@
       <button class="btn btn-primary">Share</button>
     </div>
   </div>
-</div>
-

+</div>
+

Modal sizes

@@ -944,15 +952,16 @@

Add the class modal-sm for a smaller modal dialog.

+ -
-<div class="modal modal-sm">
+
<div class="modal modal-sm">
   <div class="modal-overlay"></div>
   <div class="modal-container">
     <!-- modal structure here -->
   </div>
-</div>
-

+</div>
+
+
@@ -1426,9 +1438,9 @@

Add a container element with the class step. And add child elements with the classname step-item. The step-item with the class active will be highlighted and indicate the current state of progress.

+ -
-<ul class="step">
+
<ul class="step">
   <li class="step-item">
     <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
   </li>
@@ -1441,8 +1453,9 @@
   <li class="step-item">
     <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
   </li>
-</ul>
-

+</ul>
+
+
@@ -1489,9 +1502,9 @@

Add a container with the class tile. And add child elements with the class name tile-icon, tile-content and tile-action. The tile-icon and tile-action are optional.

There are tile-title and tile-meta classes for title and meta text styles.

+ -
-<div class="tile">
+
<div class="tile">
   <div class="tile-icon">
     <div class="example-tile-icon">
       <i class="icon icon-explore centered"></i>
@@ -1504,8 +1517,9 @@
   <div class="tile-action">
     <button class="btn btn-primary">Join</button>
   </div>
-</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.

@@ -1528,9 +1542,9 @@
+ -
-<div class="tile tile-centered">
+
<div class="tile tile-centered">
   <div class="tile-icon">
     <div class="example-tile-icon">
       <i class="icon icon-explore centered"></i>
@@ -1545,8 +1559,9 @@
       <i class="icon icon-more_vert"></i>
     </button>
   </div>
-</div>
-

+</div>
+
+
@@ -1588,9 +1603,9 @@

And you can add the class toast-primary, toast-success or toast-danger for additional toast colors.

+ -
-<div class="toast">
+
<div class="toast">
   <button class="btn btn-clear float-right"></button>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </div>
@@ -1599,8 +1614,9 @@
   <button class="btn btn-clear float-right"></button>
   <i class="icon icon-error_outline"></i>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-

+</div>
+
+
@@ -1626,11 +1642,12 @@

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>
-<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
-
+
<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+
+
-- cgit v1.3.1-23-gd82d