1.0.3 • Published 2 years ago
petite-design2 v1.0.3
What is this?
Get perfect style, adding events and hide elements for the non-designers.
Installation
npm i petite-design2 --save
or using the CDN
<script src="https://unpkg.com/petite-design2/src/index.js"></script>
Selector
petite-designer2 supports 3 selectors types:
- .className - .className
- #idSelector - #id
- tagSelector -
setStyleUsingSelector(selector, options):
The function is used to add simple style to the element(s) as:
- Shodow
- Margin
- Padding
- Background-color
If you use library as NPM package
import { setStyleUsingSelector } from 'petite-design2';
How to use
setStyleUsingSelector('.exampleName',{
shadow_type: 'soft',
padding: true,
margin: true,
backgroundColor: 'white'
});
Options
petite-design2 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 )
addEventUsingSelector(selector, event, callback)
The function is used to add event element(s) as:
If you use library as NPM package
import { addEventUsingSelector } from 'petite-design2';
How to use
addEventUsingSelector('.exampleName','click',function(){
console.log("log from click event");
})
event
petite-design2 addEventUsingSelector() supports all dom events :
- 'click'
- 'focus'
- 'keypress'
- 'etc...'
callback
addEventUsingSelector() calllback fucntion it's a function that called after event trager
hideUsingSelector(selector)
The function is used to hide the element(s) from the DOM
If you use library as NPM package
import { hideUsingSelector } from 'petite-design2';
How to use
hideUsingSelector(.exampleClass)