# Tabler Tasarım Sistemi ## Tabler Tasarım Sistemi Arayüz Önizlemesi Kararları ve kapak çalışmalarını inceleyin, doğrulanmış bir kontrol noktası ekleyin ve yerel renk kipini değiştirin. ## Tabler Tasarım Sistemi Tasarım Referansı Tabler 1.6.1 derlenmiş CSS değişkenleri. Bu sürüm, semantik rollerde OKLCH ilkelleri ile light-dark()/color-mix() kullanır; eski hex tabanlı Tabler örnekleri aynı tema olarak değerlendirilmemelidir. Aşağıdaki değerler, yüklenmiş sürümün gerçek varsayılanlarıdır. ### Varsayılan durum ve eylem renkleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --tblr-primary | oklch(54.6% 0.1724 254.2deg) | Birincil eylem rolü. | | --tblr-secondary | oklch(55.55% 0 0deg) | İkincil rol. | | --tblr-success | oklch(67.38% 0.1885 145.43deg) | Başarı rolü. | | --tblr-info | oklch(66.26% 0.1358 246.81deg) | Bilgi rolü. | | --tblr-warning | oklch(77.02% 0.1658 71.02deg) | Uyarı rolü. | | --tblr-danger | oklch(58.29% 0.1941 25.59deg) | Tehlike rolü. | | --tblr-purple | oklch(57.83% 0.2186 319.15deg) | Bu uygulamadaki prototip kategori rengi. | | --tblr-body-color | light-dark(oklch(26.86% 0 0deg), oklch(92.19% 0 0deg)) | Metin, geçerli renk düzenine uyum sağlar. | | --tblr-body-bg | light-dark(oklch(98.51% 0 0deg), oklch(20.46% 0 0deg)) | Sayfa arka planı, renk düzenine uyum sağlar. | | --tblr-bg-surface | light-dark(var(--tblr-bg-surface-primary), var(--tblr-gray-800)) | Kart/arayüz yüzeyi arka plan rolü. | ### Gövde tipografisi ve köşe ölçeği | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --tblr-font-sans-serif | system-ui, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif | Yüklü sürümdeki sistem sans yazı tipi yığını. | | --tblr-body-font-size | 0.875rem | 16px tarayıcı kök boyutunda varsayılan 14px karşılığı. | | --tblr-body-font-weight | 400 | Normal gövde yazı kalınlığı. | | --tblr-body-line-height | 1.4285714286 | Varsayılan gövde boyutunda yaklaşık 20px. | | --tblr-border-radius | 6px | Varsayılan 6px yarıçap. | | --tblr-border-radius-sm | 4px | Küçük 4px köşe yarıçapı. | | --tblr-border-radius-lg | 8px | Büyük 8px yarıçap. | | --tblr-border-radius-xl | 1rem | Ekstra büyük 1rem yarıçap. | | --tblr-border-radius-pill | 100rem | Hap biçimli köşe yuvarlaklığı. | ### Boşluk ve yerel zaman çizelgesi geometrisi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --tblr-spacer-0 | 0 | Yerel, adlandırılmış boşluk değeri. | | --tblr-spacer-1 | 0.25rem | Yerel, adlandırılmış boşluk değeri. | | --tblr-spacer-2 | 0.5rem | Yerel, adlandırılmış boşluk değeri. | | --tblr-spacer-3 | 1rem | Yerel, adlandırılmış boşluk değeri. | | --tblr-spacer-4 | 1.5rem | Yerel, adlandırılmış boşluk değeri. | | --tblr-spacer-5 | 2rem | Yerel, adlandırılmış boşluk değeri. | | --tblr-spacer-6 | 2.5rem | Yerel, adlandırılmış boşluk değeri. | | --tblr-page-padding | var(--tblr-spacer-3) | Sayfa/zaman çizelgesi boşluk değişkeni; duyarlı geçersiz kılmalar bunu değiştirebilir. | | --tblr-card-spacer-x | 1.25rem | Kart gövdesinin varsayılan yatay dolgusu. | | --tblr-card-spacer-y | 1.25rem | Kart gövdesinin varsayılan dikey dolgusu. | | --tblr-timeline-icon-size | 2.5rem | Varsayılan 16px kök boyutunda 40px simge düğümü. | ### Özgün günlük tercihleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Project layout | col-lg-8 + col-lg-4 | Yerel ızgara; lg kesme noktasından itibaren iki sütun. | | Page padding | 32px; 24px 14px below 650px | Özgün uygulama iç boşluğu. | | Journal title | 32px / 1.2; 27px on mobile | Özgün sayfa başlığı geçersiz kılması. | | Cover studies | 155px tall; 120px on mobile | Özgün dekoratif CSS görseli. | ## Tabler Tasarım Sistemi Eksiksiz Kılavuzu 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ı. ## Tabler Tasarım Sistemi Tabler Sürümüyle Eşleşen Temayı Kullanın ### Tabler Sürümüyle Eşleşen Temayı Kullanın > Proje günlüğü, Tabler 1.6.1 ile oluşturulmuştur. Derlenmiş paleti OKLCH renklerini kullanırken semantik değişkenleri light-dark ve color-mix kullanır. Bu nedenle referans, eski bir Bootstrap veya Tabler kılavuzundaki onaltılık değerleri kopyalamak yerine gerçek ifadeleri bildirir. Birincil eylem, durum rozetleri ve yüzey rolleri yüklenmiş bu sürümden gelir. Tabler, Bootstrap bileşen sözlüğünü kendine özgü düzen ve bilgi sunumu desenleriyle genişletir. Örnekte, tanıdık kartlar, formlar ve bir modalın yanı sıra yerel zaman çizelgesi, sayfa başlığı, datagrid ve avatar sınıfları kullanılır. Bu ayrıntılar, örneği yalnızca logosu değiştirilmiş genel bir kart ızgarası olmaktan çıkarıp bir Tabler düzenlemesi hâline getirir. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi Renk Kipi, Metnin Yanı Sıra Arayüz Yüzeylerini de Değiştirir ### Renk Modu, Metnin Yanı Sıra Arayüz Yüzeylerini de Değiştirir Tema denetimi, html öğesindeki data-bs-theme değerini değiştirir ve kendi basılı durumunu ve eylem etiketini günceller. Tabler’in anlamsal ifadeleri de açık veya koyu değerleri seçer. Bu basit, iki durumlu örnek için ayrı bir JavaScript tema yöneticisine gerek yoktur ve tercih sayfa dışında saklanmaz. Decision, Prototype ve Review, yerel mavi, mor ve yeşil ton sınıflarını kullanır. Metin etiketleri, yalnızca renge bağlı kalmadan anlamlarını korur. Kapak çalışması çizimleri, her iki modda da özgün kâğıt benzeri renk paletini korur; çevrelerindeki kartlar, sayfa ve metin ise gerçek bileşen temasını kullanır. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi: Ayrı Bir Sayfa Hiyerarşisiyle Kompakt Gövde Yazı Tipi ### Kompakt Gövde Yazı Tipi ve Ayrı Bir Sayfa Hiyerarşisi Varsayılan gövde yazı tipi boyutu 0.875rem, satır yüksekliği ise yaklaşık 1.4286’dır; böylece on altı piksellik kök boyutta metin yaklaşık on dört piksel olur. Yüklü yazı tipi yığını sistem sans serif yazı tiplerinden oluştuğu için bu önizleme uzaktan yazı tipi gerektirmez. Kart başlıkları ve üst veriler yerel sınıflarını korurken sayfa başlığına özel olarak otuz iki piksellik boyut verilir. Yerel boşluk değerleri 0, 0.25, 0.5, 1, 1.5, 2 ve 2.5rem şeklinde artar. Bunlar, tahminî bir ölçek değil, yüklü CSS içindeki adlandırılmış değişkenlerdir. Varsayılan kart gövdesi dolgusu yatay ve dikey olarak 1.25rem’dir. Zaman çizelgesi düğümü 2.5rem’dir; bağlayıcısı ise kayıtlar arasındaki boşluğu kapatmak için sayfa dolgusu değişkenini kullanır. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi: Zaman Çizelgesi Dikey Bir Kenarlıktan İbaret Değildir ### Zaman Çizelgesi Dikey Bir Kenarlıktan İbaret Değildir Her kontrol noktası, timeline-event list öğesi ile timeline-event-icon ve timeline-event-card bileşenlerinden oluşur. Yerel CSS düğümü konumlandırır, sonuncu olmayan kayıtlar arasına bağlayıcıyı çizer ve içerik kartını düğüm genişliği ile sayfa dolgusu toplamı kadar öteye yerleştirir. Bu örnek, çizgiyi arka plan görseliyle taklit etmez veya her kart için mutlak konumlandırmaya dayanmaz. Kartların içerikleri farklıdır. Biri yapısal bir kararı kaydeder, biri üç gerçek kapak çalışması içerir, diğeri ise kaynak incelemesini kaydeder. Proje bağlamı, biçim ve mevcut odak tarihli olaylar değil, kalıcı özellikler olduğu için dizinin dışında yer alır. Küçük ekranlarda kenar çubuğu, belge sıralamasında zaman çizelgesini takip eder. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi: Küçük Etiket ve Değer Grupları için Datagrid Kullanın ### Küçük Etiket ve Değer Grupları İçin Datagrid Kullanın Proje bağlamı kartında datagrid-item, datagrid-title ve datagrid-content çiftleri kullanılır. Format, Team, Checkpoints ve Current focus paralel nitelikler olduğundan, yinelenen satır başlıklarına sahip bir tablo yerine kompakt, yerel datagrid içinde sunulurlar. Baş harflerden oluşan avatarlar metin kullanır ve uzaktan görsel varlığı gerektirmez. Bu örnekte değiştirilen tek bağlam değeri kontrol noktası sayısıdır. Yerel bir kayıt eklendiğinde bu sayı üçten dörde çıkar; özgün proje açıklaması ise değişmeden kalır. Böylece uydurma pano ölçümlerinden kaçınılır: sayı, görünür listedeki kayıtlarla doğrudan eşleşir. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi: Görünürlüğü ve Odağı Yerel Modal Yönetir ### Yerleşik Modal, Görünürlüğü ve Odağı Yönetir Add checkpoint, yerel modalı data-bs-toggle ve data-bs-target ile açar. Birlikte sunulan Tabler JavaScript modal uygulamasını sağlar. shown.bs.modal dinleyicisi, geçiş tamamlanıp giriş alanı gerçekten görünür olduğunda başlık alanına odaklanır. Close ve Cancel, aynı bileşen yaşam döngüsünü izlemek için data-bs-dismiss kullanır. Modal gerçek bir form içerir. Zorunlu alan ve uzunluk kısıtları, gönderim işleyicisi çalışmadan önce eksik alanları reddeder. İşleyici ayrıca kırpılmış metin uzunluğunu denetler; çünkü yalnızca boşluklardan oluşan bir dize, başlık ya da açıklama olarak işe yaramaz. Doğrulama, düzeltme yapılabilmesi için girilen metni korur; form yalnızca bir kayıt başarıyla eklendikten sonra sıfırlanır. 1. İlk geçersiz denetimi görmek için modalı açıp boş alanları gönderin. 2. Bir başlık girin, kontrol noktası türünü seçin ve nedenini açıklayın. 3. Yeni kaydın ve bağlam sayısının birlikte güncellendiğini doğrulamak için formu gönderin. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi: Güvenli Metin Ekleyin ve Yerel Sınırı Belirtin ### Güvenli Metin Ekleyin ve Yerel Sınırı Belirtin Uygulama, tanımlı bir kart iskeleti oluşturur ve başlık ile açıklamayı textContent kullanarak ekler. Yalnızca açılır menüdeki üç türü sabit bir eşleme, ton sınıfını seçer. Kullanıcı tarafından girilen metin, kart HTML içine hiçbir zaman doğrudan eklenmez. Yeni öğe, uydurma bir sunucu zaman damgası yerine belirgin bir LOCAL ENTRY etiketiyle listenin başına eklenir. Ekleme işleminden sonra mevcut modal örneği gizlenir ve bir durum bildirimi yeni kontrol noktasının adını belirtir. Ayrıca herhangi bir proje hizmetinin güncellenmediğini açıkça bildirir. Gerçek bir ortak çalışma günlüğü için kalıcılık, yazar kimliği ve sıralama güvenceleri gerekir; DOM’a yerel bir öğe eklemek bu özellikleri sağlamaz. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi: Dar Bir Zaman Çizelgesinde Yoğun İçeriği Okunaklı Tutun ### Yoğun İçeriği Dar Bir Zaman Çizelgesinde Okunabilir Tutun Ana ızgara col-lg-8 ve col-lg-4 kullanır. Yerel büyük ekran eşiğinin altında proje bağlamı, günlüğün altına yerleşir. Özgün küçük ekran stil sayfası zaman çizelgesinin yan boşluğunu azaltır, başlık ve rozet gruplarının alt satıra kaymasına izin verir ve kapak çalışmalarını ölçeklendirir; metin ve eylemler aynı kalır. Simge sütunu, kart dolgusu ve uzun başlık aynı genişlik için yarıştığında zaman çizelgesi sıkışabilir. Mobil örnekte düğüm, sabit bir kılavuz olarak korunur ancak daha kompakt bir girinti kullanılır. Özgün kapak çalışmaları, aralarındaki ilişki önemli olduğundan üç küçük karşılaştırma olarak kalır; açıklamaları ise yanlarındaki açıklayıcı paragrafı tamamlar. - Başlık ve kontrol noktası türü, alt satıra kaydıklarında da okunaklı kalsın. - Zaman çizelgesindeki her öğeyi kısaltmak yerine açıklama metnini koruyun. - Mobil görünümde bağlam kartını ana okuma sırasından sonra gösterin. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi: Birbirine Uyumlu Bir CSS ve JavaScript Çifti Yükleyin ### Uyumlu Bir CSS ve JavaScript Çifti Yükleyin Kurulum @tabler/core 1.6.1 kullanır ve dist varlıklarını yerel bir public dizinine kopyalar. tabler.min.css dosyasını uygulama stil sayfasından önce, tabler.min.js dosyasını ise yerel etkileşim kodundan önce yükleyin. İlişkisiz ikinci bir Bootstrap paketi eklemek, aynı veri özelliklerinin iki kez başlatılmasına yol açabilir; bu örnekte yalnızca birbiriyle uyumlu Tabler paketi kullanılır. Mevcut stil sayfası modern renk işlevleri kullanır. Daha eski tarayıcı gereksinimleri olan bir ürüne uyarlarken Tabler’ın tarayıcı desteği yönergelerini inceleyin. Yerel örnek Chromium’da yerel modal doğrulaması, zaman çizelgesine kayıt ekleme, koyu mod ve 390px düzen için denetlenmiştir; bu, üretim dağıtımı değildir ve olası tüm tarayıcılarla uyumluluk iddiası taşımaz. Destekleyici belirtimi okuyun ## Tabler Tasarım Sistemi Bileşen Örnekleri ### Zaman çizelgesi, bağlam kartı ve kayıt modalı Yerel timeline-event, card, datagrid, badge ve modal yapısı. ```
TABLER · PROJECT JOURNAL

