Skip to content

RCSS: Decorators: Nine Patch

Victor Luchits edited this page Jan 8, 2018 · 8 revisions

The 'ninep' decorator works like a 'tiled-box' decorator but takes a single image as input.

ninep-src

Property Comment
Value: <string>
Initial: not defined
Percentages: N/A

This property defines the name (and, for file sources, the relative path) of the source image.

ninep-coords-top, ninep-coords-right, ninep-coords-bottom, ninep-coords-left

Property Comment
Value: <number> | <px>
Initial: not defined
Percentages: N/A

Offsets to the center part of texture from the corresponding edge. Use 'px' to specify an absolute offset in pixels.

ninep-size-top, ninep-size-right, ninep-size-bottom, ninep-size-left

Property Comment
Value: <number>
Initial: auto
Percentages: N/A

Negative sizes make the dimensions be calculated from the centre, not the edges.

Usage example:

button {
    ninep-decorator: ninepatch;
    ninep-src: /ui/baseui/gfx/controls/button_purple;
    ninep-coords: 0.125 0.125 0.125 0.125;
    ninep-size: 4dp 4dp 4dp 4dp;
}