Массив элементов

Содержимое каждой панели - элементы, которые содержатся в ячейчках и имеют определенные модификаторами и классами свойства.

{$cells = [ 
'logo', 
'search' => 'uk-flex-center uk-width-expand', 
'phone1, divider_small, phone2' 
]}

Переменная $cells является массивом, в котором содержатся:

Ячейка панели

Ячейка является контейнером для содержащихся в ней элементов.
Свойства ячейки определяются классами ячейки и свойствами контейнера панели.
По умолчанию, ширина ячейки равна содержимому (ширине элементов).

Каждая панель может иметь от одной до нескольких ячеек.

Каждая ячейка - это flex-элемент .

{$cells = [ 
'logo',
'search' => 'uk-flex-center uk-width-expand',
'phone1, divider_small, phone2'
]}

В приведенном коде 3 ячейки, они обозначенны цветом и разделены между собой запятой.

Содержимое ячейки

В ячейке может содержаться всего один элемент - классы не обязательны.

'logo'

А может наоборот: несколько элементов и несколько классов.

'viewed_toggle + favorite_toggle + compare_toggle + account_toggle + cart_toggle, divider_small, search' => 'uk-flex-right uk-width-expand'

Элементы, как и классы, заключены в одинаные кавычки, между ними оператор "=>"

Элементы

