Подключение внешних CSS-файлов

Работа с общими CSS-стилями путем подключения внешних CSS-файлов к дашборду - рекомендуемый метод для работы с большими приложениями, которые не используют шаблон инструментальной панели для размещения пользовательского интерфейса.

Основное отличие этого подхода от записи пользовательских стилей непосредственно в свойства компонентов инструментальной панели заключается в том, что он:

  • Требуется использование инструмента редактирования CSS за пределами SberMobile

  • Требуется использование более конкретных селекторов для составления правил CSS, ориентированных на элементы компонентов.

  • Требуется учитывать настройки кэширования браузера при доставке обновлений CSS пользователям.

Обратите внимание, что некоторые функции, доступные в редакторе CSS, не могут быть использованы при подключении внешнего CSS-файла. Так как это просто нативный CSS, вам придется использовать селекторы для всех правил стиля и нельзя использовать синтаксис SCSS в файле. Кроме того, он не оптимизируется и не проверяется автоматически при рендеринге интрументальной панели.

Существует три способа создания внешнего CSS-файла для инструментальной панели:

  • Связывание CSS-файлов непосредственно с веб-ресурса, с которого они используются.

  • Хранение CSS-файлов локально в файловой системе SberMobile Server , директория которой доступна в вебе встроенным веб-сервером, и связывание файлов с помощью веб-адресов.

  • Добавление их в медиа библиотеки сервера и связывание в качестве записи расширения.

Мы рекомендуем использовать медиатеку для хранения пользовательских CSS, чтобы иметь полный контроль над связанными файлами.

Добавление CSS-файлов в медиатеку

Пользовательские файлы CSS добавляются в медиатеку так же, как и любые другие ресурсы. Чтобы загрузить пользовательский CSS-файл, следуйте инструкциям, приведенным в статье Использование медиатеки.

Используйте MIME-тип text/css в Типе содержимого созданной записи медиатеки.

Добавление пользовательских CSS-файлов в инструментальную панель

Чтобы использовать пользовательский CSS-файл, загруженный в медиатеку, в инструментальной панели , добавьте его в качестве дополнительного заголовка <head> инструментальной панели, используя адрес, основанный на местоположении файла в таблице Список файлов:

  1. Найдите контекст инструментальной панели в разделе Инструментальные панели в Системном дереве пользовательского интерфейса вашего продукта SberMobile. Для облегчения поиска можно воспользоваться вводом поиска на панели инструментов дерева.

  2. Откройте конфигурацию приборной панели, щелкнув ее правой кнопкой мыши и выбрав опцию ( ) Настроить.

  1. В диалоговом окне конфигурации переключитесь на вкладку Содержимое тега HEAD.

  2. Когда вы находитесь на вкладке Содержимое тега HEAD, добавьте новый элемент, щелкнув курсором на кнопку () Добавить строку.

  3. В созданной строке таблицы оставьте поле Тип со значением Тег и измените значение Имя тега на link. Оставьте поле Выражение для содержимого нетронутым.

  4. Теперь перейдите к полю Атрибуты тега и перейдите во вложенную таблицу, щелкнув курсором на кнопку () рядом со строкой [ Нет записей ].

  1. В таблице Атрибуты тега добавьте новую строку так же, как это было сделано ранее в таблице Содержимое тега HEAD.

  2. В созданной строке добавьте значение href в поле Имя.

  3. В поле Выражение для значения добавьте выражение, которое будет возвращать строковое значение со ссылкой на загруженный файл:

'/content/file/css/custom_css.css'

  1. Добавьте еще одну строку в таблицу Атрибуты тега.

  2. В созданной строке добавьте значение rel в поле Имя.

  3. В поле Выражение для значения добавьте выражение, которое будет возвращать строковое значение с типом добавленного содержимого:

'stylesheet'.

  1. Примените изменения, закрыв диалог конфигурации с помощью кнопки OK внизу. Сейчас новая запись <head> добавлена.

  1. Откройте инструментальную панель из системного дерева пользовательского интерфейса вашего продукта SberMobile, щелкнув на неё курсором или из контекстного меню, щелкнув правой кнопкой мыши на инструментальной панели и выбрав действие ( ) Открыть панель.

  1. Пользовательский CSS-файл отображается в разделе <head> документа, и стили из него должны применяться к компонентам приборной панели:

<link data-custom-head-tag="true" href="/content/file/css/custom_css.css" rel="stylesheet">

CSS-файлы, подключаемые через раздел <head>, не проходят процесс валидации и оптимизации при рендеринге инструментальной панели, как это делают CSS из свойств пользовательских стилей компонентов.

Будьте внимательны к тому, что вы подключаете, не только с точки зрения валидности кода, но и безопасности.