Scottish Government tasarım sistemi.

Scottish Government tasarım sistemi Metin girişi için pratik bir başvuru

Kullanıcının çalışmasını kaybetmeden düzenleyebilmesini sağlayın

Buradaki belirleyici etkileşim, metni silmeyen uzunluk yönergesidir. Kullanıcı uzun bir erişim notunu yapıştırabilir, ne kadarını düzenlemesi gerektiğini görebilir ve kısaltırken metnin tamamını koruyabilir. Yerel karakter sayacı; kalan sayıyı, sınır aşımı stilini ve gecikmeli yardımcı teknoloji mesajını gösterir. Notun önizleme için yeterince geçerli olup olmadığına ise uygulama ayrıca karar verir.

Bu, özgün bir atölye notu örneğidir; Scottish Government hizmeti değildir ve sağlık bilgisi istemez. Kimlik grafikleri, depolama veya gönderim içermez. Alan ipucu, görevin resmî bir işlemden ödünç alınmadan anlaşılabilmesi için pratik bir erişim gereksinimi ister ve özel ayrıntıların paylaşılmamasını önerir.

Destekleyici belirtimi okuyun

Scottish Government tasarım sistemi Roboto ve duyarlı tipografik hiyerarşi

Yayımlanmış ölçüleri koruyun

Sistem, Scottish Government müdürlükleri ve politika alanları için Roboto kullanılmasını zorunlu kılar. Sistemi benimseyen diğer kuruluşlar, boyut ve satır yüksekliği kurallarını koruyup sonucu test ederek okunaklı başka bir yazı tipi kullanabilir. Bağımsız örnekte Arial yedek yazı tipi olarak açıkça belirtilmiştir; bulunmayan bir web yazı tipinin Roboto olduğu iddia edilmez.

Gövde metni 16/24px'ten 19/32px'e, ana başlık ise 30/40px'ten 44/56px'e çıkar. Her iki değişiklik de yerel geniş ekran stil sayfasında yapılır. ds_h 3 sınıfı, üçüncü düzeyde anlamsal bir başlık gerektirmeden görsel boyutu değiştirir. Kısa bir formda daha küçük bir bölüm başlığına ihtiyaç duyulurken belge ana hattında yapay bir boşluk oluşturulmaması açısından bu ayrım önemlidir.

Destekleyici belirtimi okuyun

Scottish Government tasarım sistemi Belirgin bir odak görünümü

Odağı, hatayı ve tamamlanmayı birbirinden ayırın

Mavi, birincil marka/bağlantı rolünü; siyah metni; sarı ise odağı destekler. Bunlar, uydurulmuş bir CSS özel özellikler koleksiyonu değil, adlandırılmış Sass ayarlarıdır. Marka uyarlaması, sistem ayar modülüyle yüklenmeden önce yapılır. Diğer marka renkleri değişse bile resmî yönergeler odak paletinin korunmasını ister.

Karakter sayacı, negatif kırmızıyı yalnızca izin verilen uzunluk aşıldığında gösterir. Uygulama düzeyindeki ikinci bir boş alan hatasında da aynı negatif rol kullanılabilir; ancak mesaj, karakter sayımı sorununu değil, yanıtın eksik olduğunu belirtmelidir. Önizlemede uzak bir gönderimin başarılı olduğu izlenimini vermek için olumlu yeşil asla kullanılmaz.

• Textarea ve işlem düğmelerinde görünür klavye odağı dış çizgisini koruyun.
• Uzunluk aşımını yalnızca kırmızı kenarlıkla değil, metinle de açıklayın.
• Hata özetlerini ve alan ipuçlarını kararlı bir alan kimliğine bağlayın.

Destekleyici belirtimi okuyun

Scottish Government tasarım sistemi Sarmalayıcı genişliği ve boşluklar

Dış ve iç genişliklerin karıştırılmasını önleyin

Resmî ızgara tablosunda orta, büyük ve ekstra büyük kesme noktaları için sırasıyla 736, 928 ve 1120px iç içerik genişlikleri belirtilir. Bunlara karşılık gelen yerel kapsayıcı kutular 768, 960 ve 1152px genişliğindedir; çünkü her birinde yanlarda 16px dolgu bulunur. Bu ayrımı gözetmek, uygulayıcıların bu iki genişliği iç içe kullanıp düzeni yanlışlıkla iki kez daraltmasını önler.

Önizlemede, yerel kapsayıcının içine 42rem genişliğinde bir metin sütunu yerleştirilir. Bu üst sınır, kısa bir form için uygun bir uygulama tercihidir; sistem için yeni bir ayar değildir. 768px altında kapsayıcı akışkan hâle gelir ve aynı 16px yan boşluk, metin alanını ekran kenarından korur.

Boşluk yardımcı sınıfları duyarlıdır. Örneğin ds_!_margin-bottom--4, 48rem’de 24px’ten 32px’e çıkar; daha büyük düzeyler de artar. Kaynakta her iki değer de verildiği için masaüstü ekran görüntüsündeki boşluğun her yerde sabit olduğu sanılmaz.

Destekleyici belirtimi okuyun

Scottish Government tasarım sistemi Yerel karakter sayacı alanı

Gerçek bir metin alanıyla başlayın

ds_question kök öğesi data-module niteliğini ve isteğe bağlı yüzde eşiğini taşır. İlişkili etiket ve ipucu, sıradan ve erişilebilir HTML öğeleridir. maxlength niteliğine sahip bir textarea, JavaScript olmadan da işe yarayan bir yedek çözüm sunar. İyileştirme uygulandıktan sonra bileşen bu değeri okur ve katı sınırı kaldırır; böylece yapıştırılan metin sessizce kesilmez.