Atlas field notes

Decisions, prototypes and review checkpoints for a small editorial project.

  • A clearer route through the issue

    Decision
    Alex Morgan · 02 OCT

    Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.

  • Three cover directions

    Prototype
    Jules Chen · 01 OCT
    ATLASRIDGE / 01
    ATLASRIVER / 02
    ATLASPLAIN / 03

    Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.

  • Reference package reviewed

    Review
    Sam Rivera · 30 SEP

    Image captions, credit lines and print dimensions are recorded alongside each selected reference.

``` Kod referansı - Zaman çizelgesi, okuma sırasını izleyen gerçek bir listedir. - Proje bağlamında datagrid başlık ve içerik çiftleri kullanılır. - Modal tetikleyicisi, birlikte sunulan Bootstrap ile uyumlu data API kullanır. ### Yerel kontrol noktası ekleme doğrulandı Modal yaşam döngüsü, güvenli metin ekleme, sayı eşitleme ve renk modu. ``` const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3; modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus()); q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';}; q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`

You · LOCAL ENTRY

`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity('')); ``` Kod referansı - Kullanıcı tarafından girilen dizeler textContent ile atanır. - Modal yalnızca geçerli bir kayıt eklendikten sonra sıfırlanır. - Bildirim, herhangi bir proje hizmetinin güncellenmediğini belirtir. ### Özgün günlük düzeni ve kapak çalışmaları Yerel Tabler bileşenlerine yönelik duyarlı düzenlemeler. ``` html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}} ``` Kod referansı - Kapak görselleri, kurgusal üç tasarım çalışmasını temsil eder. - Belge, gömme için içerik yüksekliğini kullanır. ## Tabler Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu ### Uygulamaya Başlangıç Noktası Tabler 1.6.1 doğrulandı. Ekteki düzen ve uygulama modüllerini style.css ve app.js olarak kaydedin. Yerel modal data API özelliğini kullanır. HTML sarmalayıcısı, gövdenin tüm işaretlemesini içerir; sağlanan etkileşim ve CSS örneklerini burada belirtilen dosya adlarıyla kaydedin. ```
TABLER · PROJECT JOURNAL

