Styling Elements Thursday, May 16th, 2019
In Mint styling is built in and handled at the language level.
You can add styles to HTML elements in a component using the
style
keyword:
component Main {
style base {
/* You can use standard CSS here... */
background-color: red;
color: white;
}
fun render : Html {
<div::base>
"I'm white on red!"
<span>"Yey!"</span>
</div>
}
}
The
base
is the identifier of the style which can be used to attach it to an HTML
element with two colons (
::
) after name of the opening tag (
<div::base>
).
In the example we added the style
base
to our div.
Pseudo classes and elements
There are many instances where you need to style an elements states (
:hover
,
:active
, etc...) or its pseudo elements (
::before
and
::after
).
You can do that in a style by adding a new block with a
&
prefix (just like the parent selector in
sass
but limited):
style base {
background-color: red;
color: white;
&::before {
content: "Hello I'm blue!";
color: blue;
}
}
The style child elements just do it like you would in sass:
style base {
background-color: red;
color: white;
span {
font-weight: bold;
}
}
Media Queries
Mint supports media queries in style blocks (with the same syntax) to allow for responsive design:
style base {
background-color: red;
color: white;
@media (max-width: 600px) {
font-style: italic;
}
}
Interpolation
In an interactive application you want to style things depending on some
state. In Mint you can use interpolation
#{...}
in CSS values to get data from the component:
component Main {
state color : String = "red"
style base {
color: #{color};
}
fun handleClick : Promise(Never, Void) {
if (color == "red") {
next { color = "blue" }
} else {
next { color = "red" }
}
}
fun render : Html {
<div::base onClick={handleClick}>
<{ "I'm " + color + "!" }>
</div>
}
}
In the example we use the
color
state to style the element, when clicking on it we toggle between
red
and
blue
.
Multiple interpolations can be used in the same value, for example, if I have a
top
and a
left
state we can use them to set the
transform
property:
state left : Number = 100
state top : Number = 100
style base {
transform: translate(#{left}px, #{top}px) /* translate(100px, 100px) */
}
That's it for today, thank you for reading 🙏