https://github.com/bahrus/be-buttoned-up

Allow a button to delegate to a sub menu of of command buttons to select from.
https://github.com/bahrus/be-buttoned-up

Last synced: about 2 months ago
JSON representation

Allow a button to delegate to a sub menu of of command buttons to select from.

• Host: GitHub
• URL: https://github.com/bahrus/be-buttoned-up
• Owner: bahrus
• License: mit
• Created: 2023-07-17T10:20:35.000Z (almost 2 years ago)
• Default Branch: baseline
• Last Pushed: 2025-01-05T23:06:48.000Z (5 months ago)
• Last Synced: 2025-03-12T12:36:52.133Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# be-buttoned-up (🧥)

[![Playwright Tests](https://github.com/bahrus/be-buttoned-up/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-buttoned-up/actions/workflows/CI.yml)

[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-buttoned-up?style=for-the-badge)](https://bundlephobia.com/result?p=be-buttoned-up)





Allow a button to delegate to a sub menu of command buttons to select from.

```html

☰

    Do something

```

What this does:

1.  Listens for click events on buttons inside menu when it is opened.

2.  Sets the "value" property of the anchoring button element to the value of the clicked button in the popup ("doSomething").

3.  Closes the popup when such a button is clicked.

3.  The anchoring button emits event "change" whenever a value is selected/changed.

Reference:  https://developer.chrome.com/blog/introducing-popover-api/

## Running locally

1.  Do a git clone or a git fork of repository https://github.com/bahrus/be-buttoned-up

2.  Install node.js

3.  Run "npm install" from location of folder created in step 1.

4.  Run npm run serve.  Open browser to http://localhost:8000/demo/

## Using from ESM Module:

```JavaScript

import 'be-buttoned-up/be-buttoned-up.js';

```

## Using from CDN:

```html

    import 'https://esm.run/be-buttoned-up';

```