Платформа 3V/Пользовательский навигатор/Настройка дизайна: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
Строка 132: Строка 132:
  
 
== Оформить боковое меню ==
 
== Оформить боковое меню ==
−
* Оформление всего бокового меню задается в формате CSS в поле '''MENU_CSS''', где можно определить цвет боковой панели меню.
+
* Оформление всего бокового меню задается в формате CSS в поле '''MENU_CSS''', где можно определить цвет боковой панели меню.  
 +
* Оформление свернутого бокового меню аналогично задается в формате CSS в поле '''MENU_COLLAPSED_CSS''', где можно определить цвет боковой панели меню в свернутом виде.
 
* Настроить поведение раскрывающегося меню следует с помощью отметки в поле '''MENU_ACCORDION_BEHAVIOR''', где включенный флаг означает, что раскрытая иерархия пункта меню сворачивается, если пользователь выбрал другой пункт меню, а выключенный флаг означает, что раскрытые пункты меню будут раскрытыми, пока пользователь сам их не закроет.
 
* Настроить поведение раскрывающегося меню следует с помощью отметки в поле '''MENU_ACCORDION_BEHAVIOR''', где включенный флаг означает, что раскрытая иерархия пункта меню сворачивается, если пользователь выбрал другой пункт меню, а выключенный флаг означает, что раскрытые пункты меню будут раскрытыми, пока пользователь сам их не закроет.
  
Строка 179: Строка 180:
 
|}
 
|}
  
−
== Оформить cхлапывание меню ==
 
−
Оформление свернутого меню задаётся в формате CSS  в поле '''MENU_COLLAPSED_CSS''' . Иконку означающую, что меню будет свернутым следует задать в поле
 
−
'''MENU_EXPANDER_IMAGE'''. Для оформления иконки следует в формате CSS задать настройки в поле '''MENU_ITEM_EXPANDER_CSS'''.
 
  
 +
<div class="NavFrame collapsed" style="width:900px;">
 +
  <div class="NavHead"> Пример заполнения справочника дизайна </div>
 +
  <div class="NavContent"> </br>
 
{| class="wikitable" clear:both;"
 
{| class="wikitable" clear:both;"
 
! Значение поля !! Пример заполнения
 
! Значение поля !! Пример заполнения
Строка 233: Строка 234:
 
|-
 
|-
 
|}
 
|}
−
 
+
</br>
 +
</div></div>
  
  

Версия 09:05, 5 марта 2022

Дизайн прикладного навигатора (D_NAVIGATOR_DESIGN)

Атрибуты

Наименование атрибута Идентификатор атрибута Тип атрибута Назначение
Идентификатор id целое число системный атрибут
Наименование name строка наименование элементов
Текстовое значение VALUE строка значения
CLOB CLOB_VALUE длинный текст настройки оформления
Переключатель BOOLEAN_VALUE логический
Описание DESCRIPTION строка краткое описание элементов

Элементы

Пример заполненного справочника

оформление прикладного навигатора.png



Настроить дизайн пользовательского навигатора

Оформить шапку прикладного навигатора

Для того, чтобы показать шапку в пользовательском навигаторе следует включить флаг TOPHEAD. Заголовок задаётся в поле HEADERTITLE, а оформление шапки происходит в формате CSS в поле HEADER_CSS.

  • Навигатор без шапки
  • Шапка навигатора

Оформить логотип

Для того, чтобы оформить логотип, необходимо добавить картинку логотипа в формате base64 в поле LOGO_IMAGE, а также в поле LOGO_IMAGE_COLLAPSED для отображения логотипа пи свернутом меню. Далее необходимо задать настройки оформления в CSS формате, такие как размер логотипа и отступы. Для стандартного логотипа в поле LOGO_CSS, а для свернутого - LOGO_COLLAPSED_CSS. Если в навигаторе есть шапка, то сворачивание логотипа происходить не будет.

  • Пример настроек для оформления логотипа
  • Пример настроек для оформления свернутого логотипа


Оформить заголовок

Для того, чтобы оформить заголовок необходимо записать его в поле MENU_TITLE. Далее в MENU_LOGO_ITEM_CSS прописать нужные настройки для оформления данного заголовка, такие как цвет и размер шрифта, жирность, отступы. Для того, чтобы заголовок располагался в одной строке с логотипом, необходимо включить флаг MENU_LOGO_AND_TITLE_IN_ROW.

настройка заголовка.png



Настройка заголовка
заголовок.png



Оформить боковое меню

  • Оформление всего бокового меню задается в формате CSS в поле MENU_CSS, где можно определить цвет боковой панели меню.
  • Оформление свернутого бокового меню аналогично задается в формате CSS в поле MENU_COLLAPSED_CSS, где можно определить цвет боковой панели меню в свернутом виде.
  • Настроить поведение раскрывающегося меню следует с помощью отметки в поле MENU_ACCORDION_BEHAVIOR, где включенный флаг означает, что раскрытая иерархия пункта меню сворачивается, если пользователь выбрал другой пункт меню, а выключенный флаг означает, что раскрытые пункты меню будут раскрытыми, пока пользователь сам их не закроет.

Оформление элемента меню

  • Для того, чтобы оформить контейнер с элементом меню следует задать настройки в формате CSS в поле MENU_ITEM_CSS. Например можно задать цвет границ:
border-top-color: rgba(43, 43, 51, 0.1)!important;
  • Для оформления ссылки (текстовой части) меню в формате CSS следует задать её оформление в поле MENU_ITEM_LINK_CSS. В данном поле можно задать шрифт, его размер, цвет:
font-family: Golos UI;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #2B2B33!important;

Аналогичным образом задаются настройки для наведенных и выделенных пунктов меню:

  • Чтобы задать оформление контейнера наведенных пунктов меню, следует задать настройки в поле MENU_ITEM_HOVER_CSS в формате CSS, а для оформления ссылки - MENU_ITEM_HOVER_LINK_CSS.
  • Чтобы задать оформление контейнера выбранного пункта меню, следует задать настройки в поле MENU_ITEM_SELECTED_CSS, а для оформления ссылки - MENU_ITEM_SELECTED_LINK_CSS.

Оформить уведомления на элементе меню

Уведомления настраиваются в справочнике "Меню прикладного навигатора".
Для того, чтобы настроить дизайн индикатора в уведомлении, необходимо задать настройки в формате CSS в поле MENU_ITEM_NOTIFICATION_CSS.
Пример настройки дизайна индикатора: 

background: rgba(43, 43, 51, 0.6)!important;
color: white!important;

Оформить статическую информацию

Неизменяемая информация задаётся в поле MENU_STATIC_INFO. Номер телефона указывается в текстовом формате, а email - в виде ссылки с помощью атрибута href (HTML тега <a>), который задает URL адрес на который ведёт ссылка. В том же теге <a> задается стиль ссылки. Пример:

Оформление email-адреса 
1 <a href='mailto:info@trivium.group' style='color:inherit;
2 text-decoration:none;
3 opacity:0.6'>info@trivium.group</a>



Информация о пользователе

В поле USERINFO задаются поля из токена, которые будут отображены в области информации о пользователе.

Возможные поля из токена Значение
name Полное имя пользователя
preferred_username Основное имя пользователя
given_name Личное имя пользователя
family_name Фамилия пользоватля
email Почта пользователя

Оформление следует задать в поле USERINFO_HTML в формате HTML.

Оформление вкладки

Для того, чтобы оформить вкладку следует задать фавикон в формате base64 в поле FAVICON и отображаемый заголовок вкладки в поле TABTITLE.

фавиконы.png

Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Пользовательский_навигатор/Настройка_дизайна&oldid=6178