From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/components/bars.html | 307 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 307 insertions(+) create mode 100644 docs/components/bars.html (limited to 'docs/components/bars.html') diff --git a/docs/components/bars.html b/docs/components/bars.html new file mode 100644 index 0000000..f34b1c8 --- /dev/null +++ b/docs/components/bars.html @@ -0,0 +1,307 @@ + + + + Bars - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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

+
+
+
+
+
+
+
+
+
+
+
+
+
+
25%
+
15%
+
10%
+
15%
+
+
+
+

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

+ 
<!-- normal bars -->
+<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

+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+

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.

+ 
<!-- normal 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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d