mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 01:46:14 -04:00
Merge branch 'll/feature/dropdown' into dev
This commit is contained in:
Lucas Larroche
GitHub
commit
1bf1a8e461
36 changed files with 537 additions and 34 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
43
docs/dropdown.html
Normal file
43
docs/dropdown.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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="./dropdown.html" id="dropdown-link" class="secondary">Dropdown</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>
|
||||
|
|
|
|||
128
docs/src/dropdown.html
Normal file
128
docs/src/dropdown.html
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<!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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue