https://github.com/codingchili/bunny-components
Web components library - with lit-html
https://github.com/codingchili/bunny-components
css custom-elements javascript lit-html mutable-bunnies web web-components
Last synced: 12 months ago
JSON representation
Web components library - with lit-html
- Host: GitHub
- URL: https://github.com/codingchili/bunny-components
- Owner: codingchili
- Created: 2021-05-27T10:07:24.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-27T10:31:49.000Z (almost 5 years ago)
- Last Synced: 2025-02-12T15:51:47.154Z (about 1 year ago)
- Topics: css, custom-elements, javascript, lit-html, mutable-bunnies, web, web-components
- Homepage:
- Size: 1.12 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# bunny-components
Web components library - with lit-html
This is a library of dark custom-elements originally built for the mutable-bunnies game. The components will be broken out into a separate repository (this) for reuse.
### Components
Currently available components,
| Tag | Description |
| ------------- | ------------- |
| bunny-bar | Most commonly used as a header or footer. |
| bunny-box | A material-like content holder. |
| bunny-button | Just a button, click it -> something happens. |
| bunny-color | Simply triggers the browser-native picker. |
| bunny-countdown | Counts down to the given date. |
| bunny-icon | Used to display icons, svg or emojis can be used instead. |
| bunny-input | Material-like input field. |
| bunny-pages | Switching between views, may combine with tabs. |
| bunny-progress | Shows a progress bar. |
| bunny-slider | use as a volume slider for example. |
| bunny-spinner | shows indeterminate loading progress. |
| bunny-switch | just a cool-looking checkbox. |
| bunny-tab | Combine with bunny-pages, or don't! |
| bunny-toast | displays a brief informative message for limited time. |
| bunny-tooltip | shows a message when the neighboring elem. is hovered. |
Most components can be styled through CSS-properties, although this is limited. Read the source for more information.
**Preview of the available components**
