diff options
| author | Mitchell Riedstra <mitch@riedstra.dev> | 2024-01-05 23:18:49 -0500 |
|---|---|---|
| committer | Mitchell Riedstra <mitch@riedstra.dev> | 2024-01-05 23:18:49 -0500 |
| commit | bd5a00c61b355c857b5c99323592ca432dea5d0a (patch) | |
| tree | 7e8ac7730527c1ad71e3fdac85840948fd23f45f /htmx/static/pico-1.5.11/docs/src/dropdowns.html | |
| parent | c71b37eb23d4c8af7ab983de34c6da5be9363f3a (diff) | |
| download | paste-bd5a00c61b355c857b5c99323592ca432dea5d0a.tar.gz paste-bd5a00c61b355c857b5c99323592ca432dea5d0a.tar.xz | |
wip
Diffstat (limited to 'htmx/static/pico-1.5.11/docs/src/dropdowns.html')
| -rw-r--r-- | htmx/static/pico-1.5.11/docs/src/dropdowns.html | 379 |
1 files changed, 379 insertions, 0 deletions
diff --git a/htmx/static/pico-1.5.11/docs/src/dropdowns.html b/htmx/static/pico-1.5.11/docs/src/dropdowns.html new file mode 100644 index 0000000..9b9146c --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/dropdowns.html @@ -0,0 +1,379 @@ +<!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><<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> + </ul> + </details> + <select required> + <option value="" disabled selected>Select</option> + <option>Option</option> + <option>Another option</option> + <option>Something else here</option> + </select> + <footer class="code"> + +<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>> + <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>> + </<b>ul</b>> +</<b>details</b>> + +<em><!-- Select --></em> +<<b>select</b></u>> + <<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> + </article> + <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> + <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> + </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="#" 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> + <details role="list"> + <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> + </ul> + </details> + <footer class="code"> + +<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 + </<b>summary</b>> + <<b>ul</b> <i>role</i>=<u>"listbox"</u>> + <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>> + </<b>ul</b>> +</<b>details</b>> + +<em><!-- Secondary --></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> <i>class</i>=<u>"secondary"</u>> + Dropdown as a button 2 + </<b>summary</b>> + <<b>ul</b> <i>role</i>=<u>"listbox"</u>> + <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>> + </<b>ul</b>> +</<b>details</b>> + +<em><!-- Contrast --></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> <i>class</i>=<u>"contrast"</u>> + Dropdown as a button 3 + </<b>summary</b>> + <<b>ul</b> <i>role</i>=<u>"listbox"</u>> + <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>> + </<b>ul</b>> +</<b>details</b>> +</code></pre> + + </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> + <article aria-label="Dropdowns with radio buttons or checkboxes"> + <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><!-- 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>> + <<b>li</b>> + <<b>label</b> <i>for</i>=<u>"small"</u>> + <<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>> + Small + </<b>label</b>> + </<b>li</b>> + <<b>li</b>> + <<b>label</b> <i>for</i>=<u>"medium"</u>> + <<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>> + Medium + </<b>label</b>> + </<b>li</b>> + <<b>li</b>> + <<b>label</b> <i>for</i>=<u>"large"</u>> + <<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>> + Large + </<b>label</b>> + </<b>li</b>> + </<b>ul</b>> +</<b>details</b>> + +<em><!-- With checkboxes --></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>> + <<b>li</b>> + <<b>label</b>> + <<b>input</b> <i>type</i>=<u>"checkbox"</u>> + Banana + </<b>label</b>> + </<b>li</b>> + <<b>li</b>> + <<b>label</b>> + <<b>input</b> <i>type</i>=<u>"checkbox"</u>> + Watermelon + </<b>label</b>> + </<b>li</b>> + <<b>li</b>> + <<b>label</b>> + <<b>input</b> <i>type</i>=<u>"checkbox"</u>> + Apple + </<b>label</b>> + </<b>li</b>> + </<b>ul</b>> +</<b>details</b>> + + </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>Example with a dropdown as a link:</p> + <article aria-label="Dropdowns inside a nav"> + <nav> + <ul> + <li><strong>Brand</strong></li> + </ul> + <ul> + <li><a href="#" onclick="event.preventDefault()">Link</a></li> + <li> + <details role="list" dir="rtl"> + <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> + </ul> + </details> + </li> + </ul> + </nav> + <footer class="code"> + +<pre><code><<b>nav</b>> + <<b>ul</b>> + <<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>> + </<b>ul</b>> + <<b>ul</b>> + <<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>> + <<b>li</b>> + <<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>> + <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>>Dropdown</<b>summary</b>> + <<b>ul</b> <i>role</i>=<u>"listbox"</u>> + <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>> + </<b>ul</b>> + </<b>details</b>> + </<b>li</b>> + </<b>ul</b>> +</<b>nav</b>></code></pre> + + </footer> + </article> + <p>Example with a default dropdown and a dropdown as a button:</p> + <article aria-label="Dropdowns inside a nav"> + <nav> + <ul> + <li> + <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> + </ul> + </details> + </li> + <li> + <details role="list"> + <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> + </ul> + </details> + </li> + </ul> + </nav> + <footer class="code"> + +<pre><code><<b>nav</b>> + <<b>ul</b>> + <<b>li</b>> + <<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>> + <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>> + </<b>ul</b>> + </<b>details</b>> + </<b>li</b>> + <<b>li</b>> + <<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</<b>summary</b>> + <<b>ul</b> <i>role</i>=<u>"listbox"</u>> + <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>> + </<b>ul</b>> + </<b>details</b>> + </<b>li</b>> + </<b>ul</b>> +</<b>nav</b>></code></pre> + + </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> + <article aria-label="Dropdowns inside a nav"> + <nav> + <ul> + <li><strong>Brand</strong></li> + </ul> + <ul> + <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> + <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> + </ul> + </li> + </ul> + </nav> + <footer class="code"> + +<pre><code><<b>nav</b>> + <<b>ul</b>> + <<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>> + </<b>ul</b>> + <<b>ul</b>> + <<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>> + <<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>> + <<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>a</b>> + <<b>ul</b> <i>role</i>=<u>"listbox"</u>> + <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>> + <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>> + </<b>ul</b>> + </<b>li</b>> + </<b>ul</b>> +</<b>nav</b>></code></pre> + + </footer> + </article> + </section> + + ${require('./_footer.html')} + + </div> + </main> + <script src="js/commons.min.js"></script> + </body> +</html> |