Anpassen mit CSS

ArcGIS Instant Apps unterstützt die Anpassung mit Cascading Style Sheets (CSS), wodurch Sie individuell angepasste Änderungen am Aussehen der Web-App vornehmen können, die in den vorhandenen Konfigurationseinstellungen möglicherweise nicht verfügbar sind. Sie können verschiedene Aspekte des Aussehens der Web-App ändern, beispielsweise die Textgröße und die Farbe für den Fokusindikator.

Vorsicht:

Auch wenn eine CSS-Anpassung möglich ist, wird empfohlen, alle in Instant Apps verfügbaren Konfigurationen zu verwenden, um das Aussehen der Web-App anzupassen. Nicht alle CSS-Klassen eignen sich zum Ändern vorhandener Elemente.

ArcGIS Instant Apps-Vorlagen werden mit dem Calcite Design System erstellt, das verschiedene Designrichtlinien und wiederverwendbare Komponenten bietet, um intuitive und konsistente Oberflächen zu erstellen. Sie können den Style der App anpassen, indem Sie die Calcite-Variablen überschreiben, um das Aussehen der App zu ändern.

Verwenden der CSS-Anpassungsoption

Nachdem Sie die Web-App fertig konfiguriert haben, können Sie sie mit CSS anpassen.

Hinweis:

Einige Vorlagen unterstützen kein benutzerdefiniertes CSS. In derÜbersicht der App-Werkzeuge (PDF)finden Sie Informationen dazu, welche Vorlagen benutzerdefiniertes CSS unterstützen.

Führen Sie zum Verwenden der CSS-Anpassungsoption die folgenden Schritte aus:

1. Deaktivieren Sie im Seitenbereich den Express-Modus, und klicken Sie auf Weiter, wenn die Bestätigungsaufforderung angezeigt wird.
2. Klicken Sie auf Einstellungen suchen, und suchen Sie nach Benutzerdefiniertes CSS.

   Die Einstellungen für Design und Layout werden angezeigt.

3. Klicken Sie im Abschnitt Benutzerdefiniertes CSS auf Bearbeiten.

   Das Fenster Benutzerdefiniertes CSS wird angezeigt.

4. Geben Sie eine CSS-Klasse an, um die verschiedenen Elemente der App zu überschreiben.
5. Klicken Sie auf Schließen, um das benutzerdefinierte CSS anzuwenden.

   Ihre Änderungen werden jetzt angezeigt.

6. Wenn Sie mit der Anpassung zufrieden sind, klicken Sie auf Veröffentlichen, um die angepasste App bereitzustellen.

Vorsicht:

Instant Apps-Aktualisierungen für die Quellvorlage können sich auf das benutzerdefinierte CSS einer App auswirken. Testen Sie daher die App mit jeder neuen Produktversion.

CSS-Klassen

In den nachfolgenden Abschnitten werden Beispiele für CSS-Klassen erläutert, mit denen eine App gestylt und formatiert werden kann.

Anpassen der Schriftgröße

Sie können eine CSS-Klasse schreiben, die die Schriftgröße des Textes ändert.

In der folgenden CSS-Override-Regel können Sie die Schriftgröße einer Seitenleistenkopfzeile in einer Instant Apps-Vorlage vom Typ "Seitenleiste" anpassen:

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

Der Kopfzeilentext wird nun in Schriftgröße 0 angezeigt, was einer Größe von 1 REM oder 16 Pixeln entspricht.

Anpassen der Farbe für den Fokusindikator

Sie können eine CSS-Klasse schreiben, die die Farbe des Fokusindikators für interaktive Elemente in Ihrer App ändert. Dieser wird als Umriss um ein ausgewähltes Element angezeigt.

Um die Fokusindikatorfarbe zu ändern, können Sie die folgende CSS-Klasse verwenden:

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

Diese Klasse ändert die Fokusfarbe interaktiver Elemente bei Auswahl in den Hexadezimalwert #FFFF00 (Gelb).

Durch Anpassen der Farbe des Fokusindikators kann ein stärkerer Kontrast zu den Designfarben der Web-App geschaffen werden, wodurch die Barrierefreiheit für Benutzer mit eingeschränkter Sehfähigkeit verbessert wird.