83.3K+Download
Geoinformation · Neue Ressource

Esri Calcite-Designsystem.

Eine praktische Calcite-Referenz für fokussierte räumliche Werkzeuge: semantische Oberflächen und blaue Aktionen, kompakte Inspektionsbereiche, echte Eingabe-APIs und ein vollständiges lokales Beispiel zur Standortprüfung.

OpenDesign herunterladen DESIGN.md herunterladen
OpenDesign-Leitfaden8 Kapitel48 ReferenzeinträgeOriginaler Anwendungsleitfaden
01

Oberflächenvorschau des Esri Calcite-Designsystems

Wählen Sie einen Standort aus der Liste oder dem Schema aus, filtern Sie Prüfstatus und validieren Sie eine Notiz, die bis zum Neuladen pro Standort gespeichert bleibt.

Fiktive Standorte erkunden und lokale Notizen speichernVollständiges Beispiel öffnen
Eigenständige Interpretation von HTML/CSS/JavaScript anhand dokumentierter visueller Referenzen. Die Illustration ist keine ArcGIS-Karte; weder die Esri-Laufzeitumgebung noch Schriftarten sind enthalten. · Implementierungsreferenz
02

Designreferenz zum Esri Calcite-Designsystem

Calcite-Design-Tokens 4.1.0 und aktuelle Komponenten-API, geprüft zusammen mit Components 5.1.2. Token- und Komponentenpaket haben unterschiedliche Versionsnummern. Das eingebettete Beispiel ist eine eigenständige Interpretation von HTML/CSS; es verbreitet weder die Calcite-Laufzeitumgebung weiter noch erhebt es den Anspruch, natives Verhalten abzubilden.

Oberflächen, Text und Interaktionen im hellen Theme

Quelle
Name / RegelWert / KonfigurationVerwendung
--calcite-color-surface-1#f7f7f7 Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-surface-2#ffffff Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-surface-3#f2f2f2 Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-surface-4#ebebeb Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-surface-highlight#d6efff Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-text-1#141414 Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-text-2#4a4a4a Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-text-3#6b6b6b Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-text-inverse#ffffff Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-text-link#00619b Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-border-1#d4d4d4 Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-border-2#dedede Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-border-3#ebebeb Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-border-input#949494 Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-brand#007ac2 Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-brand-hover#00619b Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.
--calcite-color-brand-press#004874 Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste.

Aktuelle Abstandsskala

Quelle
Name / RegelWert / KonfigurationVerwendung
--calcite-space-none0Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-px1pxAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-base2pxAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-2xs0.25remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-xs0.375remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-sm0.5remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-sm-plus0.625remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-md0.75remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-md-plus0.875remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-lg1remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-xl1.25remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-2xl1.5remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-3xl2remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.
--calcite-space-4xl2.75remAktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen.

Typografie- und Eckenradius-Skala

Quelle
Name / RegelWert / KonfigurationVerwendung
--calcite-corner-radius-none0Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-corner-radius-xs2pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-corner-radius-sm4pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-corner-radius-pill9999pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-font-size-xs10pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-font-size-sm12pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-font-size14pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-font-size-md16pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-font-size-lg18pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-font-size-xl20pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.
--calcite-font-size-2xl24pxVeröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen.

Input-Komponenten-API

Quelle
Name / RegelWert / KonfigurationVerwendung
scales / m / l; default mÄndern Sie die Komponentenskalierung bewusst; sie ist nicht dasselbe wie das Ändern des Seitenzooms.
statusidle / valid / invalidVermitteln Sie die Gültigkeit eines Felds mit einer Meldung, nicht nur über Farbe.
labelTextstringSichtbarer Beschriftungstext für das aktuelle Input-API.
validationMessagestringErklären Sie den ungültigen Eintrag direkt neben dem Steuerelement.
calciteInputInputeventLesen Sie beim Tippen event.target.value aus.
setFocus()Promise<void>Setzen Sie den Fokus nach einem Validierungsfehler der Anwendung auf die native Komponente.
03

Vollständiger Leitfaden zum Esri Calcite-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

DESIGN-esri-calcite.md

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

Leitfaden herunterladen

Architektur von Arbeitsbereich und Panels im Esri Calcite-Designsystem

Objektkontext sichtbar halten

Eine räumliche Aufgabe umfasst in der Regel mindestens zwei Kontexte: den untersuchten Bereich und das ausgewählte Objekt. Das Beispiel zeigt neben einem eigenständigen Schema und einem Inspektor eine kompakte Standortliste. Bei Auswahl einer Listenzeile oder einer Markierung wird dieselbe stabile Standort-ID festgelegt, damit sich Name, Status und Notiz nicht versehentlich auf unterschiedliche Objekte beziehen.

Aus diesem OpenDesign-Leitfaden

Illustration von einer echten Karte unterscheiden

Das SVG veranschaulicht die Beziehung zwischen einer Liste und einer räumlichen Fläche. Es enthält weder Projektion und Koordinaten noch Ebenen, Zoom, Geokodierung oder Routenplanung. Die sichtbare Bildunterschrift bezeichnet es als Schema und weist darauf hin, dass es nicht maßstabsgetreu ist. Eine ArcGIS-Ansicht für den Produktiveinsatz benötigt eine eigene SDK-Integration, Daten und Barrierefreiheitsmaßnahmen; eine Calcite-Shell allein bietet diese Funktionen nicht.

Semantische Farbr Rollen im Esri Calcite-Designsystem

Werkzeuge mit Oberflächen statt massiven Karten gliedern

Die Referenz unterscheidet zwischen surface-1 und surface-4; surface-highlight ist der Hervorhebung vorbehalten. Das Beispiel verwendet einen weißen Inspektor auf einer zurückhaltenden, gebrochen weißen Arbeitsfläche sowie eine hellblaue ausgewählte Zeile. Feine neutrale Rahmen kennzeichnen Panelgrenzen, ohne jedes Feld in eine schwebende Karte einzuschließen.

Blau eine einheitliche Bedeutung für Interaktionen geben

Die Farben für Marke, Hover und Drücken bilden eine dunkler werdende Folge von #007ac2 über #00619b bis #004874. Die ausgewählte Markierung und die primäre Speicheraktion verwenden diese Farbpalette für unterschiedliche Interaktionsrollen. Schriftliche Statusangaben bei der Prüfung und die Validierungsmeldung der Notiz bleiben auch ohne alleinige Farbcodierung gut lesbar.

Esri Calcite Typografie und Informationsdichte des Designsystems

Die klare Informationshierarchie bewahren

Die veröffentlichten absoluten Schriftgrößen umfassen 12px für kleine Texte, 14px als Basisgröße, 16px für mittlere und 20px für besonders große Texte. Das Beispiel kombiniert einen 20px großen Arbeitsbereichstitel mit 16px großen Panelüberschriften und Bedienelementen in 14px. Metadaten sind kleiner, aber niemals die einzige Stelle, an der das ausgewählte Objekt kenntlich gemacht wird.

Eine Ersatzschrift nicht mit der Markenschrift verwechseln

Dieses eigenständige Beispiel verwendet Arial und System-Ersatzschriften. Es enthält keine Esri-Markenschriften und bezeichnet die Ersatzschrift auch nicht als Avenir. Eine autorisierte native Integration sollte den Assets und der Theme-Einrichtung der festgelegten Calcite-Version folgen. Ein Schriftwechsel kann Zeilenumbrüche und die Breite von Bedienelementen beeinflussen. Testen Sie daher die tatsächlich bereitgestellten Assets.

Esri Calcite Abstandstokens und responsive Panels des Designsystems

Aktuelle Tokennamen verwenden

Die Referenz verwendet die aktuelle Skala --calcite-space-*, die bei den kleinsten Stufen Pixelwerte und bei größeren Abständen rem-Werte kombiniert. Verwenden Sie bei der Implementierung eines nativen Themes diese benannten Rollen durchgängig. Das Anwendungslayout in diesem Beispiel verwendet explizite CSS-Werte, damit es sich ohne den Import eingeschränkt verfügbarer Pakete ausführen lässt.

Das Inspektionsfeld neu anordnen, bevor das Feld verkleinert wird

Esri Calcite Auswahl- und Filterverhalten des Designsystems

Eine gemeinsame Kennung für die Auswahl verwenden

Liste und Schema synchronisieren die Auswahl über A-01, B-02 und C-03, nicht über ihre aktuelle Position im Array. Beim Filtern nach „Geprüft“ wird der passende verfügbare Standort ausgewählt und im Inspektionsfeld angezeigt. Der gedrückte Zustand wird sowohl für die Listenschaltfläche als auch für die zugehörige Markierung angegeben.

