Divulgación menú alternar con HTML details Element

Vista prévia

Descripción

Una biblioteca de JavaScript pura que se utiliza para crear la divulgación accesible alternar menús utilizando HTML detalles elemento.

Funciona con los navegadores modernos que soportan elemento personalizado .

Funcionamiento

Instale & descargar.

# NPM
$ npm install $ npm install @github/details-menu-element --save

Cargue la versión UMD del elemento details-menu-en el documento.

<script type="text/javascript" src="https://unpkg.com/@github/[email protected]"></script>

Cree un menú de alternancia básico a partir de un elemento Details . En este ejemplo, el menú de alternancia actualizará automáticamente el Resumen datos utilizando los atributos -Menu-Button y Data-menu-botón-Text :

<details>

<summary>JavaScript: <span data-menu-button>Frameworks</span></summary>

<details-menu>


<ul>



<li><button type="button" role="menuitem" data-menu-button-text>Angular</button></li>



<li><button type="button" role="menuitem" data-menu-button-text>React</button></li>



<li><button type="button" role="menuitem" data-menu-button-text>Vue.js</button></li>


</ul>

</details-menu>
</details>

También se admiten las entradas de casilla de & de radio.

<details>

<summary>JavaScript: <span data-menu-button>Frameworks</span></summary>

<details-menu>


<ul>



<li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Angular</label></li>



<li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> React</label></li>



<li><label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Vue.js</label></li>


</ul>

</details-menu>
</details>

<details>

<summary>JavaScript:</summary>

<details-menu>


<ul>



<li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Angular</label></li>



<li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> React</label></li>



<li><label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Vue.js</label></li>


</ul>

</details-menu>
</details>

Event handlers.

// when a menu item is selected
document.addEventListener('details-menu-selected', e => console.log(e))

// when a menu item is to be select
document.addEventListener('details-menu-select', e => console.log(e))