В данном разделе представлен набор типовых элементов, которые использовались при разработке внешнего интерфейса официального сайта ОАО «РЖД». Данный раздел призван оказать методическую помощь разработчикам при создании сервисов в рамках rzd.ru с целью сохранения идентичности всех страниц ресурса.
Обращаем ваше внимание, что унификация внешнего вида и функциональности компонентов с помощью представленных примеров ожидается только при использовании их в рамках стандартной темы портала. При использовании вне темы – могут потребоваться доработки.
Типографика
Обычный шрифт
Акцентный шрифт
Заголовок первого уровня
Заголовок второго уровня
Заголовок четвертого уровня
strong
abbr
blockquote
.text-white
.text-grey
.text-more-grey
.text-black
.text-red
.text-small
.text-plus
.text-downsized
.text-upsized
.text-minus
.text-big
.text-huge
.text-right
.text-center
.top-border
.uppercase
.text-no-transform
.text-capitalize
.nowrap
Основные цвета
Иконки
Мы используем svg-прайт. Для использования иконки в проекте применяем конструкцию из примера, меняя id на нужный. Размеры и цвета можем задавать атрибутами или в css.
Кнопки
Дизайн основной кнопки
Дизайн альтернативной кнопки
Дизайн альтернативной кнопки
Дизайн альтернативной кнопки
Дизайн альтернативной кнопки
Дизайн кнопки в виде иконки (иконка может быть любой svg)
Ссылки
Прелоадер
Создается добавлением блоку/кнопке класса .spinable.
Приспосабливается под стили кнопки, если класс вешать на нее.
Стили включены в основную тему. Класс можно добавлять/убирать по событию
Тултип
Мелкий белый текст (с поддержкой форматирования) на темно-сером фоне в цветах стайлгайда РЖД.
Классический контрол для открытия подсказки – круглый серый (краснеющий при взаимодействии) блок со знаком вопроса. При наведении или фокусировке на вопросике плавно проявляется текст (и плавно исчезает при потере фокуса или уходе мыши).
Ссылки в таком блоке отображаются цветом основного текста (в версии не для слабовидящих – белым) и с подчёркиванием.
Для компенсации ухода за край вьюпорта на узких экранах предусмотрен специальный скрипт.
Типичный вариант:
«Назначенные торги» - объекты недвижимости, по которым ОАО «РЖД» в настоящее время проводит торги
Кастомный вариант на ссылке:
Список тэгов
Дата и время
Графика
При вставке графических материалов (фоторепортажи, слайдеры, картинки) нужно учитывать единую высоту контейнера для декстопа и плашета
Десктоп: 842px
Планшет: 442px
Принудительная разбивка по разделителям
Класс .separable служит признаком элемента, который скрипт темы РЖД будет разбивать по последовательности, указанной в атрибуте data-symbol (по умолчанию - /). Требуется для строк, в которых разделителями должны являться символы, которые браузеры таковыми не считают. Принудительное разделение осуществляется за счет обрамление разделителя «волосяными» пробелами.
Ограничение блока по числу строк
Класс .truncated служит для визуального отсечения строк: показывается 5, остальное не отображается, к последнему помещающемуся на 5-ю строку слову добавляется многоточие.
Открытое акционерное общество «Российские железные дороги» в лице филиала «Октябрьская железная дорога», проводит аукцион №4146/ОАЭ-ОКТ/21 по продаже принадлежащих ОАО «РЖД» на праве собственности следующих объектов недвижимого имущества: Здания дома связи с кадастровым номером 10:16:0000000:2722, площадью 318,7 кв. метра, расположенного по адресу: Республика Карелия, Суоярвский район, ст. Суоярви-1, улица Октябрьская, дом 18 и относящегося к нему земельного участка с кадастровым номером 10:16:0010303:4 (категория земель – земли поселений, вид разрешенного использования – для эксплуатации здания Дома связи), площадью 1 233 кв.м., расположенного по адресу, установленному относительно ориентира, расположенного в границах участка, ориентир - Дом связи, почтовый адрес ориентира: Республика Карелия, г. Суоярви, улица Октябрьская, дом 18
Форма ввода пользовательских данных
Общие характеристики формы как БЭМ-блока:
- Форма .form имеет опциональную шапку .form__head (с заголовком .form__heading и кнопкой сворачивания/разворачивания) и обертку для переключения видимости всего остального (далее - "тело" .form__body) при нажатии на эту кнопку.
- Тело содержит контейнер групп .form__groups и подвал формы .form__footer (для кнопки Отправить, Очистить, а также ссылок на подписку и т.п.).
- Группа .form_group - это элемент формы (текстовое поле, выпадающий список, мультивыбор, флажок, радиокнопки) с подписями и в ряде случаев с сообщениями валидации, взаимосвязанные единообразно в соответствии с дизайном.
Модификаторы:
- .form_search - добавляется к поисковой форме (так как различия между поисковыми и непоисковыми формами минимальны в плане стилизации, .form - универсальный блок)
- .form_narrow-desktop - добавляется при необходимости в десктопном режиме расположить форму в узкой колонке (https://company.rzd.ru/ru/9349). Не влияет на мобильную и планшетную версии, а в десктопной располагает все группы независимо от их модификаторов в ширину колонки, а также распределяет по ширине колонки кнопки в подвале формы, если их две.
Контейнер групп полей
.form__groups > .form__groups-inner
- При наличии шапки формы группы с подвалом оборачиваются в .form__body, который отвечает за корректный отступ первой группы относительно заголовка.
- Если хоть на каком-то из брейкпоинтов группы полей расположены по нескольку на строку (почти всегда), требуется внутренний контейнер .form__groups-inner, который:
- На мобильной ширине устанавливает все группы в одну колонку.
- На планшетной становится флекс-контейнером и располагает все формы (кроме специально помеченных БЭМ-модификатором или БЭМ-миксом) в ряды по двое с одинаковой шириной групп (тянется) и расстоянием между ними в 16px.
- На десктопной ширине форм в ряду становится по умолчанию 4, но в зависимости от содержимого полей модификаторами можно менять соотношение ширин; горизонтальный отступ между группами сохраняется.
Модификаторы:
- .form__groups_valign_top - отвечает за вертикальное выравнивание содержимого групп (внутри .form__groups-inner) по верхнему краю (по умолчанию - по нижнему из-за вариабельного количества строк в подписях при разной ширине экрана)
- .form__groups_float_right - отвечает за горизонтальное выравнивание содержимого групп (внутри .form__groups-inner) по правому краю (по умолчанию - по левому)
- .form__group_full-tablet 100% на планшете
- .form__group_full 100% на планшете и десктопе
- .form__group_half двойная ширина на десктопе
- .form__group_subtotal тройная ширина на десктопе
- .form__group_checks ледует использовать только тогда, когда в контроле на самом деле несколько элементов выбора! Для одиночного элемента использование этого модификатора приводит к неверному определению ширины в IE, так как эта группировка предполагает автоширину для каждого из check'ов, а одиночный всегда имеет ширину 100%.
Пример работы:
Нам понадобятся:
- Скрипты: /st/js/common/file-chooser.js, /st/js/common/post-message.js, /st/js/common/captcha-on-demand.js
- Стили для точки сборки: front/web/css/adaptive/src/common/select.less, front/web/css/adaptive/src/common/modal.less, front/web/css/adaptive/src/common/multiselect.less, front/web/css/adaptive/src/common/datefields.less, front/web/css/adaptive/src/common/slider-range.less, front/web/css/adaptive/src/common/file-chooser.less, front/web/css/adaptive/src/common/post-message.less.
- Стили, включенные в тему: front/web/css/adaptive/src/theme/form.less
Поисковая форма
Поисковая форма может содержать заголовок, неактивный текст "Поиск"
Однако этот заголовок может отсутствовать:
- если форма является составной частью страницы с названием раздела навигации "Поиск" (как у глобального поиска)
при отсутствии заголовка просто не добавляется эта разметка
Пример работы:
Нам понадобятся:
- Пример реализации в шаблоне: front/app/ucm/templates/xslt/promo/promoForm.xsl
- Стили, включенные в тему: front/web/css/adaptive/src/theme/form.less
Форма-фильтр с одним контролом
Нам понадобятся:
- Скрипт: front/web/js/common/one-filter.js (для сабмита по переключению опций селекта, если кнопка не отображается).
- Стили для точки сборки: front/web/css/adaptive/src/common/one-filter.less.
Модификатор .one-filter_no-btn (убирает кнопку и делает сабмит по переключению опций селекта)
Чекбоксы и радиокнопки
Стили элементов включены в тему
Чекбокс
Радиокнопки
Поле ввода
Поле для ввода многострочного текста
Селекты
Селект простой
- /li>
Селект древовидный
Селект со сбросом
Поля выбора дат с дейтпикерами
Выбор диапазона (range-slider)
Нам понадобятся:
- Скрипты: /st/js/common/slider-range.js
- Стили для точки сборки: front/web/css/adaptive/src/common/slider-range.less
Капча
Мультивыбор
Рубрики
Прикрепить файлы
После выбора файлов нажатием на кнопку "Прикрепить файлы" вместо сообщения "Файл не выбран" показываются имена файлов и кнопка отмены загрузки (возвращает исходное положение с удалением сообщения валидации, если файл не отвечает описанным ниже требованиям).
Нам понадобятся:
- Скрипт: front/web/js/common/file-chooser.js (для отображения имени файла и очистки файлового поля).
- Стили для точки сборки: front/web/css/adaptive/src/common/post-file.less.
Подсказчик адресов ГАР
При вводе адреса в поле появляется подсказчик, который по введенным символам предлагает варианты из справочника
Подсказчик умеет заполнять поля формы дополнительными данными из ГАР, например индекс.
Поле с подсказчиком
Запрос из поля идет по подстроке на сервис suggester. Вывод результатов в выпадающем списке.
Маркированный список
Стили простых маркированных списков созданы для статических страниц и включены в тему. Проще всего задействовать эти стили, используя маркированный список в рамках родительского класса .static-content
- Первый пункт;
- Второй пункт;
- Третий пункт;
- Какая-нибудь ссылка
- Ещё одна ссылка
Нумерованный список
Стили простых нумерованных списков созданы для статических страниц и включены в тему. Проще всего задействовать эти стили, используя нумерованный список в рамках родителського класса .static-content
- Пункт первый.
- Пункт второй.
- Пункт третий.
Список описаний
- Наименование
- Открытое акционерное общество «Российские железные дороги» в лице Московской железной дороги – филиала ОАО «РЖД» – проводит аукцион на заключение договора субаренды принадлежащего ОАО «РЖД»
- Заказчик
- ОАО "РЖД"
- Дата публикации
- 20.02.2020
Список файлов
-
Протокол экспертной группы
pdf, 132 кБ
-
Извещение
docx, 31 кБ
-
Протокол проведения конкурентного отбора
pdf, 40 кБ
-
Приглашение к участию в конкурентном отборе. Условия проведения закупки
docx, 161 кБ
-
Приложение №2 к приглашению к участию в конкурентном отборе
docx, 33 кБ
-
Приглашение к участию в конкурентном отборе. Порядок организации проведения закупки
docx, 34 кБ
Пагинация
В демо функционал не работает (перечень отсутствует)
Примеры работы:
- Новости филиалов и ДЗО
- Справочник грузов ГНГ (пример с выбором числа вариантов)
Нам понадобятся:
- Шаблон (самодокументированный): front/app/ucm/templates/xslt/_common/pager.xsl.
- Скрипт: в шаблоне.
- Стили для точки сборки: front/web/css/adaptive/src/common/pager.less.
Многостраничная сортировка
В демо функционал не работает (перечень отсутствует)
Примеры работы:
Нам понадобятся:
- Шаблон (самодокументированный): front/app/ucm/templates/xslt/_common/sorter.xsl.
- Стили для точки сборки: front/web/css/adaptive/src/common/sorter.less.
Вкладки со скроллингом
При невлезании в ширину враппера скроллятся, как нативно, так и со стрелочками (шаг - ширина враппера).
Пример работы:
Нам понадобятся:
- Шаблон app\ucm\templates\xslt\_common\tabs-list.xsl - самодокументированный, и js уже в нем.
- Стили для точки сборки: front\web\css\adaptive\src\common\tabs-list.less.
Если идентификатор вкладки начинается с #, работает двусторонняя связь с hash адресной строки:
- При нажатии вкладки в адресную строку hash заменяется на идентификатор вкладки.
- При наличии подходящего hash в урле на момент загрузки будет активирована соотв. вкладка, что позволяет ссылаться на конкретную вкладку. В противном случае активируется первая вкладка, и чтобы она сразу была активного вида, не дожидаясь работы скрипта, можно дать ей класс active на стороне сервера.
- Наименование
- Открытое акционерное общество «Российские железные дороги» в лице Московской железной дороги – филиала ОАО «РЖД» – проводит аукцион на заключение договора субаренды принадлежащего ОАО «РЖД»
- Заказчик
- ОАО "РЖД"
- Дата публикации
- 20.02.2020
Меню страницы
Нам понадобятся:
- Стили для точки сборки: front/web/css/adaptive/src/common/page-menu.less
- Стили для лейблов: front/web/css/adaptive/src/common/label.less
Таблица классическая
Требует обертки с классом .table-wrap для горизонтального скролла при невмещении в контентную область (особенно актуально для мобильных разрешений)
Можно использовать несколько модификаторов:
- .table_no-bg - таблица будет без фона
- .table_air - больше "воздуха" для узких строк с обилием иконок
- .table_no-more - вариант адаптивности на мобильных: не показываем шапку, перестраиваем строки в колонку. Не влияет на отображение десктопное/планшетное.
Вторая строка здесь с классом .table__clickline. Клик по любому ее месту вызывает переход по значению атрибута date-href (ссылки внутри не рекомендуются). Текст внутри ячеек этой строки по умолчанию при ховере красный. Если надо сделать ячейки с черным текстом, им задается класс .text-black. Логика подключается в теме через UTIL.init.common()
| № | Наименование лота | Начальная (максимальная) цена договора |
Классификация по ОКПД2 |
Классификация по ОКВЭД2 |
ОКАТО |
|---|---|---|---|---|---|
| 1. | На право заключения договора поставки подшипников для дочерних и зависимых обществ ОАО "РЖД". | 4 538 209.97 руб., без НДС | Тут какая-то ссылка | ||
| 2. | На право заключения договора поставки подшипников для дочерних и зависимых обществ ОАО "РЖД". | 4 538 209.97 руб., без НДС | Ссылка на яндекс |
Таблица вертикальная классическая
Вариант таблицы с шапкой по вертикали. Для отрисовки вертикального расположения заголовка используются CSS стили, применяющиеся к ячейкам с атрибутом data-vhead="vhead"
Используя class модификатор table2__col_dark шапка у данной таблицы примит стиль "Темный".
| Наименование лота | На право заключения договора поставки подшипников для дочерних и зависимых обществ ОАО "РЖД". |
| Начальная (максимальная) цена договора | 4 538 209.97 руб., без НДС |
| Классификация по ОКПД2 | Тут какая-то ссылка |
| Классификация по ОКВЭД2 | |
| ОКАТО |
Таблица адаптивная
Вариант псевдо-таблицы, полностью адаптивной под мобильные устройства. Данная таблица построена на <div>, что позволяет легче управлять элементами и добавлять например ссылку на строку без использования js
Можно использовать несколько модификаторов:
- .table2_air - больше "воздуха" для узких строк с обилием иконок
- .table2_interactive-list - таблица становится "Интерактивным списком": в конце строки появляется стрелочка, если строка является ссылкой.
Таблица строится по системе компановки элементов Flexbox. По умолчанию для таблицы задано 6 ячеек, ширины которых равны 100%/6. Для манипуляцией размером колонок необходимо создавать/добавлять класс комификатор. Создан класс модификатор для ячеек table2__col_fluid, который примит остаток между разницей от всей ширины таблицы и оставшихся ширин колонок.
Например: ниже представлена таблицы с 5 колонками, по умолчанию ширины 4-х из них равны, width:calc(100%/6), и 4-я по счету колонка с модификатором table2__col_fluid. Получиться динамическая ширина колонок с размерами, по 16% для всех колонок кроме 4-ой, у которой ширина примит значение 33%. Рабочий пример можно посмотреть на странице тендеров https://new-company.nu.oooinex.ru/ru/page/4893
Таблица вертикальная адаптивная
Вариант адаптивной таблицы с шапкой по вертикали. Для отрисовки вертикального расположения заголовка используется class модификатор таблицы table2__vertical-header
Используя для таблицы class модификатор table2__vertical-header_dark шапка у данной таблицы примит стиль "Темный".
Свернуть / развернуть
Пример работы:
Нам понадобятся:
- Шаблон: app/ucm/templates/xslt/_common/switcher.xsl.
- Скрипт: внутри шаблона.
- Стили для точки сборки: front/web/css/adaptive/src/common/switcher.less
Необходим общий родитель с классом j-switch, внутри кнопка-свичер и скрываемый контент в обертке с классом j-switch-details
Вариация для карты
Раскрывающийся контент
Пример работы:
Нам понадобятся:
- Шаблон с примером использования: front\app\ucm\templates\xslt\disclosure\disclosure.xsl
- Скрипт включен в тему
- Стили включены в тему
- Стили для лейблов: front/web/css/adaptive/src/common/label.less
Спойлер простой свернутый:
При покупке билета вы можете воспользоваться общедоступными и специальными тарифными планами. Особенность спецтарифов в том, что они действуют при соблюдении ряда условий: соответствия возраста, оформления в одном заказе поездки и «туда», и «обратно» и т.д.
Применение одновременно нескольких тарифных планов (кроме предусмотренных для пассажиров на местах в «детском купе» и на местах для маломобильных пассажиров/инвалидов) не предусмотрено. Минимальная стоимость доступна, если вы оформляете билет за 90 суток до отправления поезда и в случае низкого или умеренно низкого спроса. Снижение стоимости по специальным и общедоступным тарифным планам применяется к стоимости проезда (сервисные и комиссионные сборы всегда оформляются по полной стоимости).
Спойлер простой свернутый с лейблом:
При покупке билета вы можете воспользоваться общедоступными и специальными тарифными планами. Особенность спецтарифов в том, что они действуют при соблюдении ряда условий: соответствия возраста, оформления в одном заказе поездки и «туда», и «обратно» и т.д.
Спойлер простой развернутый:
| Идентификационный номер |
Дата присвоения идентификационного номера |
Максимальный объем эмиссии, руб. | Программа биржевых облигаций |
|---|---|---|---|
| 4-65045-D-001P-02E | 15.11.2016 | 2 700 000 000 000 | |
| 4-65045-D-002P-02E | 23.08.2018 | 80 000 000 000 |
Спойлер с доп. элементами:
| Поезд | Москва Ленинградский вокзал/Курский вокзал | Тверь | Вышний Волочек | Бологое |
| 752 ежедневно |
05:45 | - | - | - |
| 754 ежедневно |
06:50 | 07:54-07:55 | - | 08:51-08:52 |
| 756 ежедневно |
07:00 | 08:05-08:06 | 08:46-08:47 | - |
Спойлер с запретом сворачивания:
Отменены все поезда и беспересадочные вагоны № 17/18 Москва – Ницца – Москва
Подробнее ознакомиться с информацией вы можете по ссылке.
Вложенные спойлеры:
Технология продажи проездных документов – сложный производственный процесс.
В соответствии с пунктом 13 «Правил перевозок пассажиров, багажа, грузобагажа железнодорожным транспортом» (утверждены приказом Минтранса от 19.12.2013 №473), открытие продажи проездных документов на дальние пассажирские поезда ежедневного назначения производится не менее чем за 45 суток до отправления поезда.
Учитывая пожелания пассажиров и высокий спрос на перевозки скоростными поездами «Сапсан», срок открытия продажи поездных документов по инициативе перевозчика был увеличен до 90-120 суток.
В соответствии с приказом Федеральной службы по тарифам от 14 декабря 2010 года №431-т/1 ценообразование в скоростных поездах «Сапсан» находится в зоне рыночной экономики, без привлечения государства в качестве регулятора в части возмещения затрат перевозчику. Формирование стоимости направлено на увеличение объемов перевозок, зависит от времени, оставшегося до отправления, популярности рейса, оцениваемого по ретроспективным показателям, и текущего спроса, сформированного рынком на перевозку конкретным поездом по каждому классу обслуживания в отдельности.
В случае оформления электронного билета на сайте rzd.ru стоимость в процессе оформления в списке доступных к оформлению рейсов и вагонов в поездах носит справочный характер и отражает стоимость на момент просмотра. С учетом высокого спроса повышение цен на проезд начинается в первые минуты после открытия продажи. Как правило, это происходит при оформлении билетов на рейсы скоростных поездов «Сапсан» отправлением в выездные дни (пятница, воскресенье, предпраздничные и праздничные дни).
Подсистема динамического управления тарифами и стимулирования спроса (ДУТИСС) оценивает текущую населенность на момент резервирования места и формирует окончательную стоимость билета.
Окончательная стоимость отражается после резервирования места на этапе «Проверка заказа». При этом пользователь вправе согласиться с указанной стоимостью или отказаться от дальнейшего оформления. Свое согласие со стоимостью электронного билета пользователь удостоверяет отметкой внизу страницы на данном этапе, соглашаясь также с реквизитами поездки и правилами оформления электронных билетов. Без проставления необходимой отметки о согласии невозможно перейти к оплате заказа.
В целях дополнительного информирования пользователей официального сайта ОАО «РЖД» на этапе выбора поезда размещена информация о возможном изменении стоимости в процессе оформления. При необходимости пользователи сайта rzd.ru могут ознакомиться с информацией о тарифной и маркетинговой политике в разделе «Стоимость проезда в поезде «Сапсан».
Компанией ОАО «РЖД» для пассажиров скоростных поездов «Сапсан» в возрасте от 60 лет и более предоставляется скидка по специальному тарифу Senior в размере 30% от текущей стоимости проезда на момент оформления.
Для пассажиров в возрасте от 10 до 21 года с 1 сентября 2016 года действует специальный тариф Junior. Скидка по данному специальному тарифу составляет 30% от текущей стоимости проезда на момент оформления.
Для пассажиров любых возрастных групп при одновременном оформлении билетов на поезда «Сапсан» в направлении «туда» и «обратно» предоставляется скидка по общедоступному специальному тарифу «Туда-обратно». В соответствии с действующими условиями указанного специального тарифа скидка на билет в направлении «обратно» составляет 20%, при этом билет в направлении «туда» оформляется по полной стоимости.
Приобретение проездных документов по указанным выше тарифным планам доступно к оформлению пассажирам по всем каналам продаж, в том числе на официальном сайте ОАО «РЖД».
Приобретение проездных документов для проезда одного пассажира на двух смежных креслах (со скидкой в размере 50% от стоимости билета на 2-е место), без ограничения по возрасту пассажира на момент отправления поезда доступно по специальному тарифу Single. Оформление данного тарифа доступно только в билетных кассах, по устному заявлению пассажира.
Для пассажиров скоростных поездов «Сапсан» доступно оформление дорожной или электронной карты «Универсальная», предоставляющей право на приобретение билетов со скидкой 10% от текущей стоимости на момент оформления билета.
Для пассажиров скоростных поездов «Сапсан» доступно оформление дорожной или электронной карты «Деловой проездной». Подробнее о тарифных планах и условиях применения в разделе «Деловой проездной».
Более подробную информацию о маркетинговой и тарифной политике Дирекции Вы можете узнать на официальном сайте ОАО «РЖД» в разделе «Стоимость проезда в поезде «Сапсан».
Внимание! Допускается оформление в одном заказе электронных билетов на скоростные поезда «Сапсан» с применением различных специальных и общедоступных тарифных планов (Полный, детский, детский без места, Senior, Junior, Туда-обратно, дорожные и электронные карты, «Деловой проездной»). При этом к одному пассажиру может быть применен только один специальный или общедоступный тариф. Скидка по специальному тарифному плану применяется только к стоимости проезда, за исключением суммы сервисного сбора.
Раскрывающийся блок информации
Нам понадобятся:
- Шаблон c примером использования: front/app/ucm/templates/xslt/pass/pass-main_accessible.xsl.
- Скрипт: front/web/js/common/unfolding-block.js.
- Стили для точки сборки: front/web/css/adaptive/src/blocks/notification.less.
Контекстный список
По наведению или фокусу на ссылкообразную кнопку появляется всплывающее окно со списком (напр, файлов).
Нам понадобятся:
- Скрипт: front/web/js/common/context-list.js (для разруливания позиционирования списка, чтобы он не заходил за края обрезающего контейнера).
- Стили для точки сборки: front/web/css/adaptive/src/common/context-list.less.
Блок без фона
У нас имеется набор классов, облегчающий построение сетки страницы.
Их работу можно увидеть на любой стартовой и многих внутренних страницах.
- .contents стили включены в тему, но могут кастомизироваться на конкретных страницах при необходимости. Обеспечивает ширину и центрирование контентной части.
Блок с белым фоном
Белая карточка с характерными внутренними и наружными отступами, типовой блок сайта. Может быть взята за основу построения других блоков.
В данном UIkit используется иногда как контейнер для небольших элементов, не имеющих собственных фонов и отступов.
Какой-то текст
Блок пустых результатов
Не ограничен по ширине, тянется на всю ширину родителя.
Блок с иконкой / ссылкой
Не ограничен по ширине, тянется на всю ширину родителя
Может показываться в форме или вне ее, как самостоятельный блок, если интересует как самостоятельный блок - стоит добавить класс-модификатор .post-status_alone.
Сообщение об успехе, модификатор .post-status_success (иначе пустой кружок):
Все прошло так, как и задумывалось
А как же иначе?
Сообщение об ошибке, иконка в разметке:
Добавим сюда кнопку и другую иконку:
Блок количества найденных результатов
Нам понадобятся:
- Шаблон: front\app\ucm\templates\xslt\_common\search-count.xsl
- Стили для точки сборки: front\web\css\adaptive\src\common\search-count.less
Шаблон умеет правильно склонять "Найден/найдено" и "результат/результата/результатов" в зависимости от числа результатов (sh:declension) и выводить числа через пробел между миллионами и тысячами (sh:format-1000)
Найдено
11 635 результатов
Блок количества найденных результатов – альтернативная версия
Нам понадобятся:
- Стили для точки сборки: front\web\css\adaptive\src\common\materials-found.less
Блок новости
Раскладка блоков по 3 и 4
Возможности, заложенные в front/web/css/adaptive/src/blocks/blocks-row.less
Как правило используется в сочетании с front/web/css/adaptive/src/blocks/row-adaptive.less, посмотреть описание
- Структуры из шести блоков описана отдельно, перейти
- Структуры из 3 и 4 блоков в строке строятся классами .three-blocks-row и .four-blocks-row соответственно. Они фиксируют ширину дочерних .block на десктопе, чтобы их помещалось нужное количество и они располагались по сетке. Поведение раскладки в адаптиве контролируется дополнительными классами родительского контейнера,см. описание
- .three-flex-start-row - Структуры из 3 блоков - разновидность для случаев, когда мы знаем, что в одном из рядов может быть не полный комплект из трех блоков, а 1 или два, и нужно чтобы они начинались слева и распределялись также, как в случае полного комплекта. На планшете и мобилке располагаются один под другим. Ширина блоков высчитывается автоматически
- Пример: Опросы
- Требуется обертка с классом .three-flex-start-row, она управляет раскладкой дочерних элементов с классом .block
Существует набор модификаторов высоты:
- .block-height-208 - фиксированная высота в 208px
- .block-height-224 - фиксированная высота в 224px
- .block-height-256 - фиксированная высота в 256px
- .block-height-272 - фиксированная высота в 272px
- .block-height-288 - фиксированная высота в 288px
- .block-height-336 - фиксированная высота в 336px
Не стоит ожидать корректной работы при их комбинации. Будет срабатывать тот класс, чье правило ниже в стилях
.three-blocks-row:
.four-blocks-row:
.three-flex-start-row:
Раскладка 6 блоков
Структура из 6 одинаковых блоков
Строится родительским классом .six-blocks, не используется без вспомогательных классов, задающих поведение на планшетах / мобильных, в данном примере .tablet-scroll и mobile-one-under-another, подробнее об этих классах здесь; и дочерними блоками .block
Структура из 6 разных блоков
Структура из 6 разных блоков, 4 из которых занимают четверть контентной области, а 2 - половину (на десктопе), на планшете широкие занимают всю контентную область, маленькие - половину, на мобильном - все занимают 100% и располагаются один под другим.
Нам понадобится родительский контейнер с классом .six-blocks-diff. Широкие блоки, занимающие на десктопе половину ширины, сейчас представлены классами .half-link и .half-block. Узкие блоки, занимающие четверть пространства - классами .small-white / .small-white_img и .quarter-block. Необходимо контролировать так или иначе высоту этих дочерних блоков, чтобы они были одинаковы.
Пример работы:
Нам понадобятся:
- Шаблон (пример использования): front/app/ucm/templates/xslt/main/EntryPoint.redesign.xsl (четвертая группа блоков)
- Стили для точки сборки (поведение на мобильных и планшетах): front/web/css/adaptive/src/blocks/row-adaptive.less
- Стили для точки сборки: front/web/css/adaptive/src/blocks/blocks-row.less
.six-blocks:
.six-blocks-diff:
Класс обертки .six-blocks-diff может использоваться для одной строки, например, из двух широких блоков:
Или из трех разных:
Адаптивные структуры
Возможности, заложенные в front/web/css/adaptive/src/blocks/row-adaptive.less
Как правило используется в сочетании с front/web/css/adaptive/src/blocks/blocks-row.less, посмотреть возможности
Поведение стркутур на планшете и мобилке регулируется классами контейнера:
- .mobile-scroll скролл на мобилке
- .mobile-one-under-another один под другим на мобилке
- .tablet-scroll скролл на планшете
- .tablet-two-cols в две колонки на планшете
- .tablet-one-under-another один под другим на планшете
Несколько примеров на базе .four-blocks-row:
.mobile-scroll.tablet-scroll:
.mobile-one-under-another.tablet-two-cols:
Фотогалерея слайдер
Презентация слайдер
Данный элемент используется только в рамках HTML-редактора, и представлен здесь с целью отображения дизайна.
Объекты на карте
Создать слой для карты и карточки объекта - пример во вкладке HTML
Создать объект(ы) с точкой - пример во вкладке HTML
Нам понадобятся:
- Подключить скрипт карты ГИП с полученным в БП URL api_url и ключом api_key
<script type="text/javascript" src="{$api_url}" data-api-key="{$api_key}"/script>, - Скрипт: /st/js/dist/gip_map.js,
- Стиль: /st/css/adaptive/gip_map.css
Пример работы:
Счетчик времени
Для него используется два параметра, id блока и data-time атрибут для отображения времени в формате YYYY-MM-DDTHH:mm:ss.