Thành phần bề mặt

Bề mặt CSS Tailwind chỉ có CSS ​​để áp dụng màu nền và màu văn bản theo chủ đề cho vùng chứa. Tất cả các biến thể màu sắc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Các thành phần bề mặt là các bố cục nguyên thủy linh hoạt tạo ra các phân cấp trực quan theo lớp và các vùng chứa nội dung. Được xây dựng bằng HTML ngữ nghĩa, các bề mặt cung cấp các tùy chọn kiểu dáng và chiều sâu linh hoạt. Hệ thống bề mặt Frutjam hỗ trợ nhiều kích thước, hình dạng và lớp—lý tưởng cho các lựa chọn thay thế thẻ, khối nội dung và bố cục lồng nhau.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Cách sử dụng cơ bản

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>

Lớp bề mặt

Sử dụng surface-1 và surface-2 để tạo phân cấp độ sâu bằng cách trộn màu cơ bản với màu nền trước.

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>

Hình dạng bề mặt

1
2

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

Kiểu viền

Sử dụng surface-outline hoặc surface-dashed cho các vùng chứa trong suốt được xác định bởi đường viền. Chúng hoạt động chính xác khi được lồng bên trong các lớp màu vì nền rõ ràng là trong suốt.

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>

Kích thước bề mặt

Tiện ích kích thước đặt phần đệm bên trong thông qua --surface--padding. Không kết hợp với các tiện ích Tailwind p-*—chúng sẽ ghi đè biến và làm hỏng lớp kích thước.

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>

Bề mặt lồng nhau

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>