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

made dropdown appearance inline with form controls

Browse source
This commit is contained in:
KiranMantha 2022-01-20 19:37:37 +05:30
parent 30ff7bc212
commit 7fb60da1e0
16 changed files with 116 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/dropdown.html
View file

File diff suppressed because one or more lines are too long

69
docs/src/dropdown.html
View file

@ -20,29 +20,37 @@
<article aria-label="Dropdown examples">
<details role="list">
<summary aria-haspopup="listbox">Single select</summary>
<ul role="listbox">
<li>
<ul role="listbox">
<li>
<label for="01">
<input type="radio" id="01" name="option1" />
<label for="01">Option 1</label>
</li>
<li>
Option 1
</label>
</li>
<li>
<label for="02">
<input type="radio" id="02" name="option1" />
<label for="02">Option 2</label>
</li>
</ul>
Option 2
</label>
</li>
</ul>
</details>
<details role="list">
<summary aria-haspopup="listbox">Multi-select</summary>
<ul role="listbox">
<li>
<ul role="listbox">
<li>
<label for="11">
<input type="checkbox" id="11" name="option2" />
<label for="11">Option 1</label>
</li>
<li>
Option 1
</label>
</li>
<li>
<label for="12">
<input type="checkbox" id="12" name="option2" />
<label for="12">Option 2</label>
</li>
</ul>
Option 2
</label>
</li>
</ul>
</details>
</article>
@ -61,8 +69,9 @@
<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.
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">
@ -73,12 +82,16 @@
&lt;<b>summary aria-haspopup="listbox"</b>&gt;Single select&lt;<b>/summary</b>&gt;
&lt;<b>ul role="listbox"</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>label for="01"</b>&gt;
&lt;<b>input type="radio" id="01" name="option1" /</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>label for="02"</b>&gt;
&lt;<b>input type="radio" id="02" name="option1" /</b>&gt;
Option 2
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/details</b>&gt;
@ -89,12 +102,16 @@
&lt;<b>summary aria-haspopup="listbox"</b>&gt;Multi select&lt;<b>/summary</b>&gt;
&lt;<b>ul role="listbox"</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>label for="01"</b>&gt;
&lt;<b>input type="checkbox" id="01" name="option1" /</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>label for="01"</b>&gt;
&lt;<b>input type="checkbox" id="02" name="option1" /</b>&gt;
Option 2
&lt;<b>/label</b>&gt;
&lt;<b>/li</b>&gt;
&lt;<b>/ul</b>&gt;
&lt;<b>/details</b>&gt;