83.3K+İndir
Kurumsal yazılım · Yeni kaynak

Salesforce Lightning Tasarım Sistemi.

Yoğun kayıt işlemleri için bir Lightning tasarım kılavuzu: gerçek aralıklar, tipografi ve anlamsal renkler, düzenlenebilir bir vaka çalışma alanı, alan doğrulaması ve yerel değişiklikleri yansıtan bir etkinlik geçmişi.

OpenDesign’ı indirin DESIGN.md dosyasını indir
OpenDesign Kılavuzu8 Bölüm40 Referans KaydıÖzgün Uygulama Kılavuzu
01

Salesforce Lightning Tasarım Sistemi Arayüz Önizlemesi

Önceliği veya durumu değiştirin, güncelleme notunu doğrulayın, yerel bir etkinlik kaydı oluşturun ve kayıtlı kaydı değiştirmeden sonraki bir taslağı silin.

Bir vakayı düzenleyin ve yerel etkinliklerini inceleyinÖrneğin Tamamını Aç
Yerel SLDS 2.264.1 CSS ve paket varlıkları; orijinal, erişilebilir HTML ve JavaScript. Salesforce API veya Lightning çalışma zamanı yok. · Uygulama başvurusu
02

Salesforce Lightning Tasarım Sistemi Tasarım Referansı

Yayımlanan @salesforce-ux/design-system 2.264.1 yerel CSS ve ui-force belirteç dışa aktarımı. Bu, sabitlenmiş klasik bir blueprint referansıdır; daha yeni SLDS 2 tasarım diliyle veya Lightning Web Components çalışma zamanıyla uyumluluk iddiası değildir. Geçmişteki kaynak depo arşivlenmiştir.

Kayıt yüzeyleri ve anlamsal metin

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
COLOR_BACKGROUNDrgb(243, 243, 243)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_BACKGROUND_ALTrgb(255, 255, 255)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_TEXT_DEFAULTrgb(3, 45, 96)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_TEXT_WEAKrgb(116, 116, 116)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_BORDERrgb(201, 201, 201)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_BORDER_ERRORrgb(234, 0, 30)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_BORDER_SELECTIONrgb(1, 118, 211)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_BACKGROUND_BUTTON_BRANDrgb(1, 118, 211)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_BACKGROUND_BUTTON_BRAND_HOVERrgb(1, 68, 134)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.
COLOR_BACKGROUND_BUTTON_BRAND_ACTIVErgb(3, 45, 96)Yayımlanmış paket referansı. Her yerde tek bir marka rengi kullanmak yerine metnin, yüzeyin veya eylemin belirtilen rolünü koruyun.

Klasik aralık ölçeği

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
SPACING_X_SMALL0.5remKlasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.
SPACING_XXX_SMALL0.125remKlasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.
SPACING_XX_SMALL0.25remKlasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.
SPACING_SMALL0.75remKlasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.
SPACING_MEDIUM1remKlasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.
SPACING_NONE0Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.
SPACING_X_LARGE2remKlasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.
SPACING_XX_LARGE3remKlasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.
SPACING_LARGE1.5remKlasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir.

Yazı tipi ölçeği

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
FONT_SIZE_10.625remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_20.75remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_30.8125remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_40.875remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_51remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_61.125remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_71.25remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_81.5remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_91.75remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_102remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.
FONT_SIZE_112.625remOkunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin.

Köşe yarıçapı

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
BORDER_RADIUS_SMALL0.125remYayımlanmış yarıçap referansı. Dairesel bir durum işaretçisi, dikdörtgen bir form denetiminden farklıdır.
BORDER_RADIUS_MEDIUM0.25remYayımlanmış yarıçap referansı. Dairesel bir durum işaretçisi, dikdörtgen bir form denetiminden farklıdır.
BORDER_RADIUS_LARGE0.5remYayımlanmış yarıçap referansı. Dairesel bir durum işaretçisi, dikdörtgen bir form denetiminden farklıdır.
BORDER_RADIUS_CIRCLE50%Yayımlanmış yarıçap referansı. Dairesel bir durum işaretçisi, dikdörtgen bir form denetiminden farklıdır.

Yerel CSS blueprint anatomisi

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
slds-page-headerRecord contextVaka kimliğini ve özetini düzenleme formunun üzerinde tutun.
slds-cardGrouped content regionVaka ayrıntıları ve etkinlik, ayrı anlamsal bölgelerde yer alır.
slds-form-elementLabel + control + helpDüzenlenebilir her değeri bütünlüklü bir alan içinde sunun.
slds-has-errorInvalid field modifieraria-invalid ve açık bir hata mesajıyla birlikte kullanın.
slds-button_brandPrimary actionYerel güncellemeyi kaydedin; sınıf biçimlendirme sağlar, kalıcılık sağlamaz.
slds-button_neutralSecondary actionTaslağı silin ve en son kaydedilmiş yerel değerleri geri yükleyin.
03

