an object that specifies items presentation
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
});
If Timeline has the horizontal layout (layout: "x"), type property accepts one of the following values:
webix.ui({
view:"timeline",
type:{
type:"bottom"
},
data:time_data
});
Related sample: TimeLine: Horizontal Layout and Type
It is possible to create a type object separately and then refer to it by its name:
webix.type(webix.ui.dataview,{
name:"typeA",
width: 260,
height: 90
});
webix.ui({
view:"dataview",
type:"typeA"
});
Related sample: Named Templates
You can define height: "auto" and width: "auto" (for horizontal Timeline) to adjust the items to their contens. It comes handy when items contain different amount of data.
{
view:"timeline",
layout:"y",
type:{
type:"alternate",
lineColor:"skyblue",
// items will be adjusted to their contents
height: "auto",
templateValue:"#value#",
}
}
Related sample: Timeline: Items Autoheight
If there is a particular item that needs to be adjusted you can provide the $height:auto or $width:auto fields right in its data object:
var timeline_data = [
// this item will be adjusted to its content
{ id:11, $height: "auto", value:"Very long text...", date:"2014-10-28" },
{ id:12, value: "Another item", date:"2016-05-01"},
];
More information about Type Implementation can be found in a separate article of the main documentation.