Yugen UI

Công cụ

Typeset

Chỉnh font, cỡ chữ, line-height, khoảng cách giữa các khối và độ rộng dòng cho nội dung dài (Prose, Markdown), xem trên nội dung thật, rồi copy CSS.

Preset có sẵn trong theme: yugen-prose-docs, -article, -chat, -compact. Prose

Preset

Cỡ chữ (px)14
Line-height (×)1.43
Khoảng cách khối (em)1.15
Độ rộng dòng (ch)72

Cài đặt

Cài gói rồi import theme một lần ở file CSS gốc. Component dùng token của theme, nên đổi brand là đổi cả bộ.

npm i yugen-ui

Dùng component

  • Import từ yugen-ui.
  • Bọc app trong YugenProvider để có theme, brand và hướng chữ.
  • Mọi component có trạng thái focus rõ và dùng được bằng bàn phím.
PropMặc định
size"medium"
appearance"secondary"

CSS xuất ra

.my-prose
CSS
.my-prose {  --prose-size: 0.875rem;  --prose-leading: 1.43;  --prose-flow: 1.15em;}
Link chia sẻ