83.3K+Descargar
Información geográfica · Nuevo recurso

Sistema de diseño Esri Calcite.

Una referencia práctica de Calcite para herramientas espaciales que requieren precisión: superficies semánticas y acciones azules, paneles de inspección compactos, API reales para entradas y un ejemplo completo de revisión local de sitios.

Descargar OpenDesign Descargar DESIGN.md
Guía de OpenDesign8 capítulos48 entradas de referenciaGuía de aplicación original
01

Vista previa de interfaz del sistema de diseño Esri Calcite

Selecciona un sitio de la lista o del esquema, filtra los estados de revisión y valida una nota que se conserva por sitio hasta que se vuelva a cargar la página.

Inspecciona sitios ficticios y guarda notas localesAbrir ejemplo completo
Interpretación original de HTML/CSS/JavaScript basada en referencias visuales documentadas. La ilustración no es un mapa de ArcGIS; no incluye el entorno de ejecución ni las fuentes de Esri. · Referencia de implementación
02

Referencia de diseño del sistema de diseño Esri Calcite

Tokens de diseño de Calcite 4.1.0 y API de componentes actuales, contrastados con Components 5.1.2. El paquete de tokens y el paquete de componentes tienen números de versión distintos. La muestra integrada es una interpretación original de HTML/CSS; no redistribuye el entorno de ejecución de Calcite ni afirma reproducir el comportamiento nativo.

Superficies, texto e interacción del tema claro

Fuente
Nombre / ReglaValor / ConfiguraciónUso
--calcite-color-surface-1#f7f7f7 Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-surface-2#ffffff Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-surface-3#f2f2f2 Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-surface-4#ebebeb Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-surface-highlight#d6efff Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-text-1#141414 Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-text-2#4a4a4a Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-text-3#6b6b6b Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-text-inverse#ffffff Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-text-link#00619b Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-border-1#d4d4d4 Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-border-2#dedede Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-border-3#ebebeb Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-border-input#949494 Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-brand#007ac2 Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-brand-hover#00619b Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.
--calcite-color-brand-press#004874 Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos.

Escala de espaciado actual

Fuente
Nombre / ReglaValor / ConfiguraciónUso
--calcite-space-none0Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-px1pxFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-base2pxFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-2xs0.25remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-xs0.375remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-sm0.5remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-sm-plus0.625remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-md0.75remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-md-plus0.875remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-lg1remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-xl1.25remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-2xl1.5remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-3xl2remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.
--calcite-space-4xl2.75remFamilia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos.

Escala tipográfica y de esquinas

Fuente
Nombre / ReglaValor / ConfiguraciónUso
--calcite-corner-radius-none0Valores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-corner-radius-xs2pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-corner-radius-sm4pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-corner-radius-pill9999pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-font-size-xs10pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-font-size-sm12pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-font-size14pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-font-size-md16pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-font-size-lg18pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-font-size-xl20pxValores publicados, no mediciones deducidas de una captura de pantalla.
--calcite-font-size-2xl24pxValores publicados, no mediciones deducidas de una captura de pantalla.

Componente de entrada API

Fuente
Nombre / ReglaValor / ConfiguraciónUso
scales / m / l; default mCambia deliberadamente la escala del componente; no es lo mismo que cambiar el zoom de la página.
statusidle / valid / invalidIndica si el campo es válido mediante un mensaje, no solo con el color.
labelTextstringTexto de etiqueta visible en la entrada actual API.
validationMessagestringExplica junto al control por qué la entrada no es válida.
calciteInputInputeventLee event.target.value mientras el usuario escribe.
setFocus()Promise<void>Devuelve el foco al componente nativo tras un error de validación de la aplicación.
03

Guía completa del sistema de diseño de Esri Calcite

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

DESIGN-esri-calcite.md

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

Descargar la guía

Arquitectura del espacio de trabajo y los paneles del sistema de diseño de Esri Calcite

Mantén visible el contexto del objeto

Una tarea espacial suele tener al menos dos contextos: el área que se está inspeccionando y el objeto seleccionado. El ejemplo mantiene una pequeña lista de sitios junto a un esquema original y un inspector. Al seleccionar una fila de la lista o un marcador, se establece el mismo ID de sitio estable, de modo que el nombre, el estado y la nota no puedan referirse por error a objetos distintos.

De esta guía de OpenDesign

Separa la ilustración de un mapa real

El SVG muestra la relación entre una lista y una superficie espacial. No tiene proyección, coordenadas, capas, zoom, geocodificación ni rutas. El pie visible indica que es un esquema y que no está a escala. Una vista de ArcGIS en producción requiere su propia integración con el SDK, datos y trabajo de accesibilidad; el contenedor de Calcite por sí solo no proporciona esas capacidades.

Roles semánticos del color en el sistema de diseño de Esri Calcite

Usa superficies para separar herramientas sin recurrir a tarjetas pesadas

La referencia diferencia surface-1 a surface-4 y reserva surface-highlight para destacar elementos. El ejemplo usa un inspector blanco sobre un fondo blanquecino discreto y una fila seleccionada de color azul pálido. Los bordes neutros y finos delimitan los paneles sin añadir una tarjeta flotante alrededor de cada campo.

Asigna al azul un significado de interacción coherente

Los colores de marca, al pasar el cursor y al presionar forman una secuencia cada vez más oscura: #007ac2, #00619b y #004874. El marcador seleccionado y la acción principal de guardar usan esa gama para distintos roles de interacción. Los estados de revisión escritos y el mensaje de validación de la nota siguen siendo legibles sin depender únicamente del color.

Tipografía y densidad de información del sistema de diseño de Esri Calcite

Conserva la jerarquía de información en tamaños pequeños

Las referencias absolutas de tipografía publicadas incluyen texto pequeño de 12px, texto base de 14px, tamaño medio de 16px y extragrande de 20px. El ejemplo combina un título de espacio de trabajo de 20px con encabezados de panel de 16px y controles de 14px. Los metadatos son más pequeños, pero nunca son el único elemento que identifica el objeto seleccionado.

Distingue la fuente alternativa de la fuente de marca

Este ejemplo independiente usa Arial y fuentes alternativas del sistema. No incluye fuentes de marca de Esri ni presenta la alternativa como Avenir. Una integración nativa autorizada debe seguir las instrucciones de configuración de recursos y temas de la versión fijada de Calcite. Cambiar la fuente puede afectar los saltos de línea y el ancho de los controles, así que prueba el conjunto de recursos que se implementará realmente.

Tokens de espaciado y paneles adaptables del sistema de diseño de Esri Calcite

Elige los nombres de token actuales

La referencia usa la escala actual --calcite-space-*, que combina valores en píxeles para los pasos más pequeños y valores en rem para los espacios mayores. Usa estos roles con nombre de forma coherente al implementar un tema nativo. El diseño de la aplicación en este ejemplo usa valores explícitos CSS para poder ejecutarse sin importar paquetes restringidos.

Reorganiza el inspector antes de comprimir el campo

Comportamiento de selección y filtrado del sistema de diseño de Esri Calcite

Usa un único identificador para la selección

La lista y el esquema comparten la selección mediante A-01, B-02 y C-03, no mediante su posición actual en el arreglo. Al filtrar por Checked, se selecciona el sitio coincidente disponible y el inspector se actualiza. Los estados de pulsación se exponen tanto en el botón de la lista como en el marcador correspondiente.

Mantén las notas guardadas separadas de los borradores sin guardar

Las notas guardadas se almacenan en un Map identificado por el ID del sitio. Al volver a ese sitio, se restaura la nota; al cambiar de sitio sin guardar, el texto sin guardar se reemplaza. El texto de ayuda indica explícitamente que los datos solo se conservan de forma local. Un editor de producción debería proteger los cambios sin guardar si perder un borrador tuviera consecuencias importantes.

Validación y recuperación de entradas en el sistema de diseño de Esri Calcite

Al adoptar Calcite, usa el componente de entrada nativo real API

El ejemplo nativo usa labelText, value, status y validationMessage. El evento calciteInputInput puede borrar un error obsoleto, mientras que setFocus() devuelve el foco al componente tras una regla de validación de la aplicación no superada. Estos son nombres públicos de API, a diferencia de acceder a un input interno dentro del shadow root.

No confundas la confirmación local con la persistencia en un servicio

