# Salesforce Lightning Tasarım Sistemi ## 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. ## 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 | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | COLOR_BACKGROUND | rgb(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_ALT | rgb(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_DEFAULT | rgb(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_WEAK | rgb(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_BORDER | rgb(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_ERROR | rgb(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_SELECTION | rgb(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 | rgb(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_HOVER | rgb(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_ACTIVE | rgb(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 | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | SPACING_X_SMALL | 0.5rem | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | | SPACING_XXX_SMALL | 0.125rem | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | | SPACING_XX_SMALL | 0.25rem | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | | SPACING_SMALL | 0.75rem | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | | SPACING_MEDIUM | 1rem | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | | SPACING_NONE | 0 | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | | SPACING_X_LARGE | 2rem | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | | SPACING_XX_LARGE | 3rem | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | | SPACING_LARGE | 1.5rem | Klasik SPACING_* dışa aktarımı. Bu, ayrı ve kompakt VAR_SPACING_* kümesi değildir. | ### Yazı tipi ölçeği | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | FONT_SIZE_1 | 0.625rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_2 | 0.75rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_3 | 0.8125rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_4 | 0.875rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_5 | 1rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_6 | 1.125rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_7 | 1.25rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_8 | 1.5rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_9 | 1.75rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_10 | 2rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | | FONT_SIZE_11 | 2.625rem | Okunabilir vaka notlarını ve alan etiketlerini koruyarak metin boyutunu role göre seçin. | ### Köşe yarıçapı | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | BORDER_RADIUS_SMALL | 0.125rem | Yayımlanmış yarıçap referansı. Dairesel bir durum işaretçisi, dikdörtgen bir form denetiminden farklıdır. | | BORDER_RADIUS_MEDIUM | 0.25rem | Yayımlanmış yarıçap referansı. Dairesel bir durum işaretçisi, dikdörtgen bir form denetiminden farklıdır. | | BORDER_RADIUS_LARGE | 0.5rem | Yayımlanmış yarıçap referansı. Dairesel bir durum işaretçisi, dikdörtgen bir form denetiminden farklıdır. | | BORDER_RADIUS_CIRCLE | 50% | Yayımlanmış yarıçap referansı. Dairesel bir durum işaretçisi, dikdörtgen bir form denetiminden farklıdır. | ### Yerel CSS blueprint anatomisi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | slds-page-header | Record context | Vaka kimliğini ve özetini düzenleme formunun üzerinde tutun. | | slds-card | Grouped content region | Vaka ayrıntıları ve etkinlik, ayrı anlamsal bölgelerde yer alır. | | slds-form-element | Label + control + help | Düzenlenebilir her değeri bütünlüklü bir alan içinde sunun. | | slds-has-error | Invalid field modifier | aria-invalid ve açık bir hata mesajıyla birlikte kullanın. | | slds-button_brand | Primary action | Yerel güncellemeyi kaydedin; sınıf biçimlendirme sağlar, kalıcılık sağlamaz. | | slds-button_neutral | Secondary action | Taslağı silin ve en son kaydedilmiş yerel değerleri geri yükleyin. | ## 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. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## 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. ### 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 Her etiket ve denetim, slds-form-element içinde yer almalı; slds-form-element__control, giriş alanını sarmalamalı ve yardım metni hemen ardından gelmelidir. Özgün ızgara, birbiriyle ilişkili iki seçim alanını yan yana düzenler, dar ekranlarda ise alt alta yerleştirir. Bu ızgara uygulama düzeninin parçasıdır; alan anatomisi ise yerel blueprint'ten gelir. ## 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 Resmî GitHub deposu arşivlenmiştir. Bu nedenle sayfa, aktif biçimde bakımı yapılan en yeni öneri olduğunu iddia etmek yerine kullanılan gerçek paketi belirtir. Salesforce platform bileşenleri, daha yeni tasarım sistemi yönergeleri ve stil kancası desteği hedef ortam için doğrulanmalıdır. Seçilen CSS paketi ve çerçeve entegrasyonu kararlarını açıkça belirtin. ## 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. ``` Local case workspace

Service workspace · fictional record

Case 004218 · Delivery address update

Northstar Studio · Opened today · Owner: Maya Chen

New

Case details

Contact

Alex Morgan

Channel

Email

Priority

Medium

Status

New

Customer request

Please update the delivery location for order NS-1842 before it leaves the warehouse. The contact is available to confirm the new address.

Update the local case

Explain the change in 10–300 characters. Nothing is sent to Salesforce.

``` 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ı. ``` 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. ``` [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. ## 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. ``` npm create vite@latest slds-case -- --template vanilla cd slds-case npm install npm install @salesforce-ux/design-system@2.264.1 # Replace index.html; add src/main.js and src/slds.css from the complete examples. npm run dev ``` ### Projeniz İçin Bir İstem ``` 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. ``` ## 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. - Resmî Kaynak Deposu Arşivlenmiş kaynak, şablonlar ve paket geçmişi. - Sabitlenmiş belirteç dışa aktarımı Klasik aralık, tipografi, köşe yarıçapı ve renk değerlerinin aynısı. - Bileşen Şablonları Yerel biçimlendirme ve değiştirici kalıpları. ## Salesforce Lightning Tasarım Sistemiyle İlgili Kaynaklar ### Samsung One UI Özgün ve eksiksiz bir okuma tercihleri önizlemesi üzerinden One UI’ın görüntüleme ve etkileşim yapısını, 24dp kenar boşluğu yönergelerini ve %200 metin ölçekleme gereksinimini inceleyin. Koyu görünüm ve açık sıfırlama kurtarma akışı da içerir. ### SAP Fiori UI5 Web Components aracılığıyla SAP Fiori’ın Horizon temasını kullanın: gerçek tema parametreleri, açık içerik yoğunluğu, anlamsal değer durumları ve yerel doğrulama içeren bir satın alma talebi düzeni. ### SEEK Braid Temaya özel değişkenler, dört gerçek kesme noktası, bağlama uygun metin, farklı düğme tonları ve eylemi devre dışı bırakmak yerine doğrulamayı açıklayan denetimli bir alan içeren özgün bir iş arama düzeniyle Braid’i anlayın. - [Uygulama başvurusu](https://github.com/salesforce-ux/design-system) - [Kaynak](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Kaynak](https://github.com/salesforce-ux/design-system/tree/main/ui/components) - [Kod referansı](https://github.com/salesforce-ux/design-system) - [Resmî Kaynak Deposu Arşivlenmiş kaynak, şablonlar ve paket geçmişi.](https://github.com/salesforce-ux/design-system) - [Sabitlenmiş belirteç dışa aktarımı Klasik aralık, tipografi, köşe yarıçapı ve renk değerlerinin aynısı.](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2.264.1/design-tokens/dist/ui-force.json) - [Bileşen Şablonları Yerel biçimlendirme ve değiştirici kalıpları.](https://github.com/salesforce-ux/design-system/tree/main/ui/components)