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.
表面元件是多功能的佈局基元，可建立分層的視覺層次結構和內容容器。表面採用語義 HTML 構建，提供靈活的深度和樣式選項。 Frutjam 表面系統支援多種尺寸、形狀和層，非常適合卡片替代、內容塊和嵌套佈局。
僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
| 班級 | 類型 | 描述 |
|---|---|---|
| surface | 根據 | 基面容器 |
| surface-1 | 風格 | 海拔高度 1（微妙） |
| surface-2 | 風格 | 海拔 2 級 |
| surface-outline | 風格 | 帶有可見邊框的透明填充 |
| surface-dashed | 風格 | 虛線邊框樣式 |
| surface-rounded | 風格 | 邊角適度圓潤 |
| surface-xs | 尺寸 | 超小襯墊 |
| surface-sm | 尺寸 | 小填充 |
| surface-md | 尺寸 | 中等填充（預設） |
| surface-lg | 尺寸 | 大填充 |
| surface-xl | 尺寸 | 超大襯墊 |
基本用法
Surface Container
Content displayed on a surface
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> |
表面層
使用 surface-1 和 surface-2 透過混合基底色與前景色來建立深度層次結構。
Base
Surface 1 — subtle lift
Surface 2 — more contrast
html
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> |
表面形狀
Default (square)
Rounded
html
1 2 | <div class="surface surface-md">Default (square)</div> <div class="surface surface-md surface-rounded">Rounded</div> |
邊框樣式
對於由邊框定義的透明容器，請使用 surface-outline 或 surface-dashed。當嵌套在彩色圖層內時，它們可以正常工作，因為背景是明確透明的。
Surface 1 (colored parent)
Outline — transparent fill, solid border
Dashed — transparent fill, dashed border
html
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> |
表面尺寸
大小實用程式透過 --surface--padding 設定內部填滿。不要與 Tailwind p-* 實用程式結合使用 - 它們會覆蓋變數並破壞尺寸類別。
Extra small (0.5rem)
Small (1rem)
Medium (1.5rem)
Large (2rem)
Extra large (2.5rem)
html
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> |
嵌套曲面
Outer Surface
Inner Surface
html
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> |