You can expand any UI element, be it a Webix view or an HTML element, to the full size of the page with the fullscreen helper.
To expand the UI element, pass it or its ID to the set method:
webix.fullscreen.set("list");
To minimize the UI element, call exit:
webix.fullscreen.exit();
Note that only one UI element can be in the full-screen mode simultaneously. If one of the views is expanded, and you expand another view, the first one will be minimized.
Related sample: Fullscreen: List
Any view or HTML element can be opened in the full-screen mode. You can browse these examples:
When a UI element is in the full-screen mode, there is a header with the "close" icon above it.
You can add a caption to the header:
webix.fullscreen.set("chart", { head:"My Financial Statistics" });
You can also fully redefine the header by passing a configuration object in head
:
webix.fullscreen.set("chart",{
head:{
view:"toolbar", elements:[
{ view:"label", label:"My Financial Statistics" },
{ view:"icon", icon:"mdi mdi-fullscreen-exit", click:function(){
webix.fullscreen.exit();
} }
]
}
});
Related sample: Fullscreen: Cusmom Header
Window has the fullscreen setting of its own. So if you want to switch windows in and out of the full-screen mode, there are two alternatives that are different in the way they handle the dynamic changes:
1. window.config.fullscreen that requires you to reset the window positioning
var win = webix.ui({
view:"window",
left:100, top:100, move:true,
head:{
cols:[
{},
{
view:"icon", icon:"wxi-search", click:function(){
if (win.config.fullscreen){
win.define({ fullscreen: false, top:100, left:100 });
}
else {
win.define({
fullscreen: true, top:0, left:0, position:false
});
}
win.resize();
}
}
]
}
});
win.show()
Related sample: Window: Full-screen mode
2. webix.fullscreen.set that takes care of the positioning
var win = webix.ui({
view:"window", position:"center", move:true,
head:{
cols:[
{},
{
view:"icon", icon:"mdi mdi-fullscreen",
click: function(){
if (win.config.fullscreen){
webix.fullscreen.exit();
}
else {
webix.fullscreen.set(win);
}
}}
]
},
body:"Content"
});
win.show();
Related sample: Fullscreen: Window
Back to top