Chuyển tới nội dung

Pro đang mở bán trước. Cài đặt mở từ tháng 1/2027. Xem Pro

werewolf-ui
Component

Link

Link điều hướng luôn có gạch chân, với mức nhấn default hoặc subtle. Render một anchor trực tiếp, hoặc dùng asChild để style một router adapter mà vẫn giữ hành vi link.

  • npm: 2 trực tiếp, 3 tổng
  • registry: 2 trực tiếp, 2 tổng

Xem trước

Đọc hướng dẫn

Props

  • variant
  • external
  • label
import { Link } from "@/components/ui/link"

<Link href="#guide">Đọc hướng dẫn</Link>

Cách dùng

Khi nào dùng

  • Điều hướng tới một trang, tài nguyên hoặc mục từ văn bản.
  • Đặt một đích có gạch chân bên trong một câu.

Khi nào không dùng

  • Một hành động thay đổi trang hiện tại mà không điều hướng. Dùng Button.
  • Một đường đi qua các trang cha. Dùng Breadcrumb.

Biến thể

variant

default dùng chữ accent; subtle dùng chữ secondary.

import { Link } from "@/components/ui/link"

<Link href="#guide">Đọc hướng dẫn</Link>
<Link variant="subtle" href="#guide">Đọc hướng dẫn</Link>

Ví dụ

Điều hướng inline

Đọc installation guide before creating your first theme.

import { Link } from "@/components/ui/link"

<p className="text-sm text-text-primary">
  <span>Đọc </span>
  <Link href="#installation">installation guide</Link>
  <span> before creating your first theme.</span>
</p>

Đích external

Mở hướng dẫn
import { Link } from "@/components/ui/link"

<Link external href="https://example.com/guide" target="_blank" rel="help">Mở hướng dẫn</Link>

Link ghép

Một phần tử con duy nhất cung cấp đích. Dùng cùng cách ghép với router adapter của ứng dụng.

Xem dự án
import { Link } from "@/components/ui/link"

<Link asChild variant="subtle">
  <a href="#project">Xem dự án</a>
</Link>

Nên và không nên

Nên

  • Dùng văn bản đích rõ nghĩa.
  • Dùng asChild cho router adapter có prop đích riêng.
  • Để việc mở tab mới là một lựa chọn rõ ràng bằng target="_blank".

Không nên

  • Đừng dùng Link cho hành động không điều hướng; dùng Button.
  • Đừng dùng external thay cho target.
  • Đừng lồng các anchor.

Props

TênKiểuGiá trịMặc địnhMô tả
variantenumdefault | subtledefaultdefault dùng chữ accent; subtle dùng chữ secondary.
externalboolean-falseThêm icon external-link trang trí. Không đổi target.
asChildboolean-falseStyle một link con duy nhất hoặc router adapter, không lồng anchor.
hrefstring--Đích cho anchor gốc. Router adapter con có thể tự cung cấp đích.
targetstring--target điều hướng gốc. _blank gộp noopener và noreferrer vào rel.
relstring--Các giá trị relationship. Giá trị hiện có được giữ khi thêm giá trị an toàn cho _blank.

Slot

TênBắt buộcMô tả
childrencóTên đích nhìn thấy, hoặc link con duy nhất khi asChild là true.

Cấu tạo

PhầnMô tả
rootAnchor hoặc link do phía gọi cung cấp, có gạch chân và focus bàn phím nhìn thấy.
iconIcon external-link trang trí, chỉ có khi external là true.

Khả năng truy cập

Role: link

PhímHành động
TabFocus vào link.
EnterĐi theo link đang focus.
  • Cả hai variant giữ gạch chân để link phân biệt được mà không chỉ dựa vào màu.
  • Icon external mang tính trang trí và không đổi accessible name.
  • external không buộc mở tab mới. target="_blank" rõ ràng thì thêm noopener noreferrer mà không bỏ các giá trị rel hiện có.
  • asChild giữ đích của phần tử con, thuộc tính gốc, event handler và ref.

Cài đặt

npx werewolf-ui add link

Chạy npx werewolf-ui init một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem Cài đặt để biết yêu cầu và cách cài qua registry.