Atlas field notes

Decisions, prototypes and review checkpoints for a small editorial project.

  • A clearer route through the issue

    Decision
    Alex Morgan · 02 OCT

    Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.

  • Three cover directions

    Prototype
    Jules Chen · 01 OCT
    ATLASRIDGE / 01
    ATLASRIVER / 02
    ATLASPLAIN / 03

    Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.

  • Reference package reviewed

    Review
    Sam Rivera · 30 SEP

    Image captions, credit lines and print dimensions are recorded alongside each selected reference.

``` ### Projeniz İçin Bir İstem ``` Atlas proje günlüğünü zaman çizelgesi, bağlam kartları, datagrid ve yerel Modal bileşeniyle yeniden oluşturmak için Tabler 1.6.1 kullanın. Doğrulanmış kontrol noktası formunu kayıtlı zaman çizelgesinden ayrı tutun: iptal etmek günlüğü değiştirmez, geçerli bir gönderim ise girilen kontrol noktasını yerel kayıtlara ekler. data-bs özelliklerini, uyumlu Tabler paketini ve tema uygulamasını koruyun. Özgün kapak çalışmalarını dekoratif tutun ve dar ekranlarda kontrol noktası metnini okunaklı kılın. Altyapı envanteri veya harici yayın iddiasında bulunmayın. ``` ## Tabler Tasarım Sistemi Kaynakları ve Kapsamı Tabler 1.6.1. Gerçek tema değişkenleri ve yerel bileşenler, özgün proje içeriği ile kapak görsellerinden ayrılmıştır. Yeni kontrol noktaları yerel kalır. - Kurulum Uyumlu paket varlıkları. - Renkler Tema rolü başvurusu. - Tipografi Yerel tipografi stilleri. - Zaman çizelgesi Düğüm, bağlayıcı ve olay kartı yapısı. - Datagrid Kompakt proje nitelikleri. - Modal Yerel modal kurulumu. - Renk modları Açık ve koyu tema denetimi. ## Tabler Tasarım Sistemi İlgili Kaynaklar ### Tamagui Doğrulama, ilerleme takibi ve boş durumdan kurtarma özelliklerine sahip eksiksiz, yerel bileşenlerle oluşturulmuş bir alışkanlık panosunda Tamagui’ın gerçek v5 belirteç kategorilerini ve açık/koyu mavi temalarını keşfedin. ### UIkit UIkit; CSS çatısı, Less özelleştirmesi ve özniteliklerle yönlendirilen JavaScript bileşenlerini bir araya getirir. Aşağıdaki atölye planlayıcısında Switcher, Accordion ve duyarlı ızgara birlikte çalışır; yerel bileşen davranışının nerede sona erdiğini ve uygulama seçim durumunun nerede başladığını gösterir. ### Vant Vant 4 ile oluşturulmuş mobil adres seçme akışı: gerçek CSS değişkenleri, denetimli adres kimliği, alan doğrulama, tema değiştirme ve açıkça yalnızca yerel olarak kaydetme. - [Uygulama başvurusu](https://docs.tabler.io/ui/components/timeline) - [Kaynak](https://docs.tabler.io/ui/base/colors) - [Kaynak](https://docs.tabler.io/ui/base/typography) - [Kaynak](https://docs.tabler.io/ui/components/timeline) - [Kaynak](https://docs.tabler.io/ui/components/card) - [Destekleyici belirtimi okuyun](https://docs.tabler.io/ui/getting-started/upgrade-to-1.6) - [Destekleyici belirtimi okuyun](https://docs.tabler.io/ui/getting-started/color-modes) - [Destekleyici belirtimi okuyun](https://docs.tabler.io/ui/base/typography) - [Destekleyici belirtimi okuyun](https://docs.tabler.io/ui/components/timeline) - [Destekleyici belirtimi okuyun](https://docs.tabler.io/ui/components/data-grid) - [Destekleyici belirtimi okuyun](https://docs.tabler.io/ui/components/modal) - [Destekleyici belirtimi okuyun](https://docs.tabler.io/ui/layout/page-layouts) - [Destekleyici belirtimi okuyun](https://docs.tabler.io/ui/getting-started/installation) - [Kod referansı](https://docs.tabler.io/ui/components/timeline) - [Kod referansı](https://docs.tabler.io/ui/components/modal) - [Kod referansı](https://docs.tabler.io/ui/layout/page-layouts) - [Kurulum Uyumlu paket varlıkları.](https://docs.tabler.io/ui/getting-started/installation) - [Renkler Tema rolü başvurusu.](https://docs.tabler.io/ui/base/colors) - [Tipografi Yerel tipografi stilleri.](https://docs.tabler.io/ui/base/typography) - [Zaman çizelgesi Düğüm, bağlayıcı ve olay kartı yapısı.](https://docs.tabler.io/ui/components/timeline) - [Datagrid Kompakt proje nitelikleri.](https://docs.tabler.io/ui/components/data-grid) - [Modal Yerel modal kurulumu.](https://docs.tabler.io/ui/components/modal) - [Renk modları Açık ve koyu tema denetimi.](https://docs.tabler.io/ui/getting-started/color-modes)