Intermediate

Как добавлять хедеры компонентам

Хедер, это светло-голубая секция сверху основного содержимого компонента или лейаута.

В зависимости от ситуации, хедер можно задать одним из двух способов:

как тип темплейта;
как свойство компонента.

Хедер как тип темплейта

Такой способ инициализации хедера используется внутри рядов и столбцов лейаута. В этом случае хедер - один из типов темплейта

Если вы хотите задать хедер для DataView, укажите два ряда и поместите хедер в первый. DataView будет находиться во втором.

Type:"header"

webix.ui({
    rows:[
        { view:"template", template:"some text", type:"header" }, // первый ряд
        { ....} // второй ряд
    ]
});

Другой тип - section - создаёт хедер с тонкой линией и заголовком над основным содержимым компонента.

Type:"section"

{ view:"template", template:"some text", type:"section" }

При инициализации хедера указывать view:template необязательно.

Related sample: Template Types

Хедер как свойство компонента

У некоторых компонентов есть встроенные инструменты для указания хедера.

Элементы Accordion включают body и header

{ view:"accordionitem", header:"Pane ", body:"text" }

Хедеры вкладок TabView задаются как свойства клеток TabView:

{ view:"tabview", 
  cells:[
    {
      header:"List",
      body:{
        view:"list", ...
      }
    }
  ]
}

Таблица Property это сетка с двумя колонками, которые разделены хедерами. По сути, любая строка кода без данных становится хедером, текст которого задаёт свойство label.

 { label:"Layout" }, // хедер
 { label:"Width", type:"text", id:"width"}, // строка с данными

У window хедер задаётся свойством head.

Как добавить кнопки в хедер

Так как хедер - это темплейт, вы можете добавить ему только HTML кнопки. Если вы хотите добавить кнопки хедеру компонента, лучшим решением будет использовать компонент Toolbar:

webix.ui({
  view:"toolbar", 
  cols:[
    { view:"label", label:"Projects", width:400,},
    { view:"button", value:"Load" },
    { view:"button", value:"Save" },
    { view:"button", value:"Info" }
  ]
});

Наверх