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

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
 
(не показано 28 промежуточных версий 2 участников)
Строка 1: Строка 1:
 
==Дизайн прикладного навигатора (D_NAVIGATOR_DESIGN)==
 
==Дизайн прикладного навигатора (D_NAVIGATOR_DESIGN)==
  
 +
[[Файл:польз нави.png|слева|1300px|border]]<br clear="both" /><br>
  
  
Строка 23: Строка 24:
  
 
=== Элементы ===
 
=== Элементы ===
 +
<div class="NavFrame collapsed" style="width:900px;">
 +
  <div class="NavHead"> Элементы справочника дизайна </div>
 +
  <div class="NavContent"> </br>
 
{| class="wikitable" clear:both;"
 
{| class="wikitable" clear:both;"
 
! Значение ячейки наименование !!  Описание !! Тип
 
! Значение ячейки наименование !!  Описание !! Тип
 +
|-
 +
| FAVICON || FavIcon окна браузера || base64 или svg
 +
|-
 +
| TABTITLE || Заголовок окна браузера || строковый
 
|-
 
|-
 
| USERINFO || Поля о пользователе из токена. || строковый. поля отделяются запятой
 
| USERINFO || Поля о пользователе из токена. || строковый. поля отделяются запятой
 +
|-
 +
| USERINFO_HTML || Html-оформление блока информации о пользовале, с подстановками полей из токена (пример подстановки: ${preffered_name}) || HTML
 +
|-
 +
| MAIN_CONTENT_CSS || Оформление главного окна в которое выводится пивот/форма/page/iframe || CSS
 
|-
 
|-
 
| TOPHEAD || Возможность скрывать шапку прикладного навигатора (по умолчанию шапка скрыта, т.е. при отсутствии этой строки) || логический
 
| TOPHEAD || Возможность скрывать шапку прикладного навигатора (по умолчанию шапка скрыта, т.е. при отсутствии этой строки) || логический
Строка 36: Строка 48:
 
| HEADER_CSS || Оформление шапки || CSS
 
| HEADER_CSS || Оформление шапки || CSS
 
|-
 
|-
−
| LOGO_IMAGE || Логотип для меню/шапки || base64
+
| LOGO_IMAGE || Логотип для меню/шапки || base64 или svg
 
|-
 
|-
 
| LOGO_CSS || Оформление для логотипа меню/шапки || CSS
 
| LOGO_CSS || Оформление для логотипа меню/шапки || CSS
 
|-
 
|-
−
| LOGO_IMAGE_COLLAPSED || Логотип для меню (в свернутом виде) || base64
+
| LOGO_IMAGE_COLLAPSED || Логотип для меню (в свернутом виде) || base64 или svg
 
|-
 
|-
−
| LOGO_COLLAPSED_CSS || Оформление для логотипа меню (в свернутом виде) || base64
+
| LOGO_COLLAPSED_CSS || Оформление для логотипа меню (в свернутом виде) || CSS
 
|-
 
|-
 
| MENU_CSS || Оформление меню (для задания фона например) || CSS
 
| MENU_CSS || Оформление меню (для задания фона например) || CSS
Строка 82: Строка 94:
 
| MENU_ITEM_EXPANDER_CSS || Оформление экспандера элемента меню || CSS
 
| MENU_ITEM_EXPANDER_CSS || Оформление экспандера элемента меню || CSS
 
|-
 
|-
−
| MENU_ITEM_EXPANDER_IMAGE || Иконка экспандера элемента меню || base64
+
| MENU_ITEM_EXPANDER_IMAGE || Иконка экспандера элемента меню || base64 или svg
 
|-
 
|-
−
| MENU_EXPANDER_IMAGE || Иконка экспандера меню || base64
+
| MENU_EXPANDER_IMAGE || Иконка экспандера меню || base64 или svg
 
|-
 
|-
−
| FAVICON || FavIcon окна браузера || base64
+
| MENU_ACCORDION_BEHAVIOR || Поведение меню как в аккордеоне (схлапывать другие открытые блоки при раскрытии нового) || логический
 
|-
 
|-
−
| TABTITLE || Заголовок окна браузера || строковый
+
| LOGOUT_BUTTON_CSS || Оформление кнопки выхода || CSS
 
|-
 
|-
−
| USERINFO_HTML || Html-оформление блока информации о пользователе, с подстановками полей из токена (пример подстановки: ${preffered_name}) || HTML
+
| LOGOUT_BUTTON_IMAGE || Иконка для кнопки выхода || base64 или svg
 
|-
 
|-
−
| MAIN_CONTENT_CSS || Оформление главного окна в которое выводится пивот/форма/htmlPage/iframe || CSS
+
| LOGOUT_BUTTON_IMAGE_CSS || Оформление иконки для кнопки выхода || CSS
 
|-
 
|-
−
| MENU_ACCORDION_BEHAVIOR || Поведение меню как в аккордеоне (схлапывать другие открытые блоки при раскрытии нового) || логический
+
| LOGOUT_BUTTON_TEXT || Текст для кнопки выхода || строковый
 
|-
 
|-
 
|}
 
|}
 +
