Свойство alignSelf задано в элементе IElement. IGroup наследует это свойство, так как является потомком IElement. Поэтому рассмотрим использование этого свойства на примере IElement. IGroup ведет себя точно также.
Использование свойства alignSelf расплагает элемент в одну из девяти позиций:
по вертикали: top, center, bottom;
по горизонтали: left, center, right.
Если не задано свойство positionAbsolute, то располагает элемент в соответствующей позиции, захватывая все оставшееся свободное пространство. При этом сам элемент не растягивается.
ПРИМЕР 1: Первый элемент имеет свойство alignSelf = AlignSelf.topRight.
IForm
IElement
alignSelf = AlignSelf.topRight
IElement
IElement
IElement
IElement
ПРИМЕР 2: Второй элемент имеет свойство alignSelf = AlignSelf.bottomRight.
Свойство positionAbsolute также как и свойство alignSelf задано в элементе IElement. IGroup наследует это свойство, так как является потомком IElement. Поэтому рассмотрим использование этих свойств на примере IElement. IGroup ведет себя точно также.
Если задано свойство positionAbsolute = true, то задание свойства alignSelf также располагает элемент в одну из девяти позиций, однако это не влияет на расположение остальных элементов.
ПРИМЕР 3: Первый элемент имеет следующие значения свойств alignSelf = AlignSelf.bottomRight и positionAbsolut = true.
Свойство alignItems указывает как выравнивать элементы. Выравнивание происходит поперек главной оси флекс контейнера. Рассмотрим на примере группы, где мы можем изменять направление главной оси флекс контейнера свойством IGroup.grouping. Для элементов IElement, IDataElement и других направление главной оси флекс контейнера горизонтально. Для IContextElement и его наследников направление главной оси флекс контейнера задается свойством menuPosition (по умолчанию вертикально).
Использование свойства alignItems зависит от значения свойства grouping.
Если grouping = Grouping.horizontal, то выравнивание происходит по вертикали, если grouping = Grouping.vertical, то выравнивание происходит по горизонтали. Т.е. все наоборот.
ПРИМЕР 7: У IForm (IForm наследник IGroup) свойство grouping = Grouping.vertical, а свойство alignItems = AlignItems.right || alignItems = AlignItems.end.
IForm
IElement Первый
IDataElement
IElement
IElement
IContextElement Последний Важный
ПРИМЕР 8: У IForm (IForm наследник IGroup) свойство grouping = Grouping.horizontal, а свойство alignItems = AlignItems.end.
Свойство justifyContent указывает как выравнивать элементы группы. Выравнивание происходит вдоль главной оси флекс контейнера. Рассмотрим на примере группы, где мы можем изменять направление главной оси флекс контейнера свойством IGroup.grouping. Для элементов IElement, IDataElement и других направление главной оси флекс контейнера горизонтально. Для IContextElement и его наследников направление главной оси флекс контейнера задается свойством menuPosition (по умолчанию вертикально).
Использование свойства justifyContent зависит от значения свойства grouping.
Если grouping = Grouping.horizontal, то выравнивание происходит по горизонтали, если grouping = Grouping.vertical, то выравнивание происходит по вертикали.
ПРИМЕР 9: У IForm (IForm наследник IGroup) свойство grouping = Grouping.vertical, а свойство justifyContent = JustifyContent.end.
IForm
IElement Первый
IDataElement
IElement
ПРИМЕР 10: У IForm (IForm наследник IGroup) свойство grouping = Grouping.horizontal, а свойство justifyContent = JustifyContent.center.
IForm
IElement Первый
IDataElement
IElement
ПРИМЕР 11: У IForm (IForm наследник IGroup) свойство grouping = Grouping.horizontal, а свойство justifyContent = JustifyContent.spaceBetween.
Выравнивание группы
IGroupи его элементов зависит от следующих свойств объекта typescript:Для выравнивания Элемента и его содержимого используются свойства:
Содержание:
Использование свойства alignSelf
Свойство
alignSelfзадано в элементеIElement.IGroupнаследует это свойство, так как является потомкомIElement. Поэтому рассмотрим использование этого свойства на примереIElement.IGroupведет себя точно также.Использование свойства
alignSelfрасплагает элемент в одну из девяти позиций:Если не задано свойство positionAbsolute, то располагает элемент в соответствующей позиции, захватывая все оставшееся свободное пространство. При этом сам элемент не растягивается.
ПРИМЕР 1:
Первый элемент имеет свойство alignSelf = AlignSelf.topRight.
alignSelf = AlignSelf.topRight
ПРИМЕР 2:
Второй элемент имеет свойство alignSelf = AlignSelf.bottomRight.
IElement
alignSelf = AlignSelf.bottomRight
Использование свойства alignSelf и positionAbsolute
Свойство positionAbsolute также как и свойство alignSelf задано в элементе
IElement.IGroupнаследует это свойство, так как является потомкомIElement. Поэтому рассмотрим использование этих свойств на примереIElement.IGroupведет себя точно также.Если задано свойство
positionAbsolute = true, то задание свойстваalignSelfтакже располагает элемент в одну из девяти позиций, однако это не влияет на расположение остальных элементов.ПРИМЕР 3:
Первый элемент имеет следующие значения свойств alignSelf = AlignSelf.bottomRight и positionAbsolut = true.
alignSelf = AlignSelf.bottomRight
Использование свойства grouping
Свойство grouping выравнивает элементы группы по вертикали или горизонтали.
ПРИМЕР 4:
У IForm (IForm наследник IGroup) свойство grouping = Grouping.vertical.
ПРИМЕР 5:
У IForm (IForm наследник IGroup) свойство grouping = Grouping.horizontal.
ПРИМЕР 6:
У IForm (IForm наследник IGroup) свойство grouping = Grouping.horizontal.
А обе группы имеют grouping = Grouping.vertical.
Использование свойства alignItems
Свойство alignItems указывает как выравнивать элементы. Выравнивание происходит поперек главной оси флекс контейнера.
Рассмотрим на примере группы, где мы можем изменять направление главной оси флекс контейнера свойством IGroup.grouping.
Для элементов IElement, IDataElement и других направление главной оси флекс контейнера горизонтально.
Для IContextElement и его наследников направление главной оси флекс контейнера задается свойством menuPosition (по умолчанию вертикально).
Использование свойства
alignItemsзависит от значения свойства grouping. Еслиgrouping = Grouping.horizontal, то выравнивание происходит по вертикали, еслиgrouping = Grouping.vertical, то выравнивание происходит по горизонтали. Т.е. все наоборот.ПРИМЕР 7:
У IForm (IForm наследник IGroup) свойство grouping = Grouping.vertical,
а свойство alignItems = AlignItems.right || alignItems = AlignItems.end.
ПРИМЕР 8:
У IForm (IForm наследник IGroup) свойство grouping = Grouping.horizontal,
а свойство alignItems = AlignItems.end.
Первый
Последний
Важный
Использование свойства justifyContent
Свойство justifyContent указывает как выравнивать элементы группы. Выравнивание происходит вдоль главной оси флекс контейнера.
Рассмотрим на примере группы, где мы можем изменять направление главной оси флекс контейнера свойством IGroup.grouping.
Для элементов IElement, IDataElement и других направление главной оси флекс контейнера горизонтально.
Для IContextElement и его наследников направление главной оси флекс контейнера задается свойством menuPosition (по умолчанию вертикально).
Использование свойства
justifyContent зависитот значения свойства grouping. Еслиgrouping = Grouping.horizontal, то выравнивание происходит по горизонтали, еслиgrouping = Grouping.vertical, то выравнивание происходит по вертикали.ПРИМЕР 9:
У IForm (IForm наследник IGroup) свойство grouping = Grouping.vertical,
а свойство justifyContent = JustifyContent.end.
ПРИМЕР 10:
У IForm (IForm наследник IGroup) свойство grouping = Grouping.horizontal,
а свойство justifyContent = JustifyContent.center.
Первый
ПРИМЕР 11:
У IForm (IForm наследник IGroup) свойство grouping = Grouping.horizontal,
а свойство justifyContent = JustifyContent.spaceBetween.
Первый