From 136b1127d32e0057f7ff558984245ac388aca820 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 29 Mar 2017 15:14:09 +0800 Subject: Add Slider bars code --- docs/components.html | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 6cd0922..7ea90dd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -399,7 +399,7 @@

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 a class bar-sm for thinner Bars. Also, you could use Tooltips for any bar-item.

+

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

@@ -411,6 +411,51 @@ <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.

+
+ + +
<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:25%;">
+    <button class="bar-slider-btn" role="slider"></button>
+  </div>
+</div>
+
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:15%;">
+    <button class="bar-slider-btn" role="slider"></button>
+  </div>
+  <div class="bar-item" role="progressbar" style="width:65%;">
+    <button class="bar-slider-btn" role="slider"></button>
+  </div>
+</div>
-- cgit v1.3.1-23-gd82d