Rivet Tasarım Sistemi.

Üniversite görevleri için Rivet Tasarım Sistemi

Giriş noktası HTML olan bir bileşen sistemi

Rivet, Indiana University arayüzleri için CSS, JavaScript, yardımcı sınıflar ve sayfa düzenleri sunar. Çalışma örneği, 2.9.1 tarayıcı paketini doğrudan kullanır; React veya bileşen derleyicisi gerektirmez. Amacı, gösterge paneli görünümüne bürünmüş bir başvuru formu oluşturmak değil, ikincil ziyaret bilgileri içeren küçük bir atölye ayrıntı sayfası sunmaktır.

Kurumsal kimlik ile örnek içerik birbirinden ayrıdır. Bu sayfa IU imzasını yeniden oluşturmaz, ziyaretçi kaydı yapıldığını iddia etmez veya gerçek bir tesisi doğrulamaz. Üniversite hizmetini canlıya alırken üniversitenin onaylı marka kullanım ve içerik sahipliği süreçlerini izleyin. Kod lisansı, kurgusal etkinlik bilgilerini resmî bilgiye dönüştürmez.

Destekleyici belirtimi okuyun

Rivet Tasarım Sistemi Tipografi ölçeği ve yazı tipi rolleri

Metinlerde kesin boyut sınıflarını kullanın

Rivet sans-serif yazı tipi ailesi BentonSans ile, serif ailesi ise GeorgiaPro ile başlar. Yerel örnekte bilerek Arial ve Georgia yedek yazı tipleri kullanılır ve uzaktaki yazı tiplerine istek gönderilmez. Canlı uygulamada bu önizlemedeki yazı tipi dosyalarını kopyalamak yerine kurumsal yazı tiplerinin kullanım izinlerini ve sunumunu netleştirin.

Sayısal ölçek, yuvarlatılmış bir Majör Saniye ilerleyişini izler. Örnek başlıkta rvt-ts-32, panel başlığında rvt-ts-23 kullanılır; derlenmiş boyutları sırasıyla 2rem ve 1.4375rem'dir. Temel metin boyutu 1rem'dir. 1.5 satır yüksekliği için rvt-lh-base, 1.2 için rvt-lh-tight ve 1.65 için rvt-lh-loose kullanın. Bu sınıfları metin öğelerine uygulayın; böylece bir kapsayıcı içindeki kontroller istemeden büyük başlık boyutunu devralmaz.

Destekleyici belirtimi okuyun

Rivet Tasarım Sistemi Renk ve yüzey tercihleri

Kızıl, tek renk seçeneği değildir

