# Preline UI Tasarım Sistemi ## Preline UI Tasarım Sistemi Arayüz Önizlemesi Üç özgün yaratıcı oturumunu karşılaştırın, grup boyutunu değiştirin ve yerel olduğu açıkça belirtilen malzeme tahminini kaydedin. ## 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. ### Varsayılan açık anlamsal tema | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --background | var(--color-white) | Varsayılan arka plan rolü. | | --foreground | var(--color-gray-800) | Ana metin rolü. | | --border | var(--color-gray-200) | Paylaşılan kenarlık rolü. | | --primary | var(--color-primary-600) | Etkin sekme ve ana eylem. | | --primary-foreground | var(--color-white) | Birincil metin. | | --primary-hover | var(--color-primary-700) | Üzerine gelme durumu. | | --primary-focus | var(--color-primary-700) | Odak durumu. | | --primary-active | var(--color-primary-700) | Etkin durum. | | --layer | var(--color-white) | Miktar kontrolü yüzeyi. | | --layer-line | var(--color-gray-200) | Miktar kontrolü sınırı. | | --layer-hover | var(--color-gray-50) | Üzerine gelme yüzeyi. | | --card | var(--color-white) | Oturum ve grup kartları. | | --card-line | var(--color-gray-200) | Kart sınırı. | | --muted-foreground-1 | var(--color-gray-500) | Yardımcı metin. | ### Gerçekte kullanılan Tailwind ölçekleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | p-2 / gap-2 | 0.5rem | Miktar kontrolü çerçevesi ve sekme aralıkları. | | px-3 / gap-3 | 0.75rem | Sekme dolgusu ve sayı kontrolü aralıkları. | | p-5 | 1.25rem | Kartlar ve varsayılan sayfa iç boşluğu. | | sm:p-8 | 2rem from 640px | Küçük kesme noktasında sayfa iç boşluğu. | | mt-7 | 1.75rem | Planlayıcıdan önceki boşluk. | | text-xs | 0.75rem / 1rem | Yardımcı etiketler. | | text-sm | 0.875rem / 1.25rem | Kontroller ve açıklayıcı metin. | | text-lg | 1.125rem / 1.75rem | Grup başlığı. | | text-2xl | 1.5rem / 2rem | Oturum başlığı. | | text-3xl | 1.875rem / 2.25rem | Sayfa başlığı ve toplam. | | rounded-lg / rounded-xl | 0.5rem / 0.75rem | Kontroller / kartlar; varsayılan Tailwind köşe yarıçapı değerleri. | ### Özgün uygulama ve eklenti kısıtlamaları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Group size | min 1 / max 6 / step 1 | HSInputNumber veri seçenekleri ile HTML girdi kısıtlamaları birbiriyle uyumludur. | | Print studio allowance | $12 per participant | Kurgusal malzeme tahmini. | | Clay workshop allowance | $18 per participant | Kurgusal malzeme tahmini. | | Drawing walk allowance | $5 per participant | Kurgusal malzeme tahmini. | | Layout | Flexible session + 280px group card; stack at 760px | Özgün, duyarlı kompozisyon. | | Theme mapping | bg-primary → --color-primary → --primary | Anlamsal Tailwind yardımcı sınıfı, Preline takma adı üzerinden çözülür. | ## Preline UI Tasarım Sistemi Eksiksiz Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. 1. Kil atölyesini seçip başlığını, malzemelerini ve süresini doğrulayın. 2. Katılımcı sayısını ikiden üçe çıkarın ve 54 $ tutarındaki tahmini doğrulayın. 3. Yerel planı kaydedin, ardından eski onayı temizlemek için bir sekmeyi değiştirin. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## Preline UI Tasarım Sistemi Bileşen Örnekleri ### Anlamsal ve eksiksiz planlayıcı biçimlendirmesi Sekme kimlikleri, panel ilişkileri, sayı girdisi kancaları ve açık bir yerel durum bölgesi. ```

STUDIO SATURDAY · SAMPLE PROGRAM

Choose a different kind of afternoon.

Explore three creative sessions and calculate a sample materials budget for your group. This planner does not book a place.

09:30–11:00 · 90 minutes

Ink, paper, repeat.

Make a two-color print from a simple cut-paper composition.

