83.3K+İndir
Coğrafi bilgi · Yeni kaynak

Esri Calcite Tasarım Sistemi.

Odaklanmış mekânsal araçlar için pratik bir Calcite başvuru kaynağı: anlamsal yüzeyler ve mavi eylemler, kompakt inceleme panelleri, gerçek giriş API’leri ve site incelemesi için eksiksiz bir yerel örnek.

OpenDesign’ı indirin DESIGN.md dosyasını indir
OpenDesign Kılavuzu8 Bölüm48 referans girdisiÖzgün Uygulama Kılavuzu
01

Esri Calcite Tasarım Sistemi Arayüzü Önizlemesi

Listeden veya şematik görünümden bir konum seçin, inceleme durumlarını filtreleyin ve yeniden yüklenene kadar konum bazında saklanan bir notu doğrulayın.

Kurmaca konumları inceleyin ve yerel notlarınızı saklayınÖrneğin Tamamını Aç
Belgelenmiş görsel referansları kullanan özgün HTML/CSS/JavaScript yorumu. Çizim bir ArcGIS haritası değildir; Esri çalışma zamanı veya yazı tipi pakete dahil değildir. · Uygulama başvurusu
02

Esri Calcite Tasarım Sistemi Tasarım Referansı

Calcite tasarım belirteçleri 4.1.0 ve güncel bileşen API, Components 5.1.2 ile birlikte kontrol edilmiştir. Belirteç paketi ve bileşen paketinin sürüm numaraları farklıdır. Gömülü örnek, özgün bir HTML/CSS yorumudur; Calcite çalışma zamanını yeniden dağıtmaz veya yerel davranış sunduğunu iddia etmez.

Açık tema yüzeyleri, metin ve etkileşim

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
--calcite-color-surface-1#f7f7f7 Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-surface-2#ffffff Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-surface-3#f2f2f2 Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-surface-4#ebebeb Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-surface-highlight#d6efff Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-text-1#141414 Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-text-2#4a4a4a Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-text-3#6b6b6b Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-text-inverse#ffffff Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-text-link#00619b Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-border-1#d4d4d4 Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-border-2#dedede Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-border-3#ebebeb Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-border-input#949494 Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-brand#007ac2 Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-brand-hover#00619b Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.
--calcite-color-brand-press#004874 Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir.

Güncel aralık ölçeği

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
--calcite-space-none0Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-px1pxGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-base2pxGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-2xs0.25remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-xs0.375remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-sm0.5remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-sm-plus0.625remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-md0.75remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-md-plus0.875remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-lg1remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-xl1.25remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-2xl1.5remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-3xl2remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.
--calcite-space-4xl2.75remGüncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın.

Yazı ve köşe ölçeği

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
--calcite-corner-radius-none0Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-corner-radius-xs2pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-corner-radius-sm4pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-corner-radius-pill9999pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-font-size-xs10pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-font-size-sm12pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-font-size14pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-font-size-md16pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-font-size-lg18pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-font-size-xl20pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.
--calcite-font-size-2xl24pxYayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir.

Girdi bileşeni API

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
scales / m / l; default mBileşen ölçeğini bilinçli olarak değiştirin; bu, sayfa yakınlaştırmasını değiştirmekle aynı şey değildir.
statusidle / valid / invalidAlan geçerliliğini yalnızca renkle değil, bir iletiyle belirtin.
labelTextstringGeçerli girdi API üzerindeki görünür etiket metni.
validationMessagestringGeçersiz girdiyi denetimin yanında açıklayın.
calciteInputInputeventKullanıcı yazarken event.target.value değerini okuyun.
setFocus()Promise<void>Uygulama doğrulama hatasından sonra odağı yerel bileşene taşıyın.
03

Esri Calcite Tasarım Sistemi Eksiksiz Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

DESIGN-esri-calcite.md

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

Kılavuzu İndir

Esri Calcite Tasarım Sistemi Çalışma Alanı ve Panel Mimarisi

Nesne bağlamını görünür tutun

Mekânsal bir görevde genellikle en az iki bağlam bulunur: incelenen alan ve seçili nesne. Örnek, özgün bir şematik görünümün ve denetleyicinin yanına küçük bir konum listesi yerleştirir. Listeden bir satır veya iğne seçildiğinde aynı kararlı konum kimliği ayarlanır; böylece ad, durum ve not yanlışlıkla farklı nesnelere bağlanamaz.

Bu OpenDesign kılavuzundan

Çizimi gerçek haritadan ayırın

SVG, listeyle mekânsal yüzey arasındaki ilişkiyi gösterir. Projeksiyonu, koordinatları, katmanları, yakınlaştırması, coğrafi kodlaması veya rotalaması yoktur. Görünür açıklamasında şematik olduğu ve ölçekli olmadığı belirtilir. Üretim ortamındaki bir ArcGIS görünümü için ayrı SDK entegrasyonu, veri ve erişilebilirlik çalışmaları gerekir; tek başına Calcite kabuğu bu yetenekleri sağlamaz.

Esri Calcite Tasarım Sistemi Semantik Renk Rolleri

Araçları ağır kartlarla değil, yüzeylerle ayırın

Referans, vurgulama için ayrılmış surface-highlight ile surface-1'den surface-4'e kadar olan yüzeyleri birbirinden ayırır. Örnek, beyaz bir denetleyiciyi sade, kırık beyaz bir tuval ve soluk mavi seçili bir satır üzerinde kullanır. İnce, nötr kenarlıklar her alanın çevresine yüzen bir kart eklemeden panel sınırlarını belirginleştirir.

Maviye tutarlı bir etkileşim anlamı verin

Marka, üzerine gelme ve basma renkleri #007ac2, #00619b ve #004874 değerlerinden oluşan koyulaşan bir dizi oluşturur. Seçili iğne ve birincil kaydetme eylemi, farklı etkileşim rolleri için bu aileyi kullanır. Yazılı inceleme durumları ve not doğrulama iletisi, yalnızca renge bağlı kalmadan okunabilir.

Esri Calcite Tasarım Sistemi Yazı ve Bilgi Yoğunluğu

Küçük bilgi hiyerarşisini koruyun

Yayımlanmış mutlak yazı boyutu referansları arasında 12px küçük metin, 14px temel metin, 16px orta ve 20px çok büyük boyutlar bulunur. Örnek, 20px çalışma alanı başlığını 16px panel başlıkları ve 14px denetimlerle eşleştirir. Üst veriler daha küçüktür, ancak seçili nesnenin belirtildiği tek yer değildir.

Yedek yazı tipini markalı yazı tipinden ayırın

Bu bağımsız örnek Arial ve sistem yedek yazı tiplerini kullanır. Esri markalı yazı tiplerini pakete dahil etmez veya bu yedek yazı tipini Avenir olarak adlandırmaz. Yetkili bir yerel entegrasyon, sabitlenmiş Calcite sürümünün varlıklarını ve tema kurulumunu izlemelidir. Yazı tipini değiştirmek satır kaydırmalarını ve denetim genişliklerini etkileyebilir; bu nedenle dağıtılan gerçek varlık kümesini test edin.

Esri Calcite Tasarım Sistemi Boşluk Belirteçleri ve Duyarlı Paneller

Güncel belirteç adlarını seçin

Referans, en küçük adımlarda piksel değerleri, daha büyük aralıklarda rem değerleri kullanan güncel --calcite-space-* ölçeğini temel alır. Yerel bir tema uygularken bu adlandırılmış rolleri tutarlı biçimde kullanın. Bu örnekteki uygulama düzeni, yorumun kısıtlı paketleri içe aktarmadan çalışabilmesi için açık CSS değerleri kullanır.

Alanı daraltmadan önce denetleyiciyi yeniden akıtın

Esri Calcite Tasarım Sistemi Seçim ve Filtreleme Davranışı

Tek bir seçili tanımlayıcı kullanın

Liste ve şematik görünüm, geçerli dizi konumuna göre değil A-01, B-02 ve C-03 kimlikleri üzerinden aynı seçimi kullanır. Checked durumuna göre filtreleme, eşleşen mevcut konumu seçer ve denetleyici bu seçimi izler. Basılı durumlar hem liste düğmesinde hem de ona karşılık gelen iğnede gösterilir.

Kaydedilen notları kaydedilmemiş taslaklardan ayrı tutun

Kaydedilen bir not, konum kimliğiyle anahtarlanan bir Map içinde saklanır. O konuma dönüldüğünde not geri yüklenir; kaydetmeden konum değiştirilirse kaydedilmemiş metin yenisiyle değiştirilir. Yardımcı metin, verilerin ne kadar süreyle yerel kaldığını açıkça belirtir. Taslak kaybının önemli sonuçları olacaksa üretim ortamındaki bir düzenleyici, kaydedilmemiş değişikliklere karşı koruma eklemelidir.

Esri Calcite Tasarım Sistemi Girdi Doğrulama ve Kurtarma

Calcite kullanırken gerçek yerel girdi API bileşenini kullanın

Yerel örnek labelText, value, status ve validationMessage özelliklerini kullanır. calciteInputInput olayı, eski bir hatayı temizleyebilir; başarısız bir uygulama kuralından sonra setFocus() odağı bileşene geri taşır. Bunlar, gölge DOM'a girip dahili bir girdi aramak yerine kullanılan herkese açık API adlarıdır.

Yerel onayı hizmet tarafında kalıcılıkla karıştırmayın

