Skip to content

Меню. ui-menu

Компонент меню умеет строить список ссылок любого уровня вложенности и расположения на странице.

Меню очень "широкий" компонент, у которого есть множество настроек.

Ключевым обьектом настройки меню является параметр config. В значении для этого параметра указывается обьект с настройками уровней меню.

Пример такого обьекта:

1: {
    direction: 'horizontal',
    icons: ['', '']
},
2: {
    type: 'drop',
    direction: 'vertical',
    icons: ['', '']
},
default: {
    type: 'drop',
    position: 'right',
    icons: ['fa fa-angle-right', 'fa fa-angle-left']
}

Для меню указывается либо настройка по-умолчанию, либо настройка для нужных уровней. К примеру это меню будет с горизонтальным первым уровнем без иконок, если у него будет второй уровень, то он будет выпадающим вертикальным. Для остальных уровней будет настройка "выпадающий вправо с иконками 'стрелка вправо' при открытии, и 'стрелка влево' при закрытии". Основные ключи для параметра config. - уровень. Просто ставится номер уровня меню, или описывается значение по-умолчанию default для всех уровней.

В каждом уровне есть свои настройки: direction - направление раскладки уровня меню - принимает значения vertical или horizontal. type - тип уровня меню, принимает значения plain - обычное меню в одну строку (по-умолчанию), collapse - раскрывающееся по клику, drop - раскрывающееся при наведении мышки. position - где откроется уровень меню, относительно родителя. Принимает значения left, right, top, bottom. icons - Иконки для пунктов меню. принимают названия иконок из набора fontAwesome.

Для компонента меню также есть и другие параметры: on-line - Будет ли меню в одну строку, и оставшаяся часть будет прятаться под выпадающим списком, или она будет раскрыта полностью. Работает только для горизонтального меню. Принимает значения true и false. more-caption - Название выпадающего пункта, если on-line- true. hide-icon - Если true, то иконки меню будут скрыты. vr-gutter - вертикальный отступ меню. По-умолчанию 0. * hr-gutter - горизонтальный отступ меню. По-умолчанию 0.

Темизация

color-sheme

  • default, с прозрачным фоном
  • is-nav-header, с заливкой меню цветом дополнительным фона

layouts

  • center - по-центру
  • default - без дополнительных стилей
  • is-nav-header раскладка меню для параметра меню on-line, mobile-center

themes

  • drop-max-content. выпадающий пункт при значении on-line растягивается на ширину страницы

Пример меню

{% capture menu_config %}{
1: {
    direction: 'horizontal',
    icons: ['', '']
},
2: {
    type: 'drop',
    direction: 'vertical',
    icons: ['', '']
},
default: {
    type: 'drop',
    position: 'right',
    icons: ['fa fa-angle-right', 'fa fa-angle-left']
}
}{% endcapture %}

<ui-menu
    {% if on_line %} on-line {% endif %}
    :config="{{ menu_config }}"
    base-class="{{ menu_class }}"
>
    {% for link in linklists[source_handle].links %}
        {% assign is_current = link.current? | default: '' | replace: 'true', 'link-current' %}
        <ui-menu-item
            {% if opened_current %} opened-current {% endif %}
        >
            <a is="ui-menu-link"
                href="{{ link.url }}"
                link-source="menu"
                {{ is_current }}
            >
                {{ link.title }}
            </a>
        </ui-menu-item>
    {% endfor %}
</ui-menu>