Шаблон отображения элемента с preview-картинок

Для отображения элементов плитки с preview-картинок используется шаблон Controls/tile:PreviewTemplate. Данный шаблон позволяет в качестве фона плитки использовать изображение.

По умолчанию шаблон отображает данные, которые хранятся в поле title элемента плитки. Шаблон задается в опции itemTemplate.

Ниже приведен пример установки шаблона отображения элемента с preview-картинок.

Пример
Исходный код
<!-- WML -->
<Controls.tile:View source="{{_viewSource}}" imageProperty="image">
   <ws:itemtemplate>
      <ws:partial template="Controls/tile:PreviewTemplate"/>
   </ws:itemtemplate>
</Controls.tile:View>

Конфигурация шаблона

Расширенная настройка шаблона отображения элемента с preview-картинок.

Шаблон шапки плитки

Чтобы задать шаблон отображения шапки плитки, установите значение для опции topTemplate.

В следующем примере для плитки задан шаблон отображения шапки.

<!-- WML -->
<Controls.tile:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial template="Controls/tile:PreviewTemplate"
                  hasTitle="{{itemTemplate.item.contents.isDocument}}">
         <ws:topTemplate>
            <div>{{itemTemplate.item.contents.additionalText}}</div>
         </ws:topTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.tile:View>

Чтобы задать шаблон отображения подвала плитки, установите значение для опции footerTemplate.

В следующем примере для плитки задан шаблон отображения подвала.

<!-- WML -->
<Controls.tile:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial template="Controls/tile:PreviewTemplate"
                  hasTitle="{{itemTemplate.item.contents.isDocument}}">
         <ws:footerTemplate>
            <div>Дополнительная информация на плитке</div>
         </ws:footerTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.tile:View>

Чтобы задать шаблон отображения контента справа от заголовка плитки, установите значение для опции bottomRightTemplate.

В следующем примере для плитки задан контента справа от заголовка.

<!-- WML -->
<Controls.tile:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial template="Controls/tile:PreviewTemplate"
                  hasTitle="{{itemTemplate.item.contents.isDocument}}">
         <ws:bottomRightTemplate>
            <div>{{itemTemplate.item.contents.counter}}</div>
         </ws:bottomRightTemplate>
      </ws:partial>
   </ws:itemTemplate>
</Controls.tile:View>

Тип отображения градиента

Чтобы задать цвет градиента для фона плитки, установите значение для опции gradientType.

В следующем примере для плитки задан тёмный цвет градиента.

<!-- WML -->
<Controls.tile:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial template="Controls/tile:PreviewTemplate"
         gradientType="dark">
      </ws:partial>
   </ws:itemTemplate>
</Controls.tile:View>

Настройка умного градиента

Чтобы задать пользовательский цвет градиента, установите значение custom для опции gradientType.

Цвет для умного градиента должен быть получен с помощью метода DominantColorWithTheme из модуля Colorimeter.

Цвет градиента для фона плитки, полученный методом БЛ, необходимо передать в качестве значения в опции gradientColor.

В следующем примере для плитки задан пользовательский цвет градиента.

<!-- WML -->
<Controls.tile:View source="{{_viewSource}}">
   <ws:itemTemplate>
      <ws:partial template="Controls/tile:PreviewTemplate"
         gradientType="custom"
         gradientColor="#E0E0E8">
      </ws:partial>
   </ws:itemTemplate>
</Controls.tile:View>

Определение доминантного цвета изображения

Модуль Colorimeter позволяет определять доминантный цвет изображения, тип темы изображения (светлая или тёмная) и комплементарный к доминантному цвет.   Чтобы подключить модуль в свой проект, добавьте код из репозитория в сборочную директорию своего проекта, укажите зависимость от bl_module Colorimeter в файле s3srv. Также укажите модуль в списке проектов для компиляции в CMakeLists.txt сервиса.   Метод DominantColor позволяет определить доминантный цвет RPC-изображения.

Colorimeter.DominantColor(image: RPCFile) -> String

Доминантный цвет изображения по ссылке, определяется методом DominantColorByURL.

Colorimeter.DominantColorByURL(URL: String) -> sbis.Record({
            DominantColor: String,
            IsDarkTheme: Boolean,
            ComplimentaryColor: String,
            ComplimentaryIsDarkTheme: Boolean
})

Доминантный цвет и тема доминантного цвета RPC-изображения определяется методом DominantColorWithTheme.

Colorimeter.DominantColorWithTheme(image: RPCFile) -> sbis.Record({
            DominantColor: String,
            IsDarkTheme: Boolean
})

Комплементарный цвет к доминантному определяется методом GetComplimentaryColor.

Colorimeter.GetComplimentaryColor(DominantColor: String) -> sbis.Record({
            Color: String,
            IsDarkTheme: Boolean,
            ComplimentaryColor: String,
            ComplimentaryIsDarkTheme: Boolean
})

Увеличение плитки при наведении курсора мыши

Чтобы задать режим отображения плитки при наведении на нее курсора мыши, установите значение для опции tileScalingMode.

В следующем примере при наведении курсора размер плитки увеличивается.

Пример
Исходный код
<!-- WML -->
<Controls.tile:View
    source="{{_viewSource}}"
    itemsHeight="{{200}}"
    imageProperty="image"
    tileScalingMode="outside"/>

Увеличенная плитка располагается в центре относительно исходного положения. Если увеличенный элемент не помещается в указанный контейнер, увеличение не происходит.

См. также

Также, для шаблона отображения элемента с preview-картинок можно настроить: