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

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
 
Строка 19: Строка 19:
 
| css || Css стили || string || label {color: red;}
 
| css || Css стили || string || label {color: red;}
 
|}
 
|}
 +
Необходимый селектор для элемента можно найти с помощью средства разработчика в браузере.
  
 
'''Пример:'''
 
'''Пример:'''
Строка 49: Строка 50:
 
     }
 
     }
 
]
 
]
 +
</syntaxhighlight>
 +
 +
 +
'''Пример стилизации для гиперссылок в отчете''' <br>
 +
 +
Необходимо в ресурсе указать необходимый css класс и выбрать необходимый селектор, который относится к элементу гиперссылки :
 +
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
  "items": [
 +
    {
 +
      "id": 1,
 +
      "name": "Красный цвет для гиперссылок",
 +
      "css": ".hyperlinkText { color: red; }",
 +
      "discriminator": "ResourceCssItemDto"
 +
    }
 +
 
 +
  ]
 +
}
 
</syntaxhighlight>
 
</syntaxhighlight>

Текущая версия на 09:47, 3 марта 2022

Требует версию не ниже 0.35.0

Пример

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": [1, 2] // массив элементов которые нужно подключить из ресурса
5     }
6 ]


Пример стилизации для гиперссылок в отчете

Необходимо в ресурсе указать необходимый css класс и выбрать необходимый селектор, который относится к элементу гиперссылки :

 1 {
 2   "items": [
 3     {
 4       "id": 1,
 5       "name": "Красный цвет для гиперссылок",
 6       "css": ".hyperlinkText { color: red; }",
 7       "discriminator": "ResourceCssItemDto"
 8     }
 9    
10   ]
11 }