ToolCard — کارت ابزار با کاشی لوگو
برای دایرکتوری ابزارها و معرفی سرویس‌ها. اگر کپی کد بدهید تصویرش نمایش داده می‌شود، وگرنه حرف اول نام روی کاشی کوچک گرادیانی (کپی کد) می‌نشیند. لینک بیرونی به‌طور پیش‌فرض در زبانهٔ تازه با کپی کد باز می‌شود و این را به صفحه‌خوان هم اعلام می‌کند.
وضعیت: beta · لایه: ۴ (کپی کد) · کد: کپی کد · Storybook: کپی کد
import { ToolCard } from '@tokapps/patterns';نمونهٔ زنده
سیستم بیلد افزایشی برای مونوریپوهای جاوااسکریپت با کش محلی و ابری.
متن‌باز
طراحی رابط و نمونه‌سازی هم‌زمان تیمی در مرورگر.
فریمیوم
TDM-MCP
هوش مصنوعیسرور MCP دیزاین سیستم برای ایجنت‌ها: توکن، کامپوننت و اعتبارسنجی.
داخلی
کد قابل کپی
پایه: ابزار بیرونی
import { ToolCard } from '@tokapps/patterns';<ToolCard name="Turborepo" href="https://turbo.build" description="سیستم بیلد افزایشی برای مونوریپوهای جاوااسکریپت با کش محلی و ابری." category="DevOps" pricing="متن‌باز" tone="series-7"/>فریمیوم
<ToolCard name="Figma" href="https://figma.com" description="طراحی رابط و نمونه‌سازی هم‌زمان تیمی در مرورگر." category="طراحی" pricing="فریمیوم" tone="series-2" />لینک داخلی با برچسب دلخواه
<ToolCard name="TDM-MCP" href="/ai/mcp" external={false} linkLabel="راهنما" description="سرور MCP دیزاین سیستم برای ایجنت‌ها: توکن، کامپوننت و اعتبارسنجی." category="هوش مصنوعی" pricing="داخلی"/>با تصویر لوگو
<ToolCard name="Vercel" href="https://vercel.com" logo="/logos/vercel.svg" category="DevOps" />همهٔ پیکربندی‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| کپی کد | کپی کد | — | نام ابزار؛ عنوان، نام لینک و حرف کاشی. |
| کپی کد | کپی کد | — | وب‌سایت یا صفحهٔ ابزار. |
| کپی کد | کپی کد | — | توضیح کوتاه. |
| کپی کد | کپی کد | — | دسته زیر نام. |
| کپی کد | کپی کد | — | برچسب کپی کد (متن را محصول می‌دهد و ترجمه‌پذیر است). |
| کپی کد | کپی کد · کپی کد … کپی کد | کپی کد | فام کاشی. |
| کپی کد | کپی کد | — | تصویر لوگو. |
| کپی کد | کپی کد | کپی کد | زبانهٔ تازه، کپی کد و اعلان به صفحه‌خوان. |
| کپی کد | کپی کد | کپی کد | متن دیدنی کنار آیکون لینک (پنهان از صفحه‌خوان). |
| کپی کد | کپی کد · کپی کد · کپی کد | کپی کد | سطح عنوان. |
حالت‌ها
پیش‌فرض · hover · focus-visible · بیرونی/داخلی · با تصویر لوگو · کنتراست بالا (کاشی تخت) · چاپ (راهنمای لینک پنهان).
RTL، کیبورد و صفحه‌خوان
- یک توقف کپی کد؛ نام لینک: «Turborepo (در زبانهٔ تازه باز می‌شود)».
- آیکون کپی کد با کپی کد در RTL آینه می‌شود.
- قیمت با برچسب متنی است، نه با رنگ.
قرارداد ARCH
- کاشی از کپی کد می‌آید (تنها استثنای گرادیان)؛ آیکون فقط با کپی کد و نام معنایی.
- متن‌ها (دسته، قیمت، کپی کد) از محصول می‌آیند تا ترجمه‌پذیر بمانند.