mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
Merge branch 'dev' into feat/nav_breadcrumb
This commit is contained in:
Jelmer Veen
GitHub
commit
7354c7f347
105 changed files with 4323 additions and 2904 deletions
|
|
@ -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="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</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>
|
||||
|
|
@ -67,7 +68,7 @@
|
|||
<script>
|
||||
const activeLink = document.querySelector(`aside a#${props.active}`);
|
||||
const parentAccordion = activeLink.closest('details');
|
||||
activeLink.classList.add('active');
|
||||
activeLink.setAttribute('aria-current', 'page');
|
||||
parentAccordion.setAttribute('open', 'true');
|
||||
</script>
|
||||
</aside>
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
</hgroup>
|
||||
<article aria-label="Accordions examples">
|
||||
<details>
|
||||
<summary>Collapsible elements 1</summary>
|
||||
<summary>Accordion 1</summary>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
|
||||
</details>
|
||||
<details open>
|
||||
<summary>Collapsible elements 2</summary>
|
||||
<summary>Accordion 2</summary>
|
||||
<ul>
|
||||
<li>Vestibulum id elit quis massa interdum sodales.</li>
|
||||
<li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
|
||||
|
|
@ -37,18 +37,54 @@
|
|||
<footer class="code">
|
||||
|
||||
<pre><code><<b>details</b>>
|
||||
<<b>summary</b>>Collapsible elements 1</<b>summary</b>>
|
||||
<<b>summary</b>>Accordion 1</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<<b>details</b> <i>open</i>>
|
||||
<<b>summary</b>>Collapsible elements 2</<b>summary</b>>
|
||||
<<b>summary</b>>Accordion 2</<b>summary</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>>…</<b>li</b>>
|
||||
<<b>li</b>>…</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
<p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code><<b>summary</b>></code> into a button.</p>
|
||||
<article aria-label="Accordions buttons examples">
|
||||
<details>
|
||||
<summary role="button">Accordion 1</summary>
|
||||
<p>Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary role="button" class="secondary">Accordion 2</summary>
|
||||
<p>Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary role="button" class="contrast">Accordion 3</summary>
|
||||
<p>Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.</p>
|
||||
</details>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Primary --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u>>Accordion 1</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Secondary --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Accordion 2</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<em><!-- Contrast --></em>
|
||||
<<b>details</b>>
|
||||
<<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Accordion 3</<b>summary</b>>
|
||||
<<b>p</b>>…</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
</footer>
|
||||
</article>
|
||||
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||
<p>ℹ️ These classes are not available in the <a href="classless.html">class-less version</a>.</p>
|
||||
<article aria-label="Buttons styles examples">
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
|
||||
<a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code></p>
|
||||
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct children of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code></p>
|
||||
<p><code><<b>section</b>></code> provides a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
379
docs/src/dropdowns.html
Normal file
379
docs/src/dropdowns.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -210,8 +210,10 @@
|
|||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p>Others input types:</p>
|
||||
<article aria-label="File browser, range slider, date, time, color examples">
|
||||
<article aria-label="Search, file browser, range slider, date, time, color examples">
|
||||
<input type="search" id="search" name="search" placeholder="Search">
|
||||
<label for="file">File browser
|
||||
<input type="file" id="file" name="file">
|
||||
</label>
|
||||
|
|
@ -229,7 +231,10 @@
|
|||
</label>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- File browser --></em>
|
||||
<pre><code><em><!-- Search --></em>
|
||||
<<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>>
|
||||
|
||||
<!-- File browser --></em>
|
||||
<<b>label</b> <i>for</i>=<u>"file"</u>>File browser
|
||||
<<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>>
|
||||
</<b>label</b>>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
${require('./_head.html')
|
||||
title="Documentation"
|
||||
description="Pico works without package manager or dependencies! There are 3 ways to get started with pico.css: manually, from a CDN, with NPM."
|
||||
description="Pico works without package manager or dependencies! There are 4 ways to get started with pico.css: manually, from a CDN, with NPM, or with Composer."
|
||||
canonical=""
|
||||
}
|
||||
</head>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<h1>Usage</h1>
|
||||
<h2>Works without package manager or dependencies 🙂!</h2>
|
||||
</hgroup>
|
||||
<p>There are 3 ways to get started with pico.css:</p>
|
||||
<p>There are 4 ways to get started with pico.css:</p>
|
||||
<h3>Install manually</h3>
|
||||
<p><a href="https://github.com/picocss/pico/archive/refs/heads/master.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code><<b>head</b>></code> of your website.</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||
|
|
@ -29,6 +29,8 @@
|
|||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>></code></pre>
|
||||
<h3>Install with NPM</h3>
|
||||
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
|
||||
<h3>Install with Composer</h3>
|
||||
<pre><code><b>composer</b> <i>require</i> <u>picocss/pico</u></code></pre>
|
||||
<p>Starter HTML template:</p>
|
||||
|
||||
<pre><code><em><!doctype html></em>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@
|
|||
</article>
|
||||
</dialog>
|
||||
|
||||
|
||||
<pre><code><<b>dialog</b> <i>open</i>>
|
||||
<<b>article</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
|
|
@ -139,9 +138,7 @@
|
|||
</article>
|
||||
|
||||
<p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
|
||||
|
||||
<p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p>
|
||||
|
||||
<p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code><<b>dialog</b></u>></code> container.</p>
|
||||
|
||||
<pre><code><em><!-- Open modal--></em>
|
||||
|
|
@ -160,9 +157,8 @@
|
|||
</code></pre>
|
||||
|
||||
<h2>Utilities</h2>
|
||||
|
||||
<p>Modals come with 3 utility classes.</p>
|
||||
|
||||
<p>ℹ️ These classes are not available in the <a href="classless.html">class-less version</a>.</p>
|
||||
<p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p>
|
||||
|
||||
<pre><code><em><!doctype html></em>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<ul>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||
<li><a href="#" onclick="event.preventDefault()" role="button">Button</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<footer class="code">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<<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>><<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> <i>role</i>=<u>"button"</u>>Button</<b>a</b>></<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>nav</b>></code></pre>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<em>...</em>
|
||||
</<b>html</b>></code></pre>
|
||||
|
||||
<p>The RTL feature is still experimental and will probably evolve.</p>
|
||||
<p>ℹ️ The RTL feature is still experimental and will probably evolve.</p>
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
|
|
|||
|
|
@ -166,10 +166,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<p>
|
||||
Links come with <code>.secondary</code> and
|
||||
<code>.contrast</code> styles.
|
||||
</p>
|
||||
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||
<p>ℹ️ These classes are not available in the <a href="classless.html">class-less version</a>.</p>
|
||||
<article aria-label="Links examples">
|
||||
<a href="#" onclick="event.preventDefault()">Primary</a><br />
|
||||
<a href="#" onclick="event.preventDefault()" class="secondary"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue