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

Dropdown component

Browse source
This commit is contained in:
Lucas Larroche 2022-01-23 17:03:03 +07:00
parent f1a6e50461
commit 45426dd4b3
9 changed files with 426 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

229
docs/src/dropdowns.html Normal file
View file

@ -0,0 +1,229 @@
<!doctype html>
<html lang="en">
<head>
${require('./_head.html')
title="Dropdowns"
description="Dropdown menus and custom selects without JavaScript."
canonical="dropdowns.html"
}
</head>
<body>
${require('./_nav.html')}
<main class="container" id="docs">
${require('./_sidebar.html') active="dropdowns-link"}
<div role="document">
<section id="dropdown">
<hgroup>
<h1>Dropdowns</h1>
<h2>Dropdown menus and custom selects without JavaScript.</h2>
</hgroup>
<p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct childs.</p>
<p>For style consistency with the form elements, dropdowns are styled as a <a href="forms.html"><code>&lt;<b>select</b>&gt;</code></a> by default.</p>
<article aria-label="Dropdown style">
<details role="list">
<summary aria-haspopup="listbox">Dropdown</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
</ul>
</details>
<select required>
<option value="" disabled selected>Select</option>
</select>
<footer class="code">
<pre><code><em>&lt;!-- Dropdown --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Mauris vehicula velit&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Nunc dignissim sapien&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Aenean egestas quam&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Select --&gt;</em>
&lt;<b>select</b></u>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>&gt;Select&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;
</code></pre>
</footer>
</article>
<p><code><i>role</i>=<u>"button"</u></code> on the <code>&lt;<b>summary</b>&gt;</code> element can be used to turn the dropdown into a button.</p>
<article aria-label="Dropdown style">
<details role="list">
<summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
<ul role="listbox">
<li><a href="#">Mauris vehicula velit</a></li>
<li><a href="#">Nunc dignissim sapien</a></li>
<li><a href="#">Aenean egestas quam</a></li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- Primary --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;
Dropdown as a button 1
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Secondary --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;
Dropdown as a button 2
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Contrast --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;
Dropdown as a button 3
&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
<em>…</em>
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</code></pre>
</footer>
</article>
<p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or <code>&lt;<b>input <i>type</i>=<u>"checkbox"</u></b>&gt;</code></p>
<article aria-label="Dropdown style">
<details role="list">
<summary aria-haspopup="listbox">Select single element</summary>
<ul role="listbox">
<li>
<label for="small">
<input type="radio" id="small" name="size" value="small" />
Small
</label>
</li>
<li>
<label for="medium">
<input type="radio" id="medium" name="size" value="medium" />
Medium
</label>
</li>
<li>
<label for="large">
<input type="radio" id="large" name="size" value="large" />
Large
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Select multiple elements</summary>
<ul role="listbox">
<li>
<label>
<input type="checkbox" />
Banana
</label>
</li>
<li>
<label>
<input type="checkbox" />
Watermelon
</label>
</li>
<li>
<label>
<input type="checkbox" />
Apple
</label>
</li>
</ul>
</details>
<footer class="code">
<pre><code><em>&lt;!-- With radio buttons --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u>&gt;
Small
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
Medium
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- With checkboxes --&gt;</em>
&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
&lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
&lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Banana
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Watermelon
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>label</b>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
Apple
&lt;/<b>label</b>&gt;
&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;
</footer>
</article>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>