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

chore: updated docs as per contribution rules

Browse source
This commit is contained in:
KiranMantha 2021-12-27 17:33:16 +05:30
parent 539909cbb9
commit f410f48c1c
25 changed files with 184 additions and 368 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/src/_sidebar.html
View file

@ -45,6 +45,7 @@
<li><a href="./cards.html" id="cards-link" class="secondary">Cards</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="./dropdown.html" id="dropdown-link" class="secondary">Dropdown</a></li>
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
</ul>
</details>

121
docs/src/dropdown.html Normal file
View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
${require('./_head.html') title="Dropdown" description="a dropdown
component, without JavaScript." canonical="dropdowns.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="dropdown">
<summary>Single select</summary>
<div>
<ul>
<li>
<input type="radio" id="01" name="option1" />
<label for="01">Option 1</label>
</li>
<li>
<input type="radio" id="02" name="option1" />
<label for="02">Option 2</label>
</li>
</ul>
</div>
</details>
<details role="dropdown">
<summary>Multi-select</summary>
<div>
<ul>
<li>
<input type="checkbox" id="11" name="option2" />
<label for="11">Option 1</label>
</li>
<li>
<input type="checkbox" id="12" name="option2" />
<label for="12">Option 2</label>
</li>
</ul>
</div>
</details>
</article>
<label><strong>Usage notes</strong></label>
<ul>
<li>
in order to use dropdown component, use
<code>role='dropdown'</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>
<em>===============================</em>
&lt;<b>details role="dropdown"</b>&gt;
&lt;<b>summary</b>&gt;Single select&lt;<b>/summary</b>&gt;
&lt;<b>div</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
&lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
&lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/div</b>&gt;
&lt;<b>/details</b>&gt;
<em>For Multi-select</em>
<em>===============================</em>
&lt;<b>details role="dropdown"</b>&gt;
&lt;<b>summary</b>&gt;Multi select&lt;<b>/summary</b>&gt;
&lt;<b>div</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
&lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>li</b>&gt;
&lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
&lt;<b>label for="02"</b>&gt;Option 2&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/div</b>&gt;
&lt;<b>/details</b>&gt;
</code>
</pre>
</footer>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>