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

Описание

Внимание! Мы настоятельно рекомендуем ознакомиться сначала с 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', 
),