Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/o-rango/o-rango-demo-tools
o-demo-bar is a simple and flexible demo bar component for development and showcase your components , heavily inspired in storybook.js.org having the main goal to work directly with all JS frameworks , being based in web component standards and built with stenciljs.
https://github.com/o-rango/o-rango-demo-tools
demo resizes showcase stenciljs storybook
Last synced: about 1 month ago
JSON representation
o-demo-bar is a simple and flexible demo bar component for development and showcase your components , heavily inspired in storybook.js.org having the main goal to work directly with all JS frameworks , being based in web component standards and built with stenciljs.
- Host: GitHub
- URL: https://github.com/o-rango/o-rango-demo-tools
- Owner: o-rango
- License: mit
- Created: 2017-12-18T10:48:47.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T18:40:22.000Z (3 months ago)
- Last Synced: 2024-09-30T21:36:24.043Z (2 months ago)
- Topics: demo, resizes, showcase, stenciljs, storybook
- Language: CSS
- Homepage:
- Size: 31.5 MB
- Stars: 11
- Watchers: 3
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - o-demo-bar - rango.github.io/orango-demo-tools/) (List of Awesome Components Made using StencilJS / Individual Components)
README
[](https://travis-ci.org/o-rango/orango-demo-tools)
[](https://coveralls.io/github/o-rango/orango-demo-tools?branch=master)
[](https://www.codacy.com/app/romulocintra/orango-demo-tools?utm_source=github.com&utm_medium=referral&utm_content=o-rango/orango-demo-tools&utm_campaign=Badge_Grade)
## Alpha Test :
To help on testing alpha versions :
```html
```
### Future releases
In order to load correctly next `stable` >= 2.x releases :
```html
```
## Breaking Changes
> Breaking changes for 2.0.0 UNPKG :
To correctly load library as module
```diff
+
+
-
```
> Breaking change UNPKG :
To correctly load library from UNPKG use 1.0.0 version :
```html
```
# o-rango: o-demo-bar
[DEMO](https://o-rango.github.io/o-rango-demo-tools/)
Simple and customizable showcase for your components built with Stenciljs :metal:
## Getting Started
o-demo-bar is a simple and flexible demo bar component for developers and showcase your components, heavily inspired in [storybook.js.org](https://storybook.js.org) having the main goal to work directly with all JS frameworks, being based in web component standards and built with stencilsjs.
### Initial working version
## Install
### Script tag
- Put a script similar to this one , [use the most recent version ](https://www.npmjs.com/package/@o-rango/orango-demo-tools?activeTab=versions);
```html
```
- in the head of your index.html
- Then you can add o-demo-case tags in your code
### Node Modules
- Run ```npm install o-rango/orango-demo-tools --save-dev```
- Put a script tag similar to this `````` in the head of your index.html
- Then you can add o-demo-case tags in your code
## Usage
### Simple usage with no dependencies and 2 demo cases
after include o-demo-tools in your index.html you can start building your demos using the following code and add script tags for your demos
```html
click me
function showMe(evt){
alert(evt);
}
click me
function showMe2(evt){
alert(evt);
}
```
```html
// Place Your Styles
.container {
background-color: white;
width: 90%;
margin: auto auto;
padding: 20px 25px 25px 20px;
margin-bottom: 20px;
}
... all your demo cases
```
### Listen events from your components
If you want o-demo-bar to listen certain events from your components just add the your events with events attribute and a toast will show the payload of the event when triggered
```html
```
## RoadMap / Todo's
* [x] Add resizer options for mobiles using [Marvel Devices](https://marvelapp.github.io/devices.css/)
* [x] Fix and improve desktop resizer inspired in [Resizer](https://material.io/resizer/#device=window&url=https%3A%2F%2Fwww.android.com%2F&width=840)
* [x] Add posibility to change background color and patterns in context menu
* [x] Store Preferences in localstorage
* Show Code panel
## Contributing
We welcome contributions to O-RANGO projects!
- ⇄ Pull requests and ★ Stars are always welcome.