ADD: Meters element experimental support

1 files changed, 39 insertions, 0 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 336cb1d..4e8755c 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">&lt;!-- Meter is green when low &lt; value &lt; high --&gt;</span>
+&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;20&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
+&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;60&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">low</span>=<span class="atv">&quot;30&quot;</span> <span class="atn">high</span>=<span class="atv">&quot;80&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
+<span class="com">&lt;!-- Meter is yellow when value &lt; low  or high &lt; value --&gt;</span>
+&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;85&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">low</span>=<span class="atv">&quot;30&quot;</span> <span class="atn">high</span>=<span class="atv">&quot;80&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
+<span class="com">&lt;!-- Meter is red when value &lt; low &lt; high &lt; optimum or optimum &lt; low &lt; high &lt; value --&gt;</span>
+&lt;<span class="tag">meter</span> <span class="atn">class</span>=<span class="atv">&quot;meter&quot;</span> <span class="atn">value</span>=<span class="atv">&quot;20&quot;</span> <span class="atn">optimum</span>=<span class="atv">&quot;90&quot;</span> <span class="atn">min</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">max</span>=<span class="atv">&quot;100&quot;</span> <span class="atn">low</span>=<span class="atv">&quot;30&quot;</span> <span class="atn">high</span>=<span class="atv">&quot;80&quot;</span>&gt;&lt;<span class="tag">/meter</span>&gt;
+</code></pre>
+</code></pre>
+
+        </section>
+
         <section id="progress" class="container">
           <header class="text-center"><h3>Progress</h3></header>
           <section class="notes">