type

объект с настройками отображения элементов

Example

webix.ui({
    view:"timeline", width:500,
    type:{
      type:"right",
      lineColor:"orange",
      templateValue:"Some #value#",
      templateDate:function(obj){
        return webix.i18n.longDateFormatStr(obj.date);
      }
    },
    data:time_data
});

Related samples

Свойства объекта type:

• css - (string) имя css-класса, который будет присвоен элементам компонента (по умолчанию имя 'default')
• height - (number, string) высота элементов
• template - (function, string) html-темплейт, который определяет вид и содержимое элементов
• width - (number, string) ширина элементов
• templateValue - (function, string) задает главные подписи для элементов.
• templateDate - (function, string) задает отображение дат
• templateDetails - (function, string) задает дополнительные подписи для элементов
• type (string) - задает положение элементов TimeLine относительно оси:
  • "left" (по умолчанию) - даты слева, главная и дополнительная подписи справа
  • "right" - даты справа, главная и дополнительная подписи слева
  • "alternate" - положения чередуются.
• lineColor (string, function) - задает цвет сегментов компонента. Можно задать один цвет для всех (string) или определить разные цвета для каждого сегмента (function).

Горизонтальный Timeline

В случае горизональной раскладки Timeline (layout: "x"), свойство type принимает одно из следующих значений:

• "top" - значение по умолчанию. Дата отображается над осью, значения и детали под осью
• "bottom" - дата отображается под осью, значения и детали над осью
• "alternate" - top/bottom positions alternate (one after another).

webix.ui({
    view:"timeline",
    type:{
       type:"bottom"
    },
    data:time_data
});

Related sample:  TimeLine: Horizontal Layout and Type

Создание своих типов

Вы можете создавать свои типы для элементов:

webix.type(webix.ui.timeline,{
    name:"typeA",
  width: 260,
  height: 90
});
 
webix.ui({
  view:"timeline",
    type:"typeA"
});

Related sample:  Named Templates

Как подстроить элементы под их содержимое

Высоте и ширине (в случае горизонтальной раскладки) элементов можно задать значение "auto". В этом случае размеры элементов подстроятся под их содержимое. Функциональность будет весьма кстати в случаях, когда у элементов разный объём данных.

{
  view:"timeline",
  layout:"y",
  type:{
    type:"alternate",
    lineColor:"skyblue",  
    // элементы подстроятся под своё содержимое
    height: "auto",
    templateValue:"#value#",
  }
}

Related sample:  Timeline: Items Autoheight

Если вам необходимо подогнать какой-то конкретный элемент, добавьте поле $height:auto или $width:auto в его объект данных.

var timeline_data = [
  // элемент ниже подстроится под своё содержимое
  { id:11, $height: "auto", value:"Very long text...", date:"2014-10-28" },
  { id:12, value: "Another item", date:"2016-05-01"},
];

Более подробную информацию о type можно найти в отдельной статье.

Наверх