Referans paletinde crimson-500 (#990000) ile blue-500 (#006298) birbirinden ayrılır. Örnekte üst kenar çizgisinde ölçülü biçimde kızıl, etkileşimli öğelerin biçimlendirilmesinde ise yerel Rivet kontrolleri kullanılır. Metin rengi black-500 (#243142), yardımcı bilgi yüzeyi black-000 (#f8f9fa), ayırıcılar ise black-100 (#e2e7e9) rengindedir. Bunlar ekran görüntüsünden çıkarılmış değerler değil, paletin gerçek girdileridir.

Bir renk adı, her renk eşleşmesinin kontrast gereksinimlerini karşıladığını garanti etmez. Yerel sekme odak göstergesini ve seçili durumunu, görünür içerik ve aria-selected değeriyle birlikte koruyun. Etkin paneli yalnızca etiketini kızıl renge dönüştürerek belirtmeyin. Örnekte kurgusal etkinliğe ilişkin uyarı, sekme değiştiricinin üzerinde okunaklı bir metin olarak yer alır.

Destekleyici belirtimi okuyun

Rivet Tasarım Sistemi Aralıklar, genişlikler ve köşeler

Bilinçli olarak büyük adımlar içeren adlandırılmış bir ölçek

Rivet aralık ölçeği, dörder piksellik ardışık artışlardan oluşmaz. 16px kök boyutunda xxs 4px'ten xs 8px'e, sm 16px'e, md 24px'e, lg 32px'e, xl 40px'e, xxl 64px'e, 3-xl 128px'e ve 4-xl 192px'e ilerler. Örnekte mobil sayfa iç boşluğu için sm, panel çevresindeki düzenli aralıklar için md, ana dikey ayrımlar içinse lg kullanılır.

Örnekteki 64rem maksimum okuma alanı, uygulamaya özgü bir tercihtir; Rivet kapsayıcı belirteci olduğu iddia edilmez. Bu alanın içinde 4-xl genişlik belirteci 48rem/768px, spacing-4-xl ise 12rem/192px değerindedir. Aynı sonekin kullanılması, boyut değerlerinin de aynı olduğu anlamına gelmez. Radius-sm .125rem, md .25rem, lg ise .5rem'dir; tüm bileşenleri tek bir büyük, yuvarlatılmış kart görünümüne dönüştürmeyin.

Destekleyici belirtimi okuyun

Rivet Tasarım Sistemi Sekmeler: yapı ve durum

Veri değerlerini eşleştirin, ardından başlatın

Bir sekme kümesi; bir rvt-tabs sarmalayıcısı, anlamlı bir aria-label değerine sahip rvt-tabs__tablist, düğme tetikleyicileri ve kardeş rvt-tabs__panel öğelerinden oluşur. data-rvt-tab ve data-rvt-tab-panel değerleri her eşleşme için aynı olmalıdır. Başlangıçta seçili olanı belirten data-rvt-tab-init, düğmeye değil panele eklenir. Rivet kimlikleri otomatik oluşturabilir; ancak açıkça belirtilen eşleşmeler bu örneği incelemeyi kolaylaştırır.

Rivet.init(), sekme rollerini, seçim durumunu, panel ilişkilerini ve klavye davranışını ekler. Gizli durumu bağımsız biçimde değiştiren ikinci bir tıklama işleyicisi yazmayın; birbiriyle yarışan iki durum yöneticisi, seçili sekme ile görünür panelin eşleşmemesine yol açabilir. Aşağıdaki eksiksiz işaretleme kısa ve özgün içerik barındırır; kurulumdaki stil sayfası ile betik etiketleri arasına yerleştirilebilir.

<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div>

Kod referansı

Destekleyici belirtimi okuyun

Rivet Tasarım Sistemi Sekmelerin dışında tutulması gerekenler

Ziyaret için gerekli bilgileri koruyun

Etkinlik başlığı, tarih, süre ve örneğin kurgusal olduğuna ilişkin uyarı sekmelerin dışında kalır. İçeriğin gerçek bir rezervasyon hakkında olup olmadığını öğrenmek için ziyaretçinin gizli bir paneli açması gerekmemelidir. Her panelde kısa bir başlık ve paragraf bulunur; üç sekme etiketi de dar ekranda tek satırda kalacak kadar kısadır.

İlgili içerikler ayrı ayrı okunabiliyorsa sekmeler uygundur. Birden fazla program ücretini veya iki eğitim planını karşılaştırmak için sekmeler elverişli değildir; çünkü geçiş yapıldığında karşılaştırmanın bir tarafı gizlenir. Bu iş için tablo veya açık bir liste daha uygun bir düzen sunar.

• Birbirinden bağımsız olarak yararlı açıklamalar için Genel Bakış, Ulaşım ve Erişilebilirlik sekmelerini kullanın.
• Son tarihleri, iptal bildirimlerini ve ana eylemi sekme panellerinin dışında görünür tutun.
• Okuyucunun kategoriler arasındaki değerleri eşzamanlı olarak incelemesi gerekiyorsa karşılaştırma tablosu kullanın.

Destekleyici belirtimi okuyun

Rivet Tasarım Sistemi Duyarlı tasarım ve klavye kullanımı

Mobil öncelikli beş eşik

Rivet kırılma noktaları 30em, 46.25em, 67.5em, 78.75em ve 87.5em'dir. Her zamanki 16px başlangıç yazı tipi boyutuyla bunlar 480, 740, 1080, 1260 ve 1400px'e karşılık gelir. Orta eşik, başka bir kaynaktan alınmış 768px kuralı değil, 740px'tir. Duyarlı yardımcı sınıflara kırılma noktası ve -up eki eklenir; örneğin rvt-ts-32-md-up.

Sekme şeridi birkaç satıra bölünmemelidir. Etiketleri kısa tutun ve dar genişliklerde gerçek metinle test edin; metni sığdırmak için küçültmek, doğru gezinme bileşenini seçmenin yerini tutmaz. Yerel etkileşimde Sol ve Sağ ok tuşları odağı sekmeler arasında, uçlara gelindiğinde başa sararak taşır. Enter veya Space odaktaki sekmeyi etkinleştirir. Kapalı panellerdeki etkileşimli alt öğeler sekme sırasına girmemelidir.

Destekleyici belirtimi okuyun

Rivet Tasarım Sistemi Örneği kurun ve doğrulayın

Tek bir başlatma çağrısıyla tarayıcı paketi

Sağlanan kurulum, 2.9.1 sürümünü sabitler ve yayımlanmış CSS dosyasını ve küçültülmüş tarayıcı JavaScript dosyasını sitenin statik dizinine kopyalar. Rivet.init() çağrısından önce bu varlıkları sunun. Bir çerçeve HTML öğesini daha sonra bağlarsa, ilk sayfa taramasının yeni düğümleri gördüğünü varsaymak yerine belgelenmiş JavaScript entegrasyon yaşam döngüsünü kullanın.

Tek başına çalışan önizleme, resmî CSS ve JavaScript varlıklarını yerel olarak yükler. Tipografi yedekleri ve sarmalayıcı genişliği, açıkça belirtilmiş uygulama geçersiz kılmalarıdır. Ağ üzerinden rezervasyon isteği, kalıcı depolama, analiz veya otomatik oluşturulan onay yoktur. Gösterilen etkileşimin tamamı yerel sekmelerdir.

1. Yerel stil sayfasını yükleyin ve başlatmadan önce üç sekme tetikleyicisinin ve panelin de bulunduğunu doğrulayın.
2. Rivet'ı başlatın; her sekmeye önce fareyle, ardından ok tuşları ve Enter veya Space ile geçin.
3. Masaüstü ve dar mobil ekran boyutlarında seçili tetikleyiciyi, görünür paneli, odak halkasını ve belge genişliğini kontrol edin.

Destekleyici belirtimi okuyun

Rivet Tasarım Sistemi Bileşen örnekleri

<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop visit — Rivet specimen</title><link rel="stylesheet" href="vendor/rivet-2.9.1/rivet.min.css"><style>:root{--rvt-font-sans:Arial,sans-serif;--rvt-font-serif:Georgia,serif}body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{border-top:8px solid #990000;margin:0;background:#fff;color:#243142}.shell{max-width:64rem;margin:auto;padding:2rem 1rem 3rem}.eyebrow{font-size:.875rem;letter-spacing:.06em;color:#4c5a69}.intro{max-width:48rem}.facts{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;margin:2rem 0;background:#f8f9fa;border:1px solid #e2e7e9}.facts p{margin:0}.facts strong{display:block;font-size:.875rem}.rvt-tabs__panel{min-height:13rem}footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e7e9;font-size:.875rem;color:#4c5a69}h1{margin:.5rem 0 1rem}@media(min-width:46.25em){.shell{padding:3rem 2rem}.rvt-tabs__panel{min-height:12rem}}</style></head><body><main class="shell"><p class="eyebrow">LEARNING STUDIO · RIVET COMPONENT EXAMPLE</p><h1 class="rvt-ts-32 rvt-text-bold rvt-lh-tight">Reading the archive</h1><p class="intro rvt-ts-18">A hands-on introduction to working with historical sources. Explore the visit information below.</p><div class="facts"><p><strong>Session</strong>Saturday · 10:00–11:30</p><p><strong>Format</strong>Small-group workshop</p><p><strong>Location</strong>Learning studio · Room 204</p></div><p class="rvt-ts-14 rvt-m-bottom-lg">Fictional event for interface demonstration. No reservation is made.</p><div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
  </div>
</div><footer>Native Rivet 2.9.1 tabs · Arial font fallback · Original example content<br>Keyboard: use Left and Right to move between tabs, then Enter or Space to activate.</footer></main><script src="vendor/rivet-2.9.1/rivet.min.js"></script><script>Rivet.init();</script></body></html>