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

Details

Attributes of the type as object:

  • css - (string) the name of a css class that will be applied to component's items.
  • height - (number) the height of an item in the component.
  • width - (number) 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).

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

More information about Type Implementation can be found in a separate article of the main documentation.

See also
Back to top