mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 02:16:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Docs: Better aria-label and interminate progress bar

Browse source
This commit is contained in:
Lucas 2020-10-28 08:12:49 +07:00
parent 431f0e6f8f
commit 8671ae4552
1 changed files with 19 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

35
docs/index.html
View file

@ -140,7 +140,7 @@
<button class="contrast theme-switcher">...</button> <button class="contrast theme-switcher">...</button>
</article> </article>
<p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p> <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p>
<article data-theme="light"> <article data-theme="light" aria-label="Forced light theme example">
<h4>Light theme</h4> <h4>Light theme</h4>
<form class="grid"> <form class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required> <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
@ -153,7 +153,7 @@
&lt;/<b>article</b>&gt;</code></pre> &lt;/<b>article</b>&gt;</code></pre>
</article> </article>
<article data-theme="dark"> <article data-theme="dark" aria-label="Forced dark theme example">
<h4>Dark theme</h4> <h4>Dark theme</h4>
<form class="grid"> <form class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required> <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
@ -176,7 +176,7 @@
</hgroup> </hgroup>
<p>Example: <strong>pick a color!</strong></p> <p>Example: <strong>pick a color!</strong></p>
<article data-theme="generated"> <article data-theme="generated" aria-label="Generated theme example">
<h4><span class="name">Custom theme</span></h4> <h4><span class="name">Custom theme</span></h4>
<form> <form>
<div class="grid"> <div class="grid">
@ -589,7 +589,7 @@
</article> </article>
<p>Blockquote:</p> <p>Blockquote:</p>
<article aria-label="Links examples"> <article aria-label="Blockquote example">
<blockquote> <blockquote>
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare." "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
<footer> <footer>
@ -613,8 +613,8 @@
<h2>Buttons</h2> <h2>Buttons</h2>
<h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3> <h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3>
</hgroup> </hgroup>
<article aria-label="Grid example"> <article aria-label="Button example">
<button aria-label="Example button">Button</button> <button aria-label="Button">Button</button>
<input type="submit"> <input type="submit">
<pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt; <pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
@ -800,15 +800,12 @@
</article> </article>
<p>You can change a checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code></p> <p>You can change a checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code></p>
<article> <article aria-label="Indeterminate checkbox example">
<label for="indeterminate"> <label for="indeterminate">
<input type="checkbox" id="indeterminate" name="indeterminate" indeterminate="true"> <input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox" indeterminate="true">
Select all Select all
</label> </label>
<script> <script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
// Set indeterminate checkbox
document.getElementById('indeterminate').indeterminate = true;
</script>
</article> </article>
<p>Others input types:</p> <p>Others input types:</p>
@ -1136,14 +1133,20 @@
<h2>Progress</h2> <h2>Progress</h2>
<h3>Progress bar element in pure HTML, without JavaScript.</h3> <h3>Progress bar element in pure HTML, without JavaScript.</h3>
</hgroup> </hgroup>
<article aria-label="Progress examples"> <article aria-label="Progress bar example">
<progress value="25" max="100"></progress> <progress value="25" max="100"></progress>
<progress indeterminate="true"></progress>
<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt; <pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
&lt;<b>progress</b> <i>indeterminate</i>=<u>"true"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
</article> </article>
<p>You can change a progress bar to indeterminate state by setting the <code>indeterminate</code> property to <code>true</code></p>
<article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
</article>
</section><!-- ./ Docs: Progress --> </section><!-- ./ Docs: Progress -->
<!-- Docs: Tooltips --> <!-- Docs: Tooltips -->