4.2 KiB
Style Tags Overview
Style Overview
This document describes how style tags can be specified, how they affect your widgets, and how to use specific built-in style tags in otclient, as well as how to define new custom style tags.
Style Value Types
{valhead:Integer} Integer number, used by most of style proprieties
Examples:
- 1
- 9
- 5
{valhead:Float} Float number
Examples:
- 1.0
- 9
- 1.5
{valhead:String} String containing a text
Examples:
- this is a string
- it doesn't need quotes or escaping
{valhead:Boolean} Value with two states, true or false
Examples:
- true
- false
{valhead:Size} Size type, defined by 2 integers, width followed by height
size: width height
Examples:
- 10 20
- 30 10
{valhead:Rect}
Rect type, defined by 4 integers
rect: x y width height
Examples:
- 0 0 32 32
- 10 20 30 40
{valhead:Color}
{valhead:Image}
{valhead:Font}
UIWidget
{taghead:rect Rect} Defines widget's rect
Examples:
!!!plain
rect: 32 32 32 32
See also: {tag:pos}, {tag:size}
{taghead:size Size} Defines size of a widget in pixels
Examples:
!!!plain
size: 32 32
{taghead:width Integer} Defines width of a widget
{taghead:height Integer} Defines height of a widget
{taghead:pos Point} Defines absolute position of the widget relative to the window top left, this is generialy not used, if you want to position relative to parent widget, use anchors and margins
Examples:
!!!plain
pos: 32 32
{taghead:x Integer} Defines x absolute position
See also: {tag:pos}
{taghead:y Integer} Defines y absolute position
See also: {tag:pos}
{taghead:color Color} Foreground color, mostly used for coloring texts
Examples:
!!!plain
color: red
color: #ff0000
color: #ff000080
{taghead:background Color} Same as {tag:background-color}
{taghead:background-color Color} Defines background color
{taghead:background-rect Rect} {taghead:background-offset Point} {taghead:background-offset-x Integer} {taghead:background-offset-y Integer} {taghead:background-size Size} {taghead:background-width Integer} {taghead:background-height Integer}
{taghead:icon Image} {taghead:icon-source Image} {taghead:icon-color Color} {taghead:icon-offset-x Integer} {taghead:icon-offset-y Integer} {taghead:icon-offset Point} {taghead:icon-width Integer} {taghead:icon-height Integer} {taghead:icon-size Size} {taghead:icon-rect Rect} {taghead:opacity Float} {taghead:enabled Boolean} {taghead:visible Boolean} {taghead:checked Boolean} {taghead:dragable Boolean} {taghead:on Boolean} {taghead:focusable Boolean} {taghead:phantom Boolean} {taghead:fixed-size Boolean} {taghead:clipping Boolean} {taghead:border Integer} {taghead:border-width Integer} {taghead:border-width-top Integer} {taghead:border-width-right Integer} {taghead:border-width-bottom Integer} {taghead:border-width-left Integer} {taghead:border-color Color} {taghead:border-color-top Color} {taghead:border-color-right Color} {taghead:border-color-bottom Color} {taghead:border-color-left Color} {taghead:margin-top Integer} {taghead:margin-right Integer} {taghead:margin-bottom Integer} {taghead:margin-left Integer} {taghead:margin Integer} {taghead:padding-top Integer} {taghead:padding-right Integer} {taghead:padding-bottom Integer} {taghead:padding-left Integer} {taghead:padding Integer} {taghead:layout Layout}
{taghead:image-source} {taghead:image-offset-x Integer} {taghead:image-offset-y Integer} {taghead:image-offset Point} {taghead:image-width Integer} {taghead:image-height Integer} {taghead:image-size Size} {taghead:image-rect Rect} {taghead:image-clip Rect} {taghead:image-fixed-ratio Boolean} {taghead:image-repeated Boolean} {taghead:image-smooth Boolean} {taghead:image-color Color} {taghead:image-border-top Integer} {taghead:image-border-right Integer} {taghead:image-border-bottom Integer} {taghead:image-border-left Integer} {taghead:image-border Integer}
{taghead:text} {taghead:text-align Align} {taghead:text-offset Point} {taghead:text-wrap Boolean} {taghead:text-auto-resize Boolean} {taghead:font Font}
UITextEdit
{taghead:text-margin} {taghead:always-active} {taghead:shift-navigation} {taghead:multiline} {taghead:max-length}