Всем привет! Давайте сегодня рассмотрим, какие решения предлагает Webix, чтобы сделать навигацию в приложении действительно удобной. Могу поспорить, что мы найдем что-то действительно стоящее! С самых первых дней своего существования библиотека предоставляет пользователям стандартное Меню, которое позволяет размещать элементы горизонтально или вертикально (и это слишком просто). Недавно разработчики библиотеки пошли дальше и создали два симпатичных виджета — Sidebar и Sidemenu, которые призваны сделать навигацию удобной для пользователей.
Давайте разберемся в функциональности этих виджетов и рассмотрим сценарии использования, подходящие для каждого из них.
Чтобы инициализировать Sidebar, достаточно вот такого простого кода:
view: "sidebar",
data: [
{id: "dashboard", icon: "dashboard", value: "Dashboards", data:[
{ id: "dashboard1", value: "Dashboard 1"},
{ id: "dashboard2", value: "Dashboard 2"}
]},
...
]
});
В результате, вы получите вот такой виджет:
Для создания Sidemenu понадобится немного настроек:
view: "sidemenu",
body:{
view:"list", borderless:true, scroll: false,
template: "<span class='webix_icon fa-#icon#'></span> #value#",
data:[
{id: 1, value: "Customers", icon: "user"},
{id: 2, value: "Products", icon: "cube"},
...
]
}
}).show();
Наше меню будет выглядеть вот так:
Как видите, внешне эти два виджета очень похожи. Они обладают одинаковой структурой элементов. Но уже из кода инициализации становится ясно, что их поведение отличается, поскольку они служат для разных целей.
Давайте подробнее познакомимся с особенностями этих компонентов.
Sidebar
Sidebar создан на основе Webix компонента Tree. Он умеет красиво отображать иерархические данные любого уровня сложности. Кроме того, этот виджет полностью поддерживает Tree API.
Sidebar можно положить в Webix Layout, что позволит разместить его в любом месте приложения. Например, вы можете создать лэйуат с тулбаром и двумя столбцами под ним. Первый столбец будет занимать Sidebar, а во втором будет расположена основная часть приложения.
rows:[
{view:”toolbar”},
{cols:[
{ view: "sidebar",id:"sidebar", data: menu_data},
{template:”Left column”}
]}
]
});
Может показаться, что такой интерфейс займет слишком много места на экране. Этот вопрос легко решить, задав для Sidebar два состояния — развернутое (по умолчанию) и свернутое:
В свернутом состоянии элементы меню уменьшаются до иконок, а вложенные элементы перемещаются в выпадающий список, который появляется по наведению курсора мыши на родительский элемент.
Вы можете установить свернутое состояние для Sidebar во время инициализации:
Или динамически:
$$(“sidebar”).expand(); //expands sidebar
$$(“sidebar”).toggle(); //collapses or expands sidebar depending on its state
Кроме того, можно настроить относительную позицию Sidebar, чтобы связанный с ним popup отображался в нужной позиции. Если Sidebar расположен слева, popup будет появляться справа и наоборот.
Итак, Sidebar — ваш отличный выбор, если:
- Ваше приложение будет полностью создано на Webix;
- Ваше меню имеет иерархическую структуру;
- Вам нужна фиксированная навигационная панель с правой или с левой стороны экрана;
- Вам нужно, чтобы эту панель можно было уменьшать и увеличивать;
- Вы хотите использовать цельный виджет, который требует минимальной настройки.
Sidemenu
Sidemenu создано на основе Webix window. По умолчанию, в нем находится List, который отображает элементы меню.
В отличие от Sidebar, Sidemenu располагается над текущим лэйаутом и может отображаться и скрываться без изменения размера других компонентов на странице (как это происходит при использовании Sidebar).
webix.ui({
rows:[
{ view: "toolbar", elements:[
{view: "icon", icon: "bars",}
]},
{ template: " " }
]
});
//sidemenu initialization
webix.ui({
view: "sidemenu",
id: "menu",
body:{
view:"list", data:data
}
});
По этой причине для Sidemenu нельзя задать свернутое состояние. Вы можете просто спрятать Sidemenu по необходимости при помощи Window API.
if( $$("menu").config.hidden) $$("menu").show()
else $$("menu").hide();
}}
По умолчанию, изменение состояния Sidemenu сопровождается плавной анимацией.
Являясь окном по своей сути, Sidemenu может появляться из любой части экрана. Это еще одно его отличие от Sidebar, для которого доступны только две позиции: слева и справа.
Обратите внимание, что при установке позиций top или bottom необходимо расположить элементы списка горизонтально:
view:”list”, layout:”x”
}}
Возможно, вы задаетесь вопросом: “Могу ли я поместить что-то еще в окно Sidemenu?” Да, это возможно, но List или Grouplist подходят лучше всего, поскольку оптимально отображают навигационные элементы.
Итак, мы выяснили, что возможности отображения данных в Sidemenu зависят от view, которое вы вкладываете внутрь него. List может работать с линейными данными, в то время как Grouplist создан специально для многоуровневых структур. В то же время, визуализация многоуровневых данных в этом компоненте не очень хорошо подходит для навигации.
Отсюда следует вывод, что при работе с иерархическими данными предпочтение следует отдать виджету Sidebar.
Подводя итоги, можно сказать, что Sidemenu стоит выбрать, если:
- Вам нужно разместить навигационную панель в верхней или нижней части экрана;
- Вам нужно прятать и показывать панель, при этом возможность разворачивания и сворачивания опций не принципиальна;
- Вам нужна панель с анимацией;
- Вам нужно отображать линейные данные;
- Вы достаточно храбры, чтобы самостоятельно расширить конфигурацию при помощи Webix. Шучу. Это очень просто:)
Выбор за вами. Просто помните, что оба виджета легко настроить, как и все виджеты Webix.
Вы можете изучить возможности настройки, а также посмотреть примеры в соответствующих статьях документации — Sidebar и Sidemenu.
Оба виджета доступны в GPL-версии библиотеки. Sidemenu входит в общий пакет, а Sidebar предлагается в виде расширения, которое можно скачать из Webix hub на GitHub.