%80 eşiğine sahip 200 karakterlik bir alanda sayaç, 160 karaktere ulaşıldığında gösterilir. Herkese açık bileşen sayfasındaki örnek metin ile 250 karakterlik kod örneğinde aynı sayılar kullanılmadığından, bu örnekte baştan sona tutarlı tek bir sınır kullanılmıştır. JavaScript yoksa görünür ipucu sınırı belirtmeye devam eder ve yerel maxlength niteliği uygulanır.

<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>

Kod referansı

Destekleyici belirtimi okuyun

Scottish Government tasarım sistemi Yerel bileşenin sorumlulukları

Mesajlar, zamanlama ve sayım

Sürümlenmiş uygulama, aria-hidden niteliğine sahip görünür bir mesaj ve yardımcı teknoloji için ayrı, gizli bir mesaj oluşturur. Yazılmış ipucunu silmek yerine ilgili kimlikleri mevcut aria-describedby niteliğine ekler. Yazma geri bildiriminin önce tamamlanması için gizli duyuruyu güncellemeden önce 1000ms bekler.

Gerçek uzunluk, JavaScript string.value.length değerinden alınır: UTF-16 kod birimlerini sayar. Temel çok dilli düzlemin dışındaki bir sembol iki birim, birleşik bir emoji ise daha fazla birim kullanabilir. Farklı bir karakter politikası gerektiren hizmetler, bu bileşenin insan algısına göre karakter sayımı yaptığını iddia etmek yerine sayacı ve sunucu tarafı doğrulamasını birbiriyle uyumlu hâle getirmelidir.

Bileşen input olaylarını dinler. Uygulama bir örnek metin ekler veya alanı programatik olarak temizlerse input olayını da göndermelidir. Demodaki örnek metin ekleme ve sıfırlama işlemleri bunu yapar. Kaynaktaki bir yorumda konuşma tanıma için düzenli aralıklarla kontrol yapıldığından söz edilir; ancak incelenen uygulamada böyle bir aralık ayarlanmaz. Bu nedenle bu kılavuzda söz konusu davranışın mevcut olduğu ileri sürülmez.

Destekleyici belirtimi okuyun

Scottish Government tasarım sistemi Güncel sürüm yollarını kullanın

Modül yükleme ve kapsamlı başlatma

Güncel paketin adı @scottish-government/design-system'dir. 4.3.0 sürümünde derlenmiş stil sayfası dist/css/design-system.min.css konumundadır; eski bir kurulum paragrafında ise hâlâ dist/styles/main.css yoluna başvurulur. Bu tarif, yayımlanmış gerçek varlığı kullanır. Betik bir ES modülü dışa aktarımı içerdiğinden, sıradan bir klasik betik etiketi yerine type="module" ile içe aktarın.

Bu tek alan için bir CharacterCount örneği oluşturup init çağrısını yapın. Birden fazla bileşen içeren sayfalarda DS.initAll da kullanılabilir; ancak bu örnek yalnızca gereken sayacı başlatır. Ek bir analiz hizmeti yapılandırılmamıştır. Sunucu tarafı doğrulama kütüphaneden bağımsızdır: sayaç, kullanımı kolaylaştıran bir düzenleme aracıdır; kısıtlamaları uygulama sınırı değildir.

1. Sabitlenmiş 4.3.0 paketini yükleyin ve derlenmiş CSS dosyasını ve modülü yerel bir varlık dizinine kopyalayın.
2. Modülü içe aktarmadan önce sayfaya etiketin, ipucunun ve textarea yapısının tamamını ekleyin.
3. Sayacı bir kez başlatın; ardından uygulamanın önizleme/sıfırlama işlemlerini olağan input olaylarıyla bağlayın.

Destekleyici belirtimi okuyun

Scottish Government tasarım sistemi Sınır aşımından kurtulmayı sınayın

Yalnızca boş alanı sınamayın

Eşiğin altında başlayın, 160 karakteri geçin ve ardından 200 karakterden uzun bir metin yapıştırın. “çok fazla” mesajı görünürken metnin tamamı textarea içinde kalmalı ve aria-invalid true olmalıdır. Değeri sınırın altına indirin; hata sınıfının ve geçersiz durumun sıfırlandığını doğrulayın.

Uygulamanın Önizleme işlemi, boş veya sınırı aşan notları ilişkili bir hatayla engeller. Geçerli bir not, textContent kullanılarak yerel önizlemede gösterilir; böylece yazılan işaretleme yorumlanmak yerine metin olarak görüntülenir. Notu düzenle işlemi, değeri korunmuş olarak aynı textarea alanına döndürür. Sıfırla işlemi, yerel sayacın da sıfırlanması için bir input olayıyla alanı temizler.

390px genişlikte başlığın satırlara bölünmesini, textarea'nın tam genişliğini, düğmelerin satır kaydırmasını ve hata özetini inceleyin. Daha geniş ekranlarda metin sütunu geniş bir paragrafa dönüşmemelidir. Bu kontroller bu örneği doğrular; gerçek bir hizmetin ise son bağlamında kullanıcı araştırması, yazı tipi testleri ve yardımcı teknoloji incelemesi yapması gerekir.

Destekleyici belirtimi okuyun

Scottish Government tasarım sistemi Bileşen Örnekleri

<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>

npm install --save-exact @scottish-government/[email protected]
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>