Module vizia::style

source ·
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§

  • A box shadow adding a shadow effect around an element’s frame.
  • A font size value.
  • A font weight value.
  • A 2D matrix.
  • An opacity value in the range of 0 to 1.
  • A color with red, green, blue, and alpha components, in a byte each.
  • A scale defining a scale value on the x and the y axis.
  • Stores the style properties of all entities in the application.
  • Defines a transition that allows to change property values smoothly, over a given duration.
  • A translate defining a translate value on the x and the y axis.

Enums§

Type Aliases§