Salesforce Lightning Tasarım Sistemi Eksiksiz Kılavuz

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

DESIGN-salesforce-lightning.md

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

Kılavuzu İndir

Salesforce Lightning Tasarım Sistemi Kayıt Düzeni ve Bağlamı

Kayıt kimliğini yerel görevlerin üzerinde tutun

Sayfa başlığında vaka numarası, konu, hesap ve sorumlu bulunur. Kullanıcı bir alanı değiştirmeden önce bu değerler nesneyi tanımlar. Durum rozeti, kayıtlı yerel kaydın özetidir; bu nedenle kaydedilmemiş bir seçim değerini izlemek yerine Kaydet işleminde değişir.

Bu OpenDesign kılavuzundan

Ayrıntıları etkinlikten ayırın

Daha geniş bölge, müşteri bağlamını ve düzenleme formunu bir araya getirir. İkincil bölgede sıralı bir geçmiş bulunur. Bu ayrım, kullanıcının başka bir ekrana geçmeden istenen işi kaydedilmiş değişikliklerle karşılaştırmasını sağlar. Mobil düzende bu bölgeler aynı anlamsal sırayla alt alta yerleşir.

Salesforce Lightning Tasarım Sistemi Anlamsal Renkler ve Durumlar

Belirteç adlarını rollere göre yorumlayın

ui-force dışa aktarımı varsayılan metin, soluk metin, seçili kenarlıklar ve markalı düğme arka planlarını birbirinden ayırır. Örnekte gövde metni koyu, meta veriler ölçülü, birincil eylem ise mavidir. Kırmızı, her kaydedilmemiş değer için değil, geçersiz alan ve kullanıcıya gösterilen kurtarma mesajı için kullanılır.

Durumu yalnızca renkle ifade etmeyin

Öncelik ve durum, özette ve yeni etkinlik kaydında sözcüklerle gösterilir. Hata durumu; yerel slds-has-error değiştiricisini, aria-invalid değerini ve metin alanına bağlı bir mesajı birlikte kullanır. Yerel onay bir durum bölgesinde metin olarak gösterilir; tek başına yeşil bir vurgu neyin kaydedildiğini kullanıcıya anlatmaz.

Salesforce Lightning Tasarım Sistemi Yazı Ölçeği ve Kayıt Yoğunluğu

Büyük başlıklara kaçmadan hiyerarşi oluşturun

Yayımlanmış numaralı yazı ölçeği 0.625rem'den başlar ve 2.625rem'e kadar uzanır. Vaka çalışma alanındaki her bölgede en büyük gösterim boyutunu kullanmak gerekmez. Yerel sayfa başlığı kaydı tanımlar, kart başlıkları bölgeleri birbirinden ayırır, normal gövde metni ise müşteri talebini ve notu taşır.

Uzun kayıt konularını koruyun

Özel düzen, sayfa başlığının dar bir genişlikte konuyu kırpmak yerine alt satıra geçmesine olanak tanır. Meta veriler de ek satırlara yayılabilir. Uzun bir hesap adını sığdırmak için tüm metinleri küçültmeyin; kırpmanın güvenli bir tam metin alternatifi olup olmadığına karar vermeden önce gerçekçi konu ve sorumlu adı uzunluklarını sınayın.

Salesforce Lightning Tasarım Sistemi Aralıkları ve Blueprint Yapısı

Klasik ve değişken aralık dışa aktarımlarını birleştirmeyin

Bu kılavuz, ui-force içindeki SPACING_* değerlerini listeler. Ayrı var-spacing dışa aktarımı farklı, daha kompakt değerler içerir; VAR_SPACING_MEDIUM ile SPACING_MEDIUM aynı referans değildir. Yalnızca benzer adlara bakarak değerleri karıştırmak formun düzensiz görünmesine yol açabilir. Kullanmak istediğiniz yoğunluk sistemini seçin ve kaynağını koruyun.

Alan sarmalayıcısını tutarlı kullanın

Salesforce Lightning Tasarım Sistemi Taslak ve Kayıtlı Kayıt Davranışı

Kayıtlı kaydı denetimlerden ayrı tutun

Betik, son kaydedilen öncelik ve durumu bir record nesnesinde tutar. Seçim alanlarını düzenlemek yalnızca taslağı değiştirir. Kaydet işlemi değerleri bu nesneye kopyalar, özeti günceller ve bir etkinlik öğesi ekler. Böylece birden fazla başarılı düzenlemeden sonra Taslağı sil işlemi anlamlı olur.

Arka uçta gerçekleşmeyen bir başarı durumu uydurmayın

Örnekte kayıt kimliği araması, izin modeli, API veya veritabanı yoktur. Düğme ve onay mesajı, işlemin yerel olduğunu açıkça belirtir. Üretim ortamındaki bir Salesforce entegrasyonunda, kesin kayıt durumunu güncellemeden önce uygun veri API'leri ve sunucu yanıtları gerekir. CSS sınıfları bu garantileri sağlayamaz.

Salesforce Lightning Tasarım Sistemi Alan Doğrulama ve Etkinlik

Notun değişikliği açıklamasını sağlayın

Yazılan kural, en az on karakterlik kırpılmış bir metin ister ve metin alanını 300 karakterle sınırlar. Boş veya kısa bir not, tüm kayıt değişikliklerini engeller, alan hatasını gösterir ve odağı nota taşır. Kullanıcı düzenleme yaptığında eski hata temizlenir; sonraki Kaydet işlemi geçerli değeri yeniden doğrular.

  1. Not girmeden gönderin ve kayıtlı özet değerlerinin değişmediğini doğrulayın.
  2. İşe yarar bir not girin, kaydedin ve en yeni etkinlik kaydını inceleyin.
  3. Alanları yeniden değiştirin, taslağı silin ve en son kaydedilmiş değerlerin geri yüklendiğini doğrulayın.

Okunabilir bir değişiklik kaydı ekleyin

Başarılı bir yerel güncelleme, kaydedilen durum ve öncelikten bir etkinlik başlığı oluşturur; ardından notu olduğu gibi metin içeriği olarak ekler. Yeni değişiklik ilk sırada görünsün diye kaydı listenin başına ekler. Not hiçbir zaman HTML olarak yorumlanmaz ve başlangıçtaki statik etkinlik, kullanıcının yerel kayıtlarının altında kalır.

Salesforce Lightning Tasarım Sistemi Erişilebilir Formlar ve Kurtarma

Gerçek etiketler ve açık açıklamalar kullanın

Seçim alanlarının ve metin alanının görünür etiketleri, for ve id aracılığıyla ilgili denetime bağlanır. Not alanı, yardım ve hata metinlerine referans verir; zorunlu alan işaretçisinin de okunabilir bir title değeri vardır. Birincil ve silme eylemleri, uygun submit ve button türlerine sahip düğmelerdir; böylece kullanıcı taslağı silerken form yanlışlıkla gönderilmez.

Taslağı silme sonrasında öngörülebilir bir yere dönün

Silme işlemi kaydedilmiş öncelik ve durumu geri yükler, notu ve alan hatasını temizler, odağı öncelik denetimine taşır. Etkinlik geçmişini silmez veya kaydı başlangıç durumuna döndürmez. Kullanıcı bir kez kaydedip başka bir değişikliği denedikten sonra ikinci taslağı iptal ettiğinde bu ayrım önem kazanır.

Salesforce Lightning Tasarım Sistemi CSS Entegrasyonu ve Sürüm Kapsamı

Yayımlanmış stil paketini yükleyin

Eksiksiz kaynak, sabitlenmiş CSS dağıtımını ve küçük bir uygulama stil dosyasını içe aktarır. Vite, paket yazı tipi ve görsel URL'lerini çözümler. Ardından HTML ve JavaScript kayıt davranışını sağlar; bu, lightning-record-edit-form etrafında bir sarmalayıcı değil, CSS blueprint uygulamasıdır.

  • Yerel paket CSS, alan, düğme ve kart görünümünü sağlar.
  • Orijinal HTML, kayıt yapısını ve etiketleri sağlar.
  • Orijinal JavaScript, taslak durumunu, doğrulamayı ve yerel etkinlikleri yönetir.

Arşivlenmiş kaynağı sürümlenmiş bir referans olarak değerlendirin

Salesforce Lightning Tasarım Sistemi Bileşen Örnekleri

index.html — eksiksiz vaka çalışma alanı

Anlamsal HTML içinde kayıt özeti, form ve başlangıç etkinliği.

