Floating Toolbarv1.0.0
نوار ابزارِ تیرهٔ شناور با پیکان که روی متنِ انتخاب‌شده یا یک تصویر می‌نشیند؛ با حالتِ افزودن لینک و اسکرولِ خودکار وقتی ابزارها در عرض جا نشوند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/floating-toolbar.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/floating-toolbar.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/floating-toolbar.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/floating-toolbar.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
FloatingToolbar,
FloatingToolbarButton,
FloatingToolbarLink,
FloatingToolbarSeparator,
} from "@/components/ui/floating-toolbar"
<FloatingToolbar>
<FloatingToolbarButton label="درشت"><BoldIcon /></FloatingToolbarButton>
</FloatingToolbar>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
FloatingToolbar سطحِ تیره، پیکان و ناوبریِ فلشی را می‌دهد (از Toolbar). جای‌گیری با شماست: لنگرِ این نوار معمولاً انتخابِ متن یا یک تصویر است، نه یک دکمه، پس با position: absolute روی مختصاتِ انتخاب می‌نشیند. نمونهٔ «روی متنِ انتخاب‌شده» روشش را نشان می‌دهد.
FloatingToolbarButton دکمهٔ فقط‌آیکون با label اجباری است؛ با pressed حالت روشن/خاموش می‌گیرد. FloatingToolbarLink جایگزینِ دکمه‌ها می‌شود وقتی کاربر لینک اضافه می‌کند.
دسترس‌پذیری
- نوار role=toolbar دارد؛ فقط یک دکمه در چرخهٔ Tab است و بقیه با فلش‌ها (راست‌به‌چپ‌آگاه) و Home/End پیمایش می‌شوند.
- هر دکمه label اجباری دارد که هم aria-label است هم تولتیپِ بومی؛ دکمه‌های روشن/خاموش aria-pressed می‌گیرند.
- در حالتِ لینک، Enter ثبت و Escape انصراف است؛ فلش‌های چپ و راست داخلِ فیلد مکان‌نما را جابه‌جا می‌کنند و به دکمه‌ها نمی‌پرند.
- رنگ‌ها از --inverse می‌آیند و هاور/فشرده با تغییرِ رنگ ساخته شده‌اند، نه opacity؛ کنتراست آیکون سفید روی سطح تیره در هر دو تم حفظ می‌شود.
مرجع API
FloatingToolbar
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| arrow | "bottom" | "top" | "none" | "bottom" | جهتِ پیکان رو به لنگر؛ bottom یعنی نوار بالای لنگر است. |
| arrowOffset | string | "50%" | جای افقیِ پیکان؛ هر مقدارِ CSS. |
| scrollable | boolean | false | وقتی ابزارها جا نشوند، دکمه‌های قبلی/بعدی برای اسکرول. |
FloatingToolbarButton
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| label | string | — | aria-label و تولتیپِ بومی؛ اجباری. |
| pressed | boolean | — | حالت روشن/خاموش؛ aria-pressed را هم ست می‌کند. |
FloatingToolbarLink
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| onSubmit | (url: string) => void | — | با Enter یا دکمهٔ تأیید؛ فقط وقتی نشانی خالی نباشد. |
| onCancel | () => void | — | با Escape یا دکمهٔ انصراف. |
| defaultValue | string | "" | نشانیِ فعلی، برای ویرایشِ لینکِ موجود. |
| placeholder | string | "لینک خود را وارد کنید…" | متنِ راهنمای فیلد. |
| autoFocus | boolean | true | فوکوسِ خودکار روی فیلد هنگامِ باز شدن. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونهها
روی متنِ انتخاب‌شده
مختصاتِ انتخاب را با selectionchange و getBoundingClientRect بخوانید و نوار را بالایش بگذارید. mousedown روی نوار را preventDefault کنید تا انتخاب از بین نرود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
افزودن لینک
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
اسکرولِ ابزارها
با scrollable، دکمه‌های قبلی و بعدی دو سرِ نوار می‌آیند و فقط وقتی فعالاند که در آن سمت ابزارِ پنهان باشد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
زیرِ تصویر یا بلوک
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| روی متنِ انتخاب‌شده | ویرایشگرِ مقاله یا یادداشت که قالببندی را درست کنارِ متن میآورد |
| افزودن لینک | تبدیلِ متنِ انتخاب‌شده به لینک بدون باز کردنِ دیالوگ |
| اسکرولِ ابزارها | موبایل یا ستونِ باریک که همهٔ ابزارها در عرض جا نمیشوند |
| زیرِ تصویر یا بلوک | ابزارهای یک تصویر یا جدولِ انتخاب‌شده داخلِ ویرایشگر |