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.

Komponenty powierzchni to wszechstronne prymitywy układu, które tworzą warstwowe hierarchie wizualne i kontenery treści. Powierzchnie zbudowane w semantycznym formacie HTML zapewniają elastyczną głębię i opcje stylizacji. System powierzchni Frutjam obsługuje wiele rozmiarów, kształtów i warstw — idealnie nadaje się do alternatywnych kart, bloków treści i układów zagnieżdżonych.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Podstawowe użycie

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>

Warstwy powierzchniowe

Użyj surface-1 i surface-2, aby utworzyć hierarchię głębi poprzez zmieszanie koloru podstawowego z kolorem pierwszego planu.

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>

Kształty powierzchni

1
2

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

Style graniczne

Użyj surface-outline lub surface-dashed w przypadku przezroczystych kontenerów zdefiniowanych przez obramowanie. Działają one poprawnie, gdy są zagnieżdżone w kolorowych warstwach, ponieważ tło jest wyraźnie przezroczyste.

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>

Rozmiary powierzchni

Narzędzia size ustawiają wewnętrzne dopełnienie poprzez --surface--padding. Nie łącz z narzędziami Tailwind p-* — zastąpią one zmienną i pokonają klasę rozmiaru.

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>

Zagnieżdżone powierzchnie

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>