mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
Merge branch 'dev' into pr/172
This commit is contained in:
Lucas Larroche
commit
5776890352
87 changed files with 2883 additions and 1785 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>
|
||||
|
|
|
|||
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 childs.</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>
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
</label>
|
||||
<label for="switch_disabled">
|
||||
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
|
||||
Publish on my profile my accomplishments
|
||||
User must change password at next logon
|
||||
</label>
|
||||
</fieldset>
|
||||
<footer class="code">
|
||||
|
|
@ -163,7 +163,6 @@
|
|||
<<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>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"extralarge"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>>
|
||||
Extra Large
|
||||
|
|
@ -190,7 +189,7 @@
|
|||
</<b>label</b>>
|
||||
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
||||
Publish on my profile my accomplishments
|
||||
User must change password at next logon
|
||||
</<b>label</b>>
|
||||
</<b>fieldset</b>></code></pre>
|
||||
|
||||
|
|
@ -211,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>
|
||||
|
|
@ -230,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>>
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue