Pega Bolt Tasarım Sistemi.

Pega Bolt Tasarım Sistemi: Bolt uygulamasını seçin

Twig ve React farklı sözleşmelere sahiptir

Bu kılavuz, herkese açık Bolt Twig / Pattern Lab uygulamasını ele alır. Mevcut Bolt ana sayfasında ayrıca uygulamalar ve portallar için BoltDS React sunulur; bu iki uygulamanın belgeleri ve sürümlemeleri ayrıdır. Önizleme bağımsız bir HTML yorumudur, Bolt çalışma zamanı değildir.

Bu örnek, görünür bir özet ve isteğe bağlı sorular içeren bir atölye kaynağıdır. İçerik odaklı Twig uygulaması buna uygundur: önce editoryal hiyerarşi gelir, akordeon ise ek materyali gerektiğinde erişilebilir kılar. BoltDS React ile oluşturulmuş bir uygulamada Twig ad alanı yollarını kopyalamak yerine ilgili belgeler kullanılmalıdır.

Destekleyici belirtimi okuyun

Pega Bolt Tasarım Sistemi: Lacivert yapı, sınırlı parlak vurgular

Markalı bir okuma yüzeyi

Yayımlanan palete lacivert #001f5f, camgöbeği #10a5ac ve turuncu #f76923 dahildir. Örnekte güçlü bir editoryal başlık için lacivert, görsel vurgular için camgöbeği ve turuncu kullanılır. Bu tonlar temel renk değerleridir; her renk birleşiminin küçük metinlerde uygun olduğunu göstermez.

Kaynak bilgileri beyaz ve açık lacivert yüzeylerde sunulur. Dekoratif dallanan diyagram, bir hizmet yolculuğunu basitleştirme atölyesini anlatır; özgün bir çalışmadır, Pega logosu veya resmî bir diyagram değildir.

Destekleyici belirtimi okuyun

Pega Bolt Tasarım Sistemi: Akışkan tipografi ve okunabilir metin genişlikleri

Rem değerleri sabit piksel garantisi değildir

Bolt, normal boyutu 1rem, büyük boyutu 1.4rem, xxlarge boyutu 2.35rem ve display boyutunu 3.75rem olarak tanımlar. Kök boyut görünüm alanına ve piksel yoğunluğuna göre ölçeklenir; bu nedenle tablonun tamamını sabit 16 px tabanına göre dönüştürmek amaçlanan davranışı bozar.

Temel tipografi, gövde ve başlık metinlerinde Open Sans kullanır. Bağımsız önizlemede yazı tipi dosyaları pakete dahil olmadığından yerel sistem yazı tipi yedeği kullanılır. Piksel düzeyinde tipografik eşitlik iddiasında bulunmadan belirgin bir başlık, kısa bir üst etiket ve rahat okunur paragraflar sunar.

Destekleyici belirtimi okuyun

Pega Bolt Tasarım Sistemi: Yatay ve dikey ritim farklıdır

Genel bir sekiz noktalı ölçekle değiştirmeyin

Orta yatay boşluk 1.55rem, orta dikey boşluk ise 1.35rem'dir. Büyük boşluklarda da aynı ayrım 3.1rem ve 2.7rem olarak korunur. Bitişik öğeler arasında x ölçeğini, alt alta sıralanmış bölümler arasında y ölçeğini kullanın.

Önizlemede geniş ekranda giriş ve soru listesi ayrı sütunlarda gösterilir; ardından yerel 700 px kırılma noktasında alt alta sıralanır. Bu kırılma noktası Bolt belirteci değil, uygulamaya özgü bir tercihtir. Uzun soru etiketleri, metin küçülmeden simgenin yanında alt satıra geçer.

Destekleyici belirtimi okuyun

Pega Bolt Tasarım Sistemi: Soru listesini Twig ile oluşturun

Öğeler veri özelliği değil, yakalanan içeriktir

Her accordion-item.twig çağrısında tetikleyici ve içerik sağlanır. Twig set bloğu, oluşturulan öğeleri yakalar; üst bileşene bu içerik content üzerinden iletilir. Yukarıdaki eksiksiz örnek ilk soruyu açık gösterir ve single: true kullanır.

spacing öğelerin iç boşluklarını, icon_valign ise simgenin hizalamasını denetler. Soruların sınırlarının belirgin olması gerekiyorsa ayırıcıları koruyun. inactive bayrağı, devre dışı bırakılmış bir form denetimi değildir: içeriği daraltır ve simgeyi gizler.

• Tarihleri, ön koşulları ve kullanılabilirlik bilgilerini daraltılmış yanıtların dışında tutun.
• Tetikleyicide somut bir soru sorun.
• Bir yanıtın içine başka bir akordeon yerleştirmeyin.

Destekleyici belirtimi okuyun

Pega Bolt Tasarım Sistemi: Okuma konumunu kaybetmeden genişletme

Aynı anda tek yanıt

HTML yorumunda gerçek düğmeler, aria-expanded, aria-controls ve gizli yanıt panelleri kullanılır. Kapalı bir soruya tıklandığında soru açılır, önceki yanıt kapanır; açık soruya tıklandığında ise soru daraltılır. Odak, tetikleyici düğmede kalır.

Bu yaklaşım, Bolt JavaScript'ten bağımsız kalırken seçilen tek öğenin açık olma davranışını yansıtır. Önizleme, Bolt derin bağlantılarını uygulamaz ve yerel bileşen çalışma zamanını çalıştırdığı iddiasında bulunmaz. Yerel Bolt'ta tekli mod etkin olduğunda derin bağlantıyla açılan öğe, başlangıçta açık olarak belirlenmiş öğeye öncelik kazanır.

Destekleyici belirtimi okuyun

Pega Bolt Tasarım Sistemi: Yoğunluk tüm sayfanın ayarıdır

Bileşen özelliği değil, kök düzeyinde bir ayar

Bolt, html öğesindeki data-bolt-info-density ile comfortable, regular ve compact değerlerini tanır. Varsayılan değer regular'dır. Comfortable yazı boyutlarını ve boşlukları artırır; compact ise ikisini de azaltır.

Kök özniteliğini akordeona uygulayıp bileşen başına desteklenen bir yoğunluk değişikliği elde edeceğinizi beklemeyin. Bu okuma sayfasında önizleme, yerel yoğunluk motorunu taklit etmek yerine sabit ve rahat bir editoryal düzen kullanır.

Destekleyici belirtimi okuyun

Pega Bolt Tasarım Sistemi: Gerçek bileşeni bağlamında kullanın

Belgelenen ortamı kullanın

Yükleme komutu, bileşen ad alanlarını çözen ve gerekli varlıkları derleyen bir Bolt Twig uygulamasında anlamlıdır. Herkese açık depo, yarn setup ve yarn start komutlarıyla eksiksiz bir geliştirme ortamı sunar. Bu bir referans ortamıdır; iki satırlık bir üretim dağıtımı değildir.

1. Sunucu tarafında oluşturulan içerik uygulaması için Twig'i seçin ve sürümünü uygulamanızda doğrulayın.
2. Akordeon paketini yükleyin, mevcut Twig ad alanını Bolt uygulama yapılandırması üzerinden kaydedin ve derlenmiş proje varlıklarını ekleyin.
3. Eksiksiz soru örneğini oluşturun; ardından gerçek projede tekli genişletme davranışını, satıra kaydırılan tetikleyicileri ve klavye kullanımını doğrulayın.

Destekleyici belirtimi okuyun