Gespeicherte Notizen von nicht gespeicherten Entwürfen trennen

Eine gespeicherte Notiz wird in einer Map mit der Standort-ID als Schlüssel abgelegt. Kehren Sie zu diesem Standort zurück, wird die Notiz wiederhergestellt. Beim Wechsel zu einem anderen Standort wird ungespeicherter Text verworfen. Der Hilfetext gibt ausdrücklich an, dass die Notiz nur lokal verfügbar ist. Ein Editor für den Produktiveinsatz sollte vor dem Verlust nicht gespeicherter Änderungen warnen, wenn dies erhebliche Folgen hätte.

Esri Calcite Eingabevalidierung und Fehlerbehebung des Designsystems

Bei Verwendung von Calcite das native Eingabeelement API nutzen

Das native Beispiel verwendet labelText, value, status und validationMessage. Das Ereignis calciteInputInput kann eine veraltete Fehlermeldung entfernen, während setFocus() nach dem Scheitern einer Anwendungsregel den Fokus wieder auf die Komponente setzt. Dies sind öffentliche Namen von API. Anders als beim Zugriff auf ein internes Eingabeelement über den Shadow Root.

Lokale Bestätigung nicht mit der Speicherung durch einen Dienst verwechseln

In der eigenständigen Vorschau muss die bereinigte Eingabe mindestens zehn Zeichen umfassen und darf höchstens 240 Zeichen lang sein. Die Bestätigung nennt den Standort und weist ausdrücklich darauf hin, dass die Notiz lokal gespeichert wurde. Beim Neuladen werden die Notizen gelöscht. Eine netzwerkgestützte Version müsste Verhalten für ausstehende Vorgänge, Fehler, Wiederholungsversuche und Konflikte vorsehen. Die lokale Speichermeldung lässt nichts davon vermuten.

  1. Versuchen Sie, eine leere oder zu kurze Notiz zu speichern, und lesen Sie die Fehlermeldung.
  2. Geben Sie eine längere Notiz ein, speichern Sie sie, wählen Sie einen anderen Standort aus und kehren Sie dann zurück.
  3. Laden Sie die Seite neu, um zu prüfen, dass das Beispiel keine dauerhafte Speicherung verspricht.

Esri Calcite Barrierefreie Alternativen zur räumlichen Darstellung im Designsystem

Für jede Markierung eine gleichwertige Listenauswahl anbieten

Jede interaktive Markierung hat eine Textschaltfläche in der Standortliste. Die schematische Karte ist somit nicht die einzige Möglichkeit, ein Objekt auszuwählen. Ihr SVG erhält eine kurze Beschreibung; Bedienelemente haben eigene Bezeichnungen und sichtbare Fokuskonturen. Bei einer echten Karte reicht es nicht, einfach den Alternativtext des Schemas zu übernehmen.

Validierung direkt beim Eingabefeld anzeigen

Das Textfeld verweist über aria-describedby sowohl auf den Hilfetext als auch auf die Fehlermeldung. Bei einem Fehler erhält es aria-invalid und den Fokus; bei der nächsten Eingabe wird der veraltete Fehlerzustand entfernt. Die Bestätigung wird in einem Statusbereich angezeigt. Personen, die die Tastatur verwenden, können einen Standort auswählen, eine Notiz eingeben und speichern, ohne eine dargestellte geografische Form bedienen zu müssen.

Esri Calcite Versions- und Integrationsgrenzen des Designsystems

Pakete festlegen und Lizenzbedingungen prüfen

Components 5.1.2 und Design-Tokens 4.1.0 sind separate Pakete. Auf der aktuellen Lizenzseite wird die Verfügbarkeit mit einem ArcGIS Online-, Enterprise- oder Location Platform-Konto beschrieben. Übertragen Sie keine Annahmen zu einer älteren Open-Source-Version auf das aktuelle Paket. Der native Quelltext unten ist für ein Projekt vorgesehen, das diese Anforderungen erfüllt.

  • Components: 5.1.2.
  • Referenz für Design-Tokens: 4.1.0.
  • Vorschau: eigenständiges HTML, CSS und JavaScript; keine Esri-Laufzeitumgebung.

Nur die verwendeten Komponenten registrieren

