Link Component
CSS-only Tailwind CSS link with primary, secondary, accent, and neutral color variants. Hover underline and plain styles. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
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.
| Lớp học | Kiểu | Sự miêu tả |
|---|---|---|
| link | Căn cứ | Mỏ neo được tạo kiểu với phần gạch chân và màu sắc |
| link-hover | Phong cách | Gạch chân chỉ hiển thị khi di chuột |
| link-xs | Kích cỡ | Cực nhỏ |
| link-sm | Kích cỡ | Bé nhỏ |
| link-md | Kích cỡ | Trung bình (mặc định) |
| link-lg | Kích cỡ | Lớn |
| link-xl | Kích cỡ | Cực lớn |
| link-2xl | Kích cỡ | 2× extra large |
| link-primary | Màu sắc | Màu chủ đề chính |
| link-secondary | Màu sắc | Màu chủ đề phụ |
| link-accent | Màu sắc | Màu chủ đề nhấn mạnh |
| link-neutral | Màu sắc | Màu chủ đề trung tính |
| link-info | Màu sắc | Màu sắc ngữ nghĩa thông tin |
| link-success | Màu sắc | Màu ngữ nghĩa thành công |
| link-warning | Màu sắc | Màu ngữ nghĩa cảnh báo |
| link-error | Màu sắc | Lỗi ngữ nghĩa màu sắc |
Cách sử dụng cơ bản
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.