Uma referência prática do Calcite para ferramentas espaciais com foco: superfícies semânticas e ações azuis, painéis compactos de inspeção, APIs reais de entrada e um exemplo completo de revisão local de site.
Guia OpenDesign8 capítulos48 entradas de referênciaGuia de aplicação original
01
Sistema de design Esri Calcite Prévia da interface
Selecione um local na lista ou no esquema, filtre os estados de revisão e valide uma nota que permanece associada a cada local até a página ser recarregada.
Interpretação original de HTML/CSS/JavaScript com base em referências visuais documentadas. A ilustração não é um mapa do ArcGIS; nenhum ambiente de execução ou fonte da Esri está incluído. · Referência de implementação
02
Sistema de design Esri Calcite Referência de design
Tokens de design do Calcite 4.1.0 e API do componente atual, verificados junto a Components 5.1.2. Os pacotes de tokens e de componentes têm números de versão separados. O exemplo incorporado é uma interpretação original de HTML/CSS; ele não redistribui o ambiente de execução do Calcite nem afirma reproduzir o comportamento nativo.
Esri Calcite Arquitetura de espaços de trabalho e painéis do sistema de design
Mantenha visível o contexto do objeto
Uma tarefa espacial geralmente tem pelo menos dois contextos: a área que está sendo inspecionada e o objeto selecionado. O exemplo mantém uma pequena lista de locais ao lado de um esquema original e de um inspetor. Selecionar uma linha da lista ou um marcador define o mesmo ID estável do local, para que o nome, o status e a observação não acabem se referindo a objetos diferentes.
Separe a ilustração de um mapa real
O SVG comunica a relação entre uma lista e uma superfície espacial. Ele não tem projeção, coordenadas, camadas, zoom, geocodificação nem roteamento. A legenda visível informa que se trata de um esquema e que não está em escala. Uma visualização de ArcGIS para produção requer integração própria com o SDK, dados e trabalho de acessibilidade; um shell Calcite, por si só, não oferece esses recursos.
Esri Calcite Papéis semânticos de cor do sistema de design
Use superfícies para dividir as ferramentas sem recorrer a cartões pesados
A referência diferencia surface-1 a surface-4 e reserva surface-highlight para dar ênfase. O exemplo usa um inspetor branco sobre um fundo esbranquiçado discreto e uma linha selecionada em azul-claro. Bordas neutras e finas delimitam os painéis sem criar um cartão flutuante em torno de cada campo.
Atribua um significado consistente de interação ao azul
As cores de marca, hover e pressionamento formam uma sequência progressivamente mais escura, de #007ac2 a #00619b e #004874. O marcador selecionado e a ação principal de salvar usam essa família de cores para diferentes papéis de interação. Os estados de revisão escritos e a mensagem de validação da observação continuam legíveis sem depender apenas da cor.
Esri Calcite Tipografia e densidade de informações do sistema de design
Preserve a hierarquia de informações compacta
As referências absolutas de tipografia publicadas incluem 12px para texto pequeno, 14px para texto-base, 16px para texto médio e 20px para texto extragrande. O exemplo combina um título de espaço de trabalho de 20px com títulos de painel de 16px e controles de 14px. Os metadados são menores, mas nunca são o único elemento que identifica o objeto selecionado.
Diferencie uma fonte alternativa da fonte de marca
Este exemplo independente usa Arial e fontes alternativas do sistema. Ele não inclui fontes da marca Esri nem apresenta essa alternativa como Avenir. Uma integração nativa autorizada deve seguir os recursos e a configuração de tema da versão fixada do Calcite. Alterar a fonte pode afetar as quebras de linha e a largura dos controles; por isso, teste o conjunto de recursos realmente implantado.
Esri Calcite Tokens de espaçamento e painéis responsivos do sistema de design
Escolha os nomes atuais dos tokens
A referência usa a escala atual --calcite-space-*, que combina valores em pixels para os menores intervalos e valores em rem para espaçamentos maiores. Use essas funções nomeadas de forma consistente ao implementar um tema nativo. O layout da aplicação neste exemplo usa valores explícitos CSS para que a demonstração possa ser executada sem importar pacotes restritos.
Reorganize o inspetor antes de comprimir o campo
Esri Calcite Comportamento de seleção e filtragem do sistema de design
Use um único identificador de seleção
A lista e o esquema compartilham a seleção pelos identificadores A-01, B-02 e C-03, não pela posição atual no array. Ao filtrar por Checked, o local correspondente disponível é selecionado e o inspetor acompanha a seleção. O estado de pressionado é exposto tanto no botão da lista quanto no marcador correspondente.
Mantenha as observações salvas separadas dos rascunhos não salvos
Uma observação salva é armazenada em um Map indexado pelo ID do local. Ao voltar a esse local, ela é restaurada; ao mudar de local sem salvar, o texto não salvo é substituído. O texto de ajuda informa explicitamente que os dados ficam apenas na sessão local. Um editor de produção deve proteger alterações não salvas quando a perda de um rascunho puder ter consequências relevantes.
Esri Calcite Validação e recuperação da entrada no sistema de design
Use a entrada nativa real API ao adotar o Calcite
O exemplo nativo usa labelText, value, status e validationMessage. O evento calciteInputInput pode limpar um erro desatualizado, enquanto setFocus() devolve o foco ao componente após a falha de uma regra da aplicação. Esses são nomes públicos API, ao contrário de acessar o shadow root para encontrar uma entrada interna.
Não confunda uma confirmação local com a persistência em um serviço
A prévia independente exige pelo menos dez caracteres após remover os espaços das extremidades e limita o campo a 240. A confirmação identifica o local e informa explicitamente que a ação ocorreu localmente. Ao recarregar a página, as observações são apagadas. Uma versão conectada à rede precisaria lidar com estados pendentes, falhas, novas tentativas e conflitos; a mensagem de salvamento local não implica nenhum desses comportamentos.
Tente salvar uma observação vazia ou curta e leia o erro.
Digite uma observação mais longa, salve, selecione outro local e depois volte.
Recarregue a página para confirmar que o exemplo não promete persistência.
Esri Calcite Alternativas espaciais acessíveis no sistema de design
Ofereça uma opção em lista para cada marcador
Cada marcador acionável tem um botão de texto na lista de locais. Assim, o mapa ilustrado não é a única maneira de selecionar um objeto. O SVG recebe uma descrição concisa, enquanto os controles têm seus próprios nomes e contornos de foco visíveis. Um mapa real exige mais do que copiar o texto alternativo do esquema.
Posicione a validação junto ao campo
A área de texto referencia tanto o texto de ajuda quanto o erro por meio de aria-describedby. Em caso de falha, recebe aria-invalid e o foco; ao editar, o estado inválido desatualizado é removido. A confirmação usa uma região de status. Pessoas que usam o teclado podem selecionar um local, escrever uma observação e salvá-la sem interagir com uma forma geográfica desenhada.
Esri Calcite Limites de versão e integração do sistema de design
Fixe as versões dos pacotes e confira os requisitos de licenciamento
Components 5.1.2 e design tokens 4.1.0 são pacotes distintos. A página de licenciamento atual descreve a disponibilidade para contas do ArcGIS Online, Enterprise ou Location Platform. Não presuma que uma versão de código aberto antiga se aplica ao pacote atual. O código-fonte nativo abaixo é para um projeto que atende a esses requisitos.
Components: 5.1.2.
Referência de design tokens: 4.1.0.
Prévia: HTML, CSS e JavaScript independentes; sem runtime da Esri.
Registre somente os componentes que você usa
Exemplos de componentes do sistema de design Esri Calcite
Exemplo independente para inspeção do site
HTML, CSS e JavaScript completos e independentes, usados nesta prévia. Salve como index.html e abra em um navegador.
Instale @esri/[email protected] após revisar os requisitos de licenciamento atuais. Esta alternativa foi verificada com API; a prévia independente acima é o exemplo testado no navegador.
04
Configuração do agente de sistema de design Esri Calcite
Ponto de partida para implementação
O pacote de componentes nativos exige uma conta ArcGIS elegível de acordo com os termos de licenciamento atuais. Ao hospedar os recursos dos componentes por conta própria, confira os requisitos de caminho dos arquivos 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
Um prompt para seu projeto
Prompt para agente de IA
Crie um espaço de trabalho focado na inspeção espacial com base nas referências do Calcite. Mantenha o ID do objeto selecionado igual na lista e no painel de inspeção, mostre os estados por escrito e diferencie as anotações locais da persistência no serviço. Use a interpretação independente como ponto de partida ou escolha deliberadamente o caminho de componentes nativos licenciados. Não descreva o esquema original como um mapa do ArcGIS.
05
Fontes e escopo do sistema de design Esri Calcite
Guia da aplicação OpenDesign. O exemplo ilustrado foi implementado de forma independente e usa dados fictícios. O uso atual do Calcite é regido pelo licenciamento da Esri e exige uma conta ArcGIS elegível; o exemplo de integração nativa é uma alternativa para projetos devidamente licenciados, não o runtime desta prévia.
