tasarım sistemi .italia.

tasarım sistemi .italia Sistem ve uygulama

Kod kütüphanesiyle Designers Italia

Designers Italia, bir CSS paketinden daha kapsamlıdır: hizmet tasarımı rehberliği, kitler ve uygulama kaynakları içerir. Bu örnek, 2.18.3 sürümüne sabitlenmiş ve belgelenmiş Bootstrap Italia uygulamasına odaklanır. Kütüphaneyi yüklemenin bir kamu hizmeti tasarımını tamamladığı veya belediye web sitesine yönelik tüm gereklilikleri karşıladığı anlamına gelmez.

İncelenen sürümde Bootstrap Italia, Bootstrap 5.2.3'ü içerir ve özelleştirir. Üzerine ikinci bir standart Bootstrap paketi eklemeyin. Önizlemede, yerel olarak sağlanan Titillium Web yazı tipi dosyalarıyla birlikte yerel CSS ve özgün, üç aşamalı bir kütüphane ziyareti planlama akışı kullanılır.

Destekleyici belirtimi okuyun

tasarım sistemi .italia Tipografi ve kesin değerler

Yazı tiplerinin görevleri farklıdır

Titillium Web, arayüzün standart yazı tipi ailesidir. Lora, uzun metinlerde okumak için serif seçeneğidir; Roboto Mono ise kod veya sabit genişlikli içerikler için kullanılır. Önizlemede kullanılan Titillium Web ağırlıklarının gerçek dosyaları yüklenir ve yazı tipi lisansı korunur; sistem yazı tipi sessizce onun yerine kullanılmaz.

Gövde metni 16px olarak kalır. Başlıklar 576px'te değişir: küçük ekranda H1 48px satır aralığıyla 40px, kurulu CSS sürümünde ise 56px satır aralığıyla 48px'tir. Belge tablosunda masaüstü satır aralığı 60px olarak verilmiştir; buradaki referans tablosu, iki kaynaktaki değerleri birbirine karıştırmak yerine incelenen sürümü kaydeder ve farkı açıklar.

Destekleyici belirtimi okuyun

tasarım sistemi .italia Duyarlı ekran aralıkları ve boşluklar

İki kesme noktası farklı sorunları çözer

Tipografi eşiği 576px'tir; Stepper ise üstbilgisinin sunumunu 992px altında değiştirir. Kompakt ekranlarda geçerli etiket ve n/total sıra numarası görünür kalır. Diğer aşama adları okunamayacak kadar dar sütunlara sıkıştırılmaz. Mobil kullanıcıya geçerli aşama yine de duyurulmalıdır; örnekte bu, başlığa odaklanılarak ve erişilebilir durum metniyle sağlanır.

Boşluk yardımcı sınıfları, doğrulanmış rem ölçeğini izler: kök boyutu normal olduğunda 1'den 5'e kadar olan boyutlar için 4, 8, 16, 24 ve 48px. Izgara kapsayıcısının en büyük genişlikleri arasında xl için 1176px bulunur; bu değer, belleğe güvenerek sıkça kopyalanan standart Bootstrap değerinden farklıdır. Bağımsız plan için uygulama tercihi olarak daha dar, 900px'lik bir üst sınır kullanılır.

Destekleyici belirtimi okuyun

tasarım sistemi .italia Stepper yapısı ve sorumluluklar

İş akışını üstbilgi yönetmez

Belgelenmiş yapı; steppers-header, steppers-content ve steppers-nav bölümlerini birbirinden ayırır. Üstbilgideki liste öğelerine confirmed ve active sınıfları atanır; sıra numarası konumu gösterir. Geri ve ileri düğmelerine kendi sınıfları atanır. Bu sınıflar sunumu tanımlar. Geçerli formun doğru olup olmadığına ve sonraki bir aşamaya geçilip geçilemeyeceğine uygulama karar vermelidir.

Örnekte her aşama için sıradan bölümler kullanılır; denetimler DOM'da tutulur ve etkin olmayan bölümler gizlenir. Böylece erişim notu adımına dönüldüğünde not korunur. İnceleme adımı mevcut denetimlerdeki değerleri okur; tahmin edilen bir sunucu yanıtından yeni değerler oluşturmaz.

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>

Kod referansı

Destekleyici belirtimi okuyun

tasarım sistemi .italia Doğrulama ve anlamlı ilerleme

Yalnızca gerekli seçim yapıldığında ilerleyin

