Styling
Widgets all come with a default style.
You will most certainly want to override those default styles to make your app look good.
In Fabulous, this is done by adding modifiers to your widgets.
We will see in this page how to add those modifiers and how to reuse a style across your app.
Adding some basic style is easy.
You simply need to apply modifiers on the widget you want to style by using the dot notation.
Label("Hello, World!")
.font(size = 18.) // Set the font size to 18 points
.textColor(Color.Red.ToFabColor()) // Change the text color to red
.padding(10.) // Apply a padding of 10px
That’s it!
You can explore available modifiers on each widget by simply typing
.
(dot) after the widget itself.ContentPage(
"Dashboard",
ScrollView(
(VStack() {
Label("Hello, World!")
.textColor(Color.Red.ToFabColor())
Button("Click me!")
.backgroundColor(Color.Blue.ToFabColor())
})
.margin(Thickness(10., 0.))
)
.verticalScrollBarVisibility(ScrollBarVisibility.Never)
)
.hasNavigationBar(false)
To be able to apply modifiers to widgets accepting multiple children (like
VStack
), you will need to wrap the parent and its children in parenthesis like this (VStack() { child1 ... child2 }).modifier()
. Otherwise, F# won’t allow you to apply modifiers.A suggestion to change the F# language is currently under review. Give it a thumb up if you’d like to see it in the future:
F# Suggestion: Allow dot notation after body of computation expression without need for parenthesis
In case you want to see which modifiers are available for a certain widget, you can refer to the API documentation of that widget: API documentation