Esri Calcite Komponentenbeispiele des Designsystems

Eigenständiges Beispiel zur Standortinspektion

Vollständiges eigenständiges HTML, CSS und JavaScript dieser Vorschau. Speichern Sie es als index.html und öffnen Sie die Datei in einem Browser.

html
<!doctype html>
<html lang="en">
  <meta charset="utf-8" /><meta
    name="viewport"
    content="width=device-width,initial-scale=1"
  /><title>Site inspection panel</title
  ><style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font:
        14px/1.5 Arial,
        sans-serif;
      color: #141414;
      background: #f7f7f7;
    }
    button,
    input,
    select,
    textarea {
      font: inherit;
    }
    button {
      cursor: pointer;
    }
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid #007ac2;
      outline-offset: 3px;
    }
    header {
      padding: 20px 24px;
      background: #fff;
      border-bottom: 1px solid #d4d4d4;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }
    h1 {
      font-size: 20px;
      margin: 0;
    }
    header p {
      margin: 2px 0 0;
      color: #6b6b6b;
      font-size: 12px;
    }
    .badge {
      background: #d6efff;
      color: #004874;
      padding: 4px 8px;
      font-size: 12px;
    }
    .layout {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr) 280px;
      min-height: 510px;
    }
    .sites,
    .inspector {
      background: #fff;
      padding: 20px;
      border-right: 1px solid #d4d4d4;
    }
    .inspector {
      border-right: 0;
      border-left: 1px solid #d4d4d4;
    }
    h2 {
      font-size: 16px;
      margin: 0 0 16px;
    }
    label {
      display: block;
      font-weight: 600;
      margin: 12px 0 6px;
    }
    select,
    textarea {
      width: 100%;
      border: 1px solid #949494;
      background: #fff;
      padding: 8px;
      color: inherit;
    }
    textarea {
      resize: vertical;
      min-height: 96px;
    }
    .site {
      display: block;
      width: 100%;
      text-align: left;
      background: #fff;
      border: 1px solid #dedede;
      padding: 12px;
      margin-top: 8px;
    }
    .site[aria-pressed="true"] {
      border-left: 4px solid #007ac2;
      background: #d6efff;
    }
    .site small {
      display: block;
      color: #4a4a4a;
      margin-top: 3px;
    }
    .map {
      position: relative;
      overflow: hidden;
      min-height: 360px;
      background: #ebebe5;
    }
    .map svg {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }
    .map-caption {
      position: absolute;
      bottom: 12px;
      left: 12px;
      padding: 4px 8px;
      background: #fff;
      font-size: 12px;
    }
    .pin {
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid #fff;
      background: #007ac2;
      color: #fff;
      font-weight: bold;
      box-shadow: 0 2px 8px #0004;
    }
    .pin[aria-pressed="true"] {
      background: #004874;
      outline: 3px solid #007ac2;
      outline-offset: 3px;
    }
    .pin[hidden] {
      display: none;
    }
    dl {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      font-size: 12px;
    }
    dt {
      color: #6b6b6b;
    }
    dd {
      margin: 0;
      text-align: right;
    }
    .primary {
      background: #007ac2;
      color: white;
      border: 0;
      width: 100%;
      padding: 10px;
      margin-top: 12px;
    }
    .primary:hover {
      background: #00619b;
    }
    .error {
      color: #a11b1b;
      font-size: 12px;
    }
    .saved {
      color: #237000;
      font-size: 12px;
    }
    footer {
      padding: 16px 24px;
      border-top: 1px solid #d4d4d4;
      color: #6b6b6b;
      font-size: 12px;
      background: #fff;
    }
    @media (max-width: 1000px) {
      .layout {
        grid-template-columns: 210px minmax(0, 1fr);
      }
      .inspector {
        grid-column: 1/-1;
        border-left: 0;
        border-top: 1px solid #d4d4d4;
      }
      .inspector form {
        max-width: 640px;
      }
    }
    @media (max-width: 550px) {
      header {
        align-items: flex-start;
        flex-direction: column;
      }
      .layout {
        display: flex;
        flex-direction: column;
      }
      .sites {
        border-right: 0;
      }
      .map {
        height: 300px;
        min-height: 300px;
      }
      .inspector {
        padding: 20px;
      }
      .site {
        display: inline-block;
        width: 100%;
      }
    }
  </style>
  <body>
    <header>
      <div>
        <h1>Field inspection workspace</h1>
        <p>Original Calcite-inspired layout study · fictional site data</p>
      </div>
      <span class="badge">Local notes only</span>
    </header>
    <main class="layout">
      <aside class="sites">
        <h2>Inspection sites</h2>
        <label for="filter">Show sites</label
        ><select id="filter">
          <option value="all">All sites</option>
          <option value="review">Needs review</option>
          <option value="checked">Checked</option>
        </select>
        <div id="site-list"></div>
        <p id="count" aria-live="polite"></p>
      </aside>
      <section class="map" aria-label="Illustrated site plan">
        <svg
          viewBox="0 0 700 510"
          preserveAspectRatio="xMidYMid slice"
          role="img"
          aria-label="Original schematic with a river, roads and three inspection sites; not a geographic map"
        >
          <rect width="700" height="510" fill="#e4e8db" />
          <path
            d="M480 -50Q230 110 440 260T360 570"
            fill="none"
            stroke="#b6dbe9"
            stroke-width="100"
          />
          <path
            d="M-20 150L720 280M160 -20L290 530M-20 400L720 80"
            stroke="#fff"
            stroke-width="22"
          />
          <path
            d="M-20 150L720 280M160 -20L290 530M-20 400L720 80"
            stroke="#c8c8bf"
            stroke-width="2"
          />
          <g fill="#c4cfb5">
            <rect x="50" y="50" width="100" height="70" />
            <rect x="510" y="340" width="130" height="80" />
            <rect x="80" y="260" width="70" height="60" />
          </g>
        </svg>
        <div id="pins"></div>
        <span class="map-caption">Schematic illustration · not to scale</span>
      </section>
      <aside class="inspector">
        <h2 id="site-title">North access</h2>
        <dl>
          <dt>Site ID</dt>
          <dd id="site-id"></dd>
          <dt>Review state</dt>
          <dd id="site-state"></dd>
        </dl>
        <form id="note-form" novalidate>
          <label for="note">Inspection note</label
          ><textarea
            id="note"
            aria-describedby="note-help error"
            maxlength="240"
          ></textarea>
          <p id="note-help">
            Add 10–240 characters. Notes stay in this page until reload.
          </p>
          <p id="error" class="error" hidden>
            Write at least 10 characters before saving.
          </p>
          <button class="primary" type="submit">Save local note</button>
          <p id="saved" class="saved" role="status"></p>
        </form>
      </aside>
    </main>
    <footer>
      Independent HTML/CSS interpretation by OpenDesign. No Calcite runtime,
      Esri fonts, ArcGIS map or service is loaded.
    </footer>
    <script>
      const sites = [
        { id: "A-01", name: "North access", state: "review", x: 29, y: 24 },
        { id: "B-02", name: "River crossing", state: "review", x: 62, y: 48 },
        { id: "C-03", name: "South garden", state: "checked", x: 34, y: 76 },
      ];
      let selected = "A-01";
      const notes = new Map(),
        list = document.querySelector("#site-list"),
        pins = document.querySelector("#pins"),
        filter = document.querySelector("#filter"),
        note = document.querySelector("#note"),
        error = document.querySelector("#error"),
        saved = document.querySelector("#saved");
      function render() {
        const visible = sites.filter(
          (s) => filter.value === "all" || s.state === filter.value,
        );
        if (!visible.some((s) => s.id === selected)) selected = visible[0]?.id;
        list.replaceChildren();
        pins.replaceChildren();
        for (const s of visible) {
          const b = document.createElement("button");
          b.type = "button";
          b.className = "site";
          b.setAttribute("aria-pressed", String(s.id === selected));
          b.textContent = s.name;
          const small = document.createElement("small");
          small.textContent =
            s.id + " · " + (s.state === "review" ? "Needs review" : "Checked");
          b.append(small);
          b.onclick = () => {
            selected = s.id;
            render();
          };
          list.append(b);
          const pin = document.createElement("button");
          pin.type = "button";
          pin.className = "pin";
          pin.style.left = s.x + "%";
          pin.style.top = s.y + "%";
          pin.textContent = s.id[0];
          pin.setAttribute("aria-label", "Select " + s.name);
          pin.setAttribute("aria-pressed", String(s.id === selected));
          pin.onclick = b.onclick;
          pins.append(pin);
        }
        const s = sites.find((s) => s.id === selected);
        document.querySelector("#count").textContent =
          visible.length + " sites shown";
        document.querySelector("#site-title").textContent = s.name;
        document.querySelector("#site-id").textContent = s.id;
        document.querySelector("#site-state").textContent =
          s.state === "review" ? "Needs review" : "Checked";
        note.value = notes.get(s.id) || "";
        error.hidden = true;
        note.removeAttribute("aria-invalid");
        saved.textContent = "";
      }
      filter.onchange = render;
      note.oninput = () => {
        error.hidden = true;
        note.removeAttribute("aria-invalid");
        saved.textContent = "";
      };
      document.querySelector("#note-form").onsubmit = (e) => {
        e.preventDefault();
        const value = note.value.trim();
        if (value.length < 10) {
          error.hidden = false;
          note.setAttribute("aria-invalid", "true");
          note.focus();
          return;
        }
        notes.set(selected, value);
        saved.textContent = "Note saved locally for " + selected + ".";
      };
      render();
    </script>
  </body>