html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Local case workspace</title>
<body>
<main class="slds-example">
  <header class="slds-page-header">
    <p class="slds-text-title_caps">Service workspace · fictional record</p>
    <div class="record-title">
      <div>
        <h1 class="slds-page-header__title">
          Case 004218 · Delivery address update
        </h1>
        <p class="slds-text-body_small">
          Northstar Studio · Opened today · Owner: Maya Chen
        </p>
      </div>
      <span id="status-badge" class="slds-badge">New</span>
    </div>
  </header>
  <div class="record-grid">
    <section class="slds-card">
      <div class="slds-card__header">
        <h2 class="slds-card__header-title">Case details</h2>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <div class="summary">
          <div>
            <span class="slds-text-title">Contact</span>
            <p>Alex Morgan</p>
          </div>
          <div>
            <span class="slds-text-title">Channel</span>
            <p>Email</p>
          </div>
          <div>
            <span class="slds-text-title">Priority</span>
            <p id="read-priority">Medium</p>
          </div>
          <div>
            <span class="slds-text-title">Status</span>
            <p id="read-status">New</p>
          </div>
        </div>
        <div class="slds-box slds-theme_shade slds-m-top_medium">
          <h3 class="slds-text-heading_small">Customer request</h3>
          <p class="slds-m-top_small">
            Please update the delivery location for order NS-1842 before it
            leaves the warehouse. The contact is available to confirm the new
            address.
          </p>
        </div>
        <form id="case-form" class="slds-m-top_large" novalidate>
          <h3 class="slds-text-heading_small slds-m-bottom_medium">
            Update the local case
          </h3>
          <div class="field-grid">
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="priority"
                >Priority</label
              >
              <div class="slds-form-element__control">
                <div class="slds-select_container">
                  <select class="slds-select" id="priority">
                    <option>Low</option>
                    <option selected>Medium</option>
                    <option>High</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="slds-form-element">
              <label class="slds-form-element__label" for="case-status"
                >Status</label
              >
              <div class="slds-form-element__control">
                <div class="slds-select_container">
                  <select class="slds-select" id="case-status">
                    <option>New</option>
                    <option>Working</option>
                    <option>Escalated</option>
                    <option>Closed</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div id="note-field" class="slds-form-element slds-m-top_medium">
            <label class="slds-form-element__label" for="case-note"
              ><abbr class="slds-required" title="required">*</abbr> Update
              note</label
            >
            <div class="slds-form-element__control">
              <textarea
                class="slds-textarea"
                id="case-note"
                rows="3"
                maxlength="300"
                aria-describedby="note-help note-error"
              ></textarea>
            </div>
            <p id="note-help" class="slds-form-element__help">
              Explain the change in 10–300 characters. Nothing is sent to
              Salesforce.
            </p>
            <p id="note-error" class="slds-form-element__help" hidden>
              Enter an update note of at least 10 characters.
            </p>
          </div>
          <div class="form-actions">
            <button
              type="button"
              id="cancel"
              class="slds-button slds-button_neutral"
            >
              Discard draft</button
            ><button type="submit" class="slds-button slds-button_brand">
              Save local update
            </button>
          </div>
          <p id="save-result" class="slds-m-top_small" role="status"></p>
        </form>
      </div>
    </section>
    <aside class="slds-card">
      <div class="slds-card__header">
        <h2 class="slds-card__header-title">Case activity</h2>
      </div>
      <div class="slds-card__body slds-card__body_inner">
        <p class="slds-text-body_small slds-m-bottom_medium">
          Newest updates first
        </p>
        <ol id="activity" class="activity">
          <li>
            <span class="activity-dot"></span>
            <div>
              <h3 class="slds-text-heading_small">Case opened</h3>
              <p>Customer requested a delivery address change.</p>
              <small>Initial example activity</small>
            </div>
          </li>
        </ol>
      </div>
    </aside>
  </div>
  <footer>
    Native SLDS 2.264.1 CSS with original HTML and JavaScript. Local
    demonstration; no Salesforce record or message is created.
  </footer>
</main>

<script type="module" src="/src/main.js"></script>
</body></html>

Kod referansı

  • Vite proje kök dizinine kaydedin.

main.js — taslak, doğrulama ve etkinlik

Eksiksiz uygulama davranışı ve yerel CSS içe aktarımı.

js
import "@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css";
import "./slds.css";
let record = { priority: "Medium", status: "New" };
const form = document.querySelector("#case-form"),
  priority = document.querySelector("#priority"),
  status = document.querySelector("#case-status"),
  note = document.querySelector("#case-note"),
  field = document.querySelector("#note-field"),
  error = document.querySelector("#note-error"),
  result = document.querySelector("#save-result");
