diff options
1 files changed, 48 insertions, 7 deletions
| -rw-r--r-- | docs/experimentals.html | 55 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index 38b99d0..8d5e8d4 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -60,6 +60,9 @@ <a href="experimentals.html">Experimentals</a> <ul class="nav"> <li class="nav-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="nav-item"> <a href="experimentals.html#progress">Progress</a> </li> <li class="nav-item"> @@ -90,6 +93,42 @@ </section> </section> + <section id="meters" class="container"> + <header class="text-center"><h3>Meters</h3></header> + <section class="notes"> + <p><strong>Meters</strong> represent the value within the known range.</p> + </section> + <div class="columns text-center"> + <div class="column col-3 col-xs-12"> + <meter class="meter" value="20" min="0" max="100"></meter> + </div> + <div class="column col-3 col-xs-12"> + <meter class="meter" value="60" min="0" low="30" optimum="60" high="80" max="100"></meter> + </div> + <div class="column col-3 col-xs-12"> + <meter class="meter" value="85" min="0" low="30" high="80" max="100"></meter> + </div> + <div class="column col-3 col-xs-12"> + <meter class="meter" value="20" min="0" low="30" optimum="90" high="80" max="100"></meter> + </div> + </div> + <section class="notes"> + <p></p> + </section> + +<!-- meters example --> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- Meter is green when low < value < high --></span> +<<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"20"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/meter</span>> +<<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"60"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">low</span>=<span class="atv">"30"</span> <span class="atn">high</span>=<span class="atv">"80"</span>><<span class="tag">/meter</span>> +<span class="com"><!-- Meter is yellow when value < low or high < value --></span> +<<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"85"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">low</span>=<span class="atv">"30"</span> <span class="atn">high</span>=<span class="atv">"80"</span>><<span class="tag">/meter</span>> +<span class="com"><!-- Meter is red when value < low < high < optimum or optimum < low < high < value --></span> +<<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">"meter"</span> <span class="atn">value</span>=<span class="atv">"20"</span> <span class="atn">optimum</span>=<span class="atv">"90"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">low</span>=<span class="atv">"30"</span> <span class="atn">high</span>=<span class="atv">"80"</span>><<span class="tag">/meter</span>> +</code></pre> +</code></pre> + + </section> + <section id="progress" class="container"> <header class="text-center"><h3>Progress</h3></header> <section class="notes"> @@ -106,16 +145,17 @@ <progress class="progress" value="25" max="100"></progress> </div> <div class="column col-3 col-xs-12"> - <progress class="progress" value="0" max="100"></progress> + <progress class="progress" max="100"></progress> </div> </div> <section class="notes"> <p></p> </section> + <!-- progress example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">"progress"</span> <span class="atn">value</span>=<span class="atv">"25"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/progress</span>></code> -</pre> +<pre class="code" data-lang="HTML"><code><<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">"progress"</span> <span class="atn">value</span>=<span class="atv">"25"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/progress</span>> +</code></pre> + </section> <section id="sliders" class="container"> @@ -131,10 +171,11 @@ <section class="notes"> <p></p> </section> + <!-- sliders example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"slider"</span> <span class="atn">type</span>=<span class="atv">"range"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">value</span>=<span class="atv">"50"</span> <span class="tag">/</span>></code> -</pre> +<pre class="code" data-lang="HTML"><code><<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"slider"</span> <span class="atn">type</span>=<span class="atv">"range"</span> <span class="atn">min</span>=<span class="atv">"0"</span> <span class="atn">max</span>=<span class="atv">"100"</span> <span class="atn">value</span>=<span class="atv">"50"</span> <span class="tag">/</span>> +</code></pre> + </section> <section class="container"> |