Set style properties on brisky-elements, automatically adds prefixes
basic
const render = require('brisky/render')
const app = render({
field: {
style: {
opacity: {
$: 'animal',
$transform: (val) => val === 'cat' ? 1 : 0
}
}
}
}, { animal: 'cat' })
// returns opacity 1 when state.animal equals "cat"px
Automaticly converts numbers to [number] + px
- width
- height
- left
- right
- bottom
- top
- margin
- padding
const render = require('brisky/render')
const app = render({
field: {
style: {
width: { $: width }
}
}
}, { width: 100 })
// renders a div with width: 100pxAdd your own px property
const render = require('brisky/render')
const app = render({
field: {
style: {
something: {
type: 'px',
$: 'something'
}
}
}
}, { something: 100 })
// renders a div with style - something: 100pxtransform
Adds helpers for x y and rotate
const render = require('brisky/render')
const app = render({
field: {
style: {
transform: {
x: { $: 'x' },
y: { $: 'y' },
rotate: { $: 'rotate' }
}
}
}
}, { x: 100, y 100, rotate: 20 })
// renders a div with transform style
// translate3d(100px,100px,0) scale(0.1) rotate(20deg)