====== Box property syntax ====== ===== Description ===== ==== Attributes ==== The box property is a string made of one or more components, separated by ";". Each component is a box attribute to change (margin, padding, border size, border color, content color). A component is itself a string made of a name and value separated by ":". You may have a look at [[bindings_box#samples|samples]] for a quick introduction before to come back to the reference below. Available component names are: * c : background color * m : margin size * p : padding size * bc : border color * bs : border size Margin, padding, border color and border size can be suffixed with side codes: * l : left side * t : top side * r : right side * b : bottom side These side codes can be combined (for instance lt means left and top, lrb means left, right and bottom). No side code at all means all sides. Order doesn't matter. Border color and background color can also be suffixed with state codes: * n : normal state (unpressed) * s : selected state * f : focused state These codes can be combined too, and no code at all means all states. Order doesn't matter. Attributes are evaluated from left to right. If an attribute is specified several times, all instances are evaluated from the first to the last. ==== Using dynamic values ==== When using dynamic values (variables or JavaScript expressions), the final box property must be a string. As a consequence the expression need to be the concatenation of several strings, for instance: <code>"bsl:"+$bat_level</code> set the left border size to the value given by the battery level. ==== Color codes ==== Colors can be expressed using these notations * 0xaarrggbb : 4 bytes ARGB hexadecimal value prefixed with 0x * #aarrggbb : 4 bytes ARGB hexadecimal value prefixed with # * 12345678 : 4 bytes decimal integer * Color.argb(a, r, g, b) or Color.rgb(r, g, b) : using the Android Color class, where a, r, g, b are color components between 0 and 255. More Color tools are documented here [[http://developer.android.com/reference/android/graphics/Color.html]] ===== Samples ===== ^ Box code ^ Description ^ |c:0xffff0000|Set the background color to red for all states| |cn:0xffff0000|Set the background color to red for the normal state only| |cs:0xffff0000|Set the background color to red for the selected state only| |cns:0xffff0000|Set the background color to red for the normal and selected states| |cnsf:0xffff0000|Set the background color to red for the normal, selected and focused states. this is the same as c:0xffff0000| |m:10;p:15;bs:20|Set margin to 10 pixel, padding to 15 pixels and border size to 20 pixels| |mlr:10;ptb:15;bs:20|Set margin left and right to 10 pixel, padding top and bottom to 15 pixels and all border sizes to 20 pixels| |mlr:10;ptb:15;bs:20;bc:0xff00ff00|Set margin left and right to 10 pixel, padding top and bottom to 15 pixels, all border sizes to 20 pixels and all border colors to green| |mlr:10;ptb:15;bs:20;bcn:0xff00ff00|Set margin left and right to 10 pixel, padding top and bottom to 15 pixels, all border sizes to 20 pixels and all border colors for the normal state to green| |bc:0xffff0000|Set all borders to red| |bclr:0xffff0000|Set left and right borders to red| |bcrl:0xffff0000|Set left and right borders to red (order of suffixes doesn't matter)| |bclrn:0xffff0000|Set left and right borders to red only for the normal state| |bclrtbnsf:0xffff0000|Same as bc:0xffff0000| |"bslr:"+($ll_second%10)+";bc:0xffff0000"|Set the left and right border size to the modulo 10 of the current second (value increase by 1 each second from 0 up to 9), and set the border color to red| |"bslr:"+($ll_second%10)+";bc:"+Color.rgb(50*($ll_second%5), 0, 0)|Set the left and right border size to the modulo 10 of the current second (value increase by 1 each second from 0 up to 9), and set the border color to a value varying between black and red| |"bslr:"+($ll_second%10)+";bc:"+Color.rgb(50*(animate('$ll_second')%5), 0, 0)|Set the left and right border size to the modulo 10 of the current second (value increase by 1 each second from 0 up to 9), and smoothly change the border color to a value varying between black and red|
