Unbound 2.0 (документация)

MatroseFuchs: Styles and CSS Общее описание Блоки поддерживают настройку параметров layout'а через style. Каждый блок обладает своим набором параметров стиля. Настройка стиля у блока tf: (tf (style (fontSize = 32) (textColor = 0xFFFFFFFF) ) (text = 'Hello world!!!') ) Настройка стиля у блока block: (block (style (backgroundColor = 0xffff0000) (width = 100px) (height = 100px) ) ) Настройка стиля у блока mc: Скрытый текст (mc 'Window_BG' (style (width=100) (height=50) ... ) )     Стили можно описывать в отдельном определении. И передавать как параметр в блок в свойство class. (def element TestView() layout = true (block (class BlockStyle) ) ) (def css BlockStyle() (backgroundColor = 0xffff0000) (width = 100px) (height = 100px) ) Значение для свойства class может быть вычислено в выражении, таким образом можно стилизовать блоки в зависимости от условий. Скрытый текст (def element TestView() layout = true (scope (event onClick) (var switcher:bool = false) (bind switcher "!switcher" init=false watch=false (event "onClick")) ) (block (bind class "switcher ? 'BlockStyle_1' : 'BlockStyle_2'") ) (element ButtonPrimary (scope (label = 'change style') ) (dispatch onClick on='click') ) ) (def css BlockStyle_1() (backgroundColor = 0xffff0000) (width = 100px) (height = 100px) ) (def css BlockStyle_2() (backgroundColor = 0xff00ff00) (width = 120px) (height = 130px) (alpha = 0.5) )     Если к блоку будет применено несколько стилей с одинаковыми свойствами, то последующие будут перезаписывать значения предыдущих. Важен порядок применения. (block (class BlockStyle_1) (class BlockStyle_2) ) Примечание: Но если изменить свойство стиля непосредственно в style и передать css как параметр с тем же свойством. То порядок расположения применения стилей не важен. Блок style выполнится последним. Скрытый текст (def element TestView() layout = true (block (style (backgroundColor = 0xffff0000) (width = 100px) (height = 100px) ) (class BlockStyle_2) ) ) (def css BlockStyle_2() (backgroundColor = 0xff00ff00) (width = 120px) (height = 130px) (alpha = 0.5) )     Таблица стилей Виды блоков: базовые блоки: tf, mc, image, text_input. контейнер-блоки (наследуются от базового блока): block (и все алиасы hblock, vtile, gtile, reverse, hreverse), list, view_holder, slider, scroll_bar, progress. scrollArea.   свойство аналог css кто поддерживает свойство принимаемые значения пример возможных значений width width все блоки number, %, px 10px; 10% minWidth min-width все блоки number, %, px 100px; 50% maxWidth max-width все блоки number, %, px 100px; 50% height height все блоки number, %, px 10px; 10% minHeight min-height все блоки number, %, px 100px; 50% maxHeight max-height все блоки number, %, px 100px; 50% position position все блоки absolute, flow absolute left left все блоки number, %, px 10px; 10% right right все блоки number, %, px 10px; 10% top top все блоки number, %, px 10px; 10% bottom bottom все блоки number, %, px 10px; 10% center смещение от центра все блоки number, %, px -170 hcenter смещение от центра по горизонтали все блоки number, %, px 10px; 10% vcenter смещение от центра по вертикали все блоки number, %, px 10px; 10% marginLeft margin-left все блоки number, %, px 10px marginRight margin-right все блоки number, %, px 10px marginTop margin-top все блоки number, %, px 10px marginBottom margin-bottom все блоки number, %, px 10px paddingLeft padding-left контейнер-блоки number, %, px 10px paddingRight padding-right контейнер-блоки number, %, px 10px paddingTop padding-top контейнер-блоки number, %, px 10px paddingBottom padding-bottom контейнер-блоки number, %, px 10px padding padding контейнер-блоки number, %, px 10px backgroundColor background-color контейнер-блоки 0xARGB 0x1000ff00 backgroundImage background-image контейнер-блоки str, 'url: {url}', 'bitmap: {linkage}', 'symbol: {linkage}' backgroundImage = 'url:..\\icons\\ico.png' backgroundSize background-size background-repeat контейнер-блоки fill; crop; cover; repeat; autosize backgroundSize = "crop" flow flex-direction контейнер-блоки Flow.HORISONTAL, Flow.VERTICAL, Flow.TILE_HORIZONTAL, Flow.TILE_VERTICAL flow = "Flow.HORISONTAL" align justify-content align-items контейнер-блоки left, right, bottom, top, center, middle align = "middle|right" alpha opacity все блоки number от 0 до 1 1; 0; 0.4 fontSize font-size tf number 36 leading междустрочный интервал tf number   letterSpacing letter-spacing tf number 2 fontFamily font-family tf str   textColor color tf 0xRGB 0xCFC7A8 textAlign text-align tf left; right; center textAlign = "center" multiline white-space tf bool true; false ubScaleX transform: scaleX() все блоки number изменяет scale блока по горизонтали 1.25 ubScaleY transform: scaleY() все блоки number изменяет scale блока по вертикали 1.25 rotation поворот блока если его позиция absolute все блоки с позицией absolute number (значения угла поворота в градусах) (style (rotation = 30) ) pivotX нулевая точка по X используется для поворота, скейла, абсолютной позиции все блоки с позицией absolute number, %, px (style (pivotX = 50%) ) или (style (pivotX = 100px) ) pivotY нулевая точка по Y используется для поворота, скейла, абсолютной позиции все блоки с позицией absolute number, %, px (style (pivotY = 10%) ) или (style (pivotY = 20px) ) scaleX масштаб по оси X может быть отрицательным, применяется к блоку и его чайлдам все блоки double (style (scaleX = 1.2) ) scaleY масштаб по оси Y может быть отрицательным, применяется к блоку и его чайлдам все блоки double (style (scaleY = -1.0) )                                                                                                                                                                                                                     BackgroundSize (def element NationFlagsSmall () layout=true (style (bind backgroundImage "'url:../nation_flags/small/flag_USA.png'" init=false) (backgroundSize = "fill") (width = 117) (height = 72) ) ) cover - растягиваем текстуру по размеру контейнера с сохранением пропорций текстуры, чтобы она заполняла всю площадь, с обрезанием текстуры за пределами контейнера. crop - обрезаем изображение по размеру контейнера. fill - растягиваем изображение по размеру контейнера без сохранения пропорций. align - позиционируем изображение по центру контейнера с обрезанием текстуры за пределами контейнера.