</html>

Code-Referenz

  • Ursprüngliches Schema und Anwendungsverhalten. SDK für Karten, entfernte Daten und Esri-Laufzeitumgebung sind nicht enthalten.

Native Calcite-Alternative für Eingabefelder

Ersetzen Sie src/main.js in einem Vite-Projekt ohne Framework, dessen index.html <div id="app"></div> enthält.

js
import "@esri/calcite-components/components/calcite-input";
import "@esri/calcite-components/components/calcite-button";

document.querySelector("#app").innerHTML = `
  <calcite-input id="inspection-note" label-text="Inspection note"
    validation-message="Enter at least ten characters"></calcite-input>
  <calcite-button id="save-note">Validate note</calcite-button>
  <p id="result" role="status"></p>`;
const field = document.querySelector("#inspection-note");
const result = document.querySelector("#result");
field.addEventListener("calciteInputInput", () => {
  field.status = "idle";
  result.textContent = "";
});
document.querySelector("#save-note").addEventListener("click", async () => {
  if (field.value.trim().length < 10) {
    field.status = "invalid";
    await field.setFocus();
    return;
  }
  field.status = "valid";
  result.textContent = "The note passes the local rule. Nothing was sent.";
});

Code-Referenz

  • Installieren Sie @esri/[email protected], nachdem Sie die aktuellen Lizenzbedingungen geprüft haben. Diese Alternative wurde mit API geprüft; das eigenständige Beispiel oben wurde im Browser getestet.
