Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oddbird/show-when
An element that shows or hides based on provided conditions
https://github.com/oddbird/show-when
Last synced: 8 days ago
JSON representation
An element that shows or hides based on provided conditions
- Host: GitHub
- URL: https://github.com/oddbird/show-when
- Owner: oddbird
- License: mit
- Created: 2024-01-09T23:14:36.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-02-13T16:51:37.000Z (9 months ago)
- Last Synced: 2024-10-29T18:48:53.451Z (16 days ago)
- Language: JavaScript
- Size: 33.2 KB
- Stars: 22
- Watchers: 4
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `show-when`
A Web Component
for showing or hiding content
when given conditions are met.
**[Demo](https://oddbird.github.io/show-when/demo.html)**
## Examples
General usage example:
```html
This will be visible by default,
but will hide
if the current url
does not have
the `edit` query parameter attached.
This will be hidden by default,
but show up in browsers
that support container queries.
```
Example using `has-any` option:
```html
This will be visible
if either the hash or query parameter
is present in the URL
```
## ToDo
- Add support for container queries
## Installation
You have a few options (choose one of these):
1. Install via [npm](https://www.npmjs.com/package/@oddbird/show-when): `npm install @oddbird/show-when`
1. [Download the source manually from GitHub](https://github.com/oddbird/show-when/releases) into your project.
1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
### Usage
Make sure you include the `` in your project (choose one of these):
```html
<!-- Host yourself -->
<script type="module" src="show-when.js">
```
```html
```
```html
```
## Credit
With thanks to the following people:
- David Darnes for the [Component Template](https://github.com/daviddarnes/component-template).
## Support
At OddBird,
we enjoy collaborating and contributing
as part of an open web community.
But those contributions take time and effort.
If you're interested in supporting our
open-source work,
consider becoming a
[GitHub sponsor](https://github.com/sponsors/oddbird),
or contributing to our
[Open Collective](https://opencollective.com/oddbird-open-source).