home chevron_right
Параметры: контейнер, фон, маска, анимации, условия показа, адаптивность

Ключевые параметры simai:sf.grid: тип контейнера, фоны строк/колонок, маска/оверлей, отступы/поля, анимации, порядок строк/колонокlink

В simai:sf.grid параметры устроены “плоским” массивом, где логика разбита на уровни: глобальные параметры компонента → параметры строки → параметры колонки → параметры area-слота. За счёт этого один и тот же механизм одинаково работает и для “крупных” областей (header/footer/sidebar/main), и для внутренних секций страницы.

Контейнер и «ширина» секции в реальной конфигурации чаще всего задаются комбинацией флагов строки:

  • ROW_{i}_FULLWIDTH — строка во всю ширину (Y/N)
  • ROW_{i}_USE_CONTAINER — использовать контейнер внутри строки (Y/N)
  • модификаторы строки/обёрток: ROW_{i}_CONTAINER_MODIFIER, ROW_{i}_WRAP_MODIFIER, ROW_{i}_ROW_MODIFIER

Практически это означает: “fluid/fixed” в SF4 обычно выражается не отдельным параметром, а сочетанием FULLWIDTH + USE_CONTAINER и CSS-модификаторов контейнера/обёртки (что именно за классы — задаёт проект).

Фоны и визуальные эффекты строки оформляются как “расширенный фон” строки:

  • ROW_{i}_BACKGROUND_ADVANCED (Y/N)

  • и набор конкретных значений, которые могут задавать картинку/видео/цвет/градиент/тему и эффекты:

    • ROW_{i}_BACKGROUND_IMAGE
    • ROW_{i}_BACKGROUND_IMAGE_FILL
    • ROW_{i}_BACKGROUND_BLUR
    • ROW_{i}_BACKGROUND_VIDEO_URL
    • ROW_{i}_BACKGROUND_GRADIENT
    • ROW_{i}_BACKGROUND_COLOR
    • ROW_{i}_BACKGROUND_THEME

Отдельного “параметра маски” с явным названием (например *_MASK_*) в подтверждённых паттернах параметров не найдено в локальных данных. На практике оверлей/маска обычно достигаются либо градиентом, либо theme-параметром, либо через *_MODIFIER (класс, который включает нужный оверлей в CSS).

Анимации в паттернах параметров представлены как минимум общим переключателем:

  • ANIMATE_MODE (Y/N)

Детализация “какая именно анимация” обычно уезжает либо в модификаторы строк/областей, либо в параметры конкретных блоков (если блок поддерживает анимации сам). Если у вас есть отдельные параметры анимации на строке/колонке (кроме модификаторов) — это требует уточнения/подтверждения примером из ваших view.

Порядок строк можно задавать явно:

  • ROW_ORDER — строка индексов, например "2,0,1" (перестановка строк без изменения их описаний)

Это удобно, когда конфигурация строки “живёт” долго, а порядок нужно быстро менять настройкой/представлением.

Ниже пример “скелета” параметров, где видно: контейнер, фон строки, отступы через модификатор, порядок строк и базовая структура row/col/area:

<?php
declare(strict_types=1);

$APPLICATION->IncludeComponent(
    'simai:sf.grid',
    '.default',
    [
        'BLOCK_SECTION' => 'main',
        'EXPERT_MODE'   => 'Y',
        'ANIMATE_MODE'  => 'Y',
        'ROW_ORDER'     => '0',

        'ROW_COUNT'         => '1',
        'ROW_0_NAME'        => 'Основной блок',
        'ROW_0_ACTIVE'      => 'Y',
        'ROW_0_FULLWIDTH'   => 'Y',
        'ROW_0_USE_CONTAINER' => 'N',
        'ROW_0_ROW_MODIFIER'  => 'py-5',

        'ROW_0_BACKGROUND_ADVANCED' => 'Y',
        'ROW_0_BACKGROUND_COLOR'    => '#f8f9fa',
        'ROW_0_BACKGROUND_GRADIENT' => 'linear-gradient(...)',

        'ROW_0_COL_COUNT'           => '1',
        'ROW_0_COL_0_ADAPTIVE'      => 'Y',
        'ROW_0_COL_0_WIDTH_XL'      => '12',
        'ROW_0_COL_0_AREA_COUNT'    => '1',
        'ROW_0_COL_0_AREA_0_TEMPLATE' => 'page.title',
    ],
    false
);

