Surface Component

CSS-only Tailwind CSS surface for applying themed background and text colors to a container. All color variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Yüzey bileşenleri, katmanlı görsel hiyerarşiler ve içerik kapları oluşturan çok yönlü düzen temel öğeleridir. Anlamsal HTML ile oluşturulan yüzeyler esnek derinlik ve stil seçenekleri sunar. Frutjam yüzey sistemi birden fazla boyutu, şekli ve katmanı destekler; kart alternatifleri, içerik blokları ve iç içe yerleşimler için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Temel Kullanım

1
2
3
4

<div class="surface p-6">
  <h2>Surface Container</h2>
  <p>Content displayed on a surface</p>
</div>

1
2
3
4

<div className="surface p-6">
  <h2>Surface Container</h2>
  <p>Content displayed on a surface</p>
</div>

Yüzey Katmanları

Temel rengi ön plan rengiyle karıştırarak derinlik hiyerarşisi oluşturmak için surface-1 ve surface-2'yi kullanın.

1
2
3

<div class="surface p-4">Base</div>
<div class="surface surface-1 p-4">Surface 1 — subtle lift</div>
<div class="surface surface-2 p-4">Surface 2 — more contrast</div>

Yüzey Şekilleri

1
2

<div class="surface surface-md">Default (square)</div>
<div class="surface surface-md surface-rounded">Rounded</div>

Kenar Stilleri

Kenarlıkla tanımlanan şeffaf kaplar için surface-outline veya surface-dashed kullanın. Arka plan açıkça şeffaf olduğundan, bunlar renkli katmanların içine yerleştirildiğinde düzgün çalışır.

1
2
3
4
5
6
7

<div class="surface surface-1 surface-rounded surface-md">
  <p class="mb-3 font-medium">Surface 1 (colored parent)</p>
  <div class="flex gap-3">
    <div class="surface surface-outline surface-rounded surface-sm grow">Outline — transparent fill, solid border</div>
    <div class="surface surface-dashed surface-rounded surface-sm grow">Dashed — transparent fill, dashed border</div>
  </div>
</div>

Yüzey Boyutları

Boyut yardımcı programları dahili dolguyu --surface--padding yoluyla ayarlar. Tailwind p-* yardımcı programları ile birleştirmeyin; bunlar değişkeni geçersiz kılacak ve boyut sınıfını geçersiz kılacaktır.

1
2
3
4
5

<div class="surface surface-xs surface-rounded">Extra small (0.5rem)</div>
<div class="surface surface-sm surface-rounded">Small (1rem)</div>
<div class="surface surface-md surface-rounded">Medium (1.5rem)</div>
<div class="surface surface-lg surface-rounded">Large (2rem)</div>
<div class="surface surface-xl surface-rounded">Extra large (2.5rem)</div>

İç İçe Yüzeyler

1
2
3
4
5
6

<div class="surface surface-1 p-6 rounded-lg">
  <h3>Outer Surface</h3>
  <div class="surface surface-2 p-4 rounded mt-4">
    <p>Inner Surface</p>
  </div>
</div>