#Style Builder

Style Builder's entry is .style(|style| { ... }). It's used for manually writing view style's chain configuration, suitable when you want to directly call view-provided strongly-typed style methods, instead of writing style as class string.

use flor::macros::color;
use flor::view::builder::StyleBuilder;
use flor_lys::label::{label, LabelStyleResolverExt};

let title = label("Title")
    .style(|style| {
        style
            .font_size(20.0)
            .text_color(color!("#0f172a"))
    });

#Basic Writing

When using .style(...) usually need two imports:

For example Label's style methods come from LabelStyleResolverExt:

use flor::macros::color;
use flor::view::builder::StyleBuilder;
use flor_lys::label::{label, LabelStyleResolverExt};

let label = label("Status")
    .style(|style| style.text_color(color!("#2563eb")));

.style(...)'s closure must return modified style. If want to continuously set multiple values, just chain call.

#Not All Views Have It

.style(...) is for view to manually expose style chain capability. Whether supports .style(...), what methods style in closure has, are all decided by specific view.

For example Label can have font_size(...), text_color(...) and similar methods; Button can have button variant, color, rounded corner and other methods. Specific methods should see that view's documentation in view library.

use flor::macros::color;
use flor::view::builder::StyleBuilder;
use flor_lys::button::{button, ButtonStyleResolverExt, ButtonVariant};

let save = button("Save")
    .style(|style| {
        style
            .variant(ButtonVariant::Outline)
            .color(color!("#2563eb"))
    });

If some view didn't implement style builder, the compiler will indicate that the method is not available when calling .style(...).

#State Style

Style builder can set style by view state. Common state methods include normal(), hover(), focus(), active(), disabled().

use flor::macros::color;
use flor::view::builder::StyleBuilder;
use flor_lys::label::{label, LabelStyleResolverExt};

let item = label("Option")
    .style(|style| {
        style
            .text_color(color!("#334155"))
            .hover()
            .text_color(color!("#2563eb"))
    });

This code means: normal state uses dark gray, hover state uses blue.

#Relationship with class / layout

.style(...) is view style's strongly-typed writing. It's suitable when you already know target view supports which style methods, and hope to get compile-time check.

.layout(...) is layout's strongly-typed writing, responsible for display, size, spacing, Flex/Grid and other layout properties.

.class(...) is quick development string writing. Flor's design philosophy is: class can describe layout and style's arbitrary value expression, so can use one string of class to simultaneously set layout and view style. Also because it's capability added for quick development, class is optional feature.

All three can be used simultaneously; same configuration item uses later written value as standard.