Yugen UI

Quote

Quote hiển thị trích dẫn có ghi nguồn — lời chứng thực, trích tài liệu, câu nói trong bài viết.

Ngữ nghĩa chuẩn: <figure> chứa <blockquote cite> và <figcaption> (tác giả, <cite> nguồn) nên trình đọc màn hình biết đây là trích dẫn và ai nói. Ba kiểu: default (vạch brand ở đầu dòng), subtle (vạch neutral, trong thân bài) và emphasis (chữ lớn kèm dấu ngoặc cho testimonial). Vạch nhấn dùng border-s nên tự đổi bên khi RTL.

Từ khi chuyển sang Yugen UI, đội mình ra mắt màn hình mới nhanh gấp đôi mà vẫn đạt chuẩn tương phản.

Bùi Thanh NamTrưởng nhóm thiết kế, Sakura Bank

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 { Quote } 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 trung tính làm nền; màu brand làm nổi bật điều quan trọng.

Fluent 2Color

Không phủ brand lên diện tích lớn; không dùng brand cho chữ thân bài.

Design.md §4.3

Một thư viện mà dark mode, RTL và trình đọc màn hình đều chạy đúng ngay từ đầu.

Nguyễn Văn AnCTO, Hoa Đào Studio

Appearance & nguồn

default có link nguồn (cite), subtle size small, emphasis kèm avatar.

Cách dùng

Nên
  • Ghi rõ tác giả hoặc nguồn — trích dẫn không nguồn khó tin cậy.
  • Dùng emphasis cho testimonial ở trang giới thiệu; default / subtle trong bài viết.
  • Truyền URL vào cite khi trích từ tài liệu trên web.
Không nên
  • Không dùng Quote chỉ để thụt lề hay làm nổi bật đoạn văn — dùng MessageBar hoặc Card.
  • Không đặt nhiều Quote emphasis cạnh nhau trong một khung nhìn.

Props

Prop · KiểuMặc địnhMô tả
childrenReactNodeMặc định: —Nội dung trích dẫn; chuỗi được bọc trong <p>.
authorReactNodeMặc định: —Người nói / tác giả.
authorTitleReactNodeMặc định: —Chức danh, tổ chức.
sourceReactNodeMặc định: —Tên nguồn, hiển thị trong <cite>.
citestringMặc định: —URL nguồn — gắn vào blockquote và biến source thành link.
avatarReactNodeMặc định: —Avatar của tác giả.
appearance"default" | "subtle" | "emphasis"Mặc định: "default"Kiểu hiển thị.
size"small" | "medium" | "large"Mặc định: "medium"Cỡ chữ trích dẫn.