Элемент в коде определяется ключевым словом и выводит обозначающий его объект, который имеет свои свойства и функционал.

  • Контакты
    contacts_toggle Иконка "контакты"
    Отображение иконка - кнопка
    Функционал Является svg иконкой, клик по которой открывает выезжающую панель в которой размещаются указаннные в настройках данные (разделе "контакты").
    Настройки -
    address Адрес
    Отображение Строка текста - ссылка
    Содержимое строки не переносится на другую строку
    * Для перехода текста на новую строку, в тексте адреса используйте элемент html - <br />
    Функционал В случае, если в настройках темы (разделе "контакты") в поле "ссылка на карту", указанна ссылка на карту, то клик по элементу открывает карту во всплывающем окне.
    Настройки Содержимое строки меняется в настройках темы, разделе "контакты".
    email Email
    Отображение Строка текста
    Может содержать "подсказку", если в поле "подсказка" (настройки темы в разделе "контакты") есть текст
    Функционал При включенном параметре "Автоматически создавать ссылки для телефонов или электронной почты", email заключается в ссылку, клик открывает установленную почтовую программу.
    Настройки Содержимое строки меняется в настройках темы, разделе "контакты".
    phone1 Телефон 1
    Отображение Строка текста
    Может содержать "подсказку", если в поле "подсказка" (настройки темы в разделе "контакты") есть текст
    Функционал При включенном параметре "Автоматически создавать ссылки для телефонов или электронной почты", телефон заключается в ссылку, клик открывает программу звонка (на мобильных - набор номера).
    В случае если не указан номер, но есть "подсказка", элемент будет отображен, в нем будет одна подсказка без иконки и номера.
    Настройки Содержимое строки меняется в настройках темы, разделе "контакты".
    phone2 Телефон 2
    Отображение Имеет те же свойства отображения, что и элемент phone1.
    Два номера созданы, как отдельные элементы для большей гибкости при формировании шаблона. Например, так они могут размещаться вместе (в зависимости от модификаторов: друг под другом или в одну строку).
    Функционал Имеет тот же функционал, что и элемент phone1.
    Настройки Содержимое строки меняется в настройках темы, разделе "контакты".
  • Личный кабинет
    account_toggle Вход в личный кабинет
    Отображение иконка - кнопка
    в случае если посетитель авторизирован, иконка закрашивается основным цветом,
    если нет - цветом текста.
    Функционал В случае если клиент авторизировался на сайте, клик по иконке вызывает выезжающую панель с сылками личного кабинета
    В обратном случае, клик по иконке вызывает всплывающий блок с формой авторизации / регистрации (при регистрации посетитель остается на той же странице).
    Настройки "Сайт" - "личный кабинет"
  • Форма поиска
    search Форма поиска
    Отображение Форма поиска содержит поле для ввода текста и кнопку отправки формы.
    Поле поиска займет 100% ширины ячейки, вне зависимости от окружающих элементов, т.е. будет размещаться всегда на новой строке.
    Если в ячейке не указанна ширина и ячейка ничем не ограничена, поле поиска примет ширину в 198px.
    Функционал При включенной настройке (настройка темы, раздел "форма поиска") "результаты поиска в выпадающем меню", при вводе первых 3 символов выпадает список первых найденых товаров.
    * только для приложения магазин.
    Настройки Настройка темы в приложении магазин - раздел "форма поиска".
    search_toggle Иконка поиска
    Отображение Иконка - кнопка
    , клик по которой открывает выезжающую панель, в которой размещаются форма поиска.
    Функционал Автопоиск в выезжающей панели недоступен.
    Клик по кнопке лупа (найти) перенаправляет на страницу поиска.
    Настройки Настройка темы в приложении магазин - раздел "форма поиска".
  • Логотип
    logo Логотип для десктопов
    Отображение Выводит блок, содержащий в себе 3 элемента: изображение для больших экранов, заголовок, слоган. Блок принимает размеры дочерних элементов.
    Функционал На всех страницах, кроме главной, является ссылкой на главную.
    Настройки Настройка темы - раздел "Логотип".
    logo_short Логотип для мобильных
    Отображение Выводит блок, содержащий в себе 1 элемента: изображение для телефонов. Блок принимает размеры загруженного изображения.
    Функционал На всех страницах, кроме главной, является ссылкой на главную.
    Настройки Настройка темы - раздел "Логотип".
  • Пользовательские списки товаров
    viewed_toggle Список "просмотренные товары"
    Отображение Иконка "кнопка", в правом верхнем углу которой отображается кол-во товаров в списке. Икона закрашиватеся основным цветом, если в ней есть товары, в обратном случае ее цвет - цвет текста.
    Функционал Клик по кнопке открывает страницу просмотренных товаров.
    Товары в список добавляются автоматически при посещении посетителем страницы товара.
    Настройки Отключить можно в настройках темы, в разделе "общие настройки"
    compare_toggle Список "товары в сравнении"
    Отображение Иконка кнопка, в правом верхнем углу которой отображается кол-во товаров в списке. Икона закрашиватеся основным цветом если в ней больше двух товаров, в обратном случае ее цвет - цвет текста.
    Функционал Клик по кнопке открывает страницу сравнения товаров.
    Товары в список добавляются при клике по иконке в блоке товара на странице товара и в списке товаров.
    Настройки Отключить можно в настройках темы в разделе "общие настройки"
    favorite_toggle Список "избранные товары"
    Отображение Иконка кнопка, в правом верхнем углу которой отображается кол-во товаров в списке. Икона закрашиватеся основным цветом если в ней есть товары, в обратном случае ее цвет - цвет текста.
    Функционал Клик по кнопке открывает страницу со списком избранных товаров.
    Товары в список добавляются при клике по иконке в блоке товара на странице товара и в списке товаров.
    Настройки Отключить можно в настройках темы в разделе "общие настройки"
  • Корзина
    cart Полная корзина
    Отображение Блок с информацией о товаров в корзине содержит название, кол-во товаров, иконку, стоимость товаров в корзине
    Функционал В зависимости от настроек, расширенная корзина может появляться либо
    по клику на элементе - выезжающая панель,
    либо при наведении - всплывающий блок.
    Настройки В настройках темы в разделе "корзина".
    cart_toggle Краткая корзина
    Отображение Иконка кнопка, в правом верхнем углу которой отображается кол-во товаров в корзине.
    Функционал В зависимости от настроек, расширенная корзина может появляться либо
    по клику на элементе - выезжающая панель,
    либо при наведении - всплывающий блок.
    Настройки В настройках темы в разделе "корзина".
  • Блок навигации
    menu_toggle Блок навигации
    Отображение Иконка кнопка
    Функционал Клик по иконке открывает выезжающую панель с сылками заданными в настройках
    Настройки В настройках темы в разделе "блок меню".
  • Элементы приложения магазин
    currency_toggle Выбор валюты
    Отображение Выпадающий список валют
    Функционал При наведении на название выбранной валюты, выпадает список доступных валют.
    * доступно только в приложении магазин.
    Настройки В настройках магазина, разделе "валюты".
    locale_toggle Выбор локализации
    Отображение Выпадающий список локализации
    Функционал При наведении на название выбранной локализации, выпадает список доступных вариантов локализации.
    * доступно только в приложении магазин и меняет локализацию витрины.
    Настройки -
  • Разделители
    divider Разделитель
    Отображение Не отображается.
    Функционал Предназначен для увеличения отступов между элементами ячейки, как по горизонтали, так и по вертикали (в зависимости от модификаторов).
    Настройки -
    divider_small Малый разделитель
    Отображение Не отображается.
    Функционал Предназначен для увеличения отступов между элементами ячейки, как по горизонтали, так и по вертикали (в зависимости от модификаторов).
    Настройки -
  • Ссылки категорий магазина
    categories Список ссылок категории
    Отображение Каждый пункт является текстовой ссылкой.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут перенесены на другую строку
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Выводятся категории первого уровня (не имеют вложенных категорий).
    Функционал Клик по ссылке открывает страницу категории.
    Настройки В настройках темы, раздел "шапка сайта"
    Запретить вывод какой-либо категории в шапке сайта, можно прописав в настройках категории в доп. параметрах not_in_header=1
    categories_nav Меню навигации категорий
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут выходить за край родительской ячейки.
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Могут содержать дочернее меню навигации.
    Функционал Клик на кнопку открывает страницу категории. При наведение появляется блок дочерних элементов.
    Настройки В настройках темы, раздел "шапка сайта"
    Запретить вывод какой либо категории в шапке сайта, можно прописав в настройках категории в доп. параметрах not_in_header=1
    categories_nav_more Меню навигации категорий с кнопкой "троеточие"
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут заключены в кнопку "троеточие".
    Занимает минимальную ширину - ширину кнопки "троеточие", по этой причине необходимо указывать ячейке ширину с помощью классов.
    Могут содержать дочернее меню навигации.
    Функционал Клик на кнопку "троеточие" не вызывает никаких действий, при наведении на "троеточие" выпадает "последовательно выпадающий список дочерних ссылок".
    Настройки В настройках темы, раздел "шапка сайта"
    Запретить вывод какой-либо категории шапке сайта можно прописав в настройках категории в доп. параметрах not_in_header=1
    categories_nav_short Выпадающий блок навигации категорий
    Отображение Предсталяет собой кнопку, текст которой берется из настроек темы.
    Занимает ширину текстового блока (заголовка), может размещаться на одной строке с другими элементами.
    Функционал Клик на кнопку с заголовком не производит никаких действий, при наведении на кнопку появляется блок дочерних элементов.
    Настройки В настройках темы, раздел "шапка сайта"
    Запретить вывод какой-либо категории шапке сайта можно прописав в настройках категории в доп. параметрах not_in_header=1
  • Ссылки на страницы
    pages Список ссылок на страницы
    Отображение Каждый пункт является текстовой ссылкой.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут перенесены на другую строку
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Выводятся ссылки первого уровня (не имеют вложенных).
    Функционал Клик по ссылке открывает страницу.
    Настройки -
    pages_nav Меню навигации страниц
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут выходить за край родительской ячейки.
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Могут содержать дочернее меню навигации.
    Функционал Клик на кнопку открывает страницу. При наведение появляется блок дочерних элементов.
    Настройки В настройках темы, раздел "шапка сайта"
    pages_nav_more Меню навигации страниц с кнопкой "троеточие"
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут заключены в кнопку "троеточие".
    Занимает минимальную ширину - ширину кнопки "троеточие", по этой причине необходимо указывать ячейке ширину с помощью классов.
    Могут содержать дочернее меню навигации.
    Функционал Клик на кнопку "троеточие" не вызывает никаких действий, при наведении на "троеточие" выпадает "последовательно выпадающий список дочерних ссылок".
    Настройки В настройках темы, раздел "шапка сайта"
    pages_nav_short Выпадающий блок навигации страниц
    Отображение Предсталяет собой кнопку, текст которой берется из настроек темы.
    Занимает ширину текстового блока (заголовка), может размещаться на одной строке с другими элементами.
    Функционал При клике на кнопку с заголовком не происходит никаких действий. При наведении выпадает "последовательно выпадающий список дочерних ссылок".
    Настройки В настройках темы, раздел "шапка сайта"
  • Ссылки на приложения
    apps Список ссылок на приложения
    Отображение Каждый пункт является текстовой ссылкой.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут перенесены на другую строку
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Выводятся ссылки первого уровня (не имеют вложенных).
    Функционал Клик по ссылке открывает главную страницу приложения.
    Настройки Изменить порядок, текст и адрес URL ссылок можно в настройках сайта в пункте "{$wa->apps()} меню"
    apps_nav Меню навигации приложений
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут выходить за край родительской ячейки.
    Занимает 100% ширины ячейки (не может находится на одной строке с другими элементами ячейки).
    Функционал Клик на кнопку открывает главную страницу приложения.
    Настройки Изменить порядок, текст и адрес URL ссылок можно в настройках сайта в пункте "{$wa->apps()} меню"
    apps_nav_more Меню навигации приложение с кнопкой "троеточие"
    Отображение Каждый пункт кнопка.
    Ссылки выводятся по горизонтали. В случае, если ширины контейнера будет недостачно, неуместившиеся ссылки будут заключены в кнопку "троеточие".
    Занимает минимальную ширину - ширину кнопки "троеточие", по этой причине необходимо указывать ячейке ширину с помощью классов.
    Функционал Клик на кнопку "троеточие" не вызывает никаких действий, прии наведении на "троеточие" выпадает "последовательно выпадающий список дочерних ссылок".
    Настройки Изменить порядок, текст и адрес URL ссылок можно в настройках сайта в пункте "{$wa->apps()} меню"
    apps_nav_short Выпадающий блок навигации страниц
    Отображение Предсталяет собой кнопку, текст которой берется из настроек темы.
    Занимает ширину текстового блока (заголовка), может размещаться на одной строке с другими элементами.
    Функционал Клик на кнопку с заголовком не производит никаких действий, при наведении на кнопку появляется блок дочерних элементов.
    Настройки В настройках темы, раздел "шапка сайта"

