dashing-framework

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/example.css" rel="stylesheet"> <title>Progress-Stepper</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="../../scripts/scripts.js"></script> <script src="../../scripts/prism.js"></script> </head> <body class="example-body"> <div class="main-content"> <div id="sidebarNavigation" class="example-sidebar"></div> <div class="sidebar--overlay is-hidden"></div> <div class="main"> <div class="page-header"> <button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button> <h1>Progress Stepper</h1> <a href="http://design.samaritanministries.org/product/components/progress-stepper/" target="_blank" class="button button--small button--smooth float-right"> View Guidelines </a> </div> <div class="app-content"> <div class="row"> <div class="column column--full"> <h2 class="example-header no-margin--top">Progress Stepper Theming <button class="button button--transparent button--copy-link" data-id="copyurl" id="Progress_Theme"></h2> <p>You can customize the color of your progress stepper and completed labels by altering the variable <code class="example-text">$progress-color</code> in your theme file.</p> <div class="row example-container"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 75%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-scss">//Include this variable in your theme file to customize the color $progress-color: $green;</code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Width Options<button class="button button--transparent button--copy-link" data-id="copyurl" id="Progress_Width"></h2> <p>The width on this progress stepper can be set by an inline style or a class name.</p> <ul> <li>Inline width: <code class="example-text">style="width: 50%;"</code></li> <li>Class width: <code class="example-text">class="progress-bar--2of3"</code></li> </ul> <div class="row example-container"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 50%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar progress-bar--2of3" data-id="progress-stepper"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 50%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar progress-bar--2of3" data-id="progress-stepper"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Two Steps <button class="button button--transparent button--copy-link" data-id="copyurl" id="Two_Steps"></h2> <div class="row example-container"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 25%;"></div> </div> <div class="progress-labels"> <div class="progress-label"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 75%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 100%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 25%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--current">Step 1</div> <div class="progress-label">Step 2</div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 75%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--current">Step 1</div> <div class="progress-label">Step 2</div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 25%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--current">Step 1</div> <div class="progress-label">Step 2</div> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Three Steps <button class="button button--transparent button--copy-link" data-id="copyurl" id="Three_Steps"></h2> <div class="row example-container"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 16.666%;"></div> </div> <div class="progress-labels"> <div class="progress-label"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 50%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 83.333%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 100%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 16.666%;"></div> </div> <div class="progress-labels"> <div class="progress-label"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 50%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 83.333%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 100%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Four Steps <button class="button button--transparent button--copy-link" data-id="copyurl" id="Four_Steps"></h2> <div class="row example-container"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 12.5%;"></div> </div> <div class="progress-labels"> <div class="progress-label"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> <div class="progress-label"><a href="#">Step 4</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 37.5%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> <div class="progress-label"><a href="#">Step 4</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 62.5%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> <div class="progress-label"><a href="#">Step 4</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 87.5%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div> <div class="progress-label"><a href="#">Step 4</a></div> </div> </div> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 100%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 4</a></div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 12.5%;"></div> </div> <div class="progress-labels"> <div class="progress-label"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> <div class="progress-label"><a href="#">Step 4</a></div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 37.5%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> <div class="progress-label"><a href="#">Step 4</a></div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 62.5%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label"><a href="#">Step 3</a></div> <div class="progress-label"><a href="#">Step 4</a></div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 87.5%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div> <div class="progress-label"><a href="#">Step 4</a></div> </div> </div>  <div class="column column--full"> <div class="progress"> <div class="progress-bar" data-id="progress-stepper" style="width: 100%;"></div> </div> <div class="progress-labels"> <div class="progress-label progress-label--completed"><a href="#">Step 1</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 2</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 3</a></div> <div class="progress-label progress-label--completed"><a href="#">Step 4</a></div> </div> </div></code> </pre> </div> </div> </div> </body> </html>