Bağımsız önizleme, başında ve sonunda boşluklar kırpılmış en az on karakter ister ve alanı 240 karakterle sınırlar. Onay iletisinde konum belirtilir ve işlemin yerel olduğu açıkça söylenir. Yeniden yükleme notları siler. Ağ üzerinden çalışan bir sürümün bekleme, hata, yeniden deneme ve çakışma davranışlarını ele alması gerekir; yerel kaydedildi iletisi bunların hiçbirini ima etmez.

  1. Boş veya kısa bir notu kaydetmeyi deneyin ve hatayı okuyun.
  2. Daha uzun bir not girin, kaydedin, başka bir konum seçin ve ardından geri dönün.
  3. Örneğin kalıcılık vaadinde bulunmadığını doğrulamak için sayfayı yeniden yükleyin.

Esri Calcite Tasarım Sistemi Erişilebilir Mekânsal Alternatifler

Her iğne için listede bir karşılık sağlayın

Etkileşim kurulabilen her pinin site listesinde bir metin düğmesi vardır. Dolayısıyla nesne seçmenin tek yolu çizim haritası değildir. SVG’ye kısa bir açıklama verilir; denetimlerin de kendi adları ve görünür odak çerçeveleri vardır. Gerçek bir harita, şematik alternatif metni kopyalamaktan fazlasını gerektirir.

Doğrulama iletisini alanın yanına yerleştirin

textarea, aria-describedby aracılığıyla hem yardımcı metne hem de hata iletisine bağlanır. Hata durumunda aria-invalid atanır ve alana odak verilir; düzenleme yapıldığında geçersiz durumu kaldırılır. Onay iletisi bir durum bölgesi kullanır. Klavye kullanıcıları bir site seçebilir, not girebilir ve çizili coğrafi bir şekille etkileşime girmeden kaydedebilir.

Esri Calcite Tasarım Sistemi Sürümü ve Entegrasyon Sınırları

Paket sürümlerini sabitleyin ve lisans gerekliliklerini inceleyin

Components 5.1.2 ve design tokens 4.1.0 birbirinden ayrı paketlerdir. Güncel lisans sayfasında erişilebilirlik için ArcGIS Online, Enterprise veya Location Platform hesabı gerektiği belirtiliyor. Eski bir açık kaynak sürümüne ilişkin varsayımları güncel pakete taşımayın. Aşağıdaki yerel kaynak, bu gereklilikleri karşılayan bir proje içindir.

  • Components: 5.1.2.
  • Design-token başvurusu: 4.1.0.
  • Önizleme: bağımsız HTML, CSS ve JavaScript; Esri çalışma zamanı yok.

Yalnızca kullandığınız bileşenleri kaydedin

Esri Calcite Tasarım Sistemi Bileşen Örnekleri

Bağımsız site inceleme örneği

Bu önizlemede kullanılan, kendi başına çalışan eksiksiz HTML, CSS ve JavaScript. index.html olarak kaydedip tarayıcıda açın.

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>

Kod referansı

  • Özgün şematik çizim ve uygulama davranışı. Harita SDK’sı, uzak veri veya Esri çalışma zamanı içermez.

Calcite input için yerel alternatif

index.html dosyasında <div id="app"></div> bulunan bir Vite vanilla projesindeki src/main.js dosyasının yerine kullanın.

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

Kod referansı

  • Güncel lisans gerekliliklerini inceledikten sonra @esri/[email protected] paketini yükleyin. Bu alternatif API ile kontrol edilmiştir; yukarıdaki bağımsız önizleme ise tarayıcıda test edilmiş örnektir.
04

Esri Calcite Tasarım Sistemi Ajan Kurulumu

Uygulamaya Başlangıç Noktası

Yerel bileşen paketi, güncel lisans koşulları kapsamında uygun bir ArcGIS hesabı gerektirir. Bileşen varlıklarını kendi sunucunuzda barındırırken varlık yolu gerekliliklerini inceleyin.

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

Projeniz İçin Bir İstem

Ajan İstemi
Calcite başvurularını kullanarak odaklanmış bir mekânsal inceleme çalışma alanı oluşturun. Seçili nesne kimliğini liste ve denetleyici panelinde tutarlı kullanın, durumları metinle belirtin ve yerel notları hizmette kalıcı olarak saklanan verilerden ayırın. Başlangıç noktası olarak bağımsız yorumu kullanın ya da lisanslı yerel bileşen yolunu bilinçli olarak seçin. Özgün şematiği ArcGIS haritası olarak tanımlamayın.
05

Esri Calcite Tasarım Sistemi Kaynakları ve Kapsamı

OpenDesign uygulama kılavuzu. Gösterilen örnek bağımsız olarak uygulanmıştır ve kurgusal veriler kullanır. Güncel Calcite kullanımı Esri lisansına tabidir ve uygun bir ArcGIS hesabı gerektirir; yerel entegrasyon örneği, bu önizlemenin çalışma zamanı değil, uygun lisansa sahip projeler için bir alternatiftir.