Fdgt

"Fdgt" is a drop in toolbar to make it easy to control custom elements on a page. It's available as the npm package fdgt, but it doesn't require npm.

This is a simple demo of it. The toolbar floats on the page and can control a components state. If the toolbar gets in the way, then use the grip to move it.

Usage

(The best example usage is to probably "View Source" on this page, which has a ton of examples).

To use this, add the script to the page, and include the <fdgt-control> element. By default it doesn't do much, so you'll need to add the controls.

  <script type="module" src="https://esm.sh/fdgt@0.1.0/fdgt.min.js"></script>
  <fdgt-control for="my-comp"><!-- Put useful controls here --></fdgt-control>
  <my-web-component id="my-comp"></my-web-component>

Controls

Fdgt has the following elements:

Control: <fdgt-control>

This is the root element, all other fdgt elements should be housed inside this. Give it a for= matching the ID of an element on the page, and any controls inside will effect that element.

Here's a version of it with no controls, so you can see what it looks like (a bit weird):

Icons: <fdgt-icon>

Fdgt uses a few icons from lucide.dev, and they're represented by the <fdgt-icon> tag. Give it a name= and it'll render the given icon. If you want more icons then send a PR.

Buttons: <fdgt-button>

Fdgt has its own buttons. These are like regular buttons, but you can make them call methods on an element. Give them a label= to assign the label (or use textcontent like normal button). A lead-icon= or trail-icon= will give them an icon. The call= attribute can be a name of a method that the &lgt;fdgt-control is for, and clicking the button calls that method.

Here's what the button looks like, next to it are some controls to let you play around with it:

Switches <fdgt-switch>

Fdgt has switches which can toggle attributes. Give them a name= and they'll toggle that attribute. When off, they'll remove the attribute. When on, they'll add it with an empty string value. They can also have a label=.

Menus <fdgt-menu>

Menus are good for stuffing less frequently used controls inside. They are comprised of a <fdgt-button> and so can take a label=, lead-icon=, and trail-icon=. If trail-icon= isn't supplied, however, it will default to chevron-down. Just be careful because without a good trail-icon= it can look just like a button, which would be ridiculous. Oh and menus don't take a name=, for that you probably want a <fdgt-select>.

Selects <fdgt-select>

Fdgt has select elements, a lot like <select> but proably less accessible. Under the hood this is a <fdgt-menu> but with more smarts. Like the menu, it can take a label=, lead-icon=, trail-icon= (defaulting to chevron-down) but they also house a <datalist> element, which can have a bunch of <option> elements inside of it. Like buttons, they can have a lead-icon= or trail-icon=, as can each of the <option> elements. The Select menu also adds the [slot=selected-value] slot which default to the label of the <option> of the select value. Given a name= this will change an elements attribute to one of the given <option>s. This is really useful for attributes limited to known values.

Input <fdgt-input>

Fdgt has inputs. Under the hood it is <input type=text> but it has some familiar mechanics; it can take a label=, lead-icon=, trail-icon=. Giving it a name= will mean the value inside the input is synced to the attribute of that name=.

Questions you might have

How do I pronounce "Fdgt"?

It is pronounced 'Advanced Retroflex Encabulating Component Interocitor', or "fdgt" for short.

This has a bug!

That's a statement not a question. If you find a bug, fix it and send a PR.

Can I add more features?

Who me? Or you? You can send a pull request.

Why not just use Storybook?

Storybook is great for big design systems where you want lots of different examples or have lots of components, but for those little components where you want a little bit of interactivity, Fdgt slaps.

Why not just use <other thing>?

Probably because I didn't know it existed. I still probably don't. Maybe you can tell me by sending a PR, adding it to this FAQ.