https://github.com/bahrus/be-detail-oriented
Make the fieldset and possibly other built-in elements expandable, similar to the details element.
https://github.com/bahrus/be-detail-oriented
Last synced: 3 months ago
JSON representation
Make the fieldset and possibly other built-in elements expandable, similar to the details element.
- Host: GitHub
- URL: https://github.com/bahrus/be-detail-oriented
- Owner: bahrus
- License: mit
- Created: 2022-11-22T21:21:18.000Z (over 2 years ago)
- Default Branch: baseline
- Last Pushed: 2024-07-10T02:31:10.000Z (11 months ago)
- Last Synced: 2025-01-22T02:37:19.751Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 286 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# be-detail-oriented (🕵🏻)
Make the fieldset and possibly other built-in elements expandable, similar to the details element.
[](https://github.com/bahrus/be-detail-oriented/actions/workflows/CI.yml)
[](http://badge.fury.io/js/be-detail-oriented)
[](https://bundlephobia.com/result?p=be-detail-oriented)
## Syntax
```html
legend content
test
```
## [Demo](https://codepen.io/bahrus/pen/gOjMOGj)
## Avoiding FOUC
If not using be-detail-oriented as a template instantiation element enhancement, to avoid FOUC, set the hidden attribute to elements inside reflecting the initial state:
```html
legend content
test
```
> **Note**: Chrome (at least) seems to have unexpected behavior when it comes to setting hidden programmatically. In particular, not wrapping inputs and labels inside a div can prevent the hidden attribute from affecting the display, at least if it's set programmatically. This buggy (?) behavior can be observed in this [demo](https://codepen.io/bahrus/pen/BaVxWzj).
## Customizability
A ~~number of~~ configuration setting~~s~~ ~~are~~ is available to allow customizing how the enhancement goes about making itself expandable.
```html
legend content
test
```
is shorthand for:
```html
legend content
test
```
Meaning, by default, this enhancement selects the first child element it finds within, and appends the plus-minus web component to it, and hides the rest.
This web component relies on Declarative shadow DOM.
## Viewing Locally
1. Install git.
2. Fork/clone this repo.
3. Install node.
4. Open command window to folder where you cloned this repo.
5. > npm install
6. > npm run serve
7. Open http://localhost:3030/demo/dev in a modern browser.
## Importing in ES Modules:
```JavaScript
import 'be-detail-oriented/be-detail-oriented.js';
```
## Using from CDN:
```html
import 'https://esm.run/be-detail-oriented';
```