Materials included in the estimate

  • Cobalt ink
  • Warm white stock
  • Registration guide

Sample materials allowance: $12 per person

``` Kod referansı - Üç oturum ve fiyat, özgün örnek verilerdir. - Yerel girdide, eklentiyle aynı kısıtlar bulunur. ### Eklentilerin eksiksiz başlatılması ve hesaplama Dışa aktarılan non-auto girdisinden manuel başlatma; seçim ve miktar, hesaplanan tek bir özeti besler. ``` import {HSTabs,HSInputNumber} from 'preline/non-auto'; HSTabs.autoInit();HSInputNumber.autoInit(); const quantity=document.querySelector('#people'),save=document.querySelector('#save'),feedback=document.querySelector('#feedback'); function selected(){return document.querySelector('[role=tabpanel]:not(.hidden)')} function update(){const panel=selected(),count=Number(quantity.value);document.querySelector('#selected-name').textContent=panel.dataset.name;document.querySelector('#selected-duration').textContent=panel.dataset.duration;document.querySelector('#total').textContent=quantity.checkValidity()&&count>=1?'$'+count*Number(panel.dataset.price):'—';save.disabled=!quantity.checkValidity()||count<1;feedback.textContent='No booking or payment is created.'} document.querySelectorAll('[data-hs-tab]').forEach(button=>button.addEventListener('click',()=>queueMicrotask(update))); new MutationObserver(update).observe(document.querySelector('nav'),{subtree:true,attributes:true,attributeFilter:['aria-selected']}); quantity.addEventListener('input',update);quantity.addEventListener('change',update); const instance=HSInputNumber.getInstance('#quantity');instance.on('change',update); save.addEventListener('click',()=>{if(!quantity.reportValidity())return;const panel=selected();feedback.textContent=`Saved locally: ${panel.dataset.name}, ${quantity.value} people, $${Number(quantity.value)*Number(panel.dataset.price)} materials estimate.`;save.disabled=true});update(); ``` Kod referansı - preline/non-auto içinden adlandırılmış dışa aktarımları kullanın. - Sürümü belirtilmiş eklenti alt yolu .mjs dosyaları varsayılan bir sınıf dışa aktarmaz. - Hem input değişiklik olayları hem eklentinin change geri çağrıları özeti günceller. ### Özgün duyarlı yerleşimin tamamı Yerel sekme ve sayı eklentilerinin çevresinde baskı, kil ve çizim temalı dekoratif illüstrasyonlar. ``` html,body{margin:0;height:auto;min-height:0}body{background:#f7f8fb;font-family:ui-sans-serif,system-ui,sans-serif;color:var(--foreground)}button{cursor:pointer}button:disabled{cursor:default}.planner-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.session-art{height:200px;position:relative;overflow:hidden;border-radius:12px 12px 0 0}.session-art i,.session-art b,.session-art span{display:block;position:absolute}.print{background:#e2e9f4}.print i{width:160px;height:140px;left:15%;top:45px;background:#2456a7;transform:rotate(-13deg)}.print b{width:150px;height:150px;right:14%;top:30px;background:#f0a979;border-radius:50%;mix-blend-mode:multiply}.print span{width:180px;height:8px;left:20%;top:160px;background:#f9f8ef;transform:rotate(-13deg)}.ceramics{background:#e8d9c8}.ceramics i{width:150px;height:100px;left:25%;top:65px;border-radius:15% 15% 50% 50%;background:#a87862}.ceramics b{width:150px;height:32px;border-radius:50%;left:25%;top:53px;background:#704a3d;box-shadow:inset 0 0 0 10px #bd8f78}.ceramics span{width:150px;height:12px;left:25%;top:171px;background:#c7b39e;border-radius:50%}.drawing{background:#e2e8de}.drawing i{width:160px;height:145px;left:23%;top:25px;background:#fffdf4;transform:rotate(8deg);border:1px solid #d6d8cb}.drawing b{height:90px;width:80px;left:33%;top:49px;border:2px solid #4d655b;transform:rotate(-18deg);border-radius:50% 50% 10% 10%}.drawing span{width:130px;height:7px;background:#ad754c;left:45%;top:145px;transform:rotate(-33deg)}@media(max-width:760px){.planner-grid{grid-template-columns:minmax(0,1fr)}.session-art{height:170px}}@media(max-width:360px){main{padding:14px!important}.session-art i,.session-art b,.session-art span{transform:scale(.8)}.session-art{height:150px}h1{font-size:26px!important}} ``` Kod referansı - 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. ## 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. ``` # Create an empty directory and run: npm init -y npm install preline@4.2.0 tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 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",`Studio planner${f.readFileSync("body.html","utf8")}`)' # Serve this directory with your existing static server. ``` ### Projeniz İçin Bir İstem ``` 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. ``` ## 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. - Temalar Anlamsal rol eşlemesi ve tema özelleştirmesi. - Sekmeler eklentisi Hedef ilişkileri, başlatma ve davranış. - Sayı girdisi Sınırlar, kancalar, yöntemler ve değişiklik geri çağrıları. - Sekme biçimlendirmesi Sekme listesi ve panel yerleşimi. - JavaScript entegrasyonu Başlatma sınırları ve çerçeve yaşam döngüsü. - Tipografi Yardımcı sınıflarla oluşturulmuş metin hiyerarşisi. - Kurulum Tailwind derlemesi ve paket kurulumu. ## Preline UI Tasarım Sistemi İlgili Kaynaklar ### Prime UI Prime UI ekosisteminin sürümü sabitlenmiş bir PrimeVue uygulaması: gerçek ön ayar referansları, denetimli genişletme, filtreleme, seçim ve yerel sabitleme içeren Aura temalı bir belge ağacı. ### Pure CSS Pure CSS; çalışma zamanı bileşenleri olmadan ızgaralar, formlar, düğmeler, menüler ve tablolar için kullanılan modüler bir stil sayfasıdır. Bu kılavuz, isteğe bağlı duyarlı ızgara modülünün ve yerel anlamsal öğelerin filtrelenebilir bir ekipman kataloğunda nasıl birlikte çalıştığını gösterir; sıralama ve seçim açıkça uygulanmıştır. ### Quasar Gerçek marka ve aralık değerleri, QForm doğrulaması, üç adımlı brief oluşturucu, radyo biçim seçenekleri ve canlı 45 dakikalık gündem içeren yerel bir Quasar rehberli iş akışı. - [Uygulama başvurusu](https://preline.co/plugins/tabs.html) - [Kaynak](https://preline.co/docs/themes.html) - [Kaynak](https://preline.co/docs/typography.html) - [Kaynak](https://preline.co/plugins/input-number.html) - [Destekleyici belirtimi okuyun](https://preline.co/docs/index.html) - [Destekleyici belirtimi okuyun](https://preline.co/docs/themes.html) - [Destekleyici belirtimi okuyun](https://preline.co/docs/typography.html) - [Destekleyici belirtimi okuyun](https://preline.co/plugins/tabs.html) - [Destekleyici belirtimi okuyun](https://preline.co/plugins/input-number.html) - [Destekleyici belirtimi okuyun](https://preline.co/docs/components/tabs.html) - [Destekleyici belirtimi okuyun](https://preline.co/docs/preline-javascript.html) - [Kod referansı](https://preline.co/docs/components/tabs.html) - [Kod referansı](https://preline.co/plugins/input-number.html) - [Kod referansı](https://preline.co/docs/themes.html) - [Temalar Anlamsal rol eşlemesi ve tema özelleştirmesi.](https://preline.co/docs/themes.html) - [Sekmeler eklentisi Hedef ilişkileri, başlatma ve davranış.](https://preline.co/plugins/tabs.html) - [Sayı girdisi Sınırlar, kancalar, yöntemler ve değişiklik geri çağrıları.](https://preline.co/plugins/input-number.html) - [Sekme biçimlendirmesi Sekme listesi ve panel yerleşimi.](https://preline.co/docs/components/tabs.html) - [JavaScript entegrasyonu Başlatma sınırları ve çerçeve yaşam döngüsü.](https://preline.co/docs/preline-javascript.html) - [Tipografi Yardımcı sınıflarla oluşturulmuş metin hiyerarşisi.](https://preline.co/docs/typography.html) - [Kurulum Tailwind derlemesi ve paket kurulumu.](https://preline.co/docs/index.html)