Kbd
نمایش بصری یک کلید یا ترکیب کلیدهای صفحهکلید؛ برای مستندات میانبر و راهنمای دستورها.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/kbd.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/kbd.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/kbd.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/kbd.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { Kbd, KbdGroup } from "@/components/ui/kbd"
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>K</Kbd>
</KbdGroup>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
Kbd خودش عنصر <kbd> است و هیچ جداکنندهای بین کلیدها اضافه نمیکند؛ برای ترکیب چند کلید از KbdGroup استفاده کنید که فاصلهٔ استاندارد بینشان میگذارد.
علامت + را خودتان بهعنوان متن جدا یا با یک <span> بین دو Kbd بگذارید، چون در فارسی جهت آن مهم است.
دسترسپذیری
- عنصر معنایی <kbd> است؛ صفحهخوانها آن را بهعنوان ورودی صفحهکلید معرفی میکنند.
- برای میانبرهای واقعی، Kbd را داخل یک aria-label توصیفی روی دکمه یا آیتم منو بگذارید، نه بهجای آن.
مرجع API
Kbd
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| children | React.ReactNode | — | متن کلید، مثل «Ctrl» یا «Enter». |
| className | string | — | کلاسهای سفارشی. |
KbdGroup
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| children | React.ReactNode | — | چند Kbd پشتسرهم با فاصلهٔ استاندارد. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
ترکیب کلید
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
داخل Tooltip
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کنار متن راهنما
برای ذخیره Ctrl S را بزنید.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| ترکیب کلید | مستندسازی میانبری که با چند کلید پشتسرهم فعال میشود |
| داخل Tooltip | دکمهای که میانبرش را فقط هنگام هاور روی آیکون نشان میدهد |
| کنار متن راهنما | متن راهنمای زیر یک فرم که میانبر مربوط به همان عملیات را یادآوری میکند |