https://github.com/adominguez/adom-demo-helper-properties
adom-demo-helper-properties is a component created for to be used in other demo components
https://github.com/adominguez/adom-demo-helper-properties
demo demo-component polymer-element polymer2
Last synced: about 2 months ago
JSON representation
adom-demo-helper-properties is a component created for to be used in other demo components
- Host: GitHub
- URL: https://github.com/adominguez/adom-demo-helper-properties
- Owner: adominguez
- License: mit
- Created: 2017-08-14T15:30:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-12T18:04:54.000Z (over 7 years ago)
- Last Synced: 2025-04-13T14:16:51.925Z (about 2 months ago)
- Topics: demo, demo-component, polymer-element, polymer2
- Language: HTML
- Homepage:
- Size: 148 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# \
Is a component created for to be used in other demo components with properties
## Structure
With this component you can see your component demo and change his properties and his css var for show the result of component.
__example__
```html
```
## Properties
With the `properties-setted` property of cells-demo-helper-properties you can create an array with the properties of the component you want. You can see a complete example here:
```json
[{"label": "color", "value": "#65a5f2", "color": "#65a5f2"}, {"label": "heading", "value": "title"}, {"label": "counter", "value": "4", "type": "number"}, {"label": "units", "value": "components"}, {"label": "icon", "selected": "0", "list": [{"value":"icons:view-module"}, {"value": "icons:view-carousel"}, {"value": "icons:touch-app"}, {"value": "icons:today"}]}, {"label": "reverse", "selected": "1", "list": [{"value": "false"}, {"value": "true"}]}]
```
You can add diferents types of items:
### Use example input
```json
{"label": "heading", "value": "title", "type": "text"}
```
### Use example color
```json
{"label": "color", "value": "#65a5f2", "color": "#65a5f2"}
```
### Use example number
```json
{"label": "counter", "value": "4", "type": "number"}
```
### Use example select
```json
{"label": "icon", "selected": "0", "list": [{"value":"icons:view-module"}, {"value": "icons:view-carousel"}, {"value": "icons:touch-app"}, {"value": "icons:today"}]}
```
## css vars
Use the css vars contened in the file of component `component-name-styles.html`.
Map all the variables found in the file and display them in the demo.
The correct way to use the variables is as follows:
```scss
.my-class {
display: block;
box-sizing: border-box;
background-color: var(--adom-card-color-bg-color, #00ff00);
border-radius: var(--adom-card-color-border, 3px);
}
```
`var(--adom-card-color-bg-color, #00ff00);`
`border-radius: var(--adom-card-color-border, 3px);`
For show a Paint pot in the demo the end of the name of css var must be `color`.
## Events
With the property `toastEvents` it´s possible add all events of component, and show a toast when the event is listener.
```json
["one-event", "two-event"]
```
## Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default |
------------------------------------------|---------------------------------------------------------|----------|
--adom-demo-helper-properties | mixin for host | {} |
--adom-demo-helper-properties-toast-content-color | color for contentColor | green |
--adom-demo-helper-properties-content-page | mixin for .contentPage class | {} |
--adom-demo-helper-properties-content-page-info | mixin for .contentPage__info class | {} |
--adom-demo-helper-properties-content-page-info-heading | mixin for .contentPage__info__heading class | {} |
--adom-demo-helper-properties-content-page-info-description | mixin for .contentPage__info__heading_description class | {} |
## Serving your Application
You can serve your application with:
$ gulp serve