Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

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.

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.

Lớp học Kiểu Sự miêu tả
surfaceCăn cứThùng chứa bề mặt cơ sở
surface-1Phong cáchĐộ cao cấp 1 (tinh tế)
surface-2Phong cáchĐộ cao cấp 2
surface-outlinePhong cáchTransparent fill with a visible border
surface-dashedPhong cáchKiểu đường viền nét đứt
surface-roundedPhong cáchCác góc được bo tròn vừa phải
surface-xsKích cỡExtra small padding
surface-smKích cỡSmall padding
surface-mdKích cỡMedium padding (default)
surface-lgKích cỡLarge padding
surface-xlKích cỡExtra large padding

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

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>

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.

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>

Hình dạng bề mặt

Default (square)
Rounded
html 
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.

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>

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

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

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>

Bề mặt lồng nhau

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>