Tool Chipsv1.0.0
فراخوانیِ ابزارها و ویرایش‌هایِ کد را به‌جای یک لاگِ بلند، به‌شکلِ چیپ‌هایِ فشرده نشان می‌دهد. هر چیپ با کلیک باز/بسته می‌شود و جزئیاتش (خروجی دستور، تکه‌کد) را زیرِ خودش نشان می‌دهد؛ چند چیپ می‌توانند همزمان باز باشند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/tool-chips.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/tool-chips.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/tool-chips.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/tool-chips.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { ToolChip, ToolChips } from "@/components/ui/tool-chips"
<ToolChips>
<ToolChip label={fileName} status={status} detail={diff} />
</ToolChips>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ToolChips فقط یک ردیفِ flex-wrap است. ToolChip اگر detail نداشته باشد یک نشانِ ساکن است؛ با دادنِ detail خودش را داخلِ یک Collapsible می‌پیچد و کلیک‌پذیر می‌شود — هر چیپ Collapsible مستقلِ خودش را دارد، برخلاف Thinking که یک ردیفِ واحدِ استدلال است.
دسترس‌پذیری
- چیپِ دارایِ جزئیات یک دکمهٔ واقعی است با aria-expanded خودکار از Collapsible.
- وضعیتِ در حال اجرا فقط با آیکونِ چرخان نشان داده می‌شود؛ اگر این وضعیت باید برای صفحه‌خوان هم اعلام شود، متنِ label را همزمان تغییر دهید (مثلاً «در حال اجرای build…»).
مرجع API
ToolChip
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| label | ReactNode | — | متنِ چیپ. |
| status | "running" | "done" | "error" | "done" | آیکون و رنگِ چیپ را تعیین می‌کند. |
| detail | ReactNode | — | محتوایِ باز‌شونده زیرِ چیپ (به‌صورتِ monospace رندر می‌شود)؛ نبودنش یعنی چیپ فقط نمایشی است. |
| defaultOpen | boolean | false | باز بودنِ اولیهٔ جزئیات. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
All Statuses
running آیکونِ چرخان دارد، done تیک، error ضربدر؛ رنگ‌ها هم به همین ترتیب primary/success/destructive هستند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Default Open
با defaultOpen، چیپ از همان اول باز رندر می‌شود؛ کاربر نیازی به کلیک ندارد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| All Statuses | نمایشِ هم‌زمانِ چند تسک با وضعیت‌هایِ مختلف |
| Default Open | وقتی جزئیات از همان ابتدا مهم است (مثلاً یک خطا) |
دستورالعمل استفاده
label را کوتاه و اسکن‌پذیر نگه دار
انجام بده
یک عبارتِ کوتاهِ فعل‌دار (اجرای…، خواندنِ…، نوشتنِ…) به کاربر اجازه می‌دهد کل ردیف را در یک نگاه اسکن کند.
انجام نده
جمله‌های بلند، چیپ‌ها را به چند خط می‌شکنند و ردیف را از فرمِ فشرده‌اش خارج می‌کنند.
detail را فقط برایِ خروجیِ واقعاً مفید بده
انجام بده
خروجیِ دستور یا خلاصهٔ تغییرات، دلیلِ خوبی برایِ باز‌شدنِ چیپ است.
انجام نده
دادنِ detail برایِ یک عملیاتِ بی‌خروجی، فقط یک فلشِ باز‌شوی خالی به کاربر نشان می‌دهد.