How to create a header

Webix JS
1

I want to create a simple display: At the top a header and then a list. Somehow whatever I am trying is not working.

			 	id:"myView",
				view: "layout",
				rows:[
					{ template: "My Heading", height: 40},
					{ view: "list", data: small_film_set,
					  template:"#rank#. #title#",
				      type:{ height:40 },
					  select: true
					}
				]

If I type “header: ‘My Heading’” (instead of template) then nothing shows.

How can I achieve this?
Thanks

2

You are very close to the desired configuration:

{ template: "My Heading", type:"header", height: 40}

http://webix.com/snippet/ebbc12f2

3

Thanks.

What do I need to do to get the header to be style = purple. (By “purple” I mean that “other” color in the color scheme that this skin is using - as you see on the snippet page - blue, green and purple…)

4

You can add custom CSS to the header:

{ type:"header", template:"Preview", css:{"background-color":"#7B77A9"}}

or, if you need something more complex

{ type:"header", template:"Preview", css:"custom"}

http://webix.com/snippet/fe7ad382

5

Thanks for the info.

I am trying to understand how the “Reset” button on the snippet page (http://www.webix.com/snippet/) gets to be purple?

If I look at the source code, all I can see is this:

				{ cols:[
					{ template:"" },
					{ view:"button", type:"form", value:"Share", click:snippet.ask_share },
					{ view:"button", gravity:0.5, value:"Reset", height:40, click:snippet.ask_reset }
				]},

There does not seem to be setting any custom css anywhere?

Thanks

6

In main.css default color is redefined for all buttons

.webix_el_button input{
	background: #7b77a9; /*#1abc9c;*/
}

“Share” button has “type:‘form’” which sets a different (green) styling.

In common case you can use “css” property to define a custom color for the button

.webix_el_button.orange input{
  background:orange;
}

http://webix.com/snippet/297f9dc9