This is the fifth post in a series that showcases the features of Mint, you can find the previous posts here:
- Mint ๐: Getting Started
- Mint ๐: Components
- Mint ๐: Events and State of Components
- Mint ๐: Handling HTTP Requests
In this post I will show you how to style elements.
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 it's pseudo elements (::before
and ::after
).
You can do that in a style by adding a new block whith 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 same syntax can be used to style child elements:
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 ๐:
If you like to learn more about Mint check out the guide ๐
In the next part I'm going to show how you how you can create a package that can be shared with other people ๐ see you there ๐
Top comments (0)