Компонент GridContainer

Основы
PDF

GridContainer — компонент разметки, который позволяет настроить расположение нескольких элементов последовательно на сетке. Элементы могут изменять размер в зависимости от контента. Построен на базе CSS Grid Layout.

Подробно о Grid Layout читайте в статье Основные понятия Grid Layout.

Cвойства 

@Input rows, columns

Определяет ширину и высоту колонки сетки макета.

Возможные значения
Константа Размер колонки задается целочисленным значением.

Пример настройки свойств columns и rows приведен ниже.

Пример настройки свойств columns и rows
{
    ...
    "columns": [
        "298px",
        "minmax(64px, 1fr)"
    ],
    "rows": "minmax(max-content, 32px)",
    ...
}

Свойства CSS Grid Layout, которые не поддерживает компонент GridContainer:

  • grid-line-name — именованные линии.
  • fit-content() — ограничивает ширину колонки. Представляет собой формулу min(max-content, max(auto, argument)), которая вычисляется, как свойство auto (т. е. minmax(auto, max-content)). Размер поля ограничен значением параметра argument, если он больше минимального значения, заданного в свойстве auto. В Creatio при любом заданном значении свойства fit-content() создается одна колонка шириной 32px.
  • repeat() — повторяющийся фрагмент перечня строк, который в компактной форме позволяет записать строки с повторяющимся шаблоном.
@Input justifyItems

Выравнивание по горизонтали. Указывает как браузер распределяет пространство между и вокруг элементов контента вдоль строчной оси grid-контейнера.

Возможные значения
start Выравнивание элементов внутри блока по левому краю.
end Выравнивание элементов внутри блока по правому краю.
center Выравнивание элементов внутри блока по центру.
stretch Выравнивание элементов внутри блока по ширине.

Пример настройки свойства justify-items приведен ниже.

Пример настройки свойства justify-items
.container {
    justify-items: start | end | center | stretch;
}
@Input alignItems

Выравнивание по вертикали. Выравнивание элементов внутри блока вдоль соответствующей оси.

Возможные значения
start Выравнивание элементов внутри блока по верхнему краю.
end Выравнивание элементов внутри блока по нижнему краю.
center Выравнивание элементов внутри блока по центру.
stretch Выравнивание элементов внутри блока по ширине.

Пример настройки свойства align-items приведен ниже.

Пример настройки свойства align-items
.container {
    align-items: start | end | center | stretch;
}
@Input gap

Задает отступы между элементами grid-контейнера в столбцах и строках. Является сокращением для свойств row-gap (отступ между элементами строки) и column-gap (отступ между элементами столбца).

Результат настройки свойств row-gap и column-gap приведен ниже.

Результат настройки свойств row-gap и column-gap
.container {
    grid-template-columns: 100px auto;
    grid-template-rows: 80px 60px;
    column-gap: 40px;
    row-gap: 20px;
}

Результат отображения представлен на рисунке ниже.

@Input padding

Задает внутренние отступы для контейнера. Может настраиваться как для каждой стороны отдельно, так и для всех сторон одновременно. Может принимать число, строку и возможные значения, которые приведены ниже.

Возможные значения
none Внутренний отступ отсутствует.
small Маленький размер отступа.
medium Средний размер отступа.
large Большой размер отступа.

Пример настройки свойства padding приведен ниже.

Пример настройки свойства padding
"padding": {
    "top": "6px",
    "right": 6,
    "bottom": "small",
    "left": "large"
}
@Input border-radius

Задает радиус скругления углов для контейнера. Может настраиваться как для каждой стороны отдельно, так и для всех сторон одновременно. Может принимать число, строку и возможные значения, которые приведены ниже.

Возможные значения
none Скругление углов отсутствует.
small Маленький радиус скругления углов.
medium Средний радиус скругления углов.
large Большой радиус скругления углов.

Пример настройки свойства border-radius приведен ниже.

Пример настройки свойства border-radius
"borderRadius": "medium"
@Input color

Задает цвет контейнера. В качестве значения принимает код цвета.

Пример настройки свойства color приведен ниже.

Пример настройки свойства color
"color": "#FDAB06"

Пример использования 

Пример использования компонента GridContainer в схеме представлен ниже.

Пример использования компонента GridContainer в схеме
"name": "GridContainer",
"values": {
    "layoutConfig": {...},
    "type": "crt.GridContainer",
    "columns": [
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)",
        "minmax(32px, 1fr)"
    ],
    "rows": "minmax(max-content, 32px)",
    "gap": {
        "columnGap": "large"
    },
    "items": []
}
...
{
    "operation": "insert",
    "name": "Button",
    "values": {
        "layoutConfig": {
            "column": 1,
            "row": 1,
            "colSpan": 3,
            "rowSpan": 1
        },
        "type": "crt.Button",
        "caption": "#ResourceString(Button_caption)#",
        "color": "default",
    },
    "parentName": "GridContainer",
    "propertyName": "Items",
    "index": 0
}