function clearError() {
  field.classList.remove("slds-has-error");
  error.hidden = true;
  note.removeAttribute("aria-invalid");
  result.textContent = "";
}
form.addEventListener("input", clearError);
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = note.value.trim();
  if (text.length < 10) {
    field.classList.add("slds-has-error");
    error.hidden = false;
    note.setAttribute("aria-invalid", "true");
    note.focus();
    return;
  }
  record = { priority: priority.value, status: status.value };
  document.querySelector("#read-priority").textContent = record.priority;
  document.querySelector("#read-status").textContent = record.status;
  document.querySelector("#status-badge").textContent = record.status;
  const li = document.createElement("li"),
    dot = document.createElement("span"),
    body = document.createElement("div"),
    h = document.createElement("h3"),
    p = document.createElement("p"),
    small = document.createElement("small");
  dot.className = "activity-dot";
  h.className = "slds-text-heading_small";
  h.textContent = record.status + " · " + record.priority + " priority";
  p.textContent = text;
  small.textContent = "Local update · this session";
  body.append(h, p, small);
  li.append(dot, body);
  document.querySelector("#activity").prepend(li);
  note.value = "";
  clearError();
  result.textContent = "Local case updated. No server request was made.";
});
document.querySelector("#cancel").addEventListener("click", () => {
  priority.value = record.priority;
  status.value = record.status;
  note.value = "";
  clearError();
  priority.focus();
});

Kod referansı

  • src/main.js olarak kaydedin. Tüm güncellemeler yerel kalır.

slds.css — duyarlı düzen

Yalnızca özgün kayıt ızgarası, geçmiş süslemesi ve mobil düzen.

css
[hidden] { display: none !important; }
body {
  margin: 0;
}
.slds-example {
  background: #f3f3f3;
  padding: 24px;
  min-height: 680px;
}
.record-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
}
.record-title h1 {
  white-space: normal;
}
.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.record-grid > .slds-card {
  margin: 0;
  min-width: 0;
}
.summary,
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.summary p {
  font-weight: 600;
  margin-top: 4px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.activity {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity li {
  display: flex;
  gap: 12px;
  padding-bottom: 24px;
  position: relative;
}
.activity li:not(:last-child):before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 0;
  border-left: 1px solid #c9c9c9;
}
.activity-dot {
  flex: none;
  width: 11px;
  height: 11px;
  background: #0176d3;
  border-radius: 50%;
  margin-top: 5px;
}
.activity p {
  margin: 8px 0;
}
.activity small {
  color: #747474;
}
.slds-example footer {
  font-size: 12px;
  color: #747474;
  margin-top: 20px;
}
.slds-form-element.slds-has-error #note-help {
  color: #444;
}
@media (max-width: 760px) {
  .slds-example {
    padding: 12px;
  }
  .record-grid {
    grid-template-columns: 1fr;
  }
  .record-title {
    gap: 12px;
  }
  .field-grid {
    grid-template-columns: 1fr;
  }
  .form-actions {
    justify-content: flex-start;
  }
}

Kod referansı

  • src/slds.css olarak kaydedin; paket stilleri ayrı kalır.
04

Salesforce Lightning Tasarım Sistemi Aracı Kurulumu

Uygulamaya Başlangıç Noktası

Sabitlenmiş yerel CSS örneği; bir Salesforce kuruluşuna dağıtım değildir. Paketlenmiş varlıkları yeniden dağıtırken paket ve varlık bildirimlerini koruyun.

sh
npm create vite@latest slds-case -- --template vanilla
cd slds-case
npm install
npm install @salesforce-ux/[email protected]
# Replace index.html; add src/main.js and src/slds.css from the complete examples.
npm run dev

Projeniz İçin Bir İstem

Ajan İstemi
Sabitlenmiş SLDS CSS şablonlarını kullanarak odaklı bir vaka çalışma alanı oluşturun. Kayıt kimliğini, müşteri bağlamını, kaydedilmiş durumu ve düzenleme taslağını birbirinden ayrı tutun. Buradaki alan yapısını, gerçek belirteç referanslarını ve kaynak dosyanın tamamını aynen kullanın. Özeti değiştirmeden önce notu doğrulayın, taslak iptal edildikten sonra yerel etkinliği koruyun ve Salesforce arka uç bağlantısı olduğu izlenimini vermeyin.
05

Salesforce Lightning Tasarım Sistemi Kaynakları ve Kapsamı

Sabitlenmiş SLDS CSS paketine yönelik OpenDesign kılavuzu. Önizlemede özgün HTML ve JavaScript ile yerel CSS, kurgusal vaka verileri ve yerel durum kullanılır. Lightning Web Components yüklenmez ve Salesforce'a bağlanılmaz. Üst kaynak deposu arşivlenmiştir; üretim çalışmaları için güncel Salesforce platform yönergelerini değerlendirin.