Создание собственных на TJML

Вы можете создать и загрузить собственные блоки, используя TJML framework. 
Чтобы загрузить собственные ассеты, выберите в Pixcraft Builder в панели библиотеки блоков My Assets и нажмите upload

Структура файла собственных блоков

Файл на языке фреймворка для загрузки блоков должен иметь следующую структуру:

<tj-ui>
	<m-body>
	
		<m-assets>
			<m-asset><!-- Код блока --></m-asset>
			...
			<m-asset data-title="Название ассета" data-tags="Шапка, логотип, светный"><!-- Код блока --></m-asset>
			...
			<m-asset advanced><!-- Код блока --></m-asset>
		</m-assets>
	
	</m-body>
</tj-ui>

между <m-assets> и </m-assets> необходимо разместить блоки, обернутые в <m-asset></m-asset>. Количество ассетов (блоков) не ограничено. Для упрощения поиска можно задать название ассета в атрибуте data-title. А также можно указать перечень тегов для поиска в атрибуте data-tags, написав их через запятую.

По умолчанию, в блоке пользователь сможет редактировать:

• весь текст (m-text), его стилизацию и ссылки;
• заменять изображения (src) у m-img;
• прописывать ссылки на изображения (href) у m-img;
• указывать альтернативный текст у изображений (alt) у m-img;
• менять текст на кнопках (m-button);
• менять ссылки на кнопках (href) у m-button.

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

Расширенные блоки

Чтобы более тонко настраивать какие параметры должны быть редактируемыми у блока, необходимо добавлять его как расширенный. Для этого необходимо добавить атрибут advanced тегу m-asset.

Для расширенных блоков по-умолчанию никакие свойства не доступны для редактирования, доступен лишь текст(m-text) и текст на кнопках (m-button). 
Но любое свойство можно сделать таковым. для этого нужно добавить желаемый атрибут с префиксом m-, например:

<m-wrap padding="10px" m-padding="wrap"><!-- Код --></m-wrap>

По-умолчанию у блока будут отступы 10px с каждой стороны, но значение можно будет отредактировать через панель свойств.

значения свойства в примере указано как wrap - это позволяет связать свойства однотипных элементов внутри блока, указав им одно и тоже значение, например:

<m-boxes>
	<m-box>
		<m-wrap bgcolor="#cccccc" m-bgcolor="box"><!-- Код --></m-wrap>
	</m-box>
	<m-box>
		<m-wrap bgcolor="#cccccc" m-bgcolor="box"><!-- Код --></m-wrap>
	</m-box>
</m-boxes>

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

Управление структурой

В расширенных блоках можно добавлять элементы, которые будут управляться через раздел структуры. Для этого используйте атрибут m-if, а в качестве значения - укажите текст, который будет отображаться в структуре, например:

<m-row>
	<m-column m-if="vk">
		<m-img href="#" src="img/vk.png" width="30" height="30"></m-img>
	</m-column>
	<m-column m-if="fb">
		<m-img href="#" src="img/fb.png" width="30" height="30"></m-img>
	</m-column>
	<m-column m-if="ok">
		<m-img href="#" src="img/ok.png" width="30" height="30"></m-img>
	</m-column>
</m-row>