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

MatroseFuchs: Layout Unbound имеет layout system, которая занимается позиционированием блоков, расположенных в одном контейнере по определенным параметрам. Для включения layout system используется атрибут layout=true|false определения element'a. Описание element c атрибутом layout=true эквивалентно def layout Параметры layout'а описываются в style. Пример: Скрытый текст (def element TestView() layout = true (block (style (width = 1024px) (height = 768px) (backgroundColor = 0xff191711) (marginLeft = 200px) ) (tf (style (textColor = 0xffffffff) ) (text = 'SandBox') ) ) ) #or (def layout TestView() (block (style (width = 1024px) (height = 768px) (backgroundColor = 0xff191711) (marginLeft = 200px) ) (tf (style (textColor = 0xffffffff) ) (text = 'SandBox') ) ) )     Позиционирование блоков Layout system'a позиционирует блоки согласно значения свойства position. Position может принимать следующие значения: flow - layout system'а позиционирует вложенные блоки один за другим (положение одного блока зависит от положения предыдущего), по умолчанию position="flow" absolute - layout system'а исключает блок из потока (списка позиционирования). Для позиционирования блоков относительно друг друга при position="flow" можно использовать следующие свойства стиля: paddingLeft / paddingRight / paddingTop / paddingBottom - отступ слева / справа / сверху/ снизу для вложенных блоков. Скрытый текст (def element TestView() layout = true (style (width = 1024px) # ширина элемента (height = 768px) # высота элемента (backgroundColor = 0xff191711) (paddingLeft = 20px) # отступ слева в пикселях для вложенного блока (paddingTop = 10%) # отступ сверху в процентах от текущей высоты для вложенного блока ) # Координаты вложенного блока равны x:20px (paddingLeft родительского блока), y: 768 * 0.1 = 76.8 (10% от высоты родительского блока) (block (style (width = 100px) (height = 100px) (backgroundColor = 0xff0000ff) ) ) # Координаты вложенного блока равны x:20px (paddingLeft родительского блока), y: 76.8 (y-координата блока выше) + 100 (высота блока выше) = 176.8 (block (style (width = 100px) (height = 100px) (backgroundColor = 0xffff0000) ) ) )   Если нужно задать сразу все 4 параметра можно использовать следующую конструкцию: (style (padding = [5, 10, 15, 20]) # [paddingLeft, paddingTop, paddingRight, paddingBottom] )   marginLeft / marginRight / marginTop / marginBottom - отступ слева / справа / сверху/ снизу для текущего блока Скрытый текст (def element TestView() layout = true (style (width = 1024px) (height = 768px) (backgroundColor = 0xff191711) ) # Координаты блока x:10px (marginLeft текущего блока), y:20px (marginTop текущего блока) (block (style (width = 100px) (height = 100px) (backgroundColor = 0xff0000ff) (marginLeft = 10px) (marginTop = 20px) ) ) # Координаты блока x:20px (marginLeft текущего блока), y:20px (y-координата блока выше) + 100px (высота блока выше) + 5px (margineTop текущего блока) = 125px (block (style (width = 50px) (height = 50px) (backgroundColor = 0xffff0000) (marginLeft = 20px) (marginTop = 5px) ) ) )   Если нужно задать сразу все 4 параметра можно использовать следующую конструкцию (style (margin = [5, 10, 15, 20]) # [marginLeft, marginTop, marginright, bottom] ) Примечание: Главное отличие margins от paddings в том, что параметры paddings устанавливаются в родительском блоке и влияют на позиционирование вложенных блоков. Margins же влияют на позиционирование текущего блока.   gap, hgap, vgap - отступ по горизонтали / вертикали между каждым вложенным блоком Скрытый текст (def element TestView() layout = true (style (width = 1024px) (height = 768px) (backgroundColor = 0xff191711) (vgap = 20px) (paddingTop = 40px) (paddingLeft = 40px) ) # Координаты блока x:40px (paddingLeft родительского блока), y: 40px (paddingTop родительского блока) (block (style (width = 20px) (height = 20px) (backgroundColor = 0xffff0000) ) ) # Координаты блока x:40px (paddingLeft родительского блока), y: 40px (y-координата блока выше) + 20px (высота блока выше) + 20px (vgap) = 80px (block (style (width = 30px) (height = 30px) (backgroundColor = 0xff00ff00) ) ) # Координаты блока x:40px (paddingLeft родительского блока), y: 80px (y-координата блока выше) + 30px (высота блока выше) + 20px (vgap) = 130px (block (style (width = 40px) (height = 40px) (backgroundColor = 0xff0000ff) ) ) )   Если отступ между блоками по горизонтали и вертикали одинаковый, то можно использовать параметр gap. Пример использования: Скрытый текст (def element TestView() layout = true (style (width = 1024px) (height = 768px) (backgroundColor = 0xff191711) (paddingLeft = 100px) (paddingTop = 100px) ) # Блок в котором layout system'а располагает элементы по горизонтали друг за другом, если следующий блок не влазит, то блок переносится на ниже. # Ширина блока 80px, суммарная ширина всех вложенных блоков 20px + 30px + 40px = 90px, поэтому третий блок будет расположен ниже остальных. # Параметр gap=10px поэтому, расстояние между блоками по вертикали и горизонтали будет 10px (htile (style (width = 80px) (gap = 10px) (backgroundColor = 0x44ffffff) ) (block (style (width = 20px) (height = 20px) (backgroundColor = 0xffff0000) ) ) (block (style (width = 30px) (height = 30px) (backgroundColor = 0xff00ff00) ) ) (block (style (width = 40px) (height = 40px) (backgroundColor = 0xff0000ff) ) ) ) )   В результате получим: align - позиционирование всех вложенных блоков как единого блока. Может принимать следующие значения: 
left  - выравнивание контента по левому краю
right - выравнивание контента по правому краю
top - выравнивание контента по верхнему краю 
bottom - выравнивание контента по нижнему краю
center - выравнивание контента по центру по горизонтали
middle - выравнивание контента по центру по вертикали Пример выравнивания блока по левому краю: Скрытый текст (def element TestView() layout = true (style (width = 1024px) (height = 768px) (backgroundColor = 0xff191711) (align = "left") ) (block (style (width = 20px) (height = 20px) (backgroundColor = 0xffff0000) ) ) )   Можно использовать несколько значений одновременно разделенных "|". Например если требуется выровнять по центру и по вертикали и по горизонтали. Пример: (align = "center | middle")   Для позиционирования блоков при position="absolute" вышеперечисленные свойства не применяются, нужно использовать следющие: left / right / top / bottom - отступ от левого / правого / верхнего / нижнего края контейнера, в котором находится блок Пример использования: Скрытый текст (def element TestView() layout = true (style (width = 400px) (height = 200px) (backgroundColor = 0xff191711) (align = "center|middle") ) (block (style (width = 20px) (height = 20px) (backgroundColor = 0xffff0000) ) ) # Удаляем из списка позиционирования layout system'ы. Блок имеет координаты x:40px (параметр left текущего блока), y:50px (параметр top текущего блока) (block (style (position = "absolute") (width = 30px) (height = 30px) (left = 40px) (top = 50px) (backgroundColor = 0xff00ff00) ) ) (block (style (width = 40px) (height = 40px) (backgroundColor = 0xff0000ff) ) ) )     В результате получим   hcenter  / vcenter- отступ от центра по горизонтали / по вертикали Скрытый текст (def element TestView() layout = true (style (width = 400px) (height = 200px) (backgroundColor = 0xff191711) ) (block (style (width = 20px) (height = 20px) (backgroundColor = 0xffff0000) ) ) # Удаляем из списка позиционирования layout system'ы. Отступы от центра по вертикали и горизонтали равны 0, поэтому блок расположен точно по центру (block (style (position = "absolute") (width = 30px) (height = 30px) (hcenter = 0px) (vcenter = 0px) (backgroundColor = 0xff00ff00) ) ) (block (style (width = 40px) (height = 40px) (backgroundColor = 0xff0000ff) ) ) )     В результате получим   Примечание: Размер блока у которого параметр position="flow" равны размерам вложенных в него блоков. Размер блока у которого параметр position="absolute" по умолчанию равны 0.