Pega Bolt Tasarım Sistemi Bileşen Örnekleri

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Service journey workshop</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#001f5f;font:16px/1.6 system-ui,sans-serif}header{background:#001f5f;color:white;padding:38px 5%;display:grid;grid-template-columns:1.6fr 1fr;gap:30px}small{letter-spacing:.13em;font-size:11px;text-transform:uppercase}h1{font-size:clamp(32px,4vw,48px);line-height:1.12;max-width:650px;margin:16px 0}header p{max-width:550px;color:#d7e2f2}svg{width:100%;max-width:310px;align-self:center;justify-self:center}main{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:32px 5%}h2{font-size:23px;line-height:1.25}aside p{font-size:14px}dl{font-size:14px}dt{font-weight:700;margin-top:18px}dd{margin:2px 0}section{background:white;border-top:3px solid #10a5ac}article{border-bottom:1px solid #d7e2f2}button{font:600 16px/1.5 system-ui;width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:22px 24px;border:0;background:white;color:#001f5f;cursor:pointer}button:hover{background:#f0f5fc}button:focus-visible{outline:3px solid #005154;outline-offset:-4px}.answer{padding:0 24px 24px;color:#303744;font-size:15px}.answer p{margin:0}footer{padding:0 5% 22px;color:#555;font-size:11px}@media(max-width:700px){header{grid-template-columns:1fr;padding:28px 6%}svg{display:none}main{grid-template-columns:1fr;padding:24px 6%;gap:16px}button{padding:20px}dl{display:flex;flex-wrap:wrap;gap:24px}dt{margin:0}}</style><header><div><small>Field notes · Live workshop</small><h1>Make your service journey simpler.</h1><p>A practical session for turning a complex request into a clear next step.</p></div><svg viewBox="0 0 300 200" aria-hidden="true"><path d="M30 100H115M115 100V40H230M115 100V160H230" fill="none" stroke="#86cac6" stroke-width="4"/><circle cx="30" cy="100" r="22" fill="#f76923"/><rect x="95" y="80" width="40" height="40" rx="5" fill="#10a5ac"/><rect x="210" y="20" width="70" height="40" rx="6" fill="#d7e2f2"/><rect x="210" y="140" width="70" height="40" rx="6" fill="#ffc836"/></svg></header><main><aside><small>Before you join</small><h2>One journey.<br>A clearer direction.</h2><p>Map a request, find a point of friction, and rewrite the next step together.</p><dl><div><dt>Format</dt><dd>Live, small-group exercise</dd></div><div><dt>Length</dt><dd>45 minutes</dd></div><div><dt>Example only</dt><dd>No registration is collected</dd></div></dl></aside><div><h2>Useful to know</h2><section aria-label="Workshop questions"><article><h3 style="margin:0"><button aria-expanded="true" aria-controls="a1" id="q1">What should I bring?<span aria-hidden="true">−</span></button></h3><div class="answer" id="a1"><p>Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a2" id="q2">Will there be a recording?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a2" hidden><p>This workshop is live only. The written exercise is included so you can revisit the method with your team.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a3" id="q3">Who is this session for?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a3" hidden><p>Content teams and developers working on service journeys. No prior experience with the workshop format is required.</p></div></article></section></div></main><footer>Independent Bolt Twig interpretation · verified palette and spacing references · system font fallback</footer><script>const qs=[...document.querySelectorAll('button')];qs.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';qs.forEach(x=>{let yes=x===b&&open;x.setAttribute('aria-expanded',yes);x.lastElementChild.textContent=yes?'−':'+';document.getElementById(x.getAttribute('aria-controls')).hidden=!yes})});</script></html>

{% set questions %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'What should I bring?',
    content: '<p>Bring a laptop and one workflow you want to simplify.</p>',
    open: true
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Will there be a recording?',
    content: '<p>This workshop is live only. The written exercise is included.</p>'
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Who is this session for?',
    content: '<p>Content teams and developers working on service journeys.</p>'
  } only %}
{% endset %}
{% include '@bolt-components-accordion/accordion.twig' with {
  content: questions,
  single: true,
  spacing: 'medium',
  icon_valign: 'top'
} only %}