What is this?
Get perfect style, adding events and hide elements for the none-designer.
Installation
npm i petite-design --save
Selector
petite-designer supports 3 selectors types:
- .className - .className
- #idSelector - #id
- tagSelector -
setStyle(selector, options)
import { setStyle } from 'petite-design';
setStyle('.exampleName',{
shadow_type: 'soft',
padding: true,
margin: true,
backgroundColor: 'white'
});
Options
petite-designer supports 4 options, both of which are optional:
- shadow_type - hard | soft (Defaults to soft)
- padding - boolean (Defaults to false)
- margin - boolean (Defaults to false)
- backgroundColor - coloreName | hex | rgb | rgba (Defaults to white )
addEvent(selector, event, callback)
import { addEvent } from 'petite-design';
addEvent('.exampleName','click',function(){
console.log("log from click event");
})
event
petite-designer addEvent() supports all dom events :
- 'click'
- 'focus'
- 'keypress'
- 'etc...'
callback
addEvent() calllback fucntion it's a function that called after event trager
hide(selector)
hide() is function that used to hide the element(s)