حقل الرموز
حقل مطالبة يضيف فيه @ الملفات والأشخاص ويشغّل / الأوامر، وكل منها رمز ذري، مع قوائم اقتراحات تُفتح عند المؤشر.
التثبيت
يمكنك إضافة مكوّن حقل الرموز هذا باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add token-inputهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
المشغّلات
كل مشغّل هو حرف والاقتراحات التي يفتحها. تبدأ المطابقة عند بداية كلمة، أو عند بداية المطالبة فقط مع boundary: "start"، وتُصفّى القائمة أثناء الكتابة متجاهلةً حالة الأحرف والتشكيل. يمكن أن تكون items بيانات أو دالة تحميل تتلقى الاستعلام وAbortSignal عند توقف الكتابة. يرسم tone: "accent" شرائحه بلون التمييز، ويُبقي emptyState القائمة مفتوحة عندما لا يتطابق شيء.
import { RiFileCodeLine, RiSearchEyeLine } from "@remixicon/react";import type { TokenSuggestion, TokenTrigger } from "@/components/base/token-input/token-input";
const files: TokenSuggestion[] = [ { id: "app/page.tsx", label: "page.tsx", description: "app", icon: RiFileCodeLine }, { id: "components/sidebar.tsx", label: "sidebar.tsx", description: "components", icon: RiFileCodeLine },];
const triggers: TokenTrigger[] = [ // "@" at any word start, filtered as you type. { char: "@", type: "file", title: "Files", items: files }, // "/" only at the very start, as accent chips. { char: "/", type: "command", title: "Commands", boundary: "start", tone: "accent", items: commands }, // Items from a server: called with the query once typing pauses; a newer query aborts the older one. { char: "#", type: "issue", title: "Issues", emptyState: "No issues match", items: (query, signal) => fetch(`/api/issues?q=${query}`, { signal }).then((r) => r.json()), },];الرموز والنص
القيمة نص ورموز بالترتيب. يكتبها toText كنص، وكل رمز بصيغة [@label](type:value)، لطلب أو نموذج أو مسودة محفوظة، ويقرأ fromText ذلك النص ويعيده رموزًا. النسخ يكتب النص نفسه، لذا يعيد اللصق في أي حقل رموز الشرائح. مرّر codec لصيغتك الخاصة.
import { TokenInput, fromText, toText, type TokenInputValue } from "@/components/base/token-input/token-input";
const [value, setValue] = useState<TokenInputValue>([]);// ["Review ", { type: "file", value: "components/sidebar.tsx", label: "sidebar.tsx", id: "t1" }, " please"]
toText(value); // "Review [@sidebar.tsx](file:components/sidebar.tsx) please"fromText("Review [@sidebar.tsx](file:components/sidebar.tsx) please"); // the value again
<TokenInput aria-label="Message" value={value} onValueChange={setValue} triggers={triggers} />لوحة المفاتيح
الشريحة حرف واحد بالنسبة للمؤشر. الكتابة وطرق الإدخال والتدقيق الإملائي والتصحيح التلقائي تبقى للمتصفح؛ وكل ما يمس شريحة يمر عبر سجل الحقل الخاص.
حذف الرموز
يحدد tokenDeletion ما يفعله مفتاح Backspace بجوار الشريحة، ويعدّل مقبض ref الحقل من الكود: إدراج رمز عند المؤشر، والتركيز، والمسح. كل منها خطوة تراجع واحدة.
<TokenInput tokenDeletion="whole" /> {/* Backspace removes the chip (default) */}<TokenInput tokenDeletion="select" /> {/* first press selects it, the second removes it */}<TokenInput tokenDeletion="revert" /> {/* the chip turns back into "@label" and its menu reopens */}في لوحة محرّر الرسائل
تقبل لوحة محرّر الرسائل Pro نفس triggers: يصبح حقل المطالبة فيها حقل رموز ويظل يرسل نصًا.
الاعتمادات
قواعد التحرير والمطابقة منقولة من Token Input وTrigger Menu في UI SDK بموجب رخصة Apache 2.0، مع اختبارات الوحدات الخاصة بها. القائمة مبنية على Autocomplete وMenu وPopover من React Aria بنمط القائمة المنسدلة المدمجة في BoardUI.