متن برجسته (HighlightedText)

معرفی

HighlightedText یک متن ساده را نشان می‌دهد و عبارت‌های داده‌شده را با <mark> علامت می‌زند؛ مثلاً عنوان یا خلاصهٔ یک نتیجهٔ جست‌وجو. با normalize="fa" نوشتار عربی و فارسی «ی» و «ک» با هم جور درمی‌آیند و نیم‌فاصله اختیاری است، پس «می‌رود» با «ميرود» هم پیدا می‌شود.

چه زمانی استفاده نکنیم:

• برای متن پست کاربر با هشتگ و منشن — از SocialText یا Post با prop ‏highlight استفاده کنید
• برای مارک‌داون — از Prose استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

import { HighlightedText } from '@partodata/ui'

<HighlightedText text="مشتریان می‌گویند ارسال رایگان کمپين پاييزي دیر رسید" terms={["کمپین","پاییزی"]} normalize="fa" />

استفاده

import { HighlightedText } from '@partodata/ui/highlighted-text'

<HighlightedText text={result.title} terms={[query]} normalize="fa" />

با RegExp

<HighlightedText text={log} terms={/خطا|هشدار/} />

راهنمای استفاده

Props

HighlightedText

دسترسی‌پذیری

• علامت‌ها عنصر معنایی <mark> هستند و متن کامل بدون تغییر خوانده می‌شود
• علامت سبز برند با شفافیت 30 درصد است (bg-brand/30) و متن رنگ اصلی خودش را نگه می‌دارد (text-foreground)؛ کنتراست متن روی علامت روی صفحه، کارت (surface-100) و نوار surface-200 در تم روشن دست‌کم 15.9:1 و در تم تیره دست‌کم 7.4:1 است (AAA)
• علامت حاشیه و متن سبز ندارد، پس با Badge موفقیت (پرکنندهٔ 10 درصد، متن سبز و حاشیه) و با رنگ انتخاب متن مرورگر اشتباه نمی‌شود
• معنا فقط با رنگ منتقل نمی‌شود: عنصر <mark> برای فناوری‌های کمکی هم نشانه است

کامپوننت‌های مرتبط

• SocialText — متن پست با هشتگ، منشن و همین علامت‌گذاری
• Post — prop ‏highlight برای عبارت جست‌وجو