๐จ Styling
Jaspr gives you a strongly-typed styles system that wraps the most common css properties. You can
access these various properties through the Styles
class that is exported by the core package.
To pass style attributes to a html component, construct a Styles
object and pass it as the styles
attribute like this:
div(styles: const Styles.background(color: Colors.red), []);
This will render as:
<div style="background: red"></div>
Generally it is recommended to make styles constant wherever you can. This can improve performance and reduce the bundle-size of your application.
Style Groups
Css properties are grouped semantically into style groups that can be accessed through the Styles
class as shown above.
For example, the background
group gives you the set of css properties related to the background style, like color, position or size.
Currently, the following groups exist:
Groups various css properties related to styling the background of an element.
const Styles.background({
Color? color,
BackgroundAttachment attachment,
BackgroundClip? clip,
ImageStyle? image,
BackgroundOrigin? origin,
BackgroundPosition? position,
BackgroundRepeat? repeat,
BackgroundSize? size,
})
Raw Styles
If you want to work with raw CSS properties or need to use a property that is not supported by the
current style groups, use the Styles.raw()
method and provide a map of
properties and values:
const myStyle = Styles.raw({
'color': 'blue',
'some_advanced_css_property': 'special_value',
});
Combining Styles
When you want to combine styles from multiple groups, use the Styles.combine()
method:
const myStyle = Styles.combine([
Styles.text(color: Colors.red),
Styles.background(color: Colors.blue),
]);
You can also store styles in variables and mix'n'match:
const redText = Styles.text(color: Colors.red);
const redBlueTest = Styles.combine([
redText,
Styles.background(color: Colors.blue),
]);
const redGreenTest = Styles.combine([
redText,
Styles.background(color: Colors.green),
]);
Style Component
The Styles
class is great for defining a single set of css properties e.g. to be used as
inline styles for a single html element.
To define a stylesheet with a set of style rules use the Style
(without s) component.
Style(styles: [
StyleRule(
selector: const Selector.id('content'),
styles: Styles.box(
width: 100.percent,
height: 100.percent,
),
),
StyleRule(
selector: const Selector.dot('red-text'),
styles: Styles.text(
color: Colors.red,
),
),
]);
will render as:
<style>
#content {
width: 100%;
height: 100%;
}
.red-text {
color: red;
}
</style>
A normal style rule takes a Selector
and a Styles
property.
There are also additional StyleRule
variants that support other css features:
StyleRule.import(String url)
renders a@import url(...)
statement.StyleRule.media({MediaRuleQuery query, List<StyleRule> styles})
renders a@media ... { ... }
statement.