Intermediate

Полноэкранный режим компонентов

Вы можете перевести любой UI элемент, будь то компонент Webix или элемент HTML, в полноэкранный режим с помощью хелпера fullscreen.

Основные принципы

Чтобы развернуть UI элемент, передайте этот элемент или его ID в метод set:

webix.fullscreen.set("list");

Чтобы свернуть элемент, вызовите метод exit:

webix.fullscreen.exit();

Обратите внимание, что только один UI элемент может быть в полноэкранном режиме единовременно. Если какой-то компонент развёрнут и вы захотите развернуть ещё один, первый компонент свернётся.

Related sample: Fullscreen: List

Любой компонент или HTML элемент можно открыть в полноэкранном режиме. Ознакомьтесь со следующими примерами:

Настройка хедера

Когда UI элемент переходит в полноэкранный режим, он помещается в специальный контейнер. У хедера контейнера есть иконка "крестик", кликнув по которой можно выйти из полноэкранного режима.

Вы можете кастомизировать этот контейнер, а именно:

указать текс тхедера

webix.fullscreen.set("chart", { head:"My Financial Statistics" });

полностью переопределить хедер, передав объект с настройками в поле 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();
            } }
        ]
    }
});

полностью убрать хедер

webix.fullscreen.set("list", { head: false });

В этом случае вы сможете выйти из полноэкранного режима с помощью webix.fullscreen.exit().

стилизовать контейнер с помощью поля css

webix.fullscreen.set("chart",{
  css: "fullscreen", 
  head: "Fullscreen enabled"
});

Window в полноэкранном режиме

У Window есть своя настройка fullscreen. Если вы хотите переводить окно в полноэкранный режим и обратно, существует два варианта, которые отличаются способом обработки динамических изменений:

1. window.config.fullscreen требует сброса настроек позиционирования окна:

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()

2. Метод webix.fullscreen.set:

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

Наверх