仅 CSS Tailwind CSS 表面，用于将主题背景和文本颜色应用到容器。所有颜色变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
表面组件是多功能的布局基元，可创建分层的视觉层次结构和内容容器。表面采用语义 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> |
使用 Claude Code、Cursor 或其他 AI 编辑器？
Cherry MCP 为您的 AI 编辑器按需提供准确的 表面 类名称和结构。不再有幻觉课程。