Module floem::style

source ·
Expand description

Style

Styles are divided into two parts: [ComputedStyle]: A style with definite values for most fields.

Style: A style with StyleValues for the fields, where Unset falls back to the relevant field in the [ComputedStyle] and Base falls back to the underlying Style or the [ComputedStyle].

A loose analogy with CSS might be:
[ComputedStyle] is like the browser’s default style sheet for any given element (view).

Style is like the styling associated with a specific element (view):

<div style="color: red; font-size: 12px;">

An override Style is perhaps closest to classes that can be applied to an element, like div:hover { color: blue; }.
However, we do not actually have ‘classes’ where you can define a separate collection of styles in the same way. So, the hover styling is still defined with the view as you construct it, so perhaps a closer pseudocode analogy is:

<div hover_style="color: blue;" style="color: red; font-size: 12px;">

Structs

Enums

  • AlignContent
    Sets the distribution of space between and around content items For Flexbox it controls alignment in the cross axis For Grid it controls alignment in the block axis
  • AlignItems
    Used to control how child Nodes are aligned. For Flexbox it controls alignment in the cross axis For Grid it controls alignment in the block axis
  • CursorStyle
  • Dimension
    A unit of linear measurement
  • Display
    Sets the layout used for the children of this node
  • FlexDirection
    The direction of the flexbox layout main axis.
  • FlexWrap
    Controls whether flex items are forced onto one line or can wrap onto multiple lines.
  • Position
    The positioning strategy for this item.
  • StyleSelector
  • StyleValue
    The value for a Style property
  • TextOverflow

Traits

Type Aliases

  • JustifyContent
    Sets the distribution of space between and around content items For Flexbox it controls alignment in the main axis For Grid it controls alignment in the inline axis