Struct Style 

pub struct Style {

    pub background: Option<Color>,
    pub gradient: Option<Gradient>,
    pub shadow: Option<Shadow>,
    pub color: Option<Color>,
    pub font: Option<Font>,
    pub padding: Option<Padding>,
    pub radius: Option<f32>,
    pub border: Option<Border>,
    pub opacity: Option<f32>,
    pub clip: Option<bool>,
    pub width: Option<f32>,
    pub height: Option<f32>,
    pub translate: Option<Point>,
    pub scale: Option<f32>,
    pub rotate: Option<f32>,
    pub origin: Option<Point>,
    pub transition: Option<Transition>,
}

How a widget looks. Every field is optional, and an unset field falls back to the widget’s default: no background, black text in Font::DEFAULT, no padding, square corners, no border, fully opaque.

Text takes color and font from the nearest widget that sets them, starting with itself and going up. Nothing else inherits.

font, padding, clip, width and height change the layout; the other fields only change how the widget is painted.

translate, scale, rotate and origin move the widget and everything inside it where it is drawn and where the pointer finds it, without moving anything else: the layout, and popups anchored to the widget, keep its box where it was laid out.

use crabshell_ui::{Color, Font, Style};

const BAR: Style = Style::new()
    .background(Color::rgb(0x1e, 0x1e, 0x2e))
    .color(Color::hex("#cdd6f4"))
    .font(Font::new("Inter", 13.0));
const WS: Style = Style::new().padding(2, 8).radius(4.0);
const WS_FOCUSED: Style = WS.background(Color::rgb(0x45, 0x47, 0x5a));

Fields

background: Option<Color>

Fills the widget’s rectangle.

gradient: Option<Gradient>

Colors blending across the widget’s rectangle, over the background.

shadow: Option<Shadow>

A shadow under the widget’s box.

color: Option<Color>

The text color, inherited by Text.

font: Option<Font>

The text font, inherited by Text.

padding: Option<Padding>

Space between the edge and the content.

radius: Option<f32>

The corner radius in logical pixels.

border: Option<Border>

A border inside the edge.

opacity: Option<f32>

From 0.0 (invisible) to 1.0 (opaque), applied to the widget and everything inside it.

clip: Option<bool>

Whether the children are cut to the inside of the border, following the rounded corners, like CSS’s overflow: hidden.

width: Option<f32>

The width in logical pixels, instead of what the content needs.

height: Option<f32>

The height in logical pixels, instead of what the content needs.

translate: Option<Point>

How far the widget is moved, right and down, in logical pixels, after it is scaled and turned.

scale: Option<f32>

How many times its size it is drawn, around origin. 0 draws nothing, and a negative scale also turns it upside down.

rotate: Option<f32>

How many degrees it is turned clockwise, around origin.

origin: Option<Point>

The point it is scaled and turned around, as fractions of its box: (0, 0) is the top-left corner, and the default (0.5, 0.5) the middle.

transition: Option<Transition>

How a change to the paint fields fades in: background, gradient, shadow, color, border, radius, opacity and the transform. Other fields change at once.

Implementations

impl Style

pub const fn new() -> Style

A style that sets nothing.

pub const fn background(self, color: Color) -> Style

Sets the background color.

pub const fn gradient(self, gradient: Gradient) -> Style

Sets a gradient, drawn over the background.

pub const fn shadow(self, shadow: Shadow) -> Style

Sets a shadow under the box.

pub const fn color(self, color: Color) -> Style

Sets the text color.

pub const fn font(self, font: Font) -> Style

Sets the text font.

pub const fn padding(self, vertical: u32, horizontal: u32) -> Style

Sets the padding: vertical above and below, horizontal left and right, in logical pixels.

pub const fn padding_top(self, top: u32) -> Style

Sets the padding above the content, in logical pixels, keeping the other sides this style sets, or 0 where it sets none. As with every field, merge takes the whole padding of the style on top, so a hover style built from Style::new() sets the rest to 0.

use crabshell_ui::Style;

const PILL: Style = Style::new().padding(2, 8).padding_left(12);

pub const fn padding_right(self, right: u32) -> Style

Sets the padding right of the content, keeping the other sides, as padding_top does.

pub const fn padding_bottom(self, bottom: u32) -> Style

Sets the padding below the content, keeping the other sides, as padding_top does.

pub const fn padding_left(self, left: u32) -> Style

Sets the padding left of the content, keeping the other sides, as padding_top does.

pub const fn radius(self, radius: f32) -> Style

Sets the corner radius in logical pixels.

pub const fn border(self, width: f32, color: Color) -> Style

Sets a border of width logical pixels.

pub const fn opacity(self, opacity: f32) -> Style

Sets the opacity, from 0.0 to 1.0.

pub const fn clip(self, clip: bool) -> Style

Sets whether the children are cut to the inside of the border, following the rounded corners. Nothing is cut by default.

pub const fn width(self, width: f32) -> Style

Sets the width in logical pixels, instead of what the content needs.

pub const fn height(self, height: f32) -> Style

Sets the height in logical pixels, instead of what the content needs.

pub const fn translate(self, x: f32, y: f32) -> Style

Moves the widget and everything inside it x logical pixels right and y down where it is drawn, after it is scaled and turned. The layout doesn’t move.

use crabshell_ui::Style;

const HIDDEN: Style = Style::new().translate(0.0, -40.0);

pub const fn scale(self, scale: f32) -> Style

Draws the widget and everything inside it scale times its size, around its origin, without changing the layout. 0 draws nothing and is never under the pointer; a negative scale also turns it upside down. A number that isn’t finite is ignored.

pub const fn rotate(self, degrees: f32) -> Style

Turns the widget and everything inside it degrees clockwise, around its origin, without changing the layout. A number that isn’t finite is ignored.

pub const fn origin(self, x: f32, y: f32) -> Style

Sets the point the widget is scaled and turned around, as fractions of its box: (0.0, 0.0) is the top-left corner, (1.0, 1.0) the bottom-right. The default is the middle, (0.5, 0.5).

pub const fn transition(self, transition: Transition) -> Style

Sets how a change to the paint fields fades in, as when a hover style takes over: background, gradient, shadow, color, border, radius, opacity, translate, scale, rotate and origin move over transition. The style being changed to says how.

pub const fn merge(self, over: Style) -> Style

This style with every field that over sets replaced by its value. Buttons use it to lay their hover and pressed styles over the normal one.

pub fn clips(&self) -> bool

Whether the children are cut to the widget’s box.

Trait Implementations

impl Clone for Style

fn clone(&self) -> Self

Returns a duplicate of the value.

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

Performs copy-assignment from source.

impl Copy for Style

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 IntoProp<Style> for Style

fn into_prop(self) -> Prop<Style>

Wraps the value or closure.

impl PartialEq for Style

fn eq(&self, other: &Self) -> bool

Equality operator ==.

fn ne(&self, other: &Rhs) -> bool

Inequality operator !=.

impl StructuralPartialEq for Style