Ziyaret türü seçilmelidir. Herhangi bir seçim yapmadan devam edilirse ilk adım etkin kalır, belirli bir hata gösterilir ve ilk radyo düğmesine odaklanılır. Bir tür seçip devam edildiğinde ilk aşama tamamlanmış olarak işaretlenir. İsteğe bağlı not boş bırakılabilir; bu durumda inceleme ekranında not eklenmediği belirtilir.

Geri düğmesi, seçimi veya notu silmeden önceki aşamaya döner. Baştan başla düğmesi ikisini de bilerek siler ve başlangıca döner. Son ekran yerel bir plan olarak adlandırılır; hiçbir zaman rezervasyonun gönderildiğini, onaylandığını veya kaydedildiğini iddia etmez.

1. Hiçbir radyo düğmesini seçmeden Devam et'e basıp hatayı inceleyin.
2. Bir ziyaret türü seçin, kısa bir not ekleyin ve İnceleme'yi açın.
3. Nota geri dönüp değerinin korunduğunu doğrulayın; ardından planı temizlemek için baştan başlayın.

Destekleyici belirtimi okuyun

tasarım sistemi .italia Erişilebilir durum ve odak

Görsel ve sesli konumu eşleştirin

Etkin liste öğesinde aria-current="step" ve görsel olarak gizlenmiş, geçerli aşamayı belirten bir etiket bulunur. Önceki aşamalara confirmed sınıflarının yanı sıra tamamlanma metni de atanır. Geçerli başlık ve aşama semantiği konumu zaten belirttiği için kompakt sayısal sıra numarası yardımcı teknolojilerden gizlenir; görsel yön bulma amacıyla görünür kalır.

Değişen gövdede, resmî kılavuzun tek sayfalı bir akış için önerdiği aria-live="polite" kullanılır. Örnekte ayrıca klavye kullanıcılarına okunmaya nereden başlayacakları konusunda öngörülebilir bir işaret vermek için yeni başlığa odaklanılır. Daha karmaşık bir formda gereğinden tekrarlı duyuruları önlemek üzere bu ikiliyi desteklediğiniz yardımcı teknolojiyle sınayın.

• Aşama değişiklikleri için gerçek düğmeler kullanın; ilk aşamada Geri düğmesi disabled olsun.
• Etiketleri radyo düğmelerine ve metin alanına bağlayın; yer tutucu metin etiket yerine geçmez.
• Geçerli/tamamlanmış durumları yalnızca mavi renkle veya simgeyle değil, metinle de belirtin.

Destekleyici belirtimi okuyun

tasarım sistemi .italia Yerel varlıklar ve başlatma

CSS, yazı tipleri ve isteğe bağlı JavaScript

Paket; CSS, paketlenmiş bir betik, kaynak yazı tipleri ve bir SVG sprite sağlar. Bu Stepper örneği CSS ve seçilen yazı tiplerini gerektirir; gezinme uygulama mantığına bağlıdır. Diğer bileşenler, otomatik başlatma için data-bs-toggle veya belgelenmiş veri özniteliklerini kullanır. Aynı bileşen için otomatik başlatma ile ikinci bir manuel örneği birlikte kullanmayın.

Modüller kullanıyorsanız yalnızca uygulamanın ihtiyaç duyduğu bileşenleri içe aktarın. Resmî kılavuz, geçiş yöntemlerinin geçiş tamamlanmadan geri döndüğünü ve geçiş sırasında yapılan çağrıların yok sayılabileceğini belirtir. Bu bileşenlerde birbirine bağlı eylemleri sıralamadan önce ilgili tamamlanma olayını bekleyin; bu basit Stepper, yerel bir geçiş API uydurmaz.

Destekleyici belirtimi okuyun

tasarım sistemi .italia Entegrasyon sınırları

Hizmetin tamamlandığı izlenimini vermeden kiti kullanın

Kütüphane belgeleri, sürümün güncel tutulmasını önerir ve üretimde herkese açık bir CDN bağımlılığını sakıncalı bulur. Kurulum, doğrulanmış sürümü sabitler; yerel örnek ise kendi varlıklarını ve lisanslarını içerir. Gerçek bir hizmette ayrıca içerik tasarımı, veri işleme, sunucu tarafı doğrulama ve gönderimin alındığını doğrulayan bir yanıt gerekir.

Örnekte belediye logosu veya resmî amblem kullanılmadan genel bir kütüphane ziyareti anlatılır. Bu, öğretim amaçlı bir OpenDesign örneğidir; bir kamu kurumu hizmeti değildir. Görsel açıdan özenli bir inceleme ekranının gerçek bir başvuru kaydı sanılmaması için prototiplerde bu ayrımı koruyun.

Destekleyici belirtimi okuyun

tasarım sistemi .italia Tasarım Sistemi Bileşen Örnekleri

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>