Header is a blue section above the main contents of a component or layout row/column.
Depending on the context, header is defined in two ways:
Related sample: Window with a Component Inside
This way of header initialization is used within layout rows and columns. Here header is just one of template types.
If you want to make a header for, say, dataview, make two rows and place header in the first row while the dataview should be in the second one.
Type:"header"
webix.ui({
rows:[
{ view:"template", template:"some text", type:"header" }, //1st row
{ ....} //2nd row
]
});
BTW, another template type, namely section, allows for setting a specific header that looks like a thin line that encircles the component and has a heading above.
Type:"section"
{ view:"template", template:"some text", type:"section" }
During header initialization the view:template line is optional.
Related sample: Template Types
Still, some components have built-in means of header building.
Accordion item is divided into body and header
{ view:"accordionitem", header:"Pane ", body:"text' }
Headers of tabview tabs are defined as header properties of tabview cells:
{ view:"tabview",
cells:[
{
header:"List",
body:{
view:"list", ...
}
}
]
}
Related sample: Tabview: Basic Initialization
Property sheet looks like a grid with sections separated by blue headers. In essence, any line without data becomes header, the heading text being defined by label property.
{ label:"Layout" }, //header
{ label:"Width", type:"text", id:"width"}, //line with data
Related sample: Property Sheet: Basic Initialization
UI-related window features header defined by its head property.
Back to top