Модификаторы

'viewed_toggle + favorite_toggle + compare_toggle, account_toggle + cart_toggle, search' => 'uk-width-expand'

Элементы в группе следуют друг за другом и разделены модификаторами.

Модификатора всего два: символ + (плюс) и , (символ запятой).

+ (плюс) - обозначает что последующий элемент должен быть размещен на той же строке.
* только если позволяет ширина ячейки (контейнера).

, (символ запятой) - все, что следует после запятой переносится на новую строку.

Пример приведенного кода:

Классы

Классы - прописываются для ячейки, определяют свойства самой ячейки и размещения находящихся в ней элементов.

'logo_short' => 'uk-flex-center uk-width-expand'

В коде размещаются после списка элементов, через опереатор => и разделенны между собой пробелом.

Классы не обязательная конструкция ячейки. Ячейка может содержать сколько угодно классов или не содержать их вовсе.

  • Ширина ячейки

    uk-width-auto
    * значение по умолчанию
    ячейка ведет себя как inline-block элемент, имеет ширину равную ширине содержащихся в ней элементов.

    Относительная ширина

    uk-width-expand
    Ячейка будет пытаться занять все допустимое свободное место до достижения ширины родительского блока контейнера.
    * обычно прописывают одной из ячеек панели для того, чтобы ячейки занимали 100% ширины панели.

    Ширина в %

    * % рассчитываются от ширины панели

    uk-width-1-1
    Ширина 100%.
    * прописывают если в панели размещается одна ячейка.

    uk-width-1-2
    Ширина 50%.

    uk-width-1-3
    Ширина 33.32%

    uk-width-2-3
    Ширина 66.64%

    uk-width-1-4
    Ширина 25%

    uk-width-3-4
    Ширина 75%

    uk-width-1-5
    Ширина 20%

    uk-width-2-5
    Ширина 40%

    uk-width-3-5
    Ширина 60%

    uk-width-4-5
    Ширина 80%

    uk-width-1-6
    Ширина 16.66%

    uk-width-5-6
    Ширина 83.31%

    Фиксированная ширина

    uk-width-small
    Фиксированный размер равный 150px.

    uk-width-medium
    Фиксированный размер равный 300px.

    uk-width-large
    Фиксированный размер равный 450px.

    uk-width-xlarge
    Фиксированный размер равный 600px.

    uk-width-xxlarge
    Фиксированный размер равный 750px.

  • Выравнивание содержимого по горизонтали

    uk-flex-left
    * значение по умолчанию
    Выравнивание по левому краю ячейки.

    uk-flex-center
    Выравнивание по центру ячейки.

    uk-flex-right
    Выравнивание по правому краю ячейки.

    uk-flex-between
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера.

    uk-flex-around
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

  • Выравнивание содержимого по вертикали

    uk-flex-middle
    * значение по умолчанию
    Элементы выравниваются таким образом, что центр элементов группы совпадает с центром родительского блока.

    uk-flex-stretch
    элементы растягиваются таким образом, чтобы занять всё доступное пространство ячейки по вертикали.

    uk-flex-top
    элементы размещаются у верхней границы родительского блока.

    uk-flex-bottom
    Выравнивание по правому краю ячейки.

  • Переход элементов на новую строку

    * Элементы в ячейке находящиеся на одной строке. В случае, недостаточной для ширины, неуместившиеся элементы переходят на новую строку

    uk-flex-nowrap
    Запрещает переход элементов на новую строку, элементы выстраиваются в одну линию вне зависимости от ширины блока контейнера и в случае недостаточной ширины выйдут за край (в зависимости от выравнивания за правый или левый) ячейки.

  • Сокрытие и видимость элементов от контрольных точек

    * При формировании панелей для экранов различной ширины требуется отобразить/скрыть те или иные ячейки. Для этих целей, к классам добавляются "модификаторы ширины экрана" (контрольные точки).

    uk-hidden@s
    Скрывает ячейку при ширине экрана более 640px.
    640 - ∞

    uk-visible@s
    Скрывает ячейку при ширине экрана менее 639px.
    0 - 639

    uk-hidden@m
    Скрывает ячейку при ширине экрана более 960px.
    960 - ∞

    uk-visible@m
    Скрывает ячейку при ширине экрана менее 959px.
    0 - 959

    uk-hidden@l
    Скрывает ячейку при ширине экрана более 1200px.
    1200 - ∞

    uk-visible@l
    Скрывает ячейку при ширине экрана менее 1199px.
    0 - 1199

    uk-hidden@xl
    Скрывает ячейку при ширине экрана более 1600px.
    1600 - ∞

    uk-visible@xl
    Скрывает ячейку при ширине экрана менее 1599px.
    0 - 1599

  • Ширина элементов от контрольных точек

    * При формировании панелей для экранов различной ширины требуется ширину тех или иных ячеек. Для этих целей, к классам добавляются "модификаторы ширины экрана" (контрольные точки).

    Ширина более 640px

    uk-width-1-1@s
    Занимает 100% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-2@s
    Занимает 50% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-3@s
    Занимает 33.32% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-2-3@s
    Занимает 66.64% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-4@s
    Занимает 25% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-3-4@s
    Занимает 75% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-5@s
    Занимает 20% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-2-5@s
    Занимает 40% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-3-5@s
    Занимает 60% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-4-5@s
    Занимает 80% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-1-6@s
    Занимает 16.66% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-5-6@s
    Занимает 83.31% ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-small@s
    Занимает 150px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-medium@s
    Занимает 300px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-large@s
    Занимает 450px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-xlarge@s
    Занимает 600px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-xxlarge@s
    Занимает 750px ширины панели при разрешении экрана более 640px
    640 - ∞

    uk-width-auto@s
    Занимает ширину равную ширине содержащихся в ней элементов при разрешении экрана более 640px
    640 - ∞

    uk-width-expand@s
    Занимает всю доступную ширину при разрешении экрана более 640px
    640 - ∞


    Ширина более 960px

    uk-width-1-1@m
    Занимает 100% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-2@m
    Занимает 50% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-3@m
    Занимает 33.32% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-2-3@m
    Занимает 66.64% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-4@m
    Занимает 25% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-3-4@m
    Занимает 75% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-5@m
    Занимает 20% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-2-5@m
    Занимает 40% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-3-5@m
    Занимает 60% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-4-5@m
    Занимает 80% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-1-6@m
    Занимает 16.66% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-5-6@m
    Занимает 83.31% ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-small@m
    Занимает 150px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-medium@m
    Занимает 300px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-large@m
    Занимает 450px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-xlarge@m
    Занимает 600px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-xxlarge@m
    Занимает 750px ширины панели при разрешении экрана более 960px
    960 - ∞

    uk-width-auto@m
    Занимает ширину равную ширине содержащихся в ней элементов при разрешении экрана более 960px
    960 - ∞

    uk-width-expand@m
    Занимает всю доступную ширину при разрешении экрана более 960px
    960 - ∞


    Ширина более 1200px

    uk-width-1-1@l
    Занимает 100% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-2@l
    Занимает 50% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-3@l
    Занимает 33.32% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-2-3@l
    Занимает 66.64% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-4@l
    Занимает 25% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-3-4@l
    Занимает 75% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-5@l
    Занимает 20% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-2-5@l
    Занимает 40% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-3-5@l
    Занимает 60% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-4-5@l
    Занимает 80% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-1-6@l
    Занимает 16.66% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-5-6@l
    Занимает 83.31% ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-small@l
    Занимает 150px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-medium@l
    Занимает 300px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-large@l
    Занимает 450px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-xlarge@l
    Занимает 600px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-xxlarge@l
    Занимает 750px ширины панели при разрешении экрана более 1200px
    1200 - ∞

    uk-width-auto@l
    Занимает ширину равную ширине содержащихся в ней элементов при разрешении экрана более 1200px
    1200 - ∞

    uk-width-expand@l
    Занимает всю доступную ширину при разрешении экрана более 1200px
    1200 - ∞


    Ширина более 1600px

    uk-width-1-1@xl
    Занимает 100% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-2@xl
    Занимает 50% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-3@xl
    Занимает 33.32% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-2-3@xl
    Занимает 66.64% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-4@xl
    Занимает 25% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-3-4@xl
    Занимает 75% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-5@xl
    Занимает 20% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-2-5@xl
    Занимает 40% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-3-5@xl
    Занимает 60% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-4-5@xl
    Занимает 80% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-1-6@xl
    Занимает 16.66% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-5-6@xl
    Занимает 83.31% ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-small@xl
    Занимает 150px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-medium@xl
    Занимает 300px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-large@xl
    Занимает 450px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-xlarge@xl
    Занимает 600px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-xxlarge@xl
    Занимает 750px ширины панели при разрешении экрана более 1600px
    1600 - ∞

    uk-width-auto@xl
    Занимает ширину равную ширине содержащихся в ней элементов при разрешении экрана более 1600px
    1600 - ∞

    uk-width-expand@xl
    Занимает всю доступную ширину при разрешении экрана более 1600px
    1600 - ∞

  • Выравнивание содержимого по горизонтали от контрольных точек

    * При формировании панелей для экранов различной ширины требуется изменить выравнивание содержимого ячеек. Для этих целей, к классам добавляются "модификаторы ширины экрана" (контрольные точки).

    Ширина более 640px

    uk-flex-left@s
    Выравнивание элементов по левому краю ячейки. При разрешении экрана более 640px
    640 - ∞

    uk-flex-center@s
    Выравнивание элементов по центру ячейки. При разрешении экрана более 640px
    640 - ∞

    uk-flex-right@s
    Выравнивание элементов по правому краю ячейки. При разрешении экрана более 640px
    640 - ∞

    uk-flex-between@s
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. При разрешении экрана более 640px
    640 - ∞

    uk-flex-around@s
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. При разрешении экрана более 640px
    640 - ∞


    Ширина более 960px

    uk-flex-left@m
    Выравнивание элементов по левому краю ячейки. При разрешении экрана более 960px
    960 - ∞

    uk-flex-center@m
    Выравнивание элементов по центру ячейки. При разрешении экрана более 960px
    960 - ∞

    uk-flex-right@m
    Выравнивание элементов по правому краю ячейки. При разрешении экрана более 960px
    960 - ∞

    uk-flex-between@m
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. При разрешении экрана более 960px
    960 - ∞

    uk-flex-around@m
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. При разрешении экрана более 960px
    960 - ∞


    Ширина более 1200px

    uk-flex-left@l
    Выравнивание элементов по левому краю ячейки. При разрешении экрана более 1200px
    1200 - ∞

    uk-flex-center@l
    Выравнивание элементов по центру ячейки. При разрешении экрана более 1200px
    1200 - ∞

    uk-flex-right@l
    Выравнивание элементов по правому краю ячейки. При разрешении экрана более 1200px
    1200 - ∞

    uk-flex-between@l
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. При разрешении экрана более 1200px
    1200 - ∞

    uk-flex-around@l
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. При разрешении экрана более 1200px
    1200 - ∞


    Ширина более 1600px

    uk-flex-left@xl
    Выравнивание элементов по левому краю ячейки. При разрешении экрана более 1600px
    1600 - ∞

    uk-flex-center@xl
    Выравнивание элементов по центру ячейки. При разрешении экрана более 1600px
    1600 - ∞

    uk-flex-right@xl
    Выравнивание элементов по правому краю ячейки. При разрешении экрана более 1600px
    1600 - ∞

    uk-flex-between@xl
    Элементы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера. При разрешении экрана более 1600px
    1600 - ∞

    uk-flex-around@xl
    Элементы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами. При разрешении экрана более 1600px
    1600 - ∞

