# UseStyle
# Base
useStyle is most basic feature in Lazycss.
let style = useStyle(cssList: cssList, namespace: string, preStyle: preStyle);
Name | type | introduction |
---|---|---|
cssList | cssList | cssList Map |
namespace | string | namespace name |
preStyle | preStyle | preset style list |
This feature implement in version-0.1.1
Example:
html:
...
<body>
<div class="demo"></div>
</body>
...
javascript:
//on node
import { useStyle } from "lazycss-base"
let style = useStyle({
demo: {
width: 30
}
})
//This code sets the width of the class named Demo to 30
# cssList
cssList contains all css list.
# namespace
namespace will sets a name to every css named prefix in this namespace.
Example:
...
<body>
<div class="demo">
<!-- this dom width will set 30 -->
</div>
<div class="namespace-demo">
<!-- this dom width will set 60 -->
</div>
</body>
...
let style_without_namespace = useStyle({
demo: {
width: 30
}
})
let style_with_namespace = useStyle({
demo: {
width: 60
}
}, 'namespace')
# Preset Style
will implement in future.
# Reactive
Reactive input is implemented by modifying the style variable.
style.[namespace].demo.width = 44;
//namespace is a optional options
← Quick Start useClass →