</br>
 +
</div></div>
 
==== Пример заполненного справочника====
 
==== Пример заполненного справочника====
−
[[Файл:оформление прикладного навигатора.png|слева]] <br clear="both" /><br>
+
[[Файл:оформление прикладного навигатора.png|1000px|слева]] <br clear="both" /><br>
  
−
== Настроить дизайн пользовательского навигатора ==
+
= Настроить дизайн пользовательского навигатора =
  
−
=== Оформить шапку прикладного навигатора ===
+
== Оформить шапку прикладного навигатора ==
 
Для того, чтобы показать шапку в пользовательском навигаторе следует включить флаг '''TOPHEAD'''. Заголовок задаётся в поле '''HEADERTITLE''', а оформление шапки происходит в формате CSS в поле '''HEADER_CSS'''.
 
Для того, чтобы показать шапку в пользовательском навигаторе следует включить флаг '''TOPHEAD'''. Заголовок задаётся в поле '''HEADERTITLE''', а оформление шапки происходит в формате CSS в поле '''HEADER_CSS'''.
  
−
<gallery mode="packed" heights=300px style="text-align:left;">
+
<gallery mode="packed" heights=250px style="text-align:left;">
−
Файл:Без шапки.png|<div style="text-align:center">'''навигатор без шапки'''</div>
+
Файл:нави без шапки.png|<div style="text-align:center">'''Навигатор без шапки'''</div>
−
Файл:Шапка навигатора.png|<div style="text-align:center">'''Шапка навигатора'''</div>
+
Файл:нави с шапкой.png|<div style="text-align:center">'''Шапка навигатора'''</div>
 
</gallery>
 
</gallery>
  
−
=== Оформить боковое меню ===
+
== Оформить логотип ==
−
Оформление всего бокового меню задается в формате CSS в поле '''MENU_CSS'''. 
+
Для того, чтобы оформить логотип, необходимо добавить картинку логотипа в формате base64 в поле '''LOGO_IMAGE''', а также в поле '''LOGO_IMAGE_COLLAPSED''' для отображения логотипа пи свернутом меню.
−
Неизменяемая информация задаётся в поле '''MENU_STATIC_INFO''' в формате текста. Настроить поведение раскрывающегося меню следует с помощью отметки в поле '''MENU_ACCORDION_BEHAVIOR''', где включенный флаг означает, что раскрытая иерархия пункта меню сворачивается, если пользователь выбрал другой пункт меню, а выключенный флаг означает, что раскрытые пункты меню будут раскрытыми, пока пользователь сам их не закроет.
+
Далее необходимо задать настройки оформления в CSS формате, такие как размер логотипа и отступы. Для стандартного логотипа в поле '''LOGO_CSS''', а для свернутого - '''LOGO_COLLAPSED_CSS'''.
−
==== Оформление элемента меню ====
+
Если в навигаторе есть шапка, то сворачивание логотипа происходить не будет.
−
Для того, чтобы оформить один элемент меню следует задать настройки в формате CSS в поле '''MENU_ITEM_CSS''', если в элементе меню присутствует логотип, то тогда настройки следует задать в поле '''MENU_LOGO_ITEM_CSS'''. Для того, чтобы оформить саму иконку следует задать ей настройки в поле '''MENU_ITEM_ICON_CSS'''. Для оформления ссылки в формате CSS следует задать её оформление в поле '''MENU_ITEM_LINK_CSS'''.
+
 
−
Чтобы задать оформление для наведенных пунктов меню следует задать настройки в поле '''MENU_ITEM_HOVER_CSS''' в формате CSS. Аналогично для наведенных ссылок '''MENU_ITEM_HOVER_LINK_CSS''' . Оформление для выбранного пункта меню задаётся в поле '''MENU_ITEM_SELECTED_CSS'''.
+
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример LOGO_CSS </div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
width: 64px;
 +
height: 64px;
 +
background-size: 64px;
 +