Пример использования классов ячеек от контрольных точек.

{$cells = [
'logo' => 'uk-width-1-4  uk-visible@l',
'logo_short' => 'uk-width-1-2  uk-hidden@l',
'currency_toggle + locale_toggle + viewed_toggle + favorite_toggle + compare_toggle + account_toggle + cart_toggle' => 'uk-flex-right uk-flex-center@l uk-width-1-2 uk-width-expand@l',
'phone1, divider_small, phone2' => 'uk-width-1-4 uk-flex-right uk-visible@l'
]}

В приведенном примере 4 ячейки:

1-я содержит "Логотип для десктопов" - отображается при ширине > 1200px (скрыта при разрешении < 1200px), имеет ширину 25%, по умолчанию выравнено по левому краю

2-я содержит "Логотип для мобильных" - отображается при ширине < 1200px (скрыта при разрешении > 1200px), имеет ширину 50%, по умолчанию выравнено по левому краю

3-я содержит различные иконки и кнопки - при ширине > 1200px занимает все доступное пространство и содержимое выравнено по центру, при ширине < 1200 имеет ширину в 50% и выравнивает содержимое по правому краю

4-я содержит контактные данные - отображается при ширине > 1200px (скрыта при разрешении < 1200px), имеет ширину 25%, содержимое выравнено по правому краю.

При ширине экрана свыше 1200px

При ширине экрана менее 1200px

Подпишись!

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

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

Скидка− 0 Р
Партнерская скидка− 0 Р
Итого0 Р

Ваша корзина пуста.