Свойства контейнеров панели

Контейнер панели

И "массив элементов" и "шаблон панели" размещаются в двух контейнерах:

<div class="uk-bar-container uk-bar-secondary uk-light uk-padding uk-padding-remove-horizontal uk-bar-bottom">
<div class="uk-container{if !empty($theme_settings.container)} uk-container-{$theme_settings.container}{/if}">
{$cells = [
'pages_nav_more' => 'uk-width-1-1'
]}
{include file="./bar.html" inline}
</div>
</div>

Классы этих контейнеров задают свойства (ширина панели, цветовая схема, отступы) всей панели.

Класс дочернего контейнера class="wm-container" определяет ширину панели.

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

* В примере class="uk-bar-container uk-bar-overlay-light uk-padding-xsmall uk-padding-remove-horizontal"

Классы панели

  • Контейнер

    uk-bar-container
    Определяет контейнер для панели с базовыми настройками цветой схемы.

  • Цветовая схема

    uk-bar-default
    * используется по умолчанию
    Фон белый, цвет текста и ссылок - темный
    * Цвет фона и вложенных элементов можно изменить с помощью плагина

    uk-bar-muted
    Приглушенная: фон серый, цвет ссылок и текста темно-серые
    * Цвет фона и вложенных элементов можно изменить с помощью плагина

    uk-bar-primary
    Пользовательская, цвет текста светлый
    * Цвет фона и вложенных элементов можно изменить с помощью плагина

    uk-bar-secondary
    Темная, цвет текста светлый
    * Цвет фона и вложенных элементов можно изменить с помощью плагина

    uk-bar-overlay-light
    Светлая, частично прозрачная
    * Цвет фона и вложенных элементов можно изменить с помощью плагина

    uk-bar-overlay-dark
    Темная, частично прозрачная, цвет текста светлый
    * Цвет фона и вложенных элементов можно изменить с помощью плагина

    uk-bar-transparent
    Прозрачная, цвет текста базовый
    * Цвет фона и вложенных элементов можно изменить с помощью плагина

  • Размер элементов панели

    * элементы изначально имеют высоту равную высоте содержимого (например навигация равняется высоте строки)

    uk-bar-small
    Малая панель - высота элементов 42px.
    * В случае если элемент имеет большие размеры (например логотип), то часть содержимого элемента может перекрывать соседние элементы
    * Если элементы размещены по вертикали, то высота панели будет равна сумме высот вложенных элементов

    uk-bar-medium
    Малая панель - высота элементов 56px.
    * В случае если элемент имеет большие размеры (например логотип), то часть содержимого элемента может перекрывать соседние элементы
    * Если элементы размещены по вертикали, то высота панели будет равна сумме высот вложенных элементов

    uk-bar-large
    Малая панель - высота элементов 70px.
    * В случае если элемент имеет большие размеры (например логотип), то часть содержимого элемента может перекрывать соседние элементы
    * Если элементы размещены по вертикали, высота панели будет равна сумме высот вложенных элементов

  • Внутренние отступы панели

    * По умолчанию у панелей нет отступов, один из инструментов управления внешним видом панелей - внутренние отступы

    uk-padding-xsmall
    Малый внутренний отступ 1, для всех сторон

    uk-padding-small
    Малый внутренний отступ 2, для всех сторон.

    uk-padding
    Средений внутренний отступ 1, для всех сторон.

    uk-padding-medium
    Средений внутренний отступ 2, для всех сторон.

    uk-padding-large
    Большой внутренний отступ 1, для всех сторон.

  • Удаление внутренних отступов

    * Удаление отступов со всех сторон или одной из сторон. Для панелей рекомендуется удалять правый и левый отступы

    uk-padding-remove
    Удаление отступов со всех краев

    uk-padding-remove-top
    Удаление отступа от верхней границы

    uk-padding-remove-bottom
    Удаление отступа от нижней границы

    uk-padding-remove-left
    Удаление отступа от левой границы

    uk-padding-remove-right
    Удаление отступа от правой границы

    uk-padding-remove-vertical
    Удаление отступов сверху и снизу

    uk-padding-remove-horizontal
    Удаление отступов справа и слева

Есть вопросы или предложение?

Для того что бы задать вопрос, Вам необходимо авторизоваться или зарегистрироваться