Об управлении расположением элементов sidemenu

Webix JS
#1

Как в sidemenu часть пунктов меню разместить начиная с конца поля вертикального sidemenu?
Первые пункты меню - идут сверху вниз и управляют приложением.
Нужно пару пунктов меню, задающих параметры, никак не связанные с верхними элементами меню, разместить начиная снизу, чтобы отделить мух от котлет.
Пробовал и вставки template, и заданием вертикальных размеров - никак.

#2

Здравствуйте,

Одно из возможных решений - добавлять margin-top при переходе на другую часть меню, например:

https://snippet.webix.com/kxunyfzc

#3

Здравствуйте!
Для того, чтобы разделить группу items в вертикальном меню, можно использовать свойство $template c одним из возможных значений:

  • “Spacer” добавляет пустую строку между menu items;
  • “Separator” добавляет горизонтальную линию между menu items.
    Пример: https://snippet.webix.com/azm0u5ns
#4

Да, { $template:“Spacer” } я видел в примерах, но почему-то у меня на это ругается webix_bebug.js:490 RenderStack :: Unknown template: Spacer

#5

Обратите внимание на то, что в моём примере, который был дан выше, $template:"Spacer" использовался в view:"menu", а не view:"list"
Если это уточнение не решило проблему, то сбросьте пожалуйста Вашу реализацию

#6

Ошибка исчезла, но расстояние вообще не меняется, и разделитель не появляется…

Сократил, как мог:

config(){
...
    const ui = {
        tbProjName,
        tbProjCont,
      type:"line", rows:[
        { view: "toolbar", id:"toolbarid", elements:[
          { view: "icon", icon: "bars",
            click: function(){
              if( webix.$$("top:menu1").config.hidden){
                webix.$$("top:menu1").show();
              }
              else
                webix.$$("top:menu1").hide();
            }
          },
          {
            view: "label",
            id: "labelid",
            label: "Demo"
          },
        ]},
        {
          $subview:true
        },
        footer
      ]
    };

    this.ui({
      view: "sidemenu",
//      id: "sidemenuid",
      id:"top:menu1",
      width: 200,
      position: "left",
      state:function(state){
        var toolbarHeight = webix.$$("toolbarid").$height + webix.$$("projNameId").$height + webix.$$("projContId").$height; //
        state.top = toolbarHeight;
        state.height -= toolbarHeight + webix.$$("toolbarFooterId").$height;//
      },
      body:{
        view:"menu",
//        view:"list",
//        view:"dataview",
        borderless:true,
        scroll: false,

        template: "<span class='webix_icon fa-#icon#'></span> #value#",
        data:[
          { id:"whatodo", value:_("DashBoard"), href:"whatodo",  icon:"commenting-o" },
          { id:"whatishe",value:_("Data"),      href:"whatishe", icon:"user-secret" },
          { id:"sets",    value:_("Settings"),  href:"sets",     icon:"cog" },
          { $template:"Spacer" },
          { $template:"Separator" },
          { id:"helpQA",  value:_("HelpQA"),    icon:"support"},
          { id:"infoQA",  value:_("InfoQA"),    icon:"info-circle" },
          { id:"aboutQA", value:_("AboutQA"),   icon:"question-circle" }
        ],
        on:{
          "onItemClick":function(id){
          . . .
        },
        tooltip:function(obj, common){
           . . .
        },
        select:true,
      }
    });

    return ui;
} // config()
#7

Здравствуйте,

body в sidemenu может включать в себя как один компонент, так и layout. Проще всего создать два разных меню и разделить их пустым вью, которое займёт доступное место:

{
    view: "sidemenu",
    body:{
      rows:[
        { 
          view:"menu",
          autoheight:true,    // height is adjusted to data
          data:options_1
        },
        {},
        { 
          view:"menu",
          autoheight:true,
          data:options_2
        }
      ]
   }
 }

Однако только одно меню может быть использовано для .use(plugins.Menu, "id") на каждом уровне вложенности.

Если использование этого плагина критически важно, можно попробовать кастомизировать существующий, но для подобного разделения опций лучшего решения, увы, нет.

Согласно моим тестам, {$template:"Spacer" } и {$template:"Separator"} работают в ui.menu в для Webix Jet хорошо, поэтому пожалуйста, попробуйте обновиться до свежей версии вебикса/джета или укажите используемые версии.

#8

“webix-jet”: “^1.0.8”,
webix UI v.5.1.0

Спасибо, сделать два view:“menu” почему-то не решился.

Но я попробовал разнести разнородные пункты меню на
view: “sidemenu”, position: “left” и
view: “sidemenu”, position: “right”.

Там любопытный побочный эффект выявился: если я выдвигаю, скажем, левое меню, и сразу после этого (не задвинув его обратно) щёлкаю на bar с правым меню, то накладывается 2 операции - левое меню задвигается обратно, а правое - начинает выдвигаться, но мгновенно убирается назад, и выдвигается только после повторного клика на правый bar. Неожиданно. Ожидаешь, что покинутое меню уберётся, а правое - выдвинется, но на него воздействует событие по закрытию левого меню (щелчок мышью вне поля самого этого меню).

#9

Dima_S, благодарю, работает, и для view:“list” тоже. Статично, правда. Я хотел разместить часть пунктов начиная снизу, но не так это принципиально, чтобы выискивать суперспособы высчитывать позиции для этих элементов.