Настройка с помощью CSS

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

Внимание:

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

Шаблоны ArcGIS Instant Apps создаются с использованием Calcite Design System, которая предоставляет набор рекомендаций по проектированию и повторно используемых компонентов для создания интуитивно понятных и единообразных интерфейсов. Вы можете настроить стиль своего приложения, переопределив переменные Calcite, чтобы изменить оформление приложения.

Использование опции настройки CSS

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

Примечание:

Некоторые шаблоны не поддерживают пользовательские CSS. Обратитесь кматрице инструментов приложений (PDF)чтобы увидеть, какие шаблоны поддерживают пользовательские CSS.

Для использования опции настройки (кастомизации) CSS необходимо выполнить следующие действия:

1. На боковой панели отключите режим Экспресс и при появлении запроса на подтверждение щелкните Продолжить.
2. Щелкните Настройки поиска и выполните поиск Пользовательский CSS.

   Появятся настройки Тема и компоновка.

3. Щелкните Редактировать в разделе Пользовательский CSS.

   Появится окно Пользовательский CSS.

4. Укажите Класс CSS для переопределения различных элементов вашего приложения.
5. Щелкните Закрыть, чтобы применить пользовательский CSS.

   Ваши изменения теперь отображаются на карте.

6. Когда вы будете удовлетворены результатами настройки, щелкните Опубликовать, чтобы развернуть настроенное вами приложение.

Внимание:

Обновления Instant Apps в выпуске для исходных шаблонов могут повлиять на пользовательский CSS вашего приложения, поэтому тестируйте приложение после выхода каждой версии.

Классы CSS

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

Настройка размера шрифта

Вы можете написать CSS-класс, который изменяет размер шрифта текста.

В следующем правиле переопределения CSS вы можете настроить размер шрифта заголовка Боковой панели в шаблоне Боковая панель Instant Apps:

h3.esri-widget__heading {
  font-size: var(--calcite-font-size-0);
}

Текст заголовка теперь отображается шрифтом размера 0, что составляет 1 rem или 16 пикселов.

Настройка цвета индикатора фокуса

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

Чтобы изменить цвет индикатора фокуса, вы можете использовать следующий класс CSS:

.calcite-mode-dark{
--calcite-color-focus:#FFFF00;
}

Этот класс изменяет цвет фокуса интерактивных элементов на шестнадцатеричное значение #FFFF00 при выборе, которое отображается желтым цветом.

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