mirror of
https://github.com/picocss/pico.git
synced 2025-11-13 00:05:11 -05:00
129 lines
4.5 KiB
HTML
129 lines
4.5 KiB
HTML
<!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><!-- For Single-select --></em>
|
|
<<b>details role="list"</b>>
|
|
<<b>summary aria-haspopup="listbox"</b>>Single select<<b>/summary</b>>
|
|
<<b>ul role="listbox"</b>>
|
|
<<b>li</b>>
|
|
<<b>label for="01"</b>>
|
|
<<b>input type="radio" id="01" name="option1" /</b>>
|
|
Option 1
|
|
<<b>/label</b>>
|
|
<<b>/li</b>>
|
|
<<b>li</b>>
|
|
<<b>label for="02"</b>>
|
|
<<b>input type="radio" id="02" name="option1" /</b>>
|
|
Option 2
|
|
<<b>/label</b>>
|
|
<<b>/li</b>>
|
|
<<b>/ul</b>>
|
|
<<b>/details</b>>
|
|
|
|
|
|
<em><!-- For Multi-select --></em>
|
|
<<b>details role="list"</b>>
|
|
<<b>summary aria-haspopup="listbox"</b>>Multi select<<b>/summary</b>>
|
|
<<b>ul role="listbox"</b>>
|
|
<<b>li</b>>
|
|
<<b>label for="01"</b>>
|
|
<<b>input type="checkbox" id="01" name="option1" /</b>>
|
|
Option 1
|
|
<<b>/label</b>>
|
|
<<b>/li</b>>
|
|
<<b>li</b>>
|
|
<<b>label for="01"</b>>
|
|
<<b>input type="checkbox" id="02" name="option1" /</b>>
|
|
Option 2
|
|
<<b>/label</b>>
|
|
<<b>/li</b>>
|
|
<<b>/ul</b>>
|
|
<<b>/details</b>>
|
|
</code>
|
|
</pre>
|
|
</footer>
|
|
</section>
|
|
|
|
${require('./_footer.html')}
|
|
</div>
|
|
</main>
|
|
<script src="js/commons.min.js"></script>
|
|
</body>
|
|
</html>
|