margin: 0px 8px 0px 16px;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
 
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример LOGO_COLLAPSED_CSS </div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
height: 64px;
 +
background-size: 40px;
 +
margin:0;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
 
 +
<gallery mode="packed" heights=200px style="text-align:left;">
 +
Файл:лого разверн.png|<div style="text-align:center">'''Логотип в развернутом виде'''</div>
 +
Файл:лого сверн.png|<div style="text-align:center">'''Логотип в свернутом виде'''</div>
 +
</gallery>
  
−
==== Оформить уведомления на элементе меню ====
+
== Оформить заголовок ==
−
Уведомления могут быть двух типов: счетчик и логическое значение. Оформление для счётчика задаётся в поле '''MENU_ITEM_NOTIFICATION_CSS''', а для логического значения '''MENU_ITEM_NOTIFICATION_BOOL_CSS''' в формате CSS.  
+
Для того, чтобы оформить заголовок необходимо записать его в текстовое значение поля '''MENU_TITLE'''. Далее в '''MENU_LOGO_ITEM_CSS''' прописать нужные настройки для оформления данного заголовка, такие как цвет и размер шрифта, жирность, отступы.  
  
−
=== Оформить cхлапывание меню ===
+
<div class="NavFrame collapsed" style="width:500px;">
−
Оформление свернутого меню задаётся в формате CSS  в поле '''MENU_COLLAPSED_CSS''' . Иконку означающую, что меню будет свернутым следует задать в поле
+
  <div class="NavHead"> Пример </div>
−
'''MENU_EXPANDER_IMAGE'''. Для оформления иконки следует в формате CSS задать настройки в поле '''MENU_ITEM_EXPANDER_CSS'''.
+
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
font-weight: 600;
 +
font-size: 18px;
 +
text-transform: uppercase;
 +
color: #2B2B33;
 +
line-height: 20px;
 +
margin: 16px 12px 16px 8px;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
  
