Struct Style 

pub struct Style {

    pub display: Display,
    pub visibility: Visibility,
    pub overflow: Point<Overflow>,
    pub scrollbar_width: AbsoluteLength,
    pub allow_concurrent_scroll: bool,
    pub restrict_scroll_to_axis: bool,
    pub position: Position,
    pub inset: Edges<Length>,
    pub size: Size<Length>,
    pub min_size: Size<Length>,
    pub max_size: Size<Length>,
    pub aspect_ratio: Option<f32>,
    pub margin: Edges<Length>,
    pub padding: Edges<DefiniteLength>,
    pub border_widths: Edges<AbsoluteLength>,
    pub align_items: Option<AlignItems>,
    pub align_self: Option<AlignSelf>,
    pub align_content: Option<AlignContent>,
    pub justify_content: Option<JustifyContent>,
    pub gap: Size<DefiniteLength>,
    pub flex_direction: FlexDirection,
    pub flex_wrap: FlexWrap,
    pub flex_basis: Length,
    pub flex_grow: f32,
    pub flex_shrink: f32,
    pub background: Option<Fill>,
    pub border_color: Option<Hsla>,
    pub border_style: BorderStyle,
    pub corner_radii: Corners<AbsoluteLength>,
    pub box_shadow: Vec<BoxShadow>,
    pub text: TextStyleRefinement,
    pub mouse_cursor: Option<CursorStyle>,
    pub opacity: Option<f32>,
    pub grid_cols: Option<u16>,
    pub grid_rows: Option<u16>,
    pub grid_location: Option<GridLocation>,
    pub debug: bool,
    pub debug_below: bool,
}

The CSS styling that can be applied to an element via the Styled trait

Fields

display: Display

What layout strategy should be used?

visibility: Visibility

Should the element be painted on screen?

overflow: Point<Overflow>

How children overflowing their container should affect layout

scrollbar_width: AbsoluteLength

How much space (in points) should be reserved for the scrollbars of Overflow::Scroll and Overflow::Auto nodes.

allow_concurrent_scroll: bool

Whether both x and y axis should be scrollable at the same time.

restrict_scroll_to_axis: bool

Whether scrolling should be restricted to the axis indicated by the mouse wheel.

This means that:

• The mouse wheel alone will only ever scroll the Y axis.
• Holding Shift and using the mouse wheel will scroll the X axis.

Motivation

On the web when scrolling with the mouse wheel, scrolling up and down will always scroll the Y axis, even when the mouse is over a horizontally-scrollable element.

The only way to scroll horizontally is to hold down Shift while scrolling, which then changes the scroll axis to the X axis.

Currently, GPUI operates differently from the web in that it will scroll an element in either the X or Y axis when scrolling with just the mouse wheel. This causes problems when scrolling in a vertical list that contains horizontally-scrollable elements, as when you get to the horizontally-scrollable elements the scroll will be hijacked.

Ideally we would match the web’s behavior and not have a need for this, but right now we’re adding this opt-in style property to limit the potential blast radius.

position: Position

What should the position value of this struct use as a base offset?

inset: Edges<Length>

How should the position of this element be tweaked relative to the layout defined?

size: Size<Length>

Sets the initial size of the item

min_size: Size<Length>

Controls the minimum size of the item

max_size: Size<Length>

Controls the maximum size of the item

aspect_ratio: Option<f32>

Sets the preferred aspect ratio for the item. The ratio is calculated as width divided by height.

margin: Edges<Length>

How large should the margin be on each side?

padding: Edges<DefiniteLength>

How large should the padding be on each side?

border_widths: Edges<AbsoluteLength>

How large should the border be on each side?

align_items: Option<AlignItems>

How this node’s children aligned in the cross/block axis?

align_self: Option<AlignSelf>

How this node should be aligned in the cross/block axis. Falls back to the parents AlignItems if not set

align_content: Option<AlignContent>

How should content contained within this item be aligned in the cross/block axis

justify_content: Option<JustifyContent>

How should contained within this item be aligned in the main/inline axis

gap: Size<DefiniteLength>

How large should the gaps between items in a flex container be?

flex_direction: FlexDirection

Which direction does the main axis flow in?

flex_wrap: FlexWrap

Should elements wrap, or stay in a single line?

flex_basis: Length

Sets the initial main axis size of the item

flex_grow: f32

The relative rate at which this item grows when it is expanding to fill space, 0.0 is the default value, and this value must be positive.

flex_shrink: f32

The relative rate at which this item shrinks when it is contracting to fit into space, 1.0 is the default value, and this value must be positive.

background: Option<Fill>

The fill color of this element

border_color: Option<Hsla>

The border color of this element

border_style: BorderStyle

The border style of this element

corner_radii: Corners<AbsoluteLength>

The radius of the corners of this element

box_shadow: Vec<BoxShadow>

Box shadow of the element

text: TextStyleRefinement

The text style of this element

mouse_cursor: Option<CursorStyle>

The mouse cursor style shown when the mouse pointer is over an element.

opacity: Option<f32>

The opacity of this element

grid_cols: Option<u16>

The grid columns of this element Equivalent to the Tailwind grid-cols-<number>

grid_rows: Option<u16>

The row span of this element Equivalent to the Tailwind grid-rows-<number>

grid_location: Option<GridLocation>

The grid location of this element

debug: bool

Whether to draw a red debugging outline around this element

debug_below: bool

Whether to draw a red debugging outline around this element and all of its conforming children

Implementations

impl Style

pub fn has_opaque_background(&self) -> bool

Returns true if the style is visible and the background is opaque.

pub fn text_style(&self) -> Option<&TextStyleRefinement>

Get the text style in this element style.

pub fn overflow_mask( &self, bounds: Bounds<Pixels>, rem_size: Pixels, ) -> Option<ContentMask<Pixels>>

Get the content mask for this element style, based on the given bounds. If the element does not hide its overflow, this will return None.

pub fn paint( &self, bounds: Bounds<Pixels>, window: &mut Window, cx: &mut App, continuation: impl FnOnce(&mut Window, &mut App), )

Paints the background of an element styled with this style.

Trait Implementations

impl Clone for Style

fn clone(&self) -> Style

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl Debug for Style

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl Default for Style

fn default() -> Self

Returns the “default value” for a type.

impl From<StyleRefinement> for Style

where Option<Display>: Clone, Option<Visibility>: Clone, PointRefinement<Overflow>: Clone, Option<AbsoluteLength>: Clone, Option<bool>: Clone, Option<Position>: Clone, EdgesRefinement<Length>: Clone, SizeRefinement<Length>: Clone, Option<f32>: Clone, EdgesRefinement<DefiniteLength>: Clone, EdgesRefinement<AbsoluteLength>: Clone, Option<AlignItems>: Clone, Option<AlignSelf>: Clone, Option<AlignContent>: Clone, Option<JustifyContent>: Clone, SizeRefinement<DefiniteLength>: Clone, Option<FlexDirection>: Clone, Option<FlexWrap>: Clone, Option<Length>: Clone, Option<Fill>: Clone, Option<Hsla>: Clone, Option<BorderStyle>: Clone, CornersRefinement<AbsoluteLength>: Clone, Option<Vec<BoxShadow>>: Clone, Option<TextStyleRefinement>: Clone, Option<CursorStyle>: Clone, Option<u16>: Clone, Option<GridLocation>: Clone,

fn from(value: StyleRefinement) -> Self

Converts to this type from the input type.

impl Refineable for Style

where Option<Display>: Clone, Option<Visibility>: Clone, PointRefinement<Overflow>: Clone, Option<AbsoluteLength>: Clone, Option<bool>: Clone, Option<Position>: Clone, EdgesRefinement<Length>: Clone, SizeRefinement<Length>: Clone, Option<f32>: Clone, EdgesRefinement<DefiniteLength>: Clone, EdgesRefinement<AbsoluteLength>: Clone, Option<AlignItems>: Clone, Option<AlignSelf>: Clone, Option<AlignContent>: Clone, Option<JustifyContent>: Clone, SizeRefinement<DefiniteLength>: Clone, Option<FlexDirection>: Clone, Option<FlexWrap>: Clone, Option<Length>: Clone, Option<Fill>: Clone, Option<Hsla>: Clone, Option<BorderStyle>: Clone, CornersRefinement<AbsoluteLength>: Clone, Option<Vec<BoxShadow>>: Clone, Option<TextStyleRefinement>: Clone, Option<CursorStyle>: Clone, Option<u16>: Clone, Option<GridLocation>: Clone,

type Refinement = StyleRefinement

fn refine(&mut self, refinement: &Self::Refinement)

Applies the given refinement to this instance, modifying it in place.

fn refined(self, refinement: Self::Refinement) -> Self

Returns a new instance with the refinement applied, equivalent to cloning self and calling refine on it.

fn is_superset_of(&self, refinement: &Self::Refinement) -> bool

Returns true if this instance would contain all values from the refinement.

fn subtract(&self, refinement: &Self::Refinement) -> Self::Refinement

Returns a refinement that represents the difference between this instance and the given refinement.

fn from_cascade(cascade: &Cascade<Self>) -> Self

where Self: Sized + Default,

Creates an instance from a cascade by merging all refinements atop the default value.