Styling Widgets

For styling widgets tuix uses a modified subset of CSS.

Setting Styles

Inline Styles

Style properties can be set directly on a widget, either (1) in the builder or (2) on the entity ID. This sets the propertiesa as inline, which means they are not overidden by CSS styling.

(1) We can set the position and background color of a widget within the builder like so:

let button = Button::new().build(state, parent, |builder|
    builder
        .set_left(Length::Pixels(50.0))
        .set_top(Length::Pixels(50.0))
        .set_background_color(Color::rgb(100, 50, 50))
);

(2) We can set the position and background color of a widget using its entity ID like so:

let button = Button::new().build(state, parent, |builder| builder);

button.set_left(state, Length::Pixels(50.0)).set_right(Length::Pixels(50.0)).set_background_color(state, Color::rgb(100, 50, 50));

This is possible thanks to the PropSet trait, which is implemented for Entity. The main difference here is that the state must be passed to each setter function as well as the value.

CSS Styles

Tuix also supports a subset of CSS to style widgets. We can acheive the same styling as above with the following CSS:

button {
    left: 50px;
    top: 50px;
    background-color: #643232;
}

To include CSS into an aplication, use the 'state.style.parse_theme(THEME)' function, where THEME is the CSS string. You can include CSS in a separate file and then use the include_str!() macro.

Supported Style Properties

// Table of supported properties here // Property, Values, Default, Animatable