Typography
مجموعهای از کامپوننتهای متنیِ آمادهٔ استفاده (تیتر، پاراگراف، نقلقول، فهرست، کد درونخطی) با فاصلهگذاری و اندازهٔ استاندارد؛ بهجای تکرار کلاسهای Tailwind در هر صفحه.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
مقدمه
دیگ یک دیزاینسیستم راستبهچپ برای فارسیزبانان است که تجربهای مدرن و یکپارچه را با پشتیبانی کامل از فارسی ارائه میدهد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/typography.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/typography.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/typography.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/typography.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { TypographyH1, TypographyP } from "@/components/ui/typography"
<TypographyH1>عنوان صفحه</TypographyH1>
<TypographyP>متن پاراگراف.</TypographyP>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
هر کامپوننت روی تگ معنایی درست خودش سوار است (TypographyH1 روی h1، TypographyBlockquote روی blockquote و...) بهجز TypographyLarge که چون معنای تیتر ندارد روی div است.
TypographyInlineCode جهت را صریح ltr میگذارد تا کد لاتین وسط جملهٔ فارسی از راستبهچپ خراب نشود.
دسترسپذیری
- تیترها (H1-H4) سلسلهمراتب معنایی صفحه را میسازند؛ سطح را بر اساس ساختار محتوا انتخاب کنید، نه فقط اندازهٔ ظاهری.
- scroll-m-20 روی تیترها باعث میشود لینکهای #anchor زیر نوار بالای صفحه گم نشوند.
مرجع API
همهٔ کامپوننتهای Typography
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| className | string | — | افزودن یا بازنویسیِ کلاسهای Tailwind. |
| ...props | React.ComponentProps<تگ معنایی> | — | هر پراپ استاندارد HTML همان تگ (مثل id، dir، onClick). |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
مقیاس کامل
عنوان بزرگ صفحه
توضیح مقدماتی زیر عنوان اصلی، معمولاً یک یا دو جمله دربارهٔ محتوای صفحه.
بخش اول
این یک پاراگراف معمولی است که فاصلهٔ استاندارد بالا و ارتفاع خط مناسب برای خواندن طولانی دارد.
زیربخش
برای نمونهکد درونخط از npm install استفاده کنید.
نکات مهم
- مورد اول فهرست
- مورد دوم فهرست
- مورد سوم فهرست
«طراحی خوب یعنی تا جای ممکن ساده، ولی نه سادهتر.»
متن کمرنگ برای اطلاعات ثانویه
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کد درونخطی
دستور pnpm dlx dig-ui add button کامپوننت را نصب میکند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| مقیاس کامل | صفحهٔ مستندات یا مقالهای که همهٔ سطوح تیتر و متن را کنار هم نشان میدهد |
| کد درونخطی | اشاره به یک دستور یا نام فایل وسط یک جملهٔ توضیحی |