Summary Files Commits Branches @commit @diff @stats
path: root / docs / src / contents / bars.pug
diff options
context:
space:
mode:
Commit3ab3a9d09955772ec56ddadbba49954b4edd6a3e (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-11-06 18:52:37 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2018-11-06 18:52:37 +0800
Files00686d5c0bcd66010f4f26768dde13e26a49b709 /docs/src/contents/bars.pug
Spectre-Dark-Gruvbox-3ab3a9d09955772ec56ddadbba49954b4edd6a3e.tar
Spectre-Dark-Gruvbox-3ab3a9d09955772ec56ddadbba49954b4edd6a3e.tar.gz
Spectre-Dark-Gruvbox-3ab3a9d09955772ec56ddadbba49954b4edd6a3e.zip
Parent13b42d4c792f0a579d2d974492e13cd77d6f77f7 (diff)
Update the Docs completely
1 files changed, 0 insertions, 82 deletions
-rw-r--r--docs/src/contents/bars.pug82
diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug
deleted file mode 100644
index 4eee25e..0000000
--- a/docs/src/contents/bars.pug
+++ /dev/null
@@ -1,82 +0,0 @@
-p
- | 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.
-
-.docs-demo.columns
- .column.col-8.col-xs-12
- .bar.bar-sm
- .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
- .column.col-8.col-xs-12
- .bar
- .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
- .column.col-8.col-xs-12
- .bar
- .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
- .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15%
- .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10%
- .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15%
-
-p
- | Add a container element with the #[code bar] class.
- | And add child elements with the #[code bar-item] class.
- | The width percentage value is needed for every #[code bar-item].
-
-p
- | There is the #[code bar-sm] class for thinner Bars.
- | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item].
-
-pre.code(data-lang='HTML')
- code
- :highlight(lang="html")
- <!-- 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>
-
-+docs-subheading('bars-slider', 'Slider bars')
-
-.docs-demo.columns
- .column.col-8.col-xs-12
- .bar.bar-slider
- .bar-item(role="progressbar" style="width:50%;")
- button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
- .column.col-8.col-xs-12
- .bar.bar-slider
- .bar-item(role="progressbar" style="width:15%;")
- button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider")
- .bar-item(role="progressbar" style="width:65%;")
- button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider")
-
-p
- | You can add the #[code bar-slider] class to the Bars container.
- | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item.
- | You need to set the #[code bar-item] width manually to have the slider point.
-
-p
- | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider.
-
-pre.code(data-lang='HTML')
- code
- :highlight(lang="html")
- <!-- 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