Платформа 3V/Формы/Оформление/Добавление стилей к карточке через ресурсы: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
Строка 1: Строка 1:
−
{{DISPLAYTITLE:Ресурсы стилей для карточки}}
+
[https://3v.3v-group.net/navigator/#/home?parentId=28361 Пример]
−
В модель клиентской карточки добавлено поле styles, где можно задать коллекцию ресурсов и идентификаторов элементов из них, пример:
 
  
 +
1)Создаем новый объект в навигаторе типа "Ресурс" если ресурс уже есть переходим к пункту 2
 +
 +
2) Чтобы прописать css стили, открываем json редактор для ресурса и добавляем коллекцию items с элементами (формат указан ниже)
 +
Модель элемента ресурса:
 +
{| class="wikitable"
 +
|-
 +
! Свойство !! Описание !! Тип !! Пример
 +
|-
 +
| name || Наименование элемента ресурса || string || Стили заголовка
 +
|-
 +
| id || Уникальный идентификатор || number || 1
 +
|-
 +
| discriminator || Дискриминатор элемента || string || для css ResourceCssItemDto
 +
|-
 +
| css || Css стили || string || label {color: red;}
 +
|}
 +
 +
'''Пример:'''
 
<syntaxhighlight lang="JSON" line>
 
<syntaxhighlight lang="JSON" line>
 
{
 
{
−
   "cardSourceId": 16509,
+
   "items": [
−
  "data": [],
+
    {
−
  "styles": [
+
      "id": 1,
 +
      "name": "Стили заголовка",
 +
      "css": "label {color: red;}",
 +
      "discriminator": "ResourceCssItemDto"
 +
    },
 
     {
 
     {
−
       "resourceId": 19027,
+
       "id": 2,
−
       "items": [
+
       "name": "h2",
−
        4,
+
      "css": "label {opacity: 0.5}",
−
        5
+
       "discriminator": "ResourceCssItemDto"
−
       ]
 
 
     }
 
     }
 
   ]
 
   ]
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
3) Указываем нужные нам элементы из ресурса в JSON клиентской карточки, для этого добавим свойство styles
  
−
в отдаваемую модель клиентской карточки добавлена информация о ресурсах, а так же сами стили из указанных ресурсов объединенные через перенос строки
+
'''Формат:'''
 
<syntaxhighlight lang="JSON" line>
 
<syntaxhighlight lang="JSON" line>
−
{
+
"styles": [ // массив ресурсов
−
  "css": "button, select {text-transform: none;}\nelement.style {padding-left: 15px;}",
 
−
  "cardSourceId": 16509,
 
−
  "data": [],
 
−
  "styles": [
 
 
     {
 
     {
−
       "resourceId": 19027,
+
       "resourceId": 28362, // ид ресурса в навигаторе
−
       "items": [4,5]
+
       "items": [ // массив элементов которые нужно подключить из ресурса
−
     }]
+
        1,
−
}
+
        2
 +
      ]
 +
     }
 +
]
 
</syntaxhighlight>
 
</syntaxhighlight>

Версия 06:48, 28 июля 2021

Пример

1)Создаем новый объект в навигаторе типа "Ресурс" если ресурс уже есть переходим к пункту 2

2) Чтобы прописать css стили, открываем json редактор для ресурса и добавляем коллекцию items с элементами (формат указан ниже) Модель элемента ресурса:

Свойство Описание Тип Пример
name Наименование элемента ресурса string Стили заголовка
id Уникальный идентификатор number 1
discriminator Дискриминатор элемента string для css ResourceCssItemDto
css Css стили string label {color: red;}

Пример: 

 1 {
 2   "items": [
 3     {
 4       "id": 1,
 5       "name": "Стили заголовка",
 6       "css": "label {color: red;}",
 7       "discriminator": "ResourceCssItemDto"
 8     },
 9     {
10       "id": 2,
11       "name": "h2",
12       "css": "label {opacity: 0.5}",
13       "discriminator": "ResourceCssItemDto"
14     }
15   ]
16 }

3) Указываем нужные нам элементы из ресурса в JSON клиентской карточки, для этого добавим свойство styles

Формат: 

1 "styles": [ // массив ресурсов
2     {
3       "resourceId": 28362, // ид ресурса в навигаторе
4       "items": [ // массив элементов которые нужно подключить из ресурса
5         1,
6         2
7       ]
8     }
9 ]
Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Формы/Оформление/Добавление_стилей_к_карточке_через_ресурсы&oldid=3376