−
{| class="wikitable" clear:both;"
+
Для того, чтобы заголовок располагался в одной строке с логотипом, необходимо включить флаг '''MENU_LOGO_AND_TITLE_IN_ROW'''.
−
! Значение поля !! Пример заполнения
+
<gallery mode="packed" heights=250px style="text-align:left;">
−
|-
+
Файл:лого и заголовок в одной строке.png|<div style="text-align:center">'''Логотип и заголовок в одной строке'''</div>
−
| MENU_CSS|| background-color: #e6e6fa!important;
+
Файл:лого и заголовок в разных строках.png|<div style="text-align:center">'''Логотип и заголовок в разных строках'''</div>
−
|-
+
</gallery>
−
| MENU_COLLAPSED_CSS || background-color: #e6e6fa!important;
+
 
−
|-
+
== Оформить боковое меню ==
−
| MENU_LIST_CSS || color: #5B5C62!important; font-weight: bold!important;"
+
=== Оформление меню ===
 +
* Оформление всего бокового меню задается в формате CSS в поле '''MENU_CSS''', где можно определить цвет боковой панели меню.
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример </div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
background-color: #e6e6fa!important;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
[[Файл:после настройки menu css.png|200px|слева|border|Область меню после задания цвета]]<br clear="both" /><br>
 +
 
 +
* Оформление свернутого бокового меню аналогично задается в формате CSS в поле '''MENU_COLLAPSED_CSS''', где можно определить цвет боковой панели меню в свернутом виде.
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример </div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
background-color: #e6e6fa!important;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
[[Файл:свернутое меню изм.png|200px|слева|border]]<br clear="both" /><br>
 +
 
 +
 
 +
* Настроить поведение раскрывающегося меню следует с помощью отметки в поле '''MENU_ACCORDION_BEHAVIOR''', где включенный флаг означает, что раскрытая иерархия пункта меню сворачивается, если пользователь выбрал другой пункт меню, а выключенный флаг означает, что раскрытые пункты меню будут раскрытыми, пока пользователь сам их не закроет.
 +
[[Файл:accord behaviour.gif|700px|слева|border|Accordion behavior]]<br clear="both" /><br>
 +
 
 +
=== Оформление элемента меню ===
 +
* Для того, чтобы оформить контейнер с элементом меню следует задать настройки в формате CSS в поле '''MENU_ITEM_CSS'''. Например можно задать цвет границ:
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример </div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
border-top-color: rgba(43, 43, 51, 0.1)!important;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
[[Файл:границы.png|200px|слева|border]]<br clear="both" /><br>
 +
 
 +
 
 +
* Для оформления ссылки (текстовой части) меню в формате CSS следует задать её оформление в поле '''MENU_ITEM_LINK_CSS'''. В данном поле можно задать шрифт, его размер, цвет:
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример </div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="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;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
 
 +
Аналогичным образом задаются настройки для наведенных и выделенных пунктов меню:
 +
* Чтобы задать оформление контейнера наведенных пунктов меню, следует задать настройки в поле '''MENU_ITEM_HOVER_CSS''' в формате CSS, а для оформления ссылки - '''MENU_ITEM_HOVER_LINK_CSS'''.
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> MENU_ITEM_HOVER_LINK_CSS</div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
color: #0060D0!important;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
* Чтобы задать оформление контейнера выбранного пункта меню, следует задать настройки в поле '''MENU_ITEM_SELECTED_CSS''', а для оформления ссылки - '''MENU_ITEM_SELECTED_LINK_CSS'''.
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> MENU_ITEM_SELECTED_LINK_CSS</div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
color: #2B2B33!important;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
[[Файл:оформление пунктов меню.png|500px|слева|border]]<br clear="both" /><br>
 +
 
 +
=== Оформить уведомления на элементе меню ===
 +
Уведомления настраиваются в справочнике "Меню прикладного навигатора". [[Платформа_3V/Пользовательский_навигатор/Меню_навигатора(описание_справочника)#.D0.9D.D0.B0.D1.81.D1.82.D1.80.D0.BE.D0.B8.D1.82.D1.8C_.D1.83.D0.B2.D0.B5.D0.B4.D0.BE.D0.BC.D0.BB.D0.B5.D0.BD.D0.B8.D1.8F|Настройка уведомлений]]<br>
 +
Для того, чтобы настроить дизайн индикатора в уведомлении, необходимо задать настройки в формате CSS в поле '''MENU_ITEM_NOTIFICATION_CSS'''.<br>
 +
Пример настройки дизайна индикатора:
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример </div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="CSS" >
 +
background: rgba(43, 43, 51, 0.6)!important;
 +
color: white!important;
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
[[Файл:уведомление.png|300px|слева|border]]<br clear="both" /><br>
 +
 
 +
=== Оформить статическую информацию ===
 +
Неизменяемая информация задаётся в поле '''MENU_STATIC_INFO'''. Номер телефона указывается в текстовом формате, а email - в виде ссылки с помощью атрибута href (HTML тега <a>), который задает URL адрес на который ведёт ссылка. В том же теге <a> задается стиль ссылки.
 +
Пример:
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример заполнения email-адреса </div>
 +
  <div class="NavContent"> </br>
 +
{| class="wikitable"
 
|-
 
|-
−
| MENU_TITLE || Платформа 3V
+
! Оформление email-адреса
 
|-
 
|-
−
| MENU_LOGO_AND_TITLE_IN_ROW || Отметка. Есть отметка: содержимое MENU_TITLE встаёт в одну строку с логотипом, <br>нет отметки: содержимое MENU_TITLE встаёт под логотипом
+
| <syntaxhighlight lang="HTML" line>
−
|-
+
<a href='mailto:info@trivium.group' style='color:inherit;
−
| MENU_LOGO_ITEM_CSS || background: #e6e6fa!important;<br>color: #fff!important;<br>min-height: 48px;background: #e6e6fa!important;<br>margin: 5%!important;<br>padding: 8px 0!important;<br>min-height: 48px;"
+
text-decoration:none;
−
|-
+
opacity:0.6'>info@trivium.group</a>
−
| MENU_ITEM_CSS || border-top-color: rgba(205,208,220,1)!important;
+
</syntaxhighlight>
−
|-
+
|}</br>
−
| MENU_ITEM_NOTIFICATION_CSS ||  background-color: #d8bfd8!important;
+
</div></div>  
−
|-
+
[[Файл:статич инф.png|400px|слева|border]]<br clear="both" /><br>
−
| MENU_ITEM_NOTIFICATION_BOOL_CSS ||  background-color: #d8bfd8!important;
 
−
|-
 
−
| MENU_ITEM_LINK_CSS || color: #5B5C62!important;<br>font-weight: bold!important;
 
−
|-
 
−
| MENU_ITEM_ICON_CSS || height: 18px!important;<br>width: 18px!important;<br>flex: 0 0 18px!important;<br>margin: 0 3px;
 
−
|-
 
−
| MENU_ITEM_SELECTED_CSS || color: #5B5262!important;
 
−
|-
 
−
| MENU_ITEM_SELECTED_LINK_CSS || color: #5B5262!important;
 
−
|-
 
−
| MENU_ITEM_HOVER_CSS || color: #5B5262!important;
 
−
|-
 
−
| MENU_ITEM_HOVER_LINK_CSS || color: #5B5262!important;
 
−
|-
 
−
| MENU_ITEM_CHILD_CSS || color: #5B5262!important;
 
−
|-
 
−
| MENU_BOTTOM_CSS || border-top-color: transparent!important;
 
−
|-
 
−
| MENU_BOTTOM_ITEM_CSS || color: #5B5C62!important;<br>font-weight: bold!important;<br>border-top-color: rgba(205,208,220,1)!important;
 
−
|-
 
−
| MENU_ITEM_EXPANDER_CSS || display: none
 
−
|-
 
−
| MENU_ITEM_EXPANDER_IMAGE || Иконка в base64
 
−
|-
 
−
| MENU_EXPANDER_IMAGE || Иконка в base64
 
−
|-
 
−
| MENU_ACCORDION_BEHAVIOR || Отметка. Есть отметка - дочерние пункты меню схлапываются,<br> если открыт другой пункт меню, <br>если нет отметки, то все раскрытые пункты меню остаются раскрытыми.
 
−
|-
 
−
| USERINFO_HTML || <div style='font-weight:bold;'>${name}</div>
 
−
|-
 
−
|}
 
  
−
=== Настроить логотип ===
+
== Информация о пользователе ==
−
Логотип задаётся в поле в формате base64 '''LOGO_IMAGE''' для развернутого вида бокового меню и в '''LOGO_IMAGE_COLLAPSED''' для свёрнутого. Если в навигаторе есть шапка, то сворачивание логотипа происходить не будет.
 
−
Оформление для логотипа(высота, ширина и тд) задается в формате CSS поле '''LOGO_CSS''' для развернутого вида боковика и в '''LOGO_COLLAPSED_CSS''' для свернутого.
 
−
 
 
−
=== Информация о пользователе ===
 
 
В поле '''USERINFO''' задаются поля из токена, которые будут отображены в области информации о пользователе.  
 
В поле '''USERINFO''' задаются поля из токена, которые будут отображены в области информации о пользователе.  
 
{| class="wikitable" clear:both;"
 
{| class="wikitable" clear:both;"
Строка 195: Строка 309:
 
|-
 
|-
 
|}
 
|}
−
Оформление следует задать в поле '''USERINFO_HTML''' в формате HTML.  
+
Оформление следует задать в поле '''USERINFO_HTML''' в формате HTML.
 +
 
 +
<div class="NavFrame collapsed" style="width:500px;">
 +
  <div class="NavHead"> Пример </div>
 +
  <div class="NavContent"> </br>
 +
<syntaxhighlight lang="HTML" >
 +
<div style='font-weight:bold;'>${name}</div>
 +
</syntaxhighlight>
 +
</br>
 +
</div></div>
 +
[[Файл:user info.png|300px|слева|border]]<br clear="both" /><br>
  
−
=== Оформление вкладки ===
+
== Оформление вкладки ==
 
Для того, чтобы оформить вкладку следует задать фавикон в формате base64 в поле '''FAVICON''' и отображаемый заголовок вкладки в поле '''TABTITLE'''.
 
Для того, чтобы оформить вкладку следует задать фавикон в формате base64 в поле '''FAVICON''' и отображаемый заголовок вкладки в поле '''TABTITLE'''.
  
 
[[Файл:фавиконы.png]]
 
[[Файл:фавиконы.png]]

Текущая версия на 12:28, 29 июня 2022

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

польз нави.png




Атрибуты

Наименование атрибута Идентификатор атрибута Тип атрибута Назначение
Идентификатор 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.

  • Логотип и заголовок в одной строке
  • Логотип и заголовок в разных строках

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

Оформление меню

  • Оформление всего бокового меню задается в формате CSS в поле MENU_CSS, где можно определить цвет боковой панели меню.
Область меню после задания цвета



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




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



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

  • Для того, чтобы оформить контейнер с элементом меню следует задать настройки в формате CSS в поле MENU_ITEM_CSS. Например можно задать цвет границ:
границы.png




  • Для оформления ссылки (текстовой части) меню в формате CSS следует задать её оформление в поле MENU_ITEM_LINK_CSS. В данном поле можно задать шрифт, его размер, цвет:

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

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



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

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

уведомление.png



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

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

статич инф.png



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

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

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

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

user info.png



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

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

фавиконы.png

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