Условия показа: по устройствам/брейкпоинтам, по условиям, скрытие элементовlink

В SF4 есть два основных практических механизма “показа/скрытия”.

1) Условия строки по значению свойства (условная сборка view) Строка может включаться не только флагом ROW_{i}_ACTIVE, но и условием, завязанным на значение свойства/настройки:

  • ROW_{i}_USE_CONDITION (Y/N)
  • ROW_{i}_CONDITION_PROPERTY — код свойства (например, из site/section/page/user уровня)
  • ROW_{i}_CONDITION_COMPARISON — операция сравнения
  • ROW_{i}_CONDITION_VALUE — ожидаемое значение

Это хорошо сочетается с вашей моделью наследования настроек: одно и то же представление может показывать/скрывать строки по-разному в разных разделах/страницах, если там переопределены свойства.

Пример:

'ROW_2_USE_CONDITION'        => 'Y',
'ROW_2_CONDITION_PROPERTY'   => 'show_banner_main',
'ROW_2_CONDITION_COMPARISON' => '==',
'ROW_2_CONDITION_VALUE'      => 'Y',

2) Скрытие по брейкпоинтам через ширины колонок На уровне колонок задаются ширины для XL/LG/MD/SM/XS. Для скрытия используется значение "0" на конкретном брейкпоинте:

  • ROW_{i}_COL_{j}_WIDTH_MD => "0" (скрыть на MD)
  • ROW_{i}_COL_{j}_WIDTH_SM => "0" (скрыть на SM)
  • и т.д.

Это самый “прямой” и стабильный способ спрятать колонку на определённых размерах без необходимости поддерживать отдельные show/hide параметры.

Плюс есть модификаторы колонки/обёртки area:

  • ROW_{i}_COL_{j}_MODIFIER
  • ROW_{i}_COL_{j}_AREA_WRAP_MODIFIER

Через них можно навесить любые bootstrap-классы или классы SF4-утилит, если проект так делает.

Адаптивность: ширины колонок на брейкпоинтах, стекируемость, show/hide per breakpointlink

Адаптивность в гриде выражается двумя уровнями:

1) Флаг адаптивности колонки

  • ROW_{i}_COL_{j}_ADAPTIVE = 'Y'|'N'

Он определяет, будет ли колонка управляться набором ширин по брейкпоинтам (XL/LG/MD/SM/XS) или работать в более простом режиме (зависит от реализации компонента и шаблона).

2) Набор ширин по брейкпоинтам

  • ROW_{i}_COL_{j}_WIDTH_XL|LG|MD|SM|XS (значения строками "0"…"12")

Типовой паттерн:

  • на больших экранах делим строку на 8/4, 9/3 и т.п.
  • на меньших — переводим основную колонку в 12, а второстепенную скрываем (0) или тоже делаем 12, чтобы “стекалась”.

Пример (правая колонка скрыта на MD/SM/XS):

'ROW_4_COL_0_WIDTH_XL' => '8',
'ROW_4_COL_1_WIDTH_XL' => '4',

'ROW_4_COL_0_WIDTH_MD' => '12',
'ROW_4_COL_1_WIDTH_MD' => '0',

Источники параметров/паттернов: где смотреть актуальные ключи и как не ошибиться при сборкеlink

Чтобы не гадать по “легендам” и не расходиться с реальной реализацией, опирайтесь на три практических источника внутри проекта:

  1. Описание параметров компонента /bitrix/components/simai/sf.grid/.parameters.php — здесь видно, какие параметры реально существуют, как называются и какие группы включаются в зависимости от режима.

  2. Сборка и обработка параметров /bitrix/components/simai/sf.grid/component.php — именно тут видно, какие ключи читаются, как применяются ROW_ORDER, условия строк, адаптивность, и как формируется структура row/col/area.

  3. Сохранённые представления областей в проекте {site_dir}/simai.data/grid/view/.../template.php — это ваша “живая документация”: файлы содержат готовые IncludeComponent(...) с реальными наборами ключей, которые уже работают на сайте.