Yugen UI

Citation

Citation gắn số nguồn [1] ngay trong câu trả lời; rê chuột hoặc focus để xem nhanh tiêu đề, tên miền và đoạn trích, bấm để mở thẻ và tới link.

Chip là nút Popover: rê chuột / focus bàn phím mở thẻ xem nhanh mà không cướp focus; bấm hoặc Enter ghim thẻ và đưa focus vào link; Esc đóng và trả focus. Chip mô tả nguồn qua aria-describedby. Không tải favicon từ ngoài — dùng chữ cái đầu tên miền. CitationList liệt kê nguồn dưới câu trả lời, số thứ tự khớp với chip.

Màu brand chỉ nên dùng cho hành động chính và trạng thái chọn. Chữ cần tương phản tối thiểu 4.5:1.

Nguồn (3)

  1. 1fluent2.microsoft.designFluent 2 — Màu sắc (mở tab mới)
  2. 2w3.orgWCAG 2.2 — Contrast (Minimum) (mở tab mới)
  3. 3yugen-uiDesign.md — Quy tắc màu sắc

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Citation, CitationList, type CitationSource } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Màu brand chỉ nên dùng cho hành động chính và trạng thái chọn. Chữ cần tương phản tối thiểu 4.5:1.

Từ Markdown

StreamingMarkdown nhận citations: mọi [n] có nguồn tương ứng thành chip.

Cách dùng

Nên
  • Đánh số theo thứ tự nguồn xuất hiện trong CitationList.
  • Cung cấp snippet — người đọc kiểm chứng được mà không rời trang.
  • Đặt chip ngay sau mệnh đề mà nguồn hỗ trợ.
Không nên
  • Không dùng chip cho chú thích không có nguồn thật.
  • Không tải favicon hay ảnh xem trước từ trang ngoài (lộ quyền riêng tư người đọc).
  • Không gắn quá 3 chip liền nhau — gộp lại hoặc dẫn sang CitationList.

Props

Prop · KiểuMặc địnhMô tả
indexnumberMặc định: —Số thứ tự hiển thị (từ 1).
source{ title, url?, domain?, snippet?, meta? }Mặc định: —Thông tin nguồn; url chỉ nhận http / https / mailto.
openDelay / closeDelaynumber (ms)Mặc định: 250 / 200Độ trễ mở / đóng khi rê chuột.
CitationList.sourcesCitationSource[]Mặc định: —Danh sách nguồn (lưới 2 cột từ sm).
CitationList.titleReactNodeMặc định: "Sources"Tiêu đề kèm số lượng.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.citation

Khoá · KiểuMặc định (tiếng Anh)messagesVi
sourcestring

Chữ ẩn trước số của chip, và tên thay khi nguồn không có tên miền.

Mặc định (tiếng Anh)"Source"messagesVi"Nguồn"
sourcesstring

Tiêu đề CitationList (khi không truyền title).

Mặc định (tiếng Anh)"Sources"messagesVi"Nguồn"
newTabstring

Chữ ẩn sau link mở tab mới.

Mặc định (tiếng Anh)"(opens in new tab)"messagesVi"(mở tab mới)"