Thành phần liên kết

Liên kết CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, nhấn và trung tính. Di chuột gạch chân và phong cách đơn giản. 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 phần tử neo kiểu liên kết của các thành phần có phân cấp trực quan và ý nghĩa ngữ nghĩa. Hệ thống liên kết Frutjam hỗ trợ nhiều màu sắc, hiệu ứng di chuột, kích thước và tùy chọn trang trí thông qua các lớp tiện ích Tailwind CSS. Hoàn hảo cho các liên kết văn bản, điều hướng và các yếu tố kêu gọi hành động, các liên kết duy trì các tiêu chuẩn về khả năng truy cập với các tùy chọn quản lý tiêu điểm và gạch chân thích hợp.

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

<a class="link">Link</a>

<a className="link">Link</a>

Màu liên kết

Áp dụng màu liên kết ngữ nghĩa để phù hợp với chủ đề của bạn hoặc để truyền tải ý nghĩa (chẳng hạn như sử dụng link-error cho các hành động phá hoại hoặc link-success để xác nhận).

1
2
3
4
5
6
7
8

<a class="link link-primary">Primary link</a>
<a class="link link-secondary">Secondary link</a>
<a class="link link-accent">Accent link</a>
<a class="link link-success">Success link</a>
<a class="link link-info">Info link</a>
<a class="link link-warning">Warning link</a>
<a class="link link-error">Error link</a>
<a class="link link-neutral">Neutral link</a>

Kích thước liên kết

Chia tỷ lệ siêu liên kết của bạn để phù hợp với kiểu chữ xung quanh. Các lớp tiện ích này có phạm vi từ cực nhỏ dành cho văn bản "hợp pháp" ở chân trang đến lớn gấp 2 lần dành cho các phần anh hùng có tác động cao.

1
2
3
4
5
6

<a class="link link-xs">Primary link</a>
<a class="link link-sm">Secondary link</a>
<a class="link link-md">Accent link</a>
<a class="link link-lg">Success link</a>
<a class="link link-xl">Info link</a>
<a class="link link-2xl">Warning link</a>

Trạng thái di chuột liên kết

Theo mặc định, bạn có thể chọn ẩn phần gạch chân và chỉ hiển thị khi di chuột. Đây là mẫu thiết kế phổ biến dành cho menu điều hướng và thanh bên của trang tổng quan rõ ràng hơn.

<a class="link link-hover">Hover this link</a>