mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
Docs: Better indeterminates examples
This commit is contained in:
parent
8671ae4552
commit
27c21a6e32
1 changed files with 14 additions and 4 deletions
|
@ -289,7 +289,7 @@
|
|||
<h2>Containers</h2>
|
||||
<h3>
|
||||
<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>
|
||||
</hgroup>
|
||||
|
||||
|
@ -799,13 +799,18 @@
|
|||
</<b>fieldset</b>></code></pre>
|
||||
|
||||
</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">
|
||||
<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
|
||||
</label>
|
||||
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
|
||||
|
||||
<pre><code><<b>script</b>>
|
||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||
</<b>script</b>></code></pre>
|
||||
|
||||
</article>
|
||||
|
||||
<p>Others input types:</p>
|
||||
|
@ -1140,11 +1145,16 @@
|
|||
|
||||
</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">
|
||||
<progress id="indeterminate-progress"></progress>
|
||||
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
|
||||
|
||||
<pre><code><<b>script</b>>
|
||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||
</<b>script</b>></code></pre>
|
||||
|
||||
</article>
|
||||
|
||||
</section><!-- ./ Docs: Progress -->
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue