Struct Style 

pub struct Style { /* private fields */ }

Implementations

impl Style

pub fn content_hash(&self) -> u64

Compute a content hash of this style for cache keying.

This hash captures the identity of the style’s contents using value-based hashing. Identical style values will produce identical hashes, enabling effective cache sharing.

pub fn inherited_equal(&self, other: &Style) -> bool

Check if the inherited properties of this style equal another’s.

This is the key comparison for cache validation (Chromium’s approach). Two styles with different inherited values cannot share a cache entry even if their non-inherited properties are identical.

impl Style

pub fn new() -> Self

pub fn apply_only_inherited(to: &mut Rc<Style>, from: &Style)

Apply only inherited properties from from style to to style. This is used during style propagation to pass inherited values to children.

Only properties marked as inherited: true in their StylePropInfo are applied. This is more efficient than apply_mut when we only need to propagate inherited properties like font-size, color, etc.

pub fn apply_inherited_and_class_maps(to: &mut Rc<Style>, from: &Style)

Apply inherited properties and class nested maps from from style to to style.

This is used during style propagation to pass both inherited values and class definitions to children. Class nested maps (like .class(ListItemClass, ...)) need to flow to descendants so they can apply the styling when they have matching classes.

pub fn apply_only_class_maps(to: &mut Rc<Style>, from: &Style)

Apply only class nested maps from from style to to style. This is used during style propagation to pass class definitions to children.

Only class nested maps (.class(SomeClass, ...)) are applied, not inherited props.

pub fn apply_classes_from_context( self, classes: &[StyleClassRef], class_context: &Rc<Style>, ) -> (Style, bool)

Applies class styling from the context (inherited from ancestors) to this style.

The view’s own explicit styles take precedence over context class styles. This is achieved by applying context class styles first, then applying the view’s own styles on top.

Context mappings (from with_context/with_theme) from class styles are merged with the view’s own context mappings. Class mappings run first (as defaults), then view’s own mappings run (allowing overrides). This ensures that theme class styles can use with_context for context-aware styling (like toggle button height based on font size) while still allowing views to override via their own with_context closures.

The returned boolean is true if a nested map was applied.

pub fn apply_class<C: StyleClass>(self, _class: C) -> Style

pub fn apply_selectors(self, selectors: &[StyleSelector]) -> Style

pub fn with_context<P: StyleProp>( self, f: impl Fn(Self, &P::Type) -> Self + 'static, ) -> Self

Apply a context-based style transformation.

This evaluates the closure immediately with the context prop’s default value (for selector and inherited prop discovery), and also stores the closure to be re-evaluated with actual ancestor context values during style resolution.

Signal reactivity works because the outer style closure re-runs when signals change.

pub fn with_context_opt<P: StyleProp<Type = Option<T>>, T: 'static + Default>( self, f: impl Fn(Self, T) -> Self + 'static, ) -> Self

Apply a context-based style transformation for optional props.

Like with_context, this evaluates immediately with defaults for discovery, and stores the closure for context-aware re-evaluation.

pub fn builtin(&self) -> BuiltinStyle<'_>

pub fn apply(self, over: Style) -> Style

Apply another Style to this style, returning a new Style with the overrides

StyleValue::Val will override the value with the given value StyleValue::Unset will unset the value, causing it to fall back to the default. StyleValue::Base will leave the value as-is, whether falling back to the default or using the value in the Style.

pub fn map(self, over: impl FnOnce(Self) -> Self) -> Self

pub fn apply_overriding_styles( self, overrides: impl Iterator<Item = Style>, ) -> Style

Apply multiple Styles to this style, returning a new Style with the overrides. Later styles take precedence over earlier styles.

impl Style

pub fn display(self, v: impl Into<Display>) -> Self

Controls the display type of the view.

This determines how the view participates in layout.

pub fn position(self, v: impl Into<Position>) -> Self

Sets the positioning scheme for the view.

This affects how the view is positioned relative to its normal position in the document flow.

pub fn is_fixed(self, v: impl Into<bool>) -> Self

Enables fixed positioning relative to the viewport.

When true, the view is positioned relative to the window viewport rather than its parent. This is similar to CSS position: fixed. The view will:

• Use inset properties relative to the viewport
• Have percentage sizes relative to the viewport
• Be painted above all other content (like overlays)

Note: This works in conjunction with position: absolute internally.

pub fn width(self, v: impl Into<PxPctAuto>) -> Self

Sets the width of the view.

Can be specified in pixels, percentages, or auto.

pub fn height(self, v: impl Into<PxPctAuto>) -> Self

Sets the height of the view.

Can be specified in pixels, percentages, or auto.

pub fn min_width(self, v: impl Into<PxPctAuto>) -> Self

Sets the minimum width of the view.

The view will not shrink below this width.

pub fn min_height(self, v: impl Into<PxPctAuto>) -> Self

Sets the minimum height of the view.

The view will not shrink below this height.

pub fn max_width(self, v: impl Into<PxPctAuto>) -> Self

Sets the maximum width of the view.

The view will not grow beyond this width.

pub fn max_height(self, v: impl Into<PxPctAuto>) -> Self

Sets the maximum height of the view.

The view will not grow beyond this height.

pub fn flex_direction(self, v: impl Into<FlexDirection>) -> Self

Sets the direction of the main axis for flex items.

Determines whether flex items are laid out in rows or columns.

pub fn flex_wrap(self, v: impl Into<FlexWrap>) -> Self

Controls whether flex items wrap to new lines.

When enabled, items that don’t fit will wrap to the next line.

pub fn flex_grow(self, v: impl Into<f32>) -> Self

Sets the flex grow factor for the flex item.

Determines how much the item should grow relative to other items.

pub fn flex_shrink(self, v: impl Into<f32>) -> Self

Sets the flex shrink factor for the flex item.

Determines how much the item should shrink relative to other items.

pub fn flex_basis(self, v: impl Into<PxPctAuto>) -> Self

Sets the initial main size of a flex item.

This is the size of the item before free space is distributed.

pub fn justify_content(self, v: impl Into<Option<JustifyContent>>) -> Self

Controls alignment of flex items along the main axis.

Determines how extra space is distributed between and around items.

pub fn justify_items(self, v: impl Into<Option<JustifyItems>>) -> Self

Controls default alignment of grid items along the inline axis.

Sets the default justify-self value for all items in the container.

pub fn box_sizing(self, v: impl Into<Option<BoxSizing>>) -> Self

Controls how the total width and height are calculated.

Determines whether borders and padding are included in the view’s size.

pub fn justify_self(self, v: impl Into<Option<AlignItems>>) -> Self

Controls individual alignment along the inline axis.

Overrides the container’s justify-items value for this specific item.

pub fn align_items(self, v: impl Into<Option<AlignItems>>) -> Self

Controls alignment of flex items along the cross axis.

Determines how items are aligned when they don’t fill the container’s cross axis.

pub fn align_content(self, v: impl Into<Option<AlignContent>>) -> Self

Controls alignment of wrapped flex lines.

Only has an effect when flex-wrap is enabled and there are multiple lines.

pub fn grid_template_rows( self, v: impl Into<Vec<GridTemplateComponent<String>>>, ) -> Self

Defines the line names and track sizing functions of the grid rows.

Specifies the size and names of the rows in a grid layout.

pub fn grid_template_columns( self, v: impl Into<Vec<GridTemplateComponent<String>>>, ) -> Self

Defines the line names and track sizing functions of the grid columns.

Specifies the size and names of the columns in a grid layout.

pub fn grid_auto_rows( self, v: impl Into<Vec<MinMax<MinTrackSizingFunction, MaxTrackSizingFunction>>>, ) -> Self

Specifies the size of implicitly-created grid rows.

Sets the default size for rows that are created automatically.

pub fn grid_auto_columns( self, v: impl Into<Vec<MinMax<MinTrackSizingFunction, MaxTrackSizingFunction>>>, ) -> Self

Specifies the size of implicitly-created grid columns.

Sets the default size for columns that are created automatically.

pub fn grid_auto_flow(self, v: impl Into<GridAutoFlow>) -> Self

Controls how auto-placed items get flowed into the grid.

Determines the direction that grid items are placed when not explicitly positioned.

pub fn grid_row(self, v: impl Into<Line<GridPlacement>>) -> Self

Specifies a grid item’s location within the grid row.

Determines which grid rows the item spans.

pub fn grid_column(self, v: impl Into<Line<GridPlacement>>) -> Self

Specifies a grid item’s location within the grid column.

Determines which grid columns the item spans.

pub fn align_self(self, v: impl Into<Option<AlignItems>>) -> Self

Controls individual alignment along the cross axis.

Overrides the container’s align-items value for this specific item.

pub fn outline_color(self, v: impl Into<Brush>) -> Self

Sets the color of the view’s outline.

The outline is drawn outside the border and doesn’t affect layout.

pub fn outline_progress(self, v: impl Into<Pct>) -> Self

Controls the progress/completion of the outline animation.

Useful for creating animated outline effects.

pub fn border_progress(self, v: impl Into<Pct>) -> Self

Controls the progress/completion of the border animation.

Useful for creating animated border effects.

pub fn inset_left(self, v: impl Into<PxPctAuto>) -> Self

Sets the left offset for positioned views.

pub fn inset_top(self, v: impl Into<PxPctAuto>) -> Self

Sets the top offset for positioned views.

pub fn inset_right(self, v: impl Into<PxPctAuto>) -> Self

Sets the right offset for positioned views.

pub fn inset_bottom(self, v: impl Into<PxPctAuto>) -> Self

Sets the bottom offset for positioned views.

pub fn pointer_events(self, v: impl Into<Option<PointerEvents>>) -> Self

Controls whether the view can be the target of mouse events.

When disabled, mouse events pass through to views behind.

pub fn selectable(self, v: impl Into<bool>) -> Self

Controls whether the view’s text can be selected.

This property is inherited by child views.

pub fn text_overflow(self, v: impl Into<TextOverflow>) -> Self

Controls how overflowed text content is handled.

Determines whether text wraps or gets clipped.

pub fn text_align(self, v: impl Into<Option<Align>>) -> Self

Sets text alignment within the view.

Controls horizontal alignment of text content.

pub fn aspect_ratio(self, v: impl Into<Option<f32>>) -> Self

Sets the preferred aspect ratio for the view.

Maintains width-to-height proportions during layout.

pub fn scale_x(self, v: impl Into<Pct>) -> Self

Sets the horizontal scale transform.

Values less than 100% shrink the view, greater than 100% enlarge it.

pub fn scale_y(self, v: impl Into<Pct>) -> Self

Sets the vertical scale transform.

Values less than 100% shrink the view, greater than 100% enlarge it.

pub fn translate_x(self, v: impl Into<PxPct>) -> Self

Sets the horizontal translation transform.

Moves the view left (negative) or right (positive).

pub fn translate_y(self, v: impl Into<PxPct>) -> Self

Sets the vertical translation transform.

Moves the view up (negative) or down (positive).

pub fn rotate(self, v: impl Into<Angle>) -> Self

Sets the rotation transform angle.

Positive values rotate clockwise, negative values rotate counter-clockwise. Use .deg() or .rad() methods to specify the angle unit.

pub fn rotate_about(self, v: impl Into<AnchorAbout>) -> Self

Sets the anchor point for rotation transformations.

Determines the point around which the view rotates. Use predefined constants like AnchorAbout::CENTER or create custom anchor points with pixel or percentage values.

pub fn scale_about(self, v: impl Into<AnchorAbout>) -> Self

Sets the anchor point for scaling transformations.

Determines the point around which the view scales. Use predefined constants like AnchorAbout::CENTER or create custom anchor points with pixel or percentage values.

pub fn opacity(self, v: impl Into<f32>) -> Self

Sets the opacity of the view.

Values range from 0.0 (fully transparent) to 1.0 (fully opaque). This affects the entire view including its children.

pub fn set_selected(self, v: impl Into<bool>) -> Self

Sets the selected state of the view.

This property is inherited by child views.

pub fn set_disabled(self, v: impl Into<bool>) -> Self

Controls the disabled state of the view.

This property is inherited by child views.

pub fn focusable(self, v: impl Into<bool>) -> Self

Controls whether the view can receive focus.

Focus is necessary for keyboard interaction.

pub fn draggable(self, v: impl Into<bool>) -> Self

Controls whether the view can be dragged.

Enables drag-and-drop functionality for the view.

pub fn unset_display(self) -> Self

Unsets the display property.

pub fn unset_position(self) -> Self

Unsets the position property.

pub fn unset_is_fixed(self) -> Self

Unsets the is_fixed property.

pub fn unset_width(self) -> Self

Unsets the width property.

pub fn unset_height(self) -> Self

Unsets the height property.

pub fn unset_min_width(self) -> Self

Unsets the min_width property.

pub fn unset_min_height(self) -> Self

Unsets the min_height property.

pub fn unset_max_width(self) -> Self

Unsets the max_width property.

pub fn unset_max_height(self) -> Self

Unsets the max_height property.

pub fn unset_flex_direction(self) -> Self

Unsets the flex_direction property.

pub fn unset_flex_wrap(self) -> Self

Unsets the flex_wrap property.

pub fn unset_flex_grow(self) -> Self

Unsets the flex_grow property.

pub fn unset_flex_shrink(self) -> Self

Unsets the flex_shrink property.

pub fn unset_flex_basis(self) -> Self

Unsets the flex_basis property.

pub fn unset_justify_content(self) -> Self

Unsets the justify_content property.

pub fn unset_justify_items(self) -> Self

Unsets the justify_items property.

pub fn unset_box_sizing(self) -> Self

Unsets the box_sizing property.

pub fn unset_justify_self(self) -> Self

Unsets the justify_self property.

pub fn unset_align_items(self) -> Self

Unsets the align_items property.

pub fn unset_align_content(self) -> Self

Unsets the align_content property.

pub fn unset_grid_template_rows(self) -> Self

Unsets the grid_template_rows property.

pub fn unset_grid_template_columns(self) -> Self

Unsets the grid_template_columns property.

pub fn unset_grid_auto_rows(self) -> Self

Unsets the grid_auto_rows property.

pub fn unset_grid_auto_columns(self) -> Self

Unsets the grid_auto_columns property.

pub fn unset_grid_auto_flow(self) -> Self

Unsets the grid_auto_flow property.

pub fn unset_grid_row(self) -> Self

Unsets the grid_row property.

pub fn unset_grid_column(self) -> Self

Unsets the grid_column property.

pub fn unset_align_self(self) -> Self

Unsets the align_self property.

pub fn unset_outline_color(self) -> Self

Unsets the outline_color property.

pub fn unset_outline(self) -> Self

Unsets the outline property.

pub fn unset_outline_progress(self) -> Self

Unsets the outline_progress property.

pub fn unset_border_progress(self) -> Self

Unsets the border_progress property.

pub fn unset_border_combined(self) -> Self

Unsets the border_combined property.

pub fn unset_border_color_combined(self) -> Self

Unsets the border_color_combined property.

pub fn unset_border_radius_combined(self) -> Self

Unsets the border_radius_combined property.

pub fn unset_padding_combined(self) -> Self

Unsets the padding_combined property.

pub fn unset_margin_combined(self) -> Self

Unsets the margin_combined property.

pub fn unset_inset_left(self) -> Self

Unsets the inset_left property.

pub fn unset_inset_top(self) -> Self

Unsets the inset_top property.

pub fn unset_inset_right(self) -> Self

Unsets the inset_right property.

pub fn unset_inset_bottom(self) -> Self

Unsets the inset_bottom property.

pub fn unset_pointer_events(self) -> Self

Unsets the pointer_events property.

pub fn unset_z_index(self) -> Self

Unsets the z_index property.

pub fn unset_cursor(self) -> Self

Unsets the cursor property.

pub fn unset_color(self) -> Self

Unsets the color property.

pub fn unset_background(self) -> Self

Unsets the background property.

pub fn unset_foreground(self) -> Self

Unsets the foreground property.

pub fn unset_box_shadow(self) -> Self

Unsets the box_shadow property.

pub fn unset_font_size(self) -> Self

Unsets the font_size property.

pub fn unset_font_family(self) -> Self

Unsets the font_family property.

pub fn unset_font_weight(self) -> Self

Unsets the font_weight property.

pub fn unset_font_style(self) -> Self

Unsets the font_style property.

pub fn unset_cursor_color(self) -> Self

Unsets the cursor_color property.

pub fn unset_selection_corer_radius(self) -> Self

Unsets the selection_corer_radius property.

pub fn unset_selectable(self) -> Self

Unsets the selectable property.

pub fn unset_text_overflow(self) -> Self

Unsets the text_overflow property.

pub fn unset_text_align(self) -> Self

Unsets the text_align property.

pub fn unset_line_height(self) -> Self

Unsets the line_height property.

pub fn unset_aspect_ratio(self) -> Self

Unsets the aspect_ratio property.

pub fn unset_col_gap(self) -> Self

Unsets the col_gap property.

pub fn unset_row_gap(self) -> Self

Unsets the row_gap property.

pub fn unset_scale_x(self) -> Self

Unsets the scale_x property.

pub fn unset_scale_y(self) -> Self

Unsets the scale_y property.

pub fn unset_translate_x(self) -> Self

Unsets the translate_x property.

pub fn unset_translate_y(self) -> Self

Unsets the translate_y property.

pub fn unset_rotate(self) -> Self

Unsets the rotate property.

pub fn unset_rotate_about(self) -> Self

Unsets the rotate_about property.

pub fn unset_scale_about(self) -> Self

Unsets the scale_about property.

pub fn unset_opacity(self) -> Self

Unsets the opacity property.

pub fn unset_set_selected(self) -> Self

Unsets the set_selected property.

pub fn unset_set_disabled(self) -> Self

Unsets the set_disabled property.

pub fn unset_focusable(self) -> Self

Unsets the focusable property.

pub fn unset_draggable(self) -> Self

Unsets the draggable property.

pub fn transition_width(self, transition: impl Into<Transition>) -> Self

Sets a transition for the width property. Sets the width of the view.

Can be specified in pixels, percentages, or auto.

pub fn transition_height(self, transition: impl Into<Transition>) -> Self

Sets a transition for the height property. Sets the height of the view.

Can be specified in pixels, percentages, or auto.

pub fn transition_min_width(self, transition: impl Into<Transition>) -> Self

Sets a transition for the min_width property. Sets the minimum width of the view.

The view will not shrink below this width.

pub fn transition_min_height(self, transition: impl Into<Transition>) -> Self

Sets a transition for the min_height property. Sets the minimum height of the view.

The view will not shrink below this height.

pub fn transition_max_width(self, transition: impl Into<Transition>) -> Self

Sets a transition for the max_width property. Sets the maximum width of the view.

The view will not grow beyond this width.

pub fn transition_max_height(self, transition: impl Into<Transition>) -> Self

Sets a transition for the max_height property. Sets the maximum height of the view.

The view will not grow beyond this height.

pub fn transition_flex_basis(self, transition: impl Into<Transition>) -> Self

Sets a transition for the flex_basis property. Sets the initial main size of a flex item.

This is the size of the item before free space is distributed.

pub fn transition_outline_color(self, transition: impl Into<Transition>) -> Self

Sets a transition for the outline_color property. Sets the color of the view’s outline.

The outline is drawn outside the border and doesn’t affect layout.

pub fn transition_outline(self, transition: impl Into<Transition>) -> Self

Sets a transition for the outline property. Sets the outline stroke properties.

Defines the width, style, and other properties of the outline.

pub fn transition_outline_progress( self, transition: impl Into<Transition>, ) -> Self

Sets a transition for the outline_progress property. Controls the progress/completion of the outline animation.

Useful for creating animated outline effects.

pub fn transition_border_progress( self, transition: impl Into<Transition>, ) -> Self

Sets a transition for the border_progress property. Controls the progress/completion of the border animation.

Useful for creating animated border effects.

pub fn transition_border_combined( self, transition: impl Into<Transition>, ) -> Self

Sets a transition for the border_combined property. Sets the border properties for all sides.

Defines width, style, and other border characteristics.

pub fn transition_border_color_combined( self, transition: impl Into<Transition>, ) -> Self

Sets a transition for the border_color_combined property. Sets the border color for all sides.

Can be set individually for each side or all at once.

pub fn transition_border_radius_combined( self, transition: impl Into<Transition>, ) -> Self

Sets a transition for the border_radius_combined property. Sets the border radius for all corners.

Controls how rounded the corners of the view are.

pub fn transition_padding_combined( self, transition: impl Into<Transition>, ) -> Self

Sets a transition for the padding_combined property. Sets the padding for all sides.

Padding is the space between the view’s content and its border.

pub fn transition_margin_combined( self, transition: impl Into<Transition>, ) -> Self

Sets a transition for the margin_combined property. Sets the margin for all sides.

Margin is the space outside the view’s border.

pub fn transition_inset_left(self, transition: impl Into<Transition>) -> Self

Sets a transition for the inset_left property. Sets the left offset for positioned views.

pub fn transition_inset_top(self, transition: impl Into<Transition>) -> Self

Sets a transition for the inset_top property. Sets the top offset for positioned views.

pub fn transition_inset_right(self, transition: impl Into<Transition>) -> Self

Sets a transition for the inset_right property. Sets the right offset for positioned views.

pub fn transition_inset_bottom(self, transition: impl Into<Transition>) -> Self

Sets a transition for the inset_bottom property. Sets the bottom offset for positioned views.

pub fn transition_z_index(self, transition: impl Into<Transition>) -> Self

Sets a transition for the z_index property. Controls the stack order of positioned views.

Higher values appear in front of lower values.

pub fn transition_color(self, transition: impl Into<Transition>) -> Self

Sets a transition for the color property. Sets the text color.

This property is inherited by child views.

pub fn transition_background(self, transition: impl Into<Transition>) -> Self

Sets a transition for the background property. Sets the background color or image.

Can be a solid color, gradient, or image.

pub fn transition_foreground(self, transition: impl Into<Transition>) -> Self

Sets a transition for the foreground property. Sets the foreground color or pattern.

Used for drawing content like icons or shapes.

pub fn transition_box_shadow(self, transition: impl Into<Transition>) -> Self

Sets a transition for the box_shadow property. Adds one or more drop shadows to the view.

Can create depth and visual separation effects.

pub fn transition_font_size(self, transition: impl Into<Transition>) -> Self

Sets a transition for the font_size property. Sets the font size for text content.

This property is inherited by child views.

pub fn transition_cursor_color(self, transition: impl Into<Transition>) -> Self

Sets a transition for the cursor_color property. Sets the color of the text cursor.

Visible when text input views have focus.

pub fn transition_selection_corer_radius( self, transition: impl Into<Transition>, ) -> Self

Sets a transition for the selection_corer_radius property. Sets the corner radius of text selections.

Controls how rounded the corners of selected text appear.

pub fn transition_line_height(self, transition: impl Into<Transition>) -> Self

Sets a transition for the line_height property. Sets the line height for text content.

This property is inherited by child views.

pub fn transition_aspect_ratio(self, transition: impl Into<Transition>) -> Self

Sets a transition for the aspect_ratio property. Sets the preferred aspect ratio for the view.

Maintains width-to-height proportions during layout.

pub fn transition_col_gap(self, transition: impl Into<Transition>) -> Self

Sets a transition for the col_gap property. Sets the gap between columns in grid or flex layouts.

Creates space between items in the horizontal direction.

pub fn transition_row_gap(self, transition: impl Into<Transition>) -> Self

Sets a transition for the row_gap property. Sets the gap between rows in grid or flex layouts.

Creates space between items in the vertical direction.

pub fn transition_scale_x(self, transition: impl Into<Transition>) -> Self

Sets a transition for the scale_x property. Sets the horizontal scale transform.

Values less than 100% shrink the view, greater than 100% enlarge it.

pub fn transition_scale_y(self, transition: impl Into<Transition>) -> Self

Sets a transition for the scale_y property. Sets the vertical scale transform.

Values less than 100% shrink the view, greater than 100% enlarge it.

pub fn transition_translate_x(self, transition: impl Into<Transition>) -> Self

Sets a transition for the translate_x property. Sets the horizontal translation transform.

Moves the view left (negative) or right (positive).

pub fn transition_translate_y(self, transition: impl Into<Transition>) -> Self

Sets a transition for the translate_y property. Sets the vertical translation transform.

Moves the view up (negative) or down (positive).

pub fn transition_rotate(self, transition: impl Into<Transition>) -> Self

Sets a transition for the rotate property. Sets the rotation transform angle.

Positive values rotate clockwise, negative values rotate counter-clockwise. Use .deg() or .rad() methods to specify the angle unit.

pub fn transition_scale_about(self, transition: impl Into<Transition>) -> Self

Sets a transition for the scale_about property. Sets the anchor point for scaling transformations.

Determines the point around which the view scales. Use predefined constants like AnchorAbout::CENTER or create custom anchor points with pixel or percentage values.

pub fn transition_opacity(self, transition: impl Into<Transition>) -> Self

Sets a transition for the opacity property. Sets the opacity of the view.

Values range from 0.0 (fully transparent) to 1.0 (fully opaque). This affects the entire view including its children.

impl Style

pub fn get<P: StyleProp>(&self, _prop: P) -> P::Type

Gets the value of a style property, returning the default if not set.

pub fn get_style_value<P: StyleProp>(&self, _prop: P) -> StyleValue<P::Type>

Gets the raw style value of a property, including unset and base states.

pub fn set<P: StyleProp>(self, prop: P, value: impl Into<P::Type>) -> Self

Sets a style property to a specific value.

pub fn set_style_value<P: StyleProp>( self, _prop: P, value: StyleValue<P::Type>, ) -> Self

pub fn transition<P: StyleProp>(self, _prop: P, transition: Transition) -> Self

Sets a transition animation for a specific style property.

pub fn hover(self, style: impl FnOnce(Style) -> Style) -> Self

The visual style to apply when the mouse hovers over the view

pub fn focus(self, style: impl FnOnce(Style) -> Style) -> Self

The visual style to apply when the view has keyboard focus.

pub fn focus_visible(self, style: impl FnOnce(Style) -> Style) -> Self

Similar to the :focus-visible css selector, this style only activates when tab navigation is used.

pub fn selected(self, style: impl FnOnce(Style) -> Style) -> Self

The visual style to apply when the view is in a selected state.

pub fn drag(self, style: impl FnOnce(Style) -> Style) -> Self

The visual style to apply when the view is being dragged

pub fn disabled(self, style: impl FnOnce(Style) -> Style) -> Self

The visual style to apply when the view is disabled.

pub fn dark_mode(self, style: impl FnOnce(Style) -> Style) -> Self

The visual style to apply when the application is in dark mode.

pub fn file_hover(self, style: impl FnOnce(Style) -> Style) -> Self

The visual style to apply when a file is being dragged over the view.

pub fn active(self, style: impl FnOnce(Style) -> Style) -> Self

The visual style to apply when the view is being actively pressed.

pub fn responsive( self, size: ScreenSize, style: impl FnOnce(Style) -> Style, ) -> Self

Applies styles that activate at specific screen sizes (responsive design).

pub fn class<C: StyleClass>( self, _class: C, style: impl FnOnce(Style) -> Style, ) -> Self

Applies styles to views with a specific CSS class.

pub fn custom_style_class<CS: CustomStyle>( self, style: impl FnOnce(CS) -> CS, ) -> Self

Applies a CustomStyle type to the CustomStyle’s associated style class.

For example: if the CustomStyle you use is DropdownCustomStyle then it will apply the custom style to that custom style type’s associated style class which, in this example, is DropdownClass.

This is especially useful when building a stylesheet or targeting a child view.

Examples

// In a style sheet or on a parent view
use floem::prelude::*;
use floem::style::Style;
Style::new().custom_style_class(|s: dropdown::DropdownCustomStyle| s.close_on_accept(false));
// This property is now set on the `DropdownClass` class and will be applied to any dropdowns that are children of this view.

See also: Style::custom and Style::apply_custom.

pub fn width_full(self) -> Self

Sets the width to 100% of the parent container.

pub fn width_pct(self, width: f64) -> Self

Sets the width as a percentage of the parent container.

pub fn height_full(self) -> Self

Sets the height to 100% of the parent container.

pub fn height_pct(self, height: f64) -> Self

Sets the height as a percentage of the parent container.

pub fn col_gap(self, width: impl Into<PxPct>) -> Self

Sets the gap between columns in grid or flex layouts.

pub fn row_gap(self, height: impl Into<PxPct>) -> Self

Sets the gap between rows in grid or flex layouts.

