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

Accordion: Allow role button

Browse source
This commit is contained in:
Lucas Larroche 2022-01-23 12:45:00 +07:00
parent ecad44c5db
commit 7f8a43b879
25 changed files with 202 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/accordions.html
View file

File diff suppressed because one or more lines are too long

44
docs/src/accordions.html
View file

@ -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>&lt;<b>details</b>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
&lt;<b>summary</b>&gt;Accordion 1&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
&lt;<b>details</b> <i>open</i>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
&lt;<b>summary</b>&gt;Accordion 2&lt;/<b>summary</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;</code></pre>
</footer>
</article>
<p><code><i>role</i>=<u>"button"</u></code> can be used to turn <code>&lt;<b>summary</b>&gt;</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>&lt;!-- Primary --&gt;</em>
&lt;<b>details</b>&gt;
&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;Accordion 1&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Secondary --&gt;</em>
&lt;<b>details</b>&gt;
&lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Accordion 2&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
<em>&lt;!-- Contrast --&gt;</em>
&lt;<b>details</b>&gt;
&lt;<b>summary</b> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Accordion 3&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
</footer>
</article>
</section>