متن کوتاه‌شده (TruncatedText)

معرفی

TruncatedText برای مقدارهایی است که کاربر به متن کاملشان نیاز دارد — هشتگ، نام حساب، عنوان ردیف فهرست — و ممکن است در ستون باریک بریده شوند. اگر متن جا شود، هیچ راهنمایی ظاهر نمی‌شود؛ اگر بریده شود، با نشانگر ماوس یا فوکوس صفحه‌کلید مقدار کامل نمایش داده می‌شود. متن کامل همیشه در صفحه هست، پس انتخاب، کپی، جست‌وجو و صفحه‌خوان کل مقدار را می‌گیرند.

زمین بازی

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

import { TruncatedText } from '@partodata/ui'

<div className="flex items-center gap-2">
  <TruncatedText text="#کمپین_تخفیف_فصلی_پاییز_با_ارسال_رایگان" className="min-w-0 flex-1" />
  <span className="shrink-0">12 هزار</span>
</div>

استفاده

import { TruncatedText } from '@partodata/ui'
;<div className="flex items-center gap-2">
  <TruncatedText text="کمپین_تخفیف_فصلی_پاییز" className="flex-1" />
  <span className="shrink-0">12 هزار</span>
</div>

به برچسب ستون انعطاف‌پذیر (min-w-0 flex-1) بدهید تا آخرین چیزی باشد که کوتاه می‌شود.

داخل ردیفی که خودش فوکوس‌پذیر است (role="button")، focusable={false} بدهید و با revealed راهنما را از فوکوس ردیف باز کنید؛ HashtagPerformanceRow همین کار را می‌کند.

جدول ویژگی‌ها

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

• فقط وقتی متن بریده شده، توقف Tab است و راهنما با فوکوس باز می‌شود.
• متن و راهنما dir="auto" دارند: هشتگ لاتین در ردیف فارسی ترتیب خودش را نگه می‌دارد.