Bağlantılı sekmeler, sınırlandırılmış bir input-number eklentisi, yüklü tema takma adları, gerçek Tailwind ölçekleri ve seçilen oturuma göre güncellenen yerel bir malzeme tahmini içeren yerel bir Preline oturum planlayıcısı.
Preline 4.2.0 HSTabs ve HSInputNumber; Tailwind CSS 4.3.3 ve paketteki varsayılan temayla. · Uygulama başvurusu
02
Preline UI Tasarım Sistemi Tasarım Referansı
Preline npm 4.2.0 ve Tailwind CSS 4.3.3; kurulu paketin varsayılan teması. Pazarlama ve dokümantasyon sitesinde daha yeni bir sürüm duyurusu yer alabilir; bu nedenle çalıştırılabilir örüm özellikle belirli sürümlere sabitlenmiştir. Tema takma adları takma ad olarak bırakılmıştır; tahmine dayalı onaltılık renk dönüşümleri yapılmamıştır.
Preline UI Tasarım Sistemi Preline, Yardımcı Sınıfları Davranış Eklentileriyle Birleştirir
Preline, Yardımcı Sınıfları Davranış Eklentileriyle Birleştirir
Planlayıcıda iki yerel Preline eklentisi kullanılır: HSTabs bir oturum paneli seçer, HSInputNumber ise sınırlandırılmış artırma ve azaltma kontrollerini yönetir. Görsel düzenlemenin büyük bölümü Tailwind sınıflarıyla sağlanır. Özgün oturum çizimi ve bütçe hesabı, kurgusal bir hepsi bir arada rezervasyon bileşenine değil, uygulamanın kendisine aittir.
Örneği kopyalarken bu ayrım önemlidir. JavaScript paketini kurmak tek başına yardımcı sınıfları derlemez veya uygulamanın işaretlemesini sağlamaz. Öte yandan, eklentileri başlatmadan HTML öğesini kopyalamak sekme ve sayı kontrolü davranışlarını eksik bırakır. Aşağıdaki tam entegrasyon her parçayı açıkça sunar.
Preline UI Tasarım Sistemi Anlamsal Takma Adları Palet Rollerine Kadar İzleyin
Anlamsal Takma Adları Palet Rollerine Kadar İzleyin
Paketin varsayılan açık temasında --primary, temel mavi renk paletindeki --color-primary-600 değişkenini ifade eder. Birincil ön plan rengi beyaza karşılık gelir; üzerine gelme, odak ve etkin durumlarda yedi yüzlü rol kullanılır. Seçili sekme ve Kaydet eylemi, anlamsal yardımcı sınıflar aracılığıyla aynı renk ailesini paylaşır.
Kartlar --card ve --card-line değişkenlerini, miktar alanı ise --layer ve --layer-line değişkenlerini kullanır. Bu rolleri ayrı tutmak, gelecekteki tema değişikliklerini her yere doğrudan beyaz ve gri sınıfları serpiştirmekten daha öngörülebilir kılar. Tabloda, hesaplanmış yaklaşık değerleri kaynak tasarım belirteçleri gibi sunmak yerine resmî takma adlar korunur.
Preline UI Tasarım Sistemi Tailwind’in Gerçek Ölçeğini Kullanın, Özgün İstisnaları Belirtin
Tailwind’in Gerçek Ölçeğini Kullanın, Özgün İstisnaları Belirtin
Sayfa başlığı ve tahmin için text-3xl, oturum başlığı için text-2xl, form metinleri için text-sm kullanılır. Kartın p-5 dolgusu, varsayılan aralık biriminde 1.25rem’e karşılık gelir. Daha geniş sm:p-8 sayfa iç boşluğu, Tailwind’in 640px küçük ekran kırılımında başlar; özgün ızgara ise 760px’te tek sütuna geçer.
Yerel stil sayfası system-ui kullanır ve Preline’ın tema dosyasında adı geçen isteğe bağlı özel yazı tiplerini indirmez. 280px genişlikte sekmeler iki satıra yayılır ve grup kartı oturumun altına taşınır. Bunlar, her Preline düzeninin bu geometriye sahip olduğu iddiası değil, uygulamaya özgü bilinçli yerleşim tercihleridir.
Preline UI Tasarım Sistemi Sekme Denetimlerini ve Panelleri Kararlı Kimliklerle Bağlayın
Sekme Kontrollerini ve Panelleri Sabit Kimliklerle Bağlayın
Her sekmedeki data-hs-tab, benzersiz bir panele işaret eder. Erişilebilirlik teknolojileri için sekmenin aria-controls ve panelin aria-labelledby nitelikleri bu ilişkiyi tekrarlar. Başlangıçta yalnızca bir sekmede active ve aria-selected=true bulunur; diğer paneller gizli başlar. Kullanıcı gezinirken yerel HSTabs bu durumları günceller.
Etkin görsel stilde hs-tab-active:bg-primary ve hs-tab-active:text-primary-foreground kullanılır. Bu varyantlar Preline’ın variants.css dosyasından gelir. Dolayısıyla bu dosyanın içe aktarılmaması, JavaScript sınıfları doğru şekilde değiştirse bile seçili durumu görsel olarak belirsiz hâle getirebilir. Uygulama, yanındaki özeti yenilemek için seçim değişikliklerini izler.
Kil atölyesini seçip başlığını, malzemelerini ve süresini doğrulayın.
Preline UI Tasarım Sistemi Eklenti Seçenekleri ile Girdi Kısıtlamaları Uyumlu Olmalı
Eklenti Seçenekleri ile Girdi Kısıtlamaları Uyumlu Olmalıdır
Miktar sarmalayıcısı, data-hs-input-number içinde min bir, max altı ve step bir değerlerini ayarlar. Yerel sayı girdisi de aynı kısıtları tekrarlar. Böylece eklenti düğmeleri ve tarayıcı doğrulaması aynı geçerli değer aralığını kullanır; düğme işleyicisinde tanımlı bir sınırı, elle yazılan bir sayının aşmasına izin verilmez.
Özet; input ve change olaylarını, ayrıca eklentinin change geri çağrısını dinler. Elle girilen değer geçersizse toplam yerine uzun çizgi gösterilir ve Kaydet devre dışı bırakılır; kaydetme işleyicisi de değeri okumadan önce reportValidity çağırır. Altı kişi sınırı örnek planlamaya ait bir kısıtlamadır; gerçek müsaitlik iddiası değildir.
Preline UI tasarım sistemi Eski Etiketler Yerine Etkin Panelden Hesaplayın
Eski Etiketler Yerine Etkin Panelden Hesaplayın
Her panel, kararlı oturum adı, fiyat ve süreyi data özniteliklerinde saklar. Güncelleme işlevi görünür paneli okur ve kişi başı ücreti geçerli grup büyüklüğüyle çarpar. Böylece Baskı stüdyosu, Kil atölyesi ve Çizim yürüyüşü, aynı yer tutucu kartı gösteren sekmeler olmak yerine gerçekten farklı seçenekler sunar.
Gösterilen tahmin yalnızca malzemeleri kapsar. Özgün açıklamalar, kişi başı ücretin neleri içerdiğini belirtir ve sayfada rezervasyon yapılmadığı açıkça yazılır. Tutarların arkasında ödeme, stok kontrolü veya harici bir takvim yoktur. Gerçek bir rezervasyon akışı için bu ayrı sistemler ve sunucu doğrulaması gerekir.
Preline UI tasarım sistemi Bu Paket Sürümünde Dışa Aktarılan Manuel Girdiyi Kullanın
Bu Paket Sürümünde Dışa Aktarılan Manuel Girişi Kullanın
Doğrulanan 4.2.0 paketi, preline/non-auto içinden adlandırılmış HSTabs ve HSInputNumber dışa aktarımlarını sunar. Örnek bunları içe aktarır ve biçimlendirme mevcut olduktan sonra autoInit yöntemlerini çağırır. Adında auto geçse de buradaki autoInit, uygulamanın çağırdığı açık bir taramadır; paket genelinde örtük bir sayfa yükleme kancası değildir.
Doğrulama sırasında, eklenti başına .mjs yolları varsayılan bir sınıf sunmadı ve paket yan etki meta verileri bu yollardan yapılan doğrudan içe aktarımların kaldırılmasına neden olabiliyordu. Dışa aktarılan manuel girdinin kullanılması bu somut derleme sorununu çözdü. Bu nedenle kurulumda, denenmemiş genel bir eklenti içe aktarımı yerine çalışan, sürümü belirtilmiş içe aktarma gösterilir.
Preline UI tasarım sistemi Plan Değiştiğinde Onayın Süresini Doldurun
Plan Değiştiğinde Onayın Süresini Doldurun
Yerel planı kaydet eylemi, oturumun tam adını, kişi sayısını ve toplam malzeme tutarını içeren bir durum cümlesi yazar, ardından kendini devre dışı bırakır. Miktardaki her düzenleme veya seçili sekmedeki değişiklik update işlevini çağırır; böylece olağan açıklama geri gelir ve kaydetmenin mümkün olup olmadığı yeniden hesaplanır. Önceden kaydedilmiş bir cümle yeni bir plana bağlı kalamaz.
Yerel testte Kil atölyesi seçildi, kişi sayısı üçe çıkarıldı ve sonuç olarak 54 $ durum mesajı doğrulandı. Ayrıca sayfanın 280px genişlikte gerçekten oluşturulmuş hâli incelendi. Sabit bir toplam veya yalnızca kendi etiketini değiştiren bir düğme, iki yerel eklentiyle uygulama durumunun birbirine bağlı olduğunu kanıtlamaz.
Kesin yerel sonucu göstermek için bir durum bölgesi kullanın.
Geçersiz değerleri hesaplanan toplamın dışında tutun.
Biçimlendirmeyi uyarlarken sekme ve panel kimliklerini kararlı tutun.
Preline UI Tasarım Sistemi Temayı, Varyantları ve Gerçek Kaynak Biçimlendirmesini Derleyin
Temayı, Varyantları ve Gerçek Kaynak İşaretlemesini Derleyin
Stil sayfası önce Tailwind’i, ardından Preline varyantlarını ve paketlenmiş varsayılan temayı içe aktarır. Yerel HTML, uygulama JavaScript ve Preline dağıtım dosyaları için açık kaynak yolları belirtildiğinden, duruma bağlı yardımcı sınıflar oluşturulan CSS içinde kullanılabilir. Özgün düzen stil sayfası bu içe aktarımların ardından gelir.
Bağımsız önizleme, derlenmiş CSS ve paketlenmiş JavaScript kodunu satır içine alır ve CDN isteği göndermez. Üretim projesi aynı çıktıları ayrı dosyalar olarak sunabilir. Dosya yollarını gerçek CSS giriş dosyasına göreli tutun; aşağıdaki tekrarlanabilir örnekte gizli geçici çalışma alanı bağımlılıklarını önlemek için tüm kaynak dosyaları proje köküne yerleştirilmiştir.
Görseller özgün CSS çalışmasıdır ve aria-hidden ile gizlenmiştir.
Bu stil sayfası Tailwind ve Preline içe aktarımlarının ardından gelir.
04
Preline UI Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Yerel Preline 4.2.0 doğrulandı. Biçimlendirmenin, mantığın ve CSS bileşeninin tamamı yukarıda verilmiştir. input.css kaynak yolları, dört kaynak dosyanın da proje kökünde olduğunu varsayar.
bash
# Create an empty directory and run:
npm init -y
npm install [email protected][email protected] @tailwindcss/[email protected] esbuild
# Save the complete examples above as body.html, app.js and style.css.
# Create input.css with exactly:
# @import "tailwindcss" source(none);
# @import "./node_modules/preline/variants.css";
# @import "./node_modules/preline/css/themes/theme.css";
# @source "./body.html";
# @source "./app.js";
# @source "./node_modules/preline/dist/*.js";
# @import "./style.css";
npx @tailwindcss/cli -i input.css -o bundle.css --minify
npx esbuild app.js --bundle --format=iife --outfile=bundle.js
# Assemble the actual root document without placeholder markup:
node -e 'const f=require("fs");f.writeFileSync("index.html",`<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio planner</title><link rel="stylesheet" href="bundle.css"></head><body>${f.readFileSync("body.html","utf8")}<script src="bundle.js"></script></body></html>`)'
# Serve this directory with your existing static server.
Projeniz İçin Bir İstem
Ajan İstemi
preline/non-auto içinden adlandırılmış HSTabs ve HSInputNumber içe aktarımlarıyla Preline 4.2.0 kullanın ve her iki eklentiyi de açıkça başlatın. Studio Saturday atölyelerinin üçünü, bir ile altı arasındaki kişi aralığını ve seçili atölyenin malzeme maliyetini koruyun. Toplamı etkin panel ve kişi sayısından hesaplayın; bunlardan biri değiştiğinde kaydedilmiş planı geçersiz kılın ve yerel olarak kaydetmeden önce sayısal aralığı doğrulayın. Sağlanan Tailwind tema ve varyant kurulumunu ve özgün düzeni ekleyin. Yerel stüdyo planını rezervasyon veya ödeme onayına dönüştürmeyin.
05
Preline UI Tasarım Sistemi Kaynaklar ve Kapsam
Tailwind CSS 4.3.3 ile yerel Preline npm 4.2.0. Özgün oturum açıklamaları, illüstrasyonlar ve kurmaca malzeme ücretleri. Kaydetme işlemi yalnızca yerel sayfa durumunu saklar; rezervasyon, ödeme veya harici ileti göndermez.
