vizia

Module style

Expand description

Styling determines the appearance of a view.

§Styling Views

Vizia provides two ways to style views:

  • Inline
  • Shared

§Inline Styling

Inline styling refers to setting the style and layout properties of a view using view modifiers.

Element::new(cx).background_color(Color::red());

Properties set inline affect only the modified view and override any shared styling for the same property.

§Shared Styling

Shared styling refers to setting the style and layout properties using css rules.

Element::new(cx).class("foo");
.foo {
    background-color: red;
}

Rules defined in css can apply to many views but are overridden by inline properties on a view.

§Adding Stylesheets

To add a css string to an application, use add_theme() on Context. This can be used with the include_str!() macro to embed an external stylesheet file into the application binary when compiled. Alternatively a constant string literal can be used to embed the CSS in the application.


const STYLE: &str = r#"
    .foo {
        background-color: red;
    }
"#;

cx.add_stylesheet(STYLE);

Element::new(cx).class("foo");

To add an external css stylesheet which is read from a file at runtime, use add_stylesheet() on Context. Stylesheets added this way can be hot-reloaded by pressing the F5 key in the application window.


cx.add_stylesheet("path/to/stylesheet.css");

Element::new(cx).class("foo");

Structs§

Enums§

Type Aliases§