04

Esri Calcite Einrichtung des Designsystems für AI-Agenten

Ausgangspunkt für die Implementierung

Für das native Komponentenpaket ist gemäß den aktuellen Lizenzbedingungen ein berechtigtes ArcGIS-Konto erforderlich. Prüfen Sie bei selbst gehosteten Komponenten-Assets die Anforderungen an die Asset-Pfade.

sh
# Independent specimen: save the complete HTML example as index.html.
# Native alternative for an appropriately licensed project:
npm create vite@latest calcite-note -- --template vanilla
cd calcite-note
npm install
npm install @esri/[email protected]
# Replace src/main.js with the native input example.
npm run dev

Ein Prompt für dein Projekt

Agenten-Prompt
Erstelle mithilfe der Calcite-Referenzen einen fokussierten Arbeitsbereich für räumliche Inspektionen. Sorge dafür, dass die ausgewählte Objekt-ID in Liste und Inspektor übereinstimmt, zeige textliche Statusangaben an und unterscheide lokale Notizen von der Speicherung im Dienst. Nutze die eigenständige Interpretation als Ausgangspunkt oder entscheide dich bewusst für den lizenzierten Pfad mit nativen Komponenten. Beschreibe das ursprüngliche Schema nicht als ArcGIS-Karte.
05

Quellen und Geltungsbereich des Esri Calcite-Designsystems

OpenDesign-Anwendungsleitfaden. Das dargestellte Beispiel wurde unabhängig implementiert und verwendet fiktive Daten. Die aktuelle Nutzung von Calcite unterliegt der Lizenzierung durch Esri und erfordert ein entsprechendes ArcGIS-Konto. Das Beispiel für die native Integration ist eine Alternative für entsprechend lizenzierte Projekte und bildet nicht die Laufzeitumgebung dieser Vorschau ab.