pub fn row_col_gap( self, width: impl Into<PxPct>, height: impl Into<PxPct>, ) -> Self

Sets different gaps for rows and columns in grid or flex layouts.

pub fn gap(self, gap: impl Into<PxPct>) -> Self

Sets the same gap for both rows and columns in grid or flex layouts.

pub fn size( self, width: impl Into<PxPctAuto>, height: impl Into<PxPctAuto>, ) -> Self

Sets both width and height of the view.

pub fn size_full(self) -> Self

Sets both width and height to 100% of the parent container.

pub fn size_pct(self, width: f64, height: f64) -> Self

Sets both width and height as percentages of the parent container.

pub fn min_width_full(self) -> Self

Sets the minimum width to 100% of the parent container.

pub fn min_width_pct(self, min_width: f64) -> Self

Sets the minimum width as a percentage of the parent container.

pub fn min_height_full(self) -> Self

Sets the minimum height to 100% of the parent container.

pub fn min_height_pct(self, min_height: f64) -> Self

Sets the minimum height as a percentage of the parent container.

pub fn min_size_full(self) -> Self

Sets both minimum width and height to 100% of the parent container.

pub fn min_size( self, min_width: impl Into<PxPctAuto>, min_height: impl Into<PxPctAuto>, ) -> Self

Sets both minimum width and height of the view.

pub fn min_size_pct(self, min_width: f64, min_height: f64) -> Self

Sets both minimum width and height as percentages of the parent container.

pub fn max_width_full(self) -> Self

Sets the maximum width to 100% of the parent container.

pub fn max_width_pct(self, max_width: f64) -> Self

Sets the maximum width as a percentage of the parent container.

pub fn max_height_full(self) -> Self

Sets the maximum height to 100% of the parent container.

pub fn max_height_pct(self, max_height: f64) -> Self

Sets the maximum height as a percentage of the parent container.

pub fn max_size( self, max_width: impl Into<PxPctAuto>, max_height: impl Into<PxPctAuto>, ) -> Self

Sets both maximum width and height of the view.

pub fn max_size_full(self) -> Self

Sets both maximum width and height to 100% of the parent container.

pub fn max_size_pct(self, max_width: f64, max_height: f64) -> Self

Sets both maximum width and height as percentages of the parent container.

pub fn border_color(self, color: impl Into<Brush>) -> Self

Sets the border color for all sides of the view.

pub fn border(self, border: impl Into<StrokeWrap>) -> Self

Sets the border properties for all sides of the view.

pub fn outline(self, outline: impl Into<StrokeWrap>) -> Self

Sets the outline properties of the view.

pub fn border_horiz(self, border: impl Into<StrokeWrap>) -> Self

Sets border_left and border_right to border

pub fn border_vert(self, border: impl Into<StrokeWrap>) -> Self

Sets border_top and border_bottom to border

pub fn padding_left_pct(self, padding: f64) -> Self

Sets the left padding as a percentage of the parent container width.

pub fn padding_right_pct(self, padding: f64) -> Self

Sets the right padding as a percentage of the parent container width.

pub fn padding_top_pct(self, padding: f64) -> Self

Sets the top padding as a percentage of the parent container width.

pub fn padding_bottom_pct(self, padding: f64) -> Self

Sets the bottom padding as a percentage of the parent container width.

pub fn padding(self, padding: impl Into<PxPct>) -> Self

Set padding on all directions

pub fn padding_pct(self, padding: f64) -> Self

Sets padding on all sides as a percentage of the parent container width.

pub fn padding_horiz(self, padding: impl Into<PxPct>) -> Self

Sets padding_left and padding_right to padding

pub fn padding_horiz_pct(self, padding: f64) -> Self

Sets horizontal padding as a percentage of the parent container width.

pub fn padding_vert(self, padding: impl Into<PxPct>) -> Self

Sets padding_top and padding_bottom to padding

pub fn padding_vert_pct(self, padding: f64) -> Self

Sets vertical padding as a percentage of the parent container width.

pub fn margin_left_pct(self, margin: f64) -> Self

Sets the left margin as a percentage of the parent container width.

pub fn margin_right_pct(self, margin: f64) -> Self

Sets the right margin as a percentage of the parent container width.

pub fn margin_top_pct(self, margin: f64) -> Self

Sets the top margin as a percentage of the parent container width.

pub fn margin_bottom_pct(self, margin: f64) -> Self

Sets the bottom margin as a percentage of the parent container width.

pub fn margin(self, margin: impl Into<PxPctAuto>) -> Self

Sets margin on all sides of the view.

pub fn margin_pct(self, margin: f64) -> Self

Sets margin on all sides as a percentage of the parent container width.

pub fn margin_horiz(self, margin: impl Into<PxPctAuto>) -> Self

Sets margin_left and margin_right to margin

pub fn margin_horiz_pct(self, margin: f64) -> Self

Sets horizontal margin as a percentage of the parent container width.

pub fn margin_vert(self, margin: impl Into<PxPctAuto>) -> Self

Sets margin_top and margin_bottom to margin

pub fn margin_vert_pct(self, margin: f64) -> Self

Sets vertical margin as a percentage of the parent container width.

pub fn padding_left(self, padding: impl Into<PxPct>) -> Self

Sets the left padding of the view.

pub fn padding_right(self, padding: impl Into<PxPct>) -> Self

Sets the right padding of the view.

pub fn padding_top(self, padding: impl Into<PxPct>) -> Self

Sets the top padding of the view.

pub fn padding_bottom(self, padding: impl Into<PxPct>) -> Self

Sets the bottom padding of the view.

pub fn margin_left(self, margin: impl Into<PxPctAuto>) -> Self

Sets the left margin of the view.

pub fn margin_right(self, margin: impl Into<PxPctAuto>) -> Self

Sets the right margin of the view.

pub fn margin_top(self, margin: impl Into<PxPctAuto>) -> Self

Sets the top margin of the view.

