From a2f1864da01e76c59d682b897398b100eb3bc25a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Thu, 3 Aug 2017 19:08:54 +0800 Subject: Update the Docs HTML structure --- docs/components.html | 326 +++++++++++++++++++++++++-------------------------- 1 file changed, 162 insertions(+), 164 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 3a9bbad..d5e037d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -12,22 +12,22 @@ -
-
+
+
+
GitHub -
+ -
- + + -
-
+
+
+ -
-

Autocomplete

-
+
+

Autocomplete

+

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

-
+
@@ -489,10 +489,10 @@
-
+

Add a container element with the form-autocomplete class. There are 2 parts of it, one is form-autocomplete-input, another is menu component. You may add the is-focused class 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">
@@ -529,13 +529,13 @@
 </div>
-
+ -
-

Avatars

-
+
+

Avatars

+

Avatars are user profile pictures.

-
+
@@ -562,10 +562,10 @@
-
+

Add the avatar class 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 avatar class and avatar size class to <div> element. The data-initial attribute is the name appear inside the avatar.

-
+
@@ -610,13 +610,13 @@ </figure> -
+ -
-

Badges

-
+
+

Badges

+

Badges are often used as unread number indicators.

-
+
@@ -639,10 +639,10 @@
-
+

Add the badge class to non self closing elements. And add the data-badge attribute 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 not specified, the badge will appear as a dot.

-
+
@@ -664,9 +664,9 @@
-
+

Badges support button and avatars elements as well.

-
+ 
<span class="badge">
@@ -686,13 +686,13 @@
 </figure>
-
+ -
-

Bars

-
+
+

Bars

+

Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 progress, meter and input range elements.

-
+
@@ -717,10 +717,10 @@
-
+

Add a container element with the bar class. And add child elements with the bar-item class. The width percentage value is needed for every bar-item.

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

-
+ 
<div class="bar bar-sm">
@@ -734,7 +734,7 @@
 </div>
-

Slider bars

+

Slider bars

@@ -757,10 +757,10 @@
-
+

You can add the bar-slider class to the Bars container. And add child elements with the bar-item class and bar-slider-btn inside bar-item. You need to set the bar-item width manually to have the slider point.

If there are two bar-item divs in one bar-slider, you will have a range slider.

-
+ 
<!-- slider -->
@@ -781,10 +781,10 @@
 </div>
-
+ - + -
-

Cards

-
+
+

Cards

+

Cards are flexible content containers.

-
+
@@ -953,9 +953,9 @@
-
+

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

-
+ 
<div class="card">
@@ -975,13 +975,13 @@
 </div>
-
+ -
-

Chips

-
+
+

Chips

+

Chips are complex entities in small blocks.

-
+
-
+

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

-
+ 
<label class="chip">
@@ -1033,13 +1033,13 @@
 </label>
-
+ - + -
-

Modals

-
+
+

Modals

+

Modals are flexible dialog prompts.

-
+
Open Modal @@ -1272,10 +1270,10 @@
-
+

Add a container element with the modal class. And add a real container modal-container and overlay modal-overlay inside it. You can add child elements with the 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 active class to the modal container.

-
+ 
<div class="modal active">
@@ -1297,7 +1295,7 @@
 </div>
-

Modal sizes

+

Modal sizes

@@ -1356,9 +1354,9 @@
-
+

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

-
+ 
<div class="modal modal-sm">
@@ -1369,10 +1367,10 @@
 </div>
-
+ -
-

Pagination

+ 
<ul class="pagination">
-  <li class="page-item">
-    <a href="#" disabled tabindex="-1">Previous</a>
+  <li class="page-item disabled">
+    <a href="#" tabindex="-1">Previous</a>
   </li>
   <li class="page-item active">
     <a href="#">1</a>
@@ -1500,10 +1498,10 @@
 </ul>
-
+ - + -
-

Popovers

-
+
+

Popovers

+

Popovers are small overlay content containers. Popovers component is built entirely in CSS.

-
+
@@ -1664,10 +1662,10 @@
-
+

Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use Cards component inside the popover-container.

Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

-
+ 
<div class="popover popover-right">
@@ -1688,13 +1686,13 @@
 </div>
-
+ -
-

Steps

-
+
+

Steps

+

Steps are progress indicators of a sequence of task steps.

-
+
    @@ -1729,9 +1727,9 @@
-
+

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

-
+ 
<ul class="step">
@@ -1750,13 +1748,13 @@
 </ul>
-
+ -
-

Tabs

-
+
+

Tabs

+

Tabs enable quick switch between different views.

-
+
    @@ -1802,9 +1800,9 @@
-
+

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">
@@ -1863,9 +1861,9 @@
               
             
           
-          

+          

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

-          

+          
 
 
 
<ul class="tab tab-block">
@@ -1910,9 +1908,9 @@
               
             
           
-          

+          

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

-          

+          
 
 
 
<ul class="tab">
@@ -1930,13 +1928,13 @@
 </ul>
 

 
-
+ -
-

Tiles

-
+
+

Tiles

+

Tiles are repeatable or embeddable information blocks.

-
+
@@ -1973,10 +1971,10 @@
-
+

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

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

-
+ 
<div class="tile">
@@ -1995,11 +1993,11 @@
 </div>
-

Compact tiles

-
+

Compact tiles

+

There is compact version of Tiles component, which is often used as contact and file info blocks.

Add the tile-centered class to the container tile. The tile-icon, tile-content and tile-action will be vertically centered.

-
+
@@ -2038,13 +2036,13 @@ </div> -
+ -
-

Toasts

-
+
+

Toasts

+

Toasts are used to show alert or information to users.

-
+
@@ -2059,9 +2057,9 @@
-
+

Add a container element with the toast class. You can add any text within the container, and even icons. You may also add a close button with the btn-clear class if you need.

-
+
@@ -2082,9 +2080,9 @@
-
+

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

-
+ 
<div class="toast">
@@ -2097,13 +2095,13 @@
 </div>
-
+ -
-

Tooltips

-
+
+

Tooltips

+

Tooltips provide context information labels that appear on hover and focus.

-
+
@@ -2118,19 +2116,19 @@
-
+

Tooltips component is built entirely in CSS.

Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements. And add the tooltip-right, tooltip-bottom or tooltip-left class 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>
-
+ -
+
  • @@ -2146,18 +2144,18 @@
-
+ -
- + +