mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 03:06:14 -04:00
refactor: lint
This commit is contained in:
Lucas Larroche
parent
672b67896c
commit
7487498805
53 changed files with 1789 additions and 1078 deletions
|
|
@ -1,11 +1,8 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title=`Dropdowns`
|
||||
description=`Dropdown menus and custom selects without JavaScript.`
|
||||
canonical=`dropdowns.html`
|
||||
}
|
||||
${require('./_head.html') title=`Dropdowns` description=`Dropdown menus and
|
||||
custom selects without JavaScript.` canonical=`dropdowns.html` }
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -20,15 +17,31 @@
|
|||
<h1>Dropdowns</h1>
|
||||
<h2>Dropdown menus and custom selects without JavaScript.</h2>
|
||||
</hgroup>
|
||||
<p>Dropdowns are built with <code><<b>details</b> <i>role</i>=<u>"list"</u>></code> as a wrapper and <code><<b>summary</b>></code> and <code><<b>ul</b>></code> as direct children.</p>
|
||||
<p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html"><select></a> by default.</p>
|
||||
<p>
|
||||
Dropdowns are built with
|
||||
<code><<b>details</b> <i>role</i>=<u>"list"</u>></code> as a
|
||||
wrapper and <code><<b>summary</b>></code> and
|
||||
<code><<b>ul</b>></code> as direct children.
|
||||
</p>
|
||||
<p>
|
||||
For style consistency with the form elements, dropdowns are styled
|
||||
like a <a href="forms.html"><select></a> by default.
|
||||
</p>
|
||||
<article aria-label="Dropdowns as Selects">
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox">Dropdown</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Another action</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Something else here</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<select required>
|
||||
|
|
@ -38,8 +51,7 @@
|
|||
<option>Something else here</option>
|
||||
</select>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Dropdown --></em>
|
||||
<pre><code><em><!-- Dropdown --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
|
|
@ -50,43 +62,74 @@
|
|||
</<b>details</b>>
|
||||
|
||||
<em><!-- Select --></em>
|
||||
<<b>select</b></u>>
|
||||
<<b>select</b>>
|
||||
<<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>>Select</<b>option</b>>
|
||||
<<b>option</b>>…</<b>option</b>>
|
||||
</<b>select</b>>
|
||||
</code></pre>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><<b>summary</b> <i>role</i>=<u>"button"</u>></code> transforms the dropdown into a button.</p>
|
||||
<p>
|
||||
<code><<b>summary</b> <i>role</i>=<u>"button"</u>></code>
|
||||
transforms the dropdown into a button.
|
||||
</p>
|
||||
<article aria-label="Dropdowns as Buttons">
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
|
||||
<summary aria-haspopup="listbox" role="button">
|
||||
Dropdown as a button 1
|
||||
</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Another action</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Something else here</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
|
||||
<summary aria-haspopup="listbox" role="button" class="secondary">
|
||||
Dropdown as a button 2
|
||||
</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Another action</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Something else here</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
|
||||
<summary aria-haspopup="listbox" role="button" class="contrast">
|
||||
Dropdown as a button 3
|
||||
</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Another action</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Something else here</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Primary --></em>
|
||||
<pre><code><em><!-- Primary --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>>
|
||||
Dropdown as a button 1
|
||||
|
|
@ -122,10 +165,13 @@
|
|||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
</code></pre>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
</article>
|
||||
<p>Dropdowns can be used as custom selects with <code><<b>input</b> <i>type</i>=<u>"radio"</u>></code> or <code><<b>input</b> <i>type</i>=<u>"checkbox"</u>></code></p>
|
||||
<p>
|
||||
Dropdowns can be used as custom selects with
|
||||
<code><<b>input</b> <i>type</i>=<u>"radio"</u>></code> or
|
||||
<code><<b>input</b> <i>type</i>=<u>"checkbox"</u>></code>
|
||||
</p>
|
||||
<article aria-label="Dropdowns with radio buttons or checkboxes">
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox">Select single element</summary>
|
||||
|
|
@ -138,7 +184,12 @@
|
|||
</li>
|
||||
<li>
|
||||
<label for="medium">
|
||||
<input type="radio" id="medium" name="size" value="medium" />
|
||||
<input
|
||||
type="radio"
|
||||
id="medium"
|
||||
name="size"
|
||||
value="medium"
|
||||
/>
|
||||
Medium
|
||||
</label>
|
||||
</li>
|
||||
|
|
@ -151,7 +202,9 @@
|
|||
</ul>
|
||||
</details>
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox">Select multiple elements</summary>
|
||||
<summary aria-haspopup="listbox">
|
||||
Select multiple elements
|
||||
</summary>
|
||||
<ul role="listbox">
|
||||
<li>
|
||||
<label>
|
||||
|
|
@ -174,8 +227,7 @@
|
|||
</ul>
|
||||
</details>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- With radio buttons --></em>
|
||||
<pre><code><em><!-- With radio buttons --></em>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||||
|
|
@ -224,10 +276,14 @@
|
|||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
</footer>
|
||||
</code></pre>
|
||||
</footer>
|
||||
</article>
|
||||
<p>Dropdowns can be used inside a <a href="navs.html"><nav></a> with a nested <code><<b>details</b> <i>role</i>=<u>"list"</u>></code></p>
|
||||
<p>
|
||||
Dropdowns can be used inside a
|
||||
<a href="navs.html"><nav></a> with a nested
|
||||
<code><<b>details</b> <i>role</i>=<u>"list"</u>></code>
|
||||
</p>
|
||||
<p>Example with a dropdown as a link:</p>
|
||||
<article aria-label="Dropdowns inside a nav">
|
||||
<nav>
|
||||
|
|
@ -238,19 +294,30 @@
|
|||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li>
|
||||
<details role="list" dir="rtl">
|
||||
<summary aria-haspopup="listbox" role="link">Dropdown</summary>
|
||||
<summary aria-haspopup="listbox" role="link">
|
||||
Dropdown
|
||||
</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Another action</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Something else here</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
|
|
@ -268,8 +335,7 @@
|
|||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
</article>
|
||||
<p>Example with a default dropdown and a dropdown as a button:</p>
|
||||
<article aria-label="Dropdowns inside a nav">
|
||||
|
|
@ -279,27 +345,48 @@
|
|||
<details role="list">
|
||||
<summary aria-haspopup="listbox">Dropdown</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Another action</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Something else here</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details role="list">
|
||||
<summary aria-haspopup="listbox" role="button">Dropdown</summary>
|
||||
<summary aria-haspopup="listbox" role="button">
|
||||
Dropdown
|
||||
</summary>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Another action</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Something else here</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>>
|
||||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||||
|
|
@ -323,11 +410,17 @@
|
|||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
</article>
|
||||
<p>You can also use <code><<b>li</b> <i>role</i>=<u>"list"</u>></code> as a nested wrapper to render a list as a dropdown.</p>
|
||||
<p>ℹ️ This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p>
|
||||
<p>
|
||||
You can also use
|
||||
<code><<b>li</b> <i>role</i>=<u>"list"</u>></code> as a nested
|
||||
wrapper to render a list as a dropdown.
|
||||
</p>
|
||||
<p>
|
||||
ℹ️ This syntax is experimental. In this version, the dropdown
|
||||
menu is triggered on hover.
|
||||
</p>
|
||||
<article aria-label="Dropdowns inside a nav">
|
||||
<nav>
|
||||
<ul>
|
||||
|
|
@ -337,18 +430,32 @@
|
|||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li role="list" dir="rtl">
|
||||
<a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a>
|
||||
<a
|
||||
href="#"
|
||||
onclick="event.preventDefault()"
|
||||
aria-haspopup="listbox"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul role="listbox">
|
||||
<li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()">Action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Another action</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" onclick="event.preventDefault()"
|
||||
>Something else here</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><<b>nav</b>>
|
||||
<pre><code><<b>nav</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
|
|
@ -365,13 +472,11 @@
|
|||
</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<script src="js/commons.min.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue