diff options
1 files changed, 14 insertions, 9 deletions
| -rw-r--r-- | docs/experimentals.html | 23 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index e694ab9..03caaac 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -389,7 +389,7 @@ <div class="calendar-date prev-month disabled"> <button class="date-item">27</button> <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Zhonghe Festival</a> + <a class="calendar-event bg-error text-light" href="#calendars">Zhonghe Festival</a> </div> </div> <div class="calendar-date prev-month disabled"><button class="date-item">28</button></div> @@ -403,9 +403,8 @@ <div class="calendar-date current-month tooltip" data-tooltip="You have appointments"> <button class="date-item badge">8</button> <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Product launch event</a> - <a class="calendar-event" href="#calendars" style="background:#5755d9;color:#fff;">Lunch</a> - <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">International Women's Day</a> + <a class="calendar-event bg-primary text-light" href="#calendars">Product launch event</a> + <a class="calendar-event bg-error text-light" href="#calendars">International Women's Day</a> </div> </div> <div class="calendar-date current-month"><button class="date-item">9</button></div> @@ -414,7 +413,7 @@ <div class="calendar-date current-month"> <button class="date-item">12</button> <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">Arbor Day</a> + <a class="calendar-event bg-error text-light" href="#calendars">Arbor Day</a> </div> </div> <div class="calendar-date current-month"><button class="date-item">13</button></div> @@ -427,7 +426,7 @@ <div class="calendar-date current-month calendar-range range-end"> <button class="date-item active">20</button> <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#32b643;color:#fff;">Spring Equinox</a> + <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a> </div> </div> <div class="calendar-date current-month"><button class="date-item">21</button></div> @@ -444,7 +443,7 @@ <div class="calendar-date next-month disabled"> <button class="date-item">1</button> <div class="calendar-events"> - <a class="calendar-event" href="#calendars" style="background:#e85600;color:#fff;">April Fools' Day</a> + <a class="calendar-event bg-error text-light" href="#calendars">April Fools' Day</a> </div> </div> </div> @@ -770,6 +769,8 @@ </div> </div> </div> + </div> + <div class="docs-note"> <p>You can open the sidebar by adding the class <code>active</code> to <code>off-canvas-sidebar</code>. And remove the <code>active</code> to close it.</p> </div> @@ -868,10 +869,11 @@ <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3> <div class="docs-note"> <p>Sliders are for selecting values from ranges.</p> + <p>You can add the class <code>tooltip</code> to have tooltip labels. If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.</p> </div> <div class="columns"> <div class="column col-6 col-xs-12"> - <input class="slider tooltip" data-tooltip="50" type="range" min="0" max="100" value="50"> + <input class="slider tooltip" type="range" min="0" max="100" value="50" oninput="this.setAttribute('value', this.value);"> </div> <div class="column col-6 col-xs-12"> <input class="slider" type="range" min="0" max="100" value="50" disabled> @@ -879,7 +881,10 @@ </div> <!-- sliders --> -<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>> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- Sliders --></span> +<<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="com"><!-- Sliders with tooltips --></span> +<<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"slider tooltip"</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="atn">oninput</span>=<span class="atv">"this.setAttribute('value', this.value);"</span>> </code></pre> </div> |