From b903b30d81eb531eead430db3c9cc934ab5dea8f Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 4 Jun 2018 21:12:57 +0800 Subject: Update old docs to new Pug templates --- docs/components.html | 3661 ++++++++++++++++++++------------------------------ 1 file changed, 1455 insertions(+), 2206 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index fb2ddd8..4185433 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1,2384 +1,1633 @@ - - - - - - - Components - Spectre.css CSS Framework - - - - - - - - -
-
- - - - GitHub -
- - - - - -
-
-

Components

-
- -
-
-
- - - - -
-
- - - -
-
-
- -
-

Accordions

-
-

Accordions are used to toggle sections of content.

-
-
-
+ + Components - Spectre.css CSS Framework + + + + + + + + + + + + + +
+
GitHub
+ +
+
+
+

Accordions

+

Accordions are used to toggle sections of content.

+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+ 
<!-- standard Accordions example -->
+<div class="accordion">
+  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
+  <label class="accordion-header">
+    <i class="icon icon-arrow-right mr-1"></i>
     Title
-  </label>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</div>
-
-<!-- mutually exclusive Accordions example (with same input names) -->
-<div class="accordion">
-  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
-  <label class="accordion-header">
+  </label>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</div>
+
+<!-- mutually exclusive Accordions example (with same input names) -->
+<div class="accordion">
+  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
+  <label class="accordion-header">
     Title
-  </label>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</div>
+  </label>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</div>
- -
-

Alternatively, you can use details and summary instead of input radio or checkbox trick. Add the open attribute to details to expand it. Microsoft Edge support is in development.

-
- - -
<!-- details and summary Accordions example -->
-<details class="accordion" open>
-  <summary class="accordion-header">
-    <i class="icon icon-arrow-right mr-1"></i>
+            
Alternatively, you can use details and summary instead of input radio or checkbox trick.
+              Add the open attribute to details to expand it.
+              Microsoft Edge support is under consideration.
+            

+            
<!-- details and summary Accordions example -->
+<details class="accordion" open>
+  <summary class="accordion-header">
+    <i class="icon icon-arrow-right mr-1"></i>
     Title
-  </summary>
-  <div class="accordion-body">
-    <!-- Accordions content -->
-  </div>
-</details>
-

-
-
- -
-
- -
-
- -
-

Avatars

-
-

Avatars are user profile pictures.

-
-
-
-
- Avatar XL -
-
- Avatar LG -
-
- Avatar -
-
- Avatar SM -
-
- Avatar XS -
-
-
-
-
-
-
-
-
-
-
-

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.

-
-
-
-
- Avatar - Avatar -
-
- Avatar - Avatar -
-
- Avatar - Avatar -
-
- Avatar - Avatar -
-
- Avatar - Avatar -
-
-
- - -
<!-- Basic avatar examples -->
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-  <img src="img/avatar-5.png" class="avatar-icon" alt="...">
-</figure>
-
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
-
-<!-- Show initals when avatar image is unavailable or not fully loaded -->
-<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
-  <img src="img/avatar-1.png" alt="...">
-</figure>
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-

Avatars support presence indicators. You can add an i element with the avatar-presence class, and add online, busy or away class for different status colors. The default is gray which means offline.

-
- - -
<figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" alt="...">
-  <i class="avatar-presence online"></i>
-</figure>
-
- -
- -
-

Badges

-
-

Badges are often used as unread number indicators.

-
-
-
- - Notifications - -
-
- - Notifications - -
-
- - Notifications - -
-
- - Notifications - -
-
-
-

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.

-
-
-
- - -
-
- - -
-
-
- YZ -
-
- YZ -
-
- YZ -
-
-
-
-

Badges support button and avatars elements as well.

-
- - -
<span class="badge">
-  Notifications
-</span>
-
-<span class="badge" data-badge="8">
-  Notifications
-</span>
-
-<button class="btn badge" data-badge="8">
-  Button
-</button>
-
-<figure class="avatar badge" data-badge="8" data-initial="YZ">
-  <img src="img/avatar-3.png" alt="YZ">
-</figure>
-
- -
- -
-

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.

-
-
-
-
-
-
-
-
-
-
-
-
+ </summary> + <div class="accordion-body"> + <!-- Accordions content --> + </div> +</details> +
+
+

Avatars

+

Avatars are user profile pictures.

+
+
+
Avatar XL
+
Avatar LG
+
Avatar
+
Avatar SM
+
Avatar XS
+
+
+
+
+
+
+
+
-
-
-
-
-
-
25%
-
15%
-
10%
-
15%
+

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

+
+
+
AvatarAvatar
+
AvatarAvatar
+
AvatarAvatar
+
AvatarAvatar
+
AvatarAvatar
+
-
-
-
-

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">
-  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-<!-- multi-bars -->
-<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>
-
- -

Slider bars

-
-
-
-
- + 
<!-- Basic avatar examples -->
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+  <img src="img/avatar-5.png" class="avatar-icon" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+<!-- Show initals when avatar image is unavailable or not fully loaded -->
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- +

+ Avatars support presence indicators. + You can add an <i> element with the avatar-presence class, and add online, busy or away class for different status colors. + The default is gray which means offline. +

+ 
<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+  <i class="avatar-presence online"></i>
+</figure>
+
+
+

Badges

+

Badges are often used as unread number indicators.

+
+
Notifications
+
Notifications
+
Notifications
+
Notifications
+
+

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.

+
+
+ +
-
- +
+ +
-
-
-
- -
-

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 -->
-<div class="bar bar-slider">
-  <div class="bar-item" role="progressbar" style="width:25%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-</div>
-
-<!-- range slider -->
-<div class="bar bar-slider">
-  <div class="bar-item" role="progressbar" style="width:15%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-  <div class="bar-item" role="progressbar" style="width:65%;">
-    <button class="bar-slider-btn btn" role="slider"></button>
-  </div>
-</div>
-
- -
- - +<span class="badge" data-badge="8"> + Notifications +</span> -
-

Cards

-
-

Cards are flexible content containers.

-
-
-
-
-
- OS X El Capitan -
-
-
Microsoft
-
Software and hardware
-
-
- Empower every person and every organization on the planet to achieve more. -
-
- Do +<button class="btn badge" data-badge="8"> + Button +</button> + +<figure class="avatar badge" data-badge="8" data-initial="YZ"> + <img src="img/avatar-3.png" alt="YZ"> +</figure> +
+
+

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

+
+
+
+
+
-
-
-
-
-
Apple
-
Hardware and software
-
-
- OS X Yosemite -
-
- To make a contribution to the world by making tools for the mind that advance humankind. -
-
-
- - - +
+
+
+
-
-
-
-
- macOS Sierra +
+
+
+
25%
+
15%
+
10%
+
15%
+
-
- -
Google I/O
-
Software and hardware
+
+

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">
+  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<!-- multi-bars -->
+<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>
+
+

Slider bars

+
+
+
+
+ +
+
-
- An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. +
+
+
+
+
+ +
+
+ +
+
-
-
-
-
- OS X El Capitan +

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 -->
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:25%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+</div>
+
+<!-- range slider -->
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:15%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+  <div class="bar-item" role="progressbar" style="width:65%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+</div>
+
+