type

an object that specifies items presentation

object|string 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

TimeLine: Templates

Details

Attributes of the type as object:

css - (string) the name of a css class that will be applied to component items.
height - (number, string) the height of an item in the component.
width - (number, string) the width of the items list.
template - (function, string) an HTML template that will define item presentation in the component.
templateValue - (function, string) defines data presentation for time points names.
templateDate - (function, string) defines data presentation for dates.
templateDetails - (function, string) defines data presentation for detailed information.
type (string) - sets the position of TimeLine elements relative to the axis:
- "left" (default) - date is arranged on the left, values and details are arranged on the right;
- "right" - date is arranged on the right, values and details are arranged on the left;
- "alternate" - elements are arranged alternately, starting from the left to the right.
lineColor (string, function) - defines color of line segments. You can set the same color for all the axis (string) or define different colors for certain segments (function).

Horizontal Layout

If Timeline has the horizontal layout (layout: "x"), type property accepts one of the following values:

"top" (default) - date is above the axis, values and details are below the axis;
"bottom" - date is below the axis, values and details are arranged on the top;
"alternate" - top/bottom positions alternate (one after another).

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

Named 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

Adjsuting items to their contents

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#",
  }
}

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.