Module pixel_widgets::style[−][src]

Expand description

Styling system Style in pixel-widgets is either defined in .pwss (pixel-widgets stylesheets) files or in code. The file variant uses a format that is syntactically similar to CSS.

How to use styles

Styles can be loaded or created when building your Ui, as Ui::new accepts a TryInto<Style> argument. Usually, you’ll pass a StyleBuilder here. The StyleBuilder has functionality to define styles and to load .pwss files.

.pwss example

column {
    align-horizontal: center;
}
button {
    background: #444;
    padding: 5;
}
button:hover {
    background: #666;
}
button:pressed {
    background: #222;
}
button:hover > text {
    color: #f00;
}
text {
    text-size: 24;
}

This example sets a few properties on some of the widgets. Just try it out with the examples in the examples directory and see for yourself what the effect is.

Syntax

Each pwss file contains a collection of rules. Rules are a group of declarations that are applied to selected widgets.

Rules

A selector has the following format:

<selector> <selector> ... {
    <property>: <value>;
    <property>: <value>;
    ...
}

The first line expects some selectors. These will be used to apply the rule to the desired widgets. Entering multiple selectors like in this example will look for a button inside a column inside a window.

window column button {
    background: @button.png;
}

Selectors

This table describes the supported selectors

selector	example	description
`*`	`*`	selects all widgets
`widget`	`text`	selects all text widgets
`.class`	`.fancy`	selects all widgets that have the class “fancy”
`.. widget`	`.fancy text`	selects all text widgets that are a descendant of a “fancy” classed widget
`>widget`	`.fancy > text`	selects all text widgets that are a direct child of a “fancy” classed widget
`+widget`	`.fancy + text`	selects all widgets that follow directly after a “fancy” classed widget
`~widget`	`.fancy ~ text`	selects all widgets that follow after a “fancy” classed widget
`:state`	`button:hover`	selects all buttons that are hovered by the mouse
`:nth-child(n)`	`text:nth-child(2)`	selects text widgets that are the third child of their parent
`:nth-last-child(n)`	`text:nth-last-child(2)`	selects text widgets that are the third child of their parent, counted from the last widget
`:nth-child(odd)`	`text:nth-child(odd)`	selects text widgets that are an odd child of their parent
`:nth-child(even)`	`text:nth-child(even)`	selects text widgets that are an even child of their parent
`:not(selector)`	`button:not(:pressed)`	selects button widgets that are not pressed
`:only-child`	`column > *:only-child`	selects the only child of a column when the column has only one child

Properties

The interior of a rule consists of a number of declarations. These declarations are what specifies style. A declaration starts with a property, and each property has it’s own associated format. Take a look at the table to see what properties exist.

key	description	format
`width`	widget width	size
`height`	widget height	size
`background`	Background for the widget that full covers the layout rect	background
`padding`	Amount of padding to use on each side of the content	rectangle
`padding-left`	Amount of padding to use on the left side of the content	number
`padding-right`	Amount of padding to use on the right side of the content	number
`padding-top`	Amount of padding to use on the top side of the content	number
`padding-bottom`	Amount of padding to use on the bottom side of the content	number
`margin`	Amount of margin to use on each side of the widget	rectangle
`margin-left`	Amount of margin to use on the left side of the widget	`number
`margin-right`	Amount of margin to use on the right side of the widget	number
`margin-top`	Amount of margin to use on the top side of the widget	number`
`margin-bottom`	Amount of margin to use on the bottom side of the widget	number
`font`	Font to use for text rendering	url
`color`	Color to use for foreground drawing, including text	color
`text-size`	Size of text	number
`text-wrap`	Wrapping strategy for text	textwrap
`layout-direction`	Layout direction for widgets that support it	direction
`align-horizontal`	how to align children horizontally	align
`align-vertical`	how to align children vertically	align

Value syntax

Type	Syntax	Notes
color	`#rgb` `#rgba` `#rrggbb` `#rrggbbaa`	Examples: `#fff` `#ff00ff`
url	`"filename"`	An url in between quotes `"image.png"` `"font.ttf"`
number	floating point literal	A number, such as `2.0` or `42`
background	`<url>` `<color>` `image(<url>, <color>)` `patch(<url>, <color>)` `none`	If a url ends with `.9.png` it will be resolved 9 patch. If your 9 slice doesn’t end with `.9.png`, use `patch`.
rectangle	`<num>` `<num> <num>` `<num> <num> <num>` `<num> <num> <num> <num>`	`all sides` `top/bottom`, `right/left` `top`, ht/left`,` bottom`<br>`top`,` right`,` bottom`,` left`
textwrap	`no-wrap` `wrap` `word-wrap`
size	`<number>` `fill(<number>)` `exact(<number>)` `shrink`	Just a number resolves to `exact`
direction	`top-to-bottom` `left-to-right` `right-to-left` `bottom-to-top`
align	`begin` `center` `end`

Modules

builder

Style building tools

Structs

Style

Container for all styling data.

Stylesheet

A fully resolved stylesheet, passed by reference to Widget::draw. Contains the resolved values of all possible style properties.

Enums

Declaration

A style property and it’s value

Error

Errors that can be encountered while loading a stylesheet

Selector

A selector that selects widgets that match some property.

SelectorWidget

Widget name as used in a Selector.

StyleState

Widget states