La vista previa independiente exige al menos diez caracteres después de eliminar los espacios iniciales y finales y limita el campo a 240 caracteres. La confirmación identifica el sitio e indica explícitamente que el guardado es local. Al recargar, se borran las notas. Una versión conectada a la red necesitaría gestionar estados pendientes, errores, reintentos y conflictos; el mensaje de guardado local no implica nada de eso.

  1. Intenta guardar una nota vacía o demasiado breve y lee el error.
  2. Escribe una nota más larga, guárdala, selecciona otro sitio y vuelve al anterior.
  3. Recarga la página para confirmar que el ejemplo no promete persistencia.

Alternativas espaciales accesibles del sistema de diseño de Esri Calcite

Ofrece una alternativa en forma de lista para cada marcador

Cada marcador interactivo tiene un botón de texto en la lista de sitios. Por tanto, el mapa ilustrado no es la única forma de seleccionar un objeto. El SVG incluye una descripción breve, mientras que los controles tienen nombres propios e indicadores de foco visibles. Un mapa real requiere mucho más que copiar el texto alternativo del esquema.

Coloca la validación junto al campo

El área de texto referencia tanto el texto de ayuda como el error mediante aria-describedby. Si se produce un error, recibe aria-invalid y el foco; al editarla, se elimina el estado de invalidez obsoleto. La confirmación usa una región de estado. Los usuarios de teclado pueden seleccionar un sitio, escribir una nota y guardarla sin interactuar con una forma geográfica dibujada.

Límites de versión e integración del sistema de diseño de Esri Calcite

Fija las versiones de los paquetes y consulta los requisitos de licencia

Components 5.1.2 y design tokens 4.1.0 son paquetes distintos. La página de licencias actual describe la disponibilidad con una cuenta de ArcGIS Online, Enterprise o Location Platform. No des por sentado que una versión de código abierto anterior se aplica al paquete actual. El código fuente nativo siguiente es para un proyecto que cumple esos requisitos.

  • Components: 5.1.2.
  • Referencia de design tokens: 4.1.0.
  • Vista previa: HTML, CSS y JavaScript independientes; sin entorno de ejecución de Esri.

Registra solo los componentes que utilices

Ejemplos de componentes del sistema de diseño Esri Calcite

Muestra independiente para inspeccionar el sitio

Ejemplo completo e independiente de HTML, CSS y JavaScript utilizado en esta vista previa. Guárdalo como index.html y ábrelo en un navegador.

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>

Referencia de código

  • Esquema y comportamiento de la aplicación originales. No incluye SDK de mapas, datos remotos ni entorno de ejecución de Esri.

Alternativa nativa con Calcite input

Reemplaza src/main.js en un proyecto vanilla de Vite cuyo index.html contenga <div id="app"></div>.

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.";
});

Referencia de código

  • Instala @esri/[email protected] después de revisar los requisitos de licencia actuales. Esta alternativa se comprobó con API; la vista previa independiente anterior es la muestra probada en el navegador.
04

Configuración del agente del sistema de diseño Esri Calcite

Punto de partida para la implementación

El paquete de componentes nativos requiere una cuenta de ArcGIS que cumpla los requisitos de las condiciones de licencia actuales. Si alojas los recursos de los componentes por tu cuenta, revisa los requisitos de las rutas de recursos.

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

Una instrucción para tu proyecto

Instrucción para el agente
Crea un espacio de trabajo específico para inspeccionar ubicaciones mediante las referencias de Calcite. Mantén coherente el ID del objeto seleccionado entre la lista y el panel de inspección, muestra los estados por escrito y distingue las notas locales de la persistencia en el servicio. Usa la interpretación independiente como punto de partida o elige deliberadamente la ruta de componentes nativos con licencia. No describas el esquema original como un mapa de ArcGIS.
05

Fuentes y alcance del sistema de diseño Esri Calcite

Guía de la aplicación OpenDesign. El ejemplo ilustrado está implementado de forma independiente y usa datos ficticios. El uso actual de Calcite se rige por las licencias de Esri y requiere una cuenta de ArcGIS que cumpla los requisitos; el ejemplo de integración nativa es una alternativa para proyectos con la licencia correspondiente, no el entorno de ejecución de esta vista previa.