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§
- Font
Size - A font size value.
- Font
Variation - Font
Weight - A font weight value.
- Line
Clamp - Linear
Gradient - Matrix
- A 2D matrix.
- Opacity
- An opacity value in the range of 0 to 1.
- Position
- RGBA
- A color with red, green, blue, and alpha components, in a byte each.
- Scale
- A scale defining a scale value on the x and the y axis.
- Shadow
- A box shadow adding a shadow effect around an element’s frame.
- Style
- Stores the style properties of all entities in the application.
- Text
Decoration Line - Text
Stroke - Transition
- Defines a transition that allows to change property values smoothly, over a given duration.
- Translate
- A translate defining a translate value on the x and the y axis.
Enums§
- Alignment
- Angle
- A value representing an angle expressed in degrees, gradians, radians, or turns.
- Background
Image - Background
Size - Border
Style Keyword - The keyword of a single border style.
- Clip
Path - Color
- A color value.
- Corner
Shape - The shape the default view drawing algorithm should use for handling borders.
- CssRule
- Cursor
Icon - An icon of a cursor.
- Display
- Determines whether an entity will be rendered and acted on by the layout system.
To make an entity invisible to rendering but still visible to layout, see
Visibility. - Family
Owned - A font-family.
- Filter
- Font
Family - Font
Slant - Font
Weight Keyword - A font weight keyword corresponding to a specific font weight.
- Font
Width - A font stretch value.
- Generic
Font Family - Gradient
- Horizontal
Position Keyword - A horizontal position keyword.
- Image
OrGradient - An enum which represents an image or a gradient.
- Length
- Length
OrPercentage - A length or a percentage value.
- Length
Value - A length value.
- Line
Direction - Overflow
- Determines how to deal with content that overflows the bounding box of the element.
- Pointer
Events - Determines whether an entity will receive pointer events.
- Position
Type - The position type determines whether a node will be positioned in-line with its siblings or out-of-line / independently of its siblings.
- Text
Align - Determines how overflowed content that is not displayed should be signaled to the user.
- Text
Decoration Style - Text
Overflow - Determines how overflowed content that is not displayed should be signaled to the user.
- Text
Stroke Style - Transform
- An individual transform function.
- Vertical
Position Keyword - A vertical position keyword.
- Visibility
- Determines whether an entity will be rendered.