Перейти к содержимому
MatroseFuchs

[UB2] Стили и CSS

Автор: MatroseFuchs, в Unbound 2

В этой теме 1 комментарий

Рекомендуемые комментарии

MatroseFuchs
5 274
[LESTA]

MatroseFuchs

Разработчик
1 414 публикации
7 730 боёв
Опубликовано:

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)
)
visualOffsetX

Смещает DisplayObject, но не влияет на рассчет layout'а родителя

все блоки number, %, px

100px; 50%

visualOffsetY

Смещает DisplayObject, но не влияет на рассчет layout'а родителя

все блоки number, %, px

100px; 50%

visualScaleX

Масштаб по оси X

Может быть отрицательным, применяется к блоку и его чайлдам

Не влияет на расчет layout'а родителя

все блоки double

(style 

    (visualScaleX = 1.2)
)
visualScaleY

Масштаб по оси Y

может быть отрицательным, применяется к блоку и его чайлдам

не влияет на расчет layout'а родителя

все блоки double

(style 

    (visualScaleX = 1.2)
)
borderRadius

Cкругляет все углы блока для отрисовки с заданным радиусом.

Работает для backgroundColor и backgroundImage.
Выдаёт ошибку для scale9grid! 


 

Принимает массив значений:

  •  topLeft, topRight, bottomLeft, bottomRight
  •  left, right
  • value - применится ко всем углам
  • topLeft, right, bottomLeft

не влияет на расчет layout'а родителя

все блоки number, %, px

(style 

    (borderRadius = [10, 20, 30, 40])
    (borderRadius = [20, 10])
    (borderRadius = [10])
)

borderRadiusTopLeft,

borderRadiusTopRight,

borderRadiusBottomLeft,

borderRadiusBottomRight

Скругляет соответствующий угол блока для отрисовки с заданным радиусом.

Работает для backgroundColor и backgroundImage.
Выдаёт ошибку для scale9grid!

не влияет на рассчет layout'а родителя

все блоки number, %, px

(style 

    (borderRadiusTopLeft=10px)
    (borderRadiusTopRight=10px)
    (borderRadiusBottomLeft=10px)
    (borderRadiusBottomRight=10px)
)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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 - позиционируем изображение по центру контейнера с обрезанием текстуры за пределами контейнера.

 

BackgroundRepeatX и BackgroundRepeatY 

(block
    (style
        (width = 42) (height = 42)
        (backgroundImage = 'url:../service_kit/icons/icon_warning_red.png')
        (backgroundRepeatX = true)
        (backgroundRepeatY = false)
    )
)

Повторение изображение по горизонтали и/или вертикали. По-умолчанию отключено.

 

substitute

substitute - метод textblock'а, который позволяет заменять подстроки на картинки. 

init=true - обязательный аргумент 

(tf
    (class $TextDefault19NM)
    (bindcall substitute imageOffset="_frameTextCount"
                        substitutionMap={'[test_icon]' : 'icon_ground_radar_ally' }
                        sourceText='radar: [test_icon] mouse: [KEY_LEFTMOUSE]'
                        postfix='_bg'
                        init=true
    )
)

 

Outline

Возможность задать стиль обводки для текста.

 

Внимание! 

Нельзя использовать для большого числа разнообразного по размеру текста - быстро заполняется текстура с глифами и будет влиять на производительность.
Нежелательно применять анимацию со scale к такому тексту - могут быть артефакты и др.
(tf
    (class $TextDefault)
    (style
        (outlineColor = 0x08222A) #цвет обводки
        (outlineAlpha = 0.4) #прозрачность обводки
        (outlineThickness = 1) #толщина обводки
        (outlineScaled = false) #влияет ли скейл на толщину обводки. При анимации скейла текста всегда выставлять в false
    )
     
    (text = 'The quick brown fox jumps over the lazy dog. 1234567890?!-+')
)

 

scale9grid

набор параметров идентичен background9Slice в unbound1 

(def element TestElement() layout=true
    (mc wows_logo
        (style
            (width = "500")
            (height = "500")
            (scale9grid = "rect(30)")
        )
    )
)

 

 

  • Плюс 2

Рассказать о публикации

Ссылка на публикацию
Гость
Эта тема закрыта для публикации новых ответов.
Перейти к списку тем Unbound 2
×