Template

Справочник по API

Обзор

Компонент Template выглядит как нередактируемая область для отображения простого текста или отдельной записи данных.

Содержимое компонента задается с помощью одноименного свойства template.

Инициализация

Ниже представлен пример кода для создания простого темплейта:

var template = webix.ui({
  view: "template",
  template: "Default template with some text inside"
});

Не обязательно указывать тип view для темплейта.

var template = webix.ui({
  template: "Default template with some text inside"
});

Основные свойства

template - (string/function) темплейт компонента.
content - (id|HTMLElement) ID или HTML-элемент, содержимое которого будет помещено в компонент.
height - (number) задает высоту полосы прокрутки.
width - (number) задает ширину компонента.
autoheight - (boolean) позволяет компоненту подстраиваться под размеры содержимого.
scroll - (boolean/string) включает/отключает полосу прокрутки. Свойство может принимать следующие значения:
- "y" (или true) - включает вертикальный скрол (значение по умолчанию);
- "x" - включает горизонтальный скрол;
- "xy" - включает оба скрола;
- false - выключает оба скрола.

Простой темплейт

Свойство template определяет содержимое компонента:

webix.ui({
  view: "template",
  template: "Default template with some text inside" // текст
});

Related sample: Default Template

Внешний темплейт

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

с помощью свойства content, которое ссылается на видимый контейнер:

<div id="myDiv">Default Template with some text inside</div>

webix.ui({
  view: "template",
  content: "myDiv"
});

Related sample: Default Template

с помощью свойства template, которое указывает на ID контейнера, с префиксом "html->". Контейнер должнен быть изначально скрыт:

<div id="my_box1" style='display:none;'>Some text here</div>

{ template: "html->my_box1", autoheight: true },

Related sample: Autosizing to Content

В результате содержимое из HTML будет помещено в компонент.

Загруженный Template

{ view: "template", src: "loadtext.php" }

Одноименное свойство компонента - template также используется в других компонентах данных библиотеки Webix. Оно позволяет задавать шаблоны для отображения текста, выводить вместе элементы из нескольких наборов данных, и определять их внешний вид. Подробнее в специальной статье.

Содержимое темплейта

Содержимое темплейта задается с помощью свойства template, которое может быть:

обычным текстом:

{ template: "Plain text" }

текстом с HTML разметкой:

{template: "Text with <b>HTML</b> markup" }

отдельным элементов данных, заданным с помощью свойства data:

{ template: "#title#", data: { title: "Image One", src: "imgs/image001.jpg" } }
// показывает "Image One"

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

используя template как строку, содержащую ключ данных между символами #, чтобы определить какие именно поля данных должны быть отображены;
используя template как функцию, которая принимает запись данных (obj) в качестве параметра:

{
  data: {title: "Image One", src: "imgs/image001.jpg" },
  template: function (obj) {
    // obj - это объект записи данных
    return '<img src="'+obj.src+'"/>'
  }
}

Related sample: Carousel Initialization

Подробнее о правилах работы с темплейтами данных в отдельной статье документации.

Динамическое изменение текста темплейта

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

изменить текст или содержимое HTML темплейта с помощью метода setHTML;
метод define используется во многих компонентах для сброса значений свойств;
метод setValues, который позволяет определять темплейт данных;
метод setContent, который может установить содержимое существующего HTML-элемента как значение темплейта.

Типы темплейтов

Default

Темплейт типа "Default" - это нередактируемое белое поле с текстом или содержимым HTML, окруженное серой границей.

{ view: "template", template: "Text" }

Clean

У темплейта с типом clean нет границ и отступов.

{ view: "template", template: "Text", type: "clean"}

Header

Темплейт с типом header используется для задания хедеров лейаутам (rows/columns). Внешний вид хедера зависит от скина.

webix.ui({
  rows: [
    { view: "template", template: "Header Template", type: "header" },
    { view: "...", ... }
  ]
});

Обратите внимание что хедеры для accordionitems задаются по другому.

Темная тема

Для скинов Material или Mini вы можете изменять внешний вид хедера, используя настройку css:"webix_header webix_dark":

Template Dark Theme

{ 
    view: "template", 
    template: "Header Template",
    css:"webix_header webix_dark"      }

Section

Темплейт с типом section помещает хедер между двумя горизонтальными линиями, позволяя аккуратно разделить веб-страницу на блоки. Поскольку этот тип уже содержит границу, можно убрать остальные границы для этого лейаута.

{view: "template", template: "Header template", type: "section" }

Related sample: Template Types

Наверх