Документация для разработчиков
Темная тема

Собственные стили нод

Описание

Внимание! Мы настоятельно рекомендуем ознакомиться сначала с REST-документацией модуля Сайты, чтобы понять как модуль функционирует (тем более REST доступен и в коробочной версии). Данную документацию рассматривайте как подспорье при работе в коробке, когда вам действительно мало функционала REST, или вы хотите детальнее разобраться в API.

В манифесте описан ключ style и приведены группы стилей, которые вы можете назначать той или иной ноде. В коробочной версии есть возможность его расширять.

Внутри вашего пространства блоков создайте файл .style.php. Обратите внимание, это не переопределение существующих стилей, это именно их дополнение. Рекомендуется дополнять стили по мере необходимости и если они только действительно отсутствуют в штатной поставке.

Содержимое файла является массивом из двух секций:

return [
   'style' => [
      //
   ],
   'group' => [
      //
   ]
];

Рассмотрим каждую из них подробнее. За полноценным примером вы всегда можете обратиться к коробочной версии файла по пути /bitrix/blocks/bitrix/.style.php.

Секция style

Элементы этого массива как раз то, что вы видите в интерфейсе изменения дизайна блоков. Содержит ключи и их значения, где ключи не играют роли, а значения являются массивами:

  • name – название свойства
  • property – css-свойство, согласно спецификации, на которое влияет данный контрол
  • type – тип свойства (как он будет отображен в интерфейсе)
  • items – список значений свойства (с которыми происходит работа в интерфейсе)

Тут стоит напомнить, что архитектурно мы не меняем атрибут style в ноде при изменении какого-либо свойства, описанного в таких манифестах. Мы меняем лишь атрибут class, добавляя или удаляя css-класс. И интерфейс сможет работать только с перечисленными в манифесте css-классами.

Рассмотрим на примере. Вот массив css-свойства font-family.

'font-family' => array(
   'name' => Loc::getMessage('LANDING_BLOCK_STYLE_FONT_FAMILY'),
   'property' => 'font-family',
   'type' => 'list',
   'items' => array(
      array('name' => 'Open Sans', 'value' => 'g-font-open-sans'),
      array('name' => 'Helvetica', 'value' => 'g-font-helvetica'),
      array('name' => 'Montserrat', 'value' => 'g-font-montserrat'),
      array('name' => 'Roboto', 'value' => 'g-font-roboto'),
      array('name' => 'Roboto Slab', 'value' => 'g-font-roboto-slab'),
      array('name' => 'PT Sans', 'value' => 'g-font-pt-sans'),
      array('name' => 'PT Sans Narrow', 'value' => 'g-font-pt-sans-narrow'),
      array('name' => 'PT Sans Caption', 'value' => 'g-font-pt-sans-caption'),
      array('name' => 'Cormorant Infant', 'value' => 'g-font-cormorant-infant'),
      array('name' => 'Alegreya Sans', 'value' => 'g-font-alegreya-sans'),
      array('name' => 'Lobster', 'value' => 'g-font-lobster'),
      array('name' => 'Menlo', 'value' => 'g-font-code'),
   )
),

Как видите, это просто массив допустимых шрифтов, которые могут быть отображены в интерфейсе. И если пользователь в интерфейсе выберет, например, Roboto Slab, то в ноду добавится css-класс g-font-roboto-slab, а другие классы из данного свойства будут удалены.

Естественно, в стилевом файле шаблона должны быть определены css-классы, которые перечисляются в таких массивах.

Как следствие из всего вышесказанного, массив items это массив массивов формата [name=визуальное отображение, value=сохраняемый класс].

Далее будут перечислены системные style-типы.

buttons – кнопки, стиль кнопки отрисовывается за счет html-кода, сохраняемого в ключе name

array('name' => '<span class="landing-ui-align landing-ui-align-center"><em></em></span>', 'value' => 'text-center'),

slider – ползунок, как правило, это что-либо числовое, в name содержатся допустимые значения

array('name' => '14', 'value' => 'g-font-size-14'),

list – выпадающий список значений

array('name' => 'Roboto Slab', 'value' => 'g-font-roboto-slab'),

palette – палитра, выводятся перечисленные классы в их цветовом исполнении (предполагается, что каждый класс отвечает за определенный цвет)

array('name' => 'g-color-white-opacity-0_5', 'value' => 'g-color-white-opacity-0_5'),

Секция group

Как правило, на ноду можно влиять группой css-свойств. Например, у блока можно поменять не только отступы, но и добавить тень, поменять фон. В общем, все то, что присуще блочным элементам. Поэтому, в типах стилевых нод указывается не одно из значений выше, а одна из групп (или массив групп), перечисленных ниже.

Например, вы решили создать новый тип typo-shadow со своим специфичным набором css-свойств. Тогда ключ group будет выглядеть так

'group' => array(
   'typo-shadow' => array(
      'color', 'font-size', 'text-shadow'
   ),
)

И теперь в манифесте уже блока вы сможете указывать данный стилевой тип, чтобы у него появились перечисленные css-свойства:

'.landing-block-node-title' => array(
    'name' => 'Заголовок',
    'type' => 'typo-shadow', 
),


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2021, «1С-Битрикс», 2021
Наверх