# Sistema di design Esri Calcite ## Anteprima dell’interfaccia di sistema di design Esri Calcite Seleziona un sito dall’elenco o dallo schema, filtra gli stati di revisione e convalida una nota che resta associata al sito fino al ricaricamento. ## 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. ### Superfici, testo e interazioni del tema chiaro | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --calcite-color-surface-1 | #f7f7f7 | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-surface-2 | #ffffff | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-surface-3 | #f2f2f2 | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-surface-4 | #ebebeb | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-surface-highlight | #d6efff | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-text-1 | #141414 | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-text-2 | #4a4a4a | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-text-3 | #6b6b6b | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-text-inverse | #ffffff | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-text-link | #00619b | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-border-1 | #d4d4d4 | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-border-2 | #dedede | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-border-3 | #ebebeb | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-border-input | #949494 | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-brand | #007ac2 | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-brand-hover | #00619b | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | | --calcite-color-brand-press | #004874 | Riferimento semantico per il ruolo indicato dal token; la selezione e i bordi dei campi richiedono livelli di contrasto diversi. | ### Scala delle spaziature attuale | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --calcite-space-none | 0 | 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. | ### Scala tipografica e dei raggi degli angoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --calcite-corner-radius-none | 0 | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-corner-radius-xs | 2px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-corner-radius-sm | 4px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-corner-radius-pill | 9999px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-font-size-xs | 10px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-font-size-sm | 12px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-font-size | 14px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-font-size-md | 16px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-font-size-lg | 18px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-font-size-xl | 20px | Valori pubblicati, non misure dedotte da uno screenshot. | | --calcite-font-size-2xl | 24px | Valori pubblicati, non misure dedotte da uno screenshot. | ### Componente di input API | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | scale | s / m / l; default m | Modifica intenzionalmente la scala del componente; non equivale a cambiare lo zoom della pagina. | | status | idle / valid / invalid | Comunica la validità del campo con un messaggio, non solo con il colore. | | labelText | string | Testo dell’etichetta visibile nell’attuale input API. | | validationMessage | string | Spiega l’errore di inserimento accanto al controllo. | | calciteInputInput | event | Leggi event.target.value mentre l’utente digita. | | setFocus() | Promise | Dopo un errore di convalida dell’applicazione, sposta il focus sul componente nativo. | ## Guida completa di sistema di design Esri Calcite Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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 Al breakpoint originale dell’applicazione, il pannello di ispezione si sposta sotto l’elenco e l’illustrazione. Su un telefono stretto, le tre aree si dispongono in sequenza verticale. L’area di testo resta a larghezza intera, con etichetta, testo di supporto e azione di salvataggio. Questi breakpoint sono scelte di layout definite dall’applicazione, non valori attribuiti ai token di Calcite. ## 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. 1. Prova a salvare una nota vuota o breve e leggi l’errore. 2. Inserisci una nota più lunga, salvala, seleziona un altro sito e poi torna al precedente. 3. 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 L’esempio minimo del modulo importa i punti di ingresso dei componenti input e button, quindi ne usa proprietà ed eventi pubblici. L’esempio completo e indipendente HTML può essere eseguito da solo; il frammento nativo è un punto di ingresso alternativo per un progetto Vite con il pacchetto bloccato installato. È stato verificato rispetto alla API pubblica, ma non viene presentato come il runtime compilato alla base dello schema. ## 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. ``` Site inspection panel

Field inspection workspace

Original Calcite-inspired layout study · fictional site data

Local notes only
Schematic illustration · not to scale
``` Riferimento del codice - Schema originale e comportamento dell’applicazione. Non sono inclusi SDK per mappe, dati remoti o runtime Esri. ### Alternativa nativa per Calcite Input Sostituisci src/main.js in un progetto Vite vanilla il cui index.html contenga
. ``` import "@esri/calcite-components/components/calcite-input"; import "@esri/calcite-components/components/calcite-button"; document.querySelector("#app").innerHTML = ` Validate note

`; 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."; }); ``` Riferimento del codice - Installa @esri/calcite-components@5.1.2 dopo aver verificato i requisiti di licenza attuali. Questa alternativa è stata verificata con API; l’anteprima indipendente qui sopra è l’esempio testato nel browser. ## 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. ``` # 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/calcite-components@5.1.2 # Replace src/main.js with the native input example. npm run dev ``` ### Un prompt per il tuo progetto ``` 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. ``` ## 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. - Calcite Input API Proprietà del campo, eventi e metodo focus. - Guida introduttiva a Calcite Registrazione dei componenti e configurazione degli asset. - Licenze attuali Requisiti per l’account ArcGIS e per l’utilizzo. - Design token pubblicati Riferimenti bloccati per caratteri, spaziatura e raggio. ## Esri Calcite Risorse correlate al sistema di design ### GitLab Pajamas Una guida Pajamas per i flussi di lavoro tecnici: token semantici effettivi, tipografia e spaziatura fluide, un ispettore di pipeline a fasi, messaggi di errore leggibili e una simulazione esplicitamente locale dei nuovi tentativi. ### HPE Grommet Modella una prenotazione di capacità con le primitive di layout, i campi modulo controllati e gli indicatori numerici di Grommet. Usa con criterio la scala del tema e mantieni distinto il tema base di Grommet dal tema HPE installato separatamente. ### Infor sistema di design Componi un modulo aziendale di manutenzione con gli stati effettivi degli input IDS, gli alias del tema e un identificativo preciso dell’asset. Esamina i token pubblici correnti del tema, un pacchetto Web Components con versione bloccata e un flusso locale per le bozze con convalida e ripristino. - [Riferimento per l’implementazione](https://developers.arcgis.com/calcite-design-system/) - [Fonte](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Fonte](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css) - [Fonte](https://developers.arcgis.com/calcite-design-system/components/input/) - [Riferimento del codice](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Riferimento del codice](https://developers.arcgis.com/calcite-design-system/components/input/) - [Calcite Input API Proprietà del campo, eventi e metodo focus.](https://developers.arcgis.com/calcite-design-system/components/input/) - [Guida introduttiva a Calcite Registrazione dei componenti e configurazione degli asset.](https://developers.arcgis.com/calcite-design-system/get-started/) - [Licenze attuali Requisiti per l’account ArcGIS e per l’utilizzo.](https://developers.arcgis.com/calcite-design-system/resources/licensing/) - [Design token pubblicati Riferimenti bloccati per caratteri, spaziatura e raggio.](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css)