Una guida pratica a Calcite per strumenti spaziali progettati per un uso mirato: superfici semantiche e azioni blu, pannelli di ispezione compatti, API reali per gli input e un esempio completo, eseguibile in locale, per la revisione di un sito.
Interpretazione originale di HTML/CSS/JavaScript basata su riferimenti visivi documentati. L’illustrazione non è una mappa ArcGIS; non include runtime o font Esri. · Riferimento per l’implementazione
02
Riferimento di design di sistema di design Esri Calcite
Token di design di Calcite 4.1.0 e API del componente attuale, verificati insieme a Components 5.1.2. Il pacchetto dei token e quello dei componenti hanno numeri di versione distinti. L’esempio incorporato è un’interpretazione originale di HTML/CSS; non ridistribuisce il runtime di Calcite né dichiara di riprodurne il comportamento nativo.
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-px
1px
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-base
2px
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-2xs
0.25rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-xs
0.375rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-sm
0.5rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-sm-plus
0.625rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-md
0.75rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-md-plus
0.875rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-lg
1rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-xl
1.25rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-2xl
1.5rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-3xl
2rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
--calcite-space-4xl
2.75rem
Famiglia attuale di token per la spaziatura. Gli incrementi in rem seguono la dimensione radice; evita di mescolarli con alias di spaziatura deprecati.
Architettura di sistema di design Esri Calcite per aree di lavoro e pannelli
Mantieni visibile il contesto dell’oggetto
Un’attività spaziale ha di solito almeno due contesti: l’area esaminata e l’oggetto selezionato. L’esempio affianca un piccolo elenco di siti a uno schema originale e a un pannello di ispezione. Selezionando una riga dell’elenco o un pin si imposta lo stesso ID stabile del sito, così il nome, lo stato e la nota non possono riferirsi per errore a oggetti diversi.
Distingui l’illustrazione da una mappa reale
L’SVG mostra la relazione tra un elenco e una superficie spaziale. Non contiene proiezioni, coordinate, livelli, zoom, geocodifica né instradamento. La didascalia visibile lo definisce uno schema non in scala. Una vista ArcGIS di produzione richiede una propria integrazione con SDK, dati e interventi di accessibilità; un contenitore Calcite da solo non offre queste funzionalità.
Ruoli semantici dei colori di sistema di design Esri Calcite
Usa le superfici per separare gli strumenti senza ricorrere a riquadri marcati
Il riferimento distingue surface-1, surface-2, surface-3 e surface-4, riservando surface-highlight all’enfasi. L’esempio usa un pannello di ispezione bianco su uno sfondo bianco sporco, sobrio, e una riga selezionata azzurro pallido. Bordi neutri sottili delimitano i pannelli senza aggiungere un riquadro sospeso attorno a ogni campo.
Attribuisci al blu un significato coerente nelle interazioni
I colori del brand, di hover e di pressione formano una sequenza progressivamente più scura: da #007ac2 a #00619b e #004874. Il pin selezionato e l’azione primaria di salvataggio usano questa famiglia per ruoli di interazione diversi. Gli stati di revisione testuali e il messaggio di convalida della nota restano comprensibili anche senza fare affidamento soltanto sul colore.
Tipografia e densità informativa di sistema di design Esri Calcite
Mantieni la gerarchia delle informazioni in formato ridotto
I riferimenti tipografici assoluti pubblicati includono testo piccolo da 12px, testo base da 14px, testo medio da 16px e testo extra-large da 20px. L’esempio abbina un titolo dell’area di lavoro da 20px a intestazioni dei pannelli da 16px e controlli da 14px. I metadati sono più piccoli, ma non sono mai l’unico elemento che identifica l’oggetto selezionato.
Distingui un font di fallback da quello del brand
Questo esempio indipendente usa Arial e font di sistema di fallback. Non include font con il brand Esri né definisce Avenir tale font di fallback. Un’integrazione nativa autorizzata deve seguire le risorse e la configurazione del tema della versione di Calcite fissata. La modifica del font può influire sulle interruzioni di riga e sulla larghezza dei controlli: verifica quindi le risorse effettivamente distribuite.
Token di spaziatura e pannelli adattivi di sistema di design Esri Calcite
Scegli i nomi attuali dei token
Il riferimento usa la scala attuale --calcite-space-*, che combina valori in pixel per gli incrementi più piccoli e valori in rem per quelli più ampi. Per implementare un tema nativo, usa questi ruoli denominati in modo coerente. Il layout dell’applicazione in questo esempio usa valori CSS espliciti, così l’interpretazione può funzionare senza importare pacchetti con accesso limitato.
Ridispone il pannello di ispezione prima di comprimere il campo
Comportamento di selezione e filtraggio di sistema di design Esri Calcite
Usa un unico identificatore per la selezione
L’elenco e lo schema condividono la selezione tramite A-01, B-02 e C-03, non in base alla posizione corrente negli array. Filtrando per Checked viene selezionato il sito corrispondente disponibile e il pannello di ispezione si aggiorna di conseguenza. Gli stati di pressione sono esposti sia sul pulsante della riga nell’elenco sia sul pin corrispondente.
Tieni separate le note salvate dalle bozze non salvate
Una nota salvata viene archiviata in una Map indicizzata per ID del sito. Tornando al sito, la nota viene ripristinata; cambiando sito senza salvare, il testo non salvato viene sostituito. Il testo di supporto specifica esplicitamente che i dati sono locali. Un editor di produzione dovrebbe proteggere le modifiche non salvate se la perdita di una bozza comporta conseguenze rilevanti.
Convalida dell’input e recupero in sistema di design Esri Calcite
Quando adotti Calcite, usa l’effettivo input nativo API
L’esempio nativo usa labelText, value, status e validationMessage. L’evento calciteInputInput può rimuovere un errore non più attuale, mentre setFocus() riporta l’attenzione sul componente dopo l’esito negativo di una regola applicativa. Questi sono nomi pubblici di API, diversamente dall’accesso allo shadow root per trovare un input interno.
Non confondere una conferma locale con la persistenza di un servizio
L’anteprima indipendente richiede almeno dieci caratteri dopo aver rimosso gli spazi iniziali e finali e limita il campo a 240 caratteri. La conferma identifica il sito e specifica che il salvataggio è locale. Ricaricando la pagina, le note vengono cancellate. Una versione connessa alla rete richiederebbe comportamenti per attesa, errore, nuovo tentativo e conflitti; il messaggio di salvataggio locale non ne implica nessuno.
Prova a salvare una nota vuota o breve e leggi l’errore.
Inserisci una nota più lunga, salvala, seleziona un altro sito e poi torna al precedente.
Ricarica la pagina per verificare che l’esempio non prometta la persistenza dei dati.
Alternative spaziali accessibili in sistema di design Esri Calcite
Fornisci un’alternativa in forma di elenco per ogni pin
Ogni pin interattivo ha un pulsante testuale nell’elenco dei siti. La mappa illustrata non è quindi l’unico modo per selezionare un oggetto. Il relativo SVG ha una descrizione concisa, mentre i controlli hanno nomi propri e indicatori di focus visibili. Una mappa reale richiede più di una semplice copia del testo alternativo dello schema.
Posiziona la convalida accanto al campo
La textarea fa riferimento sia al testo di supporto sia all’errore tramite aria-describedby. In caso di errore, riceve aria-invalid e il focus; quando si modifica il testo, lo stato di errore obsoleto viene rimosso. La conferma usa un’area di stato. Gli utenti da tastiera possono selezionare un sito, inserire una nota e salvarla senza interagire con una forma geografica disegnata.
Esri Calcite Versione del sistema di design e limiti di integrazione
Blocca le versioni dei pacchetti e verifica i requisiti di licenza
Components 5.1.2 e design tokens 4.1.0 sono pacchetti distinti. La pagina delle licenze attuale descrive la disponibilità con un account ArcGIS Online, Enterprise o Location Platform. Non applicare al pacchetto attuale ipotesi basate su una precedente versione open source. Il codice sorgente nativo qui sotto è destinato a un progetto che soddisfa tali requisiti.
Components: 5.1.2.
Riferimento dei design token: 4.1.0.
Anteprima: HTML, CSS e JavaScript indipendenti; nessun runtime Esri.
Registra solo i componenti che utilizzi
Esri Calcite Esempi di componenti del sistema di design
Esempio indipendente per l’ispezione dei siti
Esempio completo e autonomo di HTML, CSS e JavaScript utilizzato da questa anteprima. Salvalo come index.html e aprilo in un browser.
Installa @esri/[email protected] dopo aver verificato i requisiti di licenza attuali. Questa alternativa è stata verificata con API; l’anteprima indipendente qui sopra è l’esempio testato nel browser.
04
Esri Calcite Configurazione dell’agente per il sistema di design
Punto di partenza per l’implementazione
Il pacchetto di componenti nativi richiede un account ArcGIS idoneo secondo le condizioni di licenza attuali. Se ospiti autonomamente le risorse dei componenti, verifica i requisiti relativi ai percorsi degli asset.
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
Un prompt per il tuo progetto
Prompt per l’agente
Crea un’area di lavoro mirata per l’ispezione spaziale usando i riferimenti Calcite. Mantieni coerente l’ID dell’oggetto selezionato tra l’elenco e il pannello di ispezione, rendi espliciti gli stati testuali e distingui le note locali dalla persistenza nel servizio. Parti dall’interpretazione autonoma oppure scegli consapevolmente il percorso con componenti nativi soggetto a licenza. Non descrivere lo schema originale come una mappa ArcGIS.
05
Esri Calcite Fonti e ambito del sistema di design
Guida applicativa OpenDesign. L’esempio illustrato è realizzato in modo indipendente e usa dati di fantasia. L’uso attuale di Calcite è regolato dalle licenze Esri e richiede un account ArcGIS idoneo; l’esempio di integrazione nativa è un’alternativa per progetti con licenza appropriata, non il runtime di questa anteprima.
