Yugen UI

Prose

Prose định dạng nội dung dài từ Markdown hoặc CMS: tiêu đề, đoạn văn, danh sách, bảng, code, trích dẫn và ảnh theo thang chữ Yugen.

Bọc nội dung trong <Prose> (hoặc thêm class yugen-prose của theme). Font và nhịp chữ đọc từ biến --prose-font-body, --prose-font-heading, --prose-font-mono, --prose-size, --prose-leading, --prose-flow; preset có sẵn yugen-prose-docs, yugen-prose-article, yugen-prose-chat, yugen-prose-compact, hoặc tạo preset riêng ở trang Typeset (/typeset). các thẻ HTML bên trong được định dạng mà không cần class. Selector có độ ưu tiên 0, nên class đặt trên từng thẻ luôn thắng; thêm class not-prose cho phần nào cần thoát hẳn. CodeBlock, Table, Quote và Timeline đã có sẵn not-prose. size large (16px) cho bài viết dài, medium (14px) cho docs và ghi chú. Prose không làm sạch HTML: nội dung từ người dùng phải được sanitize trước.

Bắt đầu với API

Mọi yêu cầu cần Khoá API trong Authorization header. Tạo khoá ở trang Cài đặt › Nhà phát triển.

  1. Tạo khoá với quyền chỉ đọc.
  2. Lưu khoá vào biến môi trường, không đưa vào mã nguồn.
  3. Gọi thử /v1/orders để kiểm tra.

Khoá bị lộ phải được thu hồi ngay; khoá mới có hiệu lực sau vài giây.

Giới hạn tần suất

GóiYêu cầu / phút
Miễn phí60
Pro1.200

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 { Prose } 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ùa thu ở Kyoto bắt đầu từ cuối tháng 10, khi lá phong ở Tōfuku-ji chuyển đỏ.

Đi lúc nào

  • Sáng sớm, trước 8 giờ, để tránh đông.
  • Ngày thường thay vì cuối tuần.

Bài viết & HTML từ CMS

asChild render vào <article>; nội dung HTML đã sanitize có thể đưa vào bằng dangerouslySetInnerHTML.

Danh sách bên dưới là menu, không phải nội dung bài viết:

Thoát bằng not-prose

Phần tử có class not-prose (và mọi thứ bên trong) giữ nguyên kiểu gốc.

Cách dùng

Nên
  • Giới hạn độ rộng dòng (max-w-prose, khoảng 65 ký tự) cho nội dung dài.
  • Sanitize HTML từ CMS hoặc người dùng trước khi render.
  • Dùng not-prose cho phần giao diện nằm giữa nội dung (nút, menu, form).
Không nên
  • Không bọc cả trang ứng dụng trong Prose; chỉ bọc phần nội dung.
  • Không dùng Prose để định dạng một đoạn chữ ngắn — dùng Text.

Props

Prop · KiểuMặc địnhMô tả
size"medium" | "large"Mặc định: "medium"Cỡ chữ nền: body1 (14px) hoặc body2 (16px).
asChildbooleanMặc định: falseRender vào phần tử con duy nhất (vd. <article>).