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 indeterminates examples

Browse source
This commit is contained in:
Lucas 2020-10-28 08:27:26 +07:00
parent 8671ae4552
commit 27c21a6e32
1 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

18
docs/index.html
View file

@ -289,7 +289,7 @@
<h2>Containers</h2> <h2>Containers</h2>
<h3> <h3>
<code>.container</code> enable a centered viewport.<br> <code>.container</code> enable a centered viewport.<br>
<code>.container-fluid</code> enable a <code>100%</code> layout. <code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
</h3> </h3>
</hgroup> </hgroup>
@ -799,13 +799,18 @@
&lt;/<b>fieldset</b>&gt;</code></pre> &lt;/<b>fieldset</b>&gt;</code></pre>
</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><i>indeterminate</i></code> property to <code><u>true</u></code></p>
<article aria-label="Indeterminate checkbox example"> <article aria-label="Indeterminate checkbox example">
<label for="indeterminate"> <label for="indeterminate">
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox" indeterminate="true"> <input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
Select all Select all
</label> </label>
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script> <script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
<pre><code>&lt;<b>script</b>&gt;
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>
</article> </article>
<p>Others input types:</p> <p>Others input types:</p>
@ -1140,11 +1145,16 @@
</article> </article>
<p>You can change a progress bar to indeterminate state by setting the <code>indeterminate</code> property to <code>true</code></p> <p>You can change a progress bar to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
<article aria-label="Indeterminate progress bar example"> <article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress> <progress id="indeterminate-progress"></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script> <script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
<pre><code>&lt;<b>script</b>&gt;
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>
</article> </article>
</section><!-- ./ Docs: Progress --> </section><!-- ./ Docs: Progress -->