diff options
1 files changed, 0 insertions, 82 deletions
| -rw-r--r-- | docs/src/contents/bars.pug | 82 |
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 |