mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'll/feature/dropdown' into dev

Browse source
This commit is contained in:
Lucas Larroche 2022-01-23 13:03:54 +07:00 • committed by GitHub
commit 1bf1a8e461
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 537 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/src/_sidebar.html
View file

@ -43,6 +43,7 @@
<ul>
<li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
<li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
<li><a href="./dropdown.html" id="dropdown-link" class="secondary">Dropdown</a></li>
<li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
<li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>

128
docs/src/dropdown.html Normal file
View file

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<head>
${require('./_head.html') title="Dropdown" description="a dropdown
component, without JavaScript." canonical="dropdown.html" }
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdown-link"}
<div role="document">
<section id="dropdown">
<hgroup>
<h1>Dropdown</h1>
<h2>single / multi select dropdown, without JavaScript.</h2>
</hgroup>
<article aria-label="Dropdown examples">
<details role="list">
<summary aria-haspopup="listbox">Single select</summary>
<ul role="listbox">
<li>
<label for="01">
<input type="radio" id="01" name="option1" />
Option 1
</label>
</li>
<li>
<label for="02">
<input type="radio" id="02" name="option1" />
Option 2
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Multi-select</summary>
<ul role="listbox">
<li>
<label for="11">
<input type="checkbox" id="11" name="option2" />
Option 1
</label>
</li>
<li>
<label for="12">
<input type="checkbox" id="12" name="option2" />
Option 2
</label>
</li>
</ul>
</details>
</article>
<label><strong>Usage notes</strong></label>
<ul>
<li>
in order to use dropdown component, use
<code>role='list'</code> on details tag.
</li>
<li>
no need to use javascript to close the dropdown when clicked
outside.
</li>
<li>
for both single / multi-select case, need javascript to update
<code>summary</code> tag text when any option selected.
</li>
<li>
in case of single select, remove <code>open</code> attribute on
<code>details</code> tag using javascript when an option is
selected.
</li>
</ul>
<footer class="code">
<pre>
<code>
<em>&lt;!-- For Single-select --&gt;</em>
&lt;<b>details role="list"</b>&gt;
&lt;<b>summary aria-haspopup="listbox"</b>&gt;Single select&lt;<b>/summary</b>&gt;
&lt;<b>ul role="listbox"</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
Option 1
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="02"</b>&gt;
&lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
Option 2
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/details</b>&gt;
<em>&lt;!-- For Multi-select --&gt;</em>
&lt;<b>details role="list"</b>&gt;
&lt;<b>summary aria-haspopup="listbox"</b>&gt;Multi select&lt;<b>/summary</b>&gt;
&lt;<b>ul role="listbox"</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
Option 1
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label for="01"</b>&gt;
&lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
Option 2
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/details</b>&gt;
</code>
</pre>
</footer>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>