WebBlocks UI hakkında, saf WebBlocks UI ile kurulmuş bir site

Bu demo; projeyi, katman modelini, pakette gelen primitive'leri, pattern'leri ve JavaScript davranışını yalnızca paket varlıkları ve pakette gelen wb-* sınıflarıyla anlatır.

Yalnızca paket Özel CSS yok Özel JS yok

Bu sayfa neyi kanıtlıyor

WebBlocks UI, ayrı bir sunum katmanı olmadan kendini belgeleyebilir. Bu rehber yardımcı CSS, utility betiği veya uydurma sınıf eklemez.

Pakette neler geliyor

Mimari katmanlar

6

Foundation, utilities, layout, primitives, patterns, icons

Bağımlılıklar

0

Paketin kendisi için framework gerekmez

JavaScript

14+

Tema, overlay, gezinme, geri bildirim ve disclosure modülleri

Icons

173

Sınıf tabanlı mask-image ikon kullanımı

Sistemi doğru sırayla oku

Getting Started Dosya ekleme, kök öznitelikleri, ilk akış

Gerçek bir proje için en kısa doğru kurulum yolunu arıyorsan önce bu sayfayı kullan.

Mimari Altı katmanlı model

Token'ların, layout'un, primitive'lerin, pattern'lerin ve ikonların nereye ait olduğunu anlaman gerektiğinde bu sayfayı kullan.

Foundation Token'lar, başlıklar, tema eksenleri

Kök tema öznitelikleri, koyu mod, preset'ler, varsayılan tipografi, boşluk token'ları ve ham element stilleri için bu sayfayı kullan.

Layout Container'lar, grid'ler, shell'ler

wb-container, wb-grid, wb-row, navbar, sidebar ve page-shell yapısı için bu sayfayı kullan.

Primitives Pakette gelen yapı taşları

Pakette gerçekten gelen kontrolleri, surface'leri, formları ve interaction shell'leri incelemek için bu sayfayı kullan.

Icons mask-image sınıf referansı

Pakette gelen ikon sınıf adlarına, alias davranışına ve sınıf tabanlı <i> ikon yoluna ihtiyacın olduğunda bu sayfayı kullan.

Patterns Ekran düzeyinde kompozisyonlar

Soru tek bir primitive değil de sayfa türü, hiyerarşi veya kompozisyonla ilgiliyse bu sayfayı kullan.

Playground Yalnızca HTML ile canlı önizleme aracı

Düz HTML yapıştırmak, gerçek WebBlocks UI varlıklarıyla render etmek ve yapay zeka üretimi ya da elle yazılmış parçaları hızlıca doğrulamak için bu aracı kullan.

Utilities Boşluk, yazı ve hizalama yardımcıları

Boşluk yardımcıları, yazı boyutu, renk utility'leri, görünürlük yardımcıları ve son kompozisyon düzeltmeleri için bu sayfayı kullan.

JavaScript Veri hook'ları ve genel API'ler

Etkileşim modeli önem kazandığında ve doğru tetikleyici pattern'ine ya da genel modül adına ihtiyacın olduğunda bu sayfayı kullan.

Pakette gelen gerçek bir örnekten başla

Sayfanın işi zaten netse, bu rehberdeki en yakın pattern örneğini kopyalamak ekranı hafızadan yeniden kurmaktan daha güvenlidir. Tüm yapıyla başla, içeriği değiştir, sonra cömertçe buda.

Yönetim paneli Sidebar, topbar, istatistikler, tablolar

Sayfa uygulama yoğunsa ve gezinme, metrikler, satır aksiyonları ile hızlı taranabilir veri gerekiyorsa bunu kullan.

Yönetim ayarları Daha uzun formlar ve bölümlenmiş aksiyonlar

Sayfayı gruplanmış ayarlar, yıkıcı aksiyonlar ve daha yavaş form akışları yönlendiriyorsa bunu kullan.

Auth girişi Odaklanmış giriş akışı

Ekranın dar, sakin ve tek bir form görevi etrafında merkezlenmiş kalması gerekiyorsa bunu kullan.

Herkese açık ana sayfa Hero ritmi ve tanıtım yüzeyleri

Sayfa pazarlama odaklıysa ve yönetim yoğunluğu yerine daha sakin bir içerik akışı gerekiyorsa bunu kullan.

Content Shell Dokümantasyon, onboarding ve metin öncelikli akışlar

Sayfa ürün arayüzünden çok yapı, referans ve okunabilir bir ilerleme gerektiriyorsa bunu kullan.