pub fn margin_bottom(self, margin: impl Into<PxPctAuto>) -> Self

Sets the bottom margin of the view.

pub fn apply_padding(self, padding: Padding) -> Self

Applies a complete padding configuration to the view.

pub fn apply_margin(self, margin: Margin) -> Self

Applies a complete margin configuration to the view.

pub fn border_radius(self, radius: impl Into<PxPct>) -> Self

Sets the border radius for all corners of the view.

pub fn border_left(self, border: impl Into<StrokeWrap>) -> Self

Sets the left border of the view.

pub fn border_right(self, border: impl Into<StrokeWrap>) -> Self

Sets the right border of the view.

pub fn border_top(self, border: impl Into<StrokeWrap>) -> Self

Sets the top border of the view.

pub fn border_bottom(self, border: impl Into<StrokeWrap>) -> Self

Sets the bottom border of the view.

pub fn border_left_color(self, color: impl Into<Brush>) -> Self

Sets the left border color of the view.

pub fn border_right_color(self, color: impl Into<Brush>) -> Self

Sets the right border color of the view.

pub fn border_top_color(self, color: impl Into<Brush>) -> Self

Sets the top border color of the view.

pub fn border_bottom_color(self, color: impl Into<Brush>) -> Self

Sets the bottom border color of the view.

pub fn border_top_left_radius(self, radius: impl Into<PxPct>) -> Self

Sets the top-left border radius of the view.

pub fn border_top_right_radius(self, radius: impl Into<PxPct>) -> Self

Sets the top-right border radius of the view.

pub fn border_bottom_left_radius(self, radius: impl Into<PxPct>) -> Self

Sets the bottom-left border radius of the view.

pub fn border_bottom_right_radius(self, radius: impl Into<PxPct>) -> Self

Sets the bottom-right border radius of the view.

pub fn apply_border(self, border: Border) -> Self

Applies a complete border configuration to the view.

pub fn apply_border_color(self, border_color: BorderColor) -> Self

Applies a complete border color configuration to the view.

pub fn apply_border_radius(self, border_radius: BorderRadius) -> Self

Applies a complete border radius configuration to the view.

pub fn inset_left_pct(self, inset: f64) -> Self

Sets the left inset as a percentage of the parent container width.

pub fn inset_right_pct(self, inset: f64) -> Self

Sets the right inset as a percentage of the parent container width.

pub fn inset_top_pct(self, inset: f64) -> Self

Sets the top inset as a percentage of the parent container height.

pub fn inset_bottom_pct(self, inset: f64) -> Self

Sets the bottom inset as a percentage of the parent container height.

pub fn inset(self, inset: impl Into<PxPctAuto>) -> Self

Sets all insets (left, top, right, bottom) to the same value.

pub fn inset_pct(self, inset: f64) -> Self

Sets all insets as percentages of the parent container.

pub fn cursor(self, cursor: impl Into<StyleValue<CursorStyle>>) -> Self

Sets the cursor style when hovering over the view.

pub fn color(self, color: impl Into<StyleValue<Color>>) -> Self

Specifies text color for the view.

pub fn background(self, color: impl Into<Brush>) -> Self

Sets the background color or pattern of the view.

pub fn box_shadow_blur(self, blur_radius: impl Into<PxPct>) -> Self

Specifies shadow blur. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.

pub fn box_shadow_color(self, color: Color) -> Self

Specifies color for the shadow.

pub fn box_shadow_spread(self, spread: impl Into<PxPct>) -> Self

Specifies shadow blur spread. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.

pub fn apply_box_shadows( self, shadow: impl Into<SmallVec<[BoxShadow; 3]>>, ) -> Self

Applies a shadow for the stylized view. Use BoxShadow builder to construct each shadow.

use floem::prelude::*;
use floem::prelude::palette::css;
use floem::style::BoxShadow;

empty().style(|s| s.apply_box_shadows(vec![
   BoxShadow::new()
       .color(css::BLACK)
       .top_offset(5.)
       .bottom_offset(-30.)
       .right_offset(-20.)
       .left_offset(10.)
       .blur_radius(5.)
       .spread(10.)
]));

Info

If you only specify one shadow on the view, use standard style methods directly on Style struct:

use floem::prelude::*;
empty().style(|s| s
    .box_shadow_top_offset(-5.)
    .box_shadow_bottom_offset(30.)
    .box_shadow_right_offset(20.)
    .box_shadow_left_offset(-10.)
    .box_shadow_spread(1.)
    .box_shadow_blur(3.)
);

pub fn box_shadow_h_offset(self, h_offset: impl Into<PxPct>) -> Self

Specifies the offset on horizontal axis. Negative offset value places the shadow to the left of the view.

pub fn box_shadow_v_offset(self, v_offset: impl Into<PxPct>) -> Self

Specifies the offset on vertical axis. Negative offset value places the shadow above the view.

pub fn box_shadow_left_offset(self, left_offset: impl Into<PxPct>) -> Self

Specifies the offset of the left edge.

pub fn box_shadow_right_offset(self, right_offset: impl Into<PxPct>) -> Self

Specifies the offset of the right edge.

pub fn box_shadow_top_offset(self, top_offset: impl Into<PxPct>) -> Self

Specifies the offset of the top edge.

pub fn box_shadow_bottom_offset(self, bottom_offset: impl Into<PxPct>) -> Self

Specifies the offset of the bottom edge.

pub fn font_size(self, size: impl Into<Px>) -> Self

Sets the font size for text content.

pub fn font_family(self, family: impl Into<StyleValue<String>>) -> Self

Sets the font family for text content.

pub fn font_weight(self, weight: impl Into<StyleValue<Weight>>) -> Self

Sets the font weight (boldness) for text content.

pub fn font_bold(self) -> Self

Sets the font weight to bold.

pub fn font_style(self, style: impl Into<StyleValue<Style>>) -> Self

Sets the font style (italic, normal) for text content.

pub fn cursor_color(self, color: impl Into<Brush>) -> Self

Sets the color of the text cursor.

pub fn line_height(self, normal: f32) -> Self

Sets the line height for text content.

pub fn pointer_events_auto(self) -> Self

Enables pointer events for the view (allows mouse interaction).

pub fn pointer_events_none(self) -> Self

Disables pointer events for the view (mouse events pass through).

pub fn text_ellipsis(self) -> Self

Sets text overflow to show ellipsis (…) when text is clipped.

pub fn text_clip(self) -> Self

Sets text overflow to clip text without showing ellipsis.

pub fn absolute(self) -> Self

Sets the view to absolute positioning.

pub fn fixed(self) -> Self

Sets the view to fixed positioning relative to the viewport.

This is similar to CSS position: fixed. The view will:

• Be positioned relative to the window viewport
• Use inset properties relative to the viewport
• Have percentage sizes relative to the viewport
• Be painted above all other content

Example

use floem::style::Style;

// Create a full-screen overlay
Style::new().fixed().inset(0.0);

pub fn items_stretch(self) -> Self

Aligns flex items to stretch and fill the cross axis.

pub fn items_start(self) -> Self

Aligns flex items to the start of the cross axis.

pub fn items_center(self) -> Self

Defines the alignment along the cross axis as Centered

pub fn items_end(self) -> Self

Aligns flex items to the end of the cross axis.

pub fn items_baseline(self) -> Self

Aligns flex items along their baselines.

pub fn justify_start(self) -> Self

Aligns flex items to the start of the main axis.

pub fn justify_end(self) -> Self

Aligns flex items to the end of the main axis.

pub fn justify_center(self) -> Self

Defines the alignment along the main axis as Centered

pub fn justify_between(self) -> Self

Distributes flex items with space between them.

pub fn justify_around(self) -> Self

Distributes flex items with space around them.

pub fn justify_evenly(self) -> Self

Distributes flex items with equal space around them.

pub fn hide(self) -> Self

Hides the view from view and layout.

pub fn flex(self) -> Self

Sets the view to use flexbox layout.

pub fn grid(self) -> Self

Sets the view to use grid layout.

pub fn flex_row(self) -> Self

Sets flex direction to row (horizontal).

pub fn flex_col(self) -> Self

Sets flex direction to column (vertical).

pub fn z_index(self, z_index: i32) -> Self

Sets the stack order of the view.

pub fn scale(self, scale: impl Into<Pct>) -> Self

Sets uniform scaling for both X and Y axes.

pub fn apply_opt<T>( self, opt: Option<T>, f: impl FnOnce(Self, T) -> Self, ) -> Self

Allow the application of a function if the option exists. This is useful for chaining together a bunch of optional style changes.

use floem::style::Style;
let maybe_none: Option<i32> = None;
let style = Style::default()
    .apply_opt(Some(5.0), Style::padding) // ran
    .apply_opt(maybe_none, Style::margin) // not ran
    .apply_opt(Some(5.0), |s, v| s.border_right(v * 2.0))
    .border_left(5.0); // ran, obviously

pub fn apply_if(self, cond: bool, f: impl FnOnce(Self) -> Self) -> Self

Allow the application of a function if the condition holds. This is useful for chaining together optional style changes.

use floem::style::Style;
let style = Style::default()
    .apply_if(true, |s| s.padding(5.0)) // ran
    .apply_if(false, |s| s.margin(5.0)); // not ran

pub fn custom<CS: CustomStyle>(self, custom: impl FnOnce(CS) -> CS) -> Self

Applies a CustomStyle type into this style.

Examples

use floem::prelude::*;
text("test").style(|s| s.custom(|s: LabelCustomStyle| s.selectable(false)));

See also: apply_custom, custom_style_class

pub fn apply_custom<CS: Into<Style>>(self, custom_style: CS) -> Self

Applies a CustomStyle type into this style.

Examples

use floem::prelude::*;
text("test").style(|s| s.apply_custom(LabelCustomStyle::new().selectable(false)));

See also: custom, custom_style_class

impl Style

pub fn to_taffy_style(&self) -> TaffyStyle

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() -> Style

Returns the “default value” for a type.

impl From<DropdownCustomStyle> for Style

fn from(val: DropdownCustomStyle) -> Self

Converts to this type from the input type.

impl From<LabelCustomStyle> for Style

fn from(value: LabelCustomStyle) -> Self

Converts to this type from the input type.

impl From<ResizableCustomStyle> for Style

fn from(val: ResizableCustomStyle) -> Self

Converts to this type from the input type.

impl From<ScrollCustomStyle> for Style

fn from(value: ScrollCustomStyle) -> Self

Converts to this type from the input type.

impl From<SliderCustomStyle> for Style

fn from(val: SliderCustomStyle) -> Self

Converts to this type from the input type.

impl From<Style> for DropdownCustomStyle

fn from(val: Style) -> Self

Converts to this type from the input type.

impl From<Style> for KeyFrameStyle

fn from(value: Style) -> Self

Converts to this type from the input type.

impl From<Style> for LabelCustomStyle

fn from(value: Style) -> Self

Converts to this type from the input type.

impl From<Style> for ResizableCustomStyle

fn from(val: Style) -> Self

Converts to this type from the input type.

impl From<Style> for ScrollCustomStyle

fn from(value: Style) -> Self

Converts to this type from the input type.

impl From<Style> for SliderCustomStyle

fn from(val: Style) -> Self

Converts to this type from the input type.

impl From<ToggleButtonCustomStyle> for Style

fn from(value: ToggleButtonCustomStyle) -> Self

Converts to this type from the input type.

impl StyleThemeExt for Style

fn theme(self, theme: DesignSystem) -> Self

fn with_theme(self, f: impl Fn(Self, &DesignSystem) -> Self + 'static) -> Self