کل کارت قابل‌کلیک است، اما فقط یک لینک در ترتیب Tab دارد.
tds.tokapps.com/components/data-display
نمایش داده
15 کامپوننت · داستانهای زنده در Storybook (کپی کد) · داده ماشینی: کپی کد
Accordion
پنل‌های تاشو بر پایهٔ Disclosure/DisclosureGroup در react-aria؛ تک‌باز یا چندباز، با heading واقعی و فلش جهت‌دار.
از منوی «ایدهٔ جدید» فرم را پر کنید.
import { Accordion, AccordionItem } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- پرسش‌های متداول
- مرحله‌بندی محتوای طولانی
- کم‌کردن شلوغی صفحه با محتوای ثانویه
چه وقت نه
- محتوای حیاتی که باید همیشه دیده شود
- ناوبری بین بخش‌های هم‌سطح (Tabs)
- داده‌های ستونی (Table)
Avatar
تصویر کاربر با بازگشت به حروف اول (فارسی با نیم‌فاصله، لاتین بزرگ) و AvatarGroup با همپوشانی و «+N».
علی رضایی
+۲
import { Avatar, AvatarGroup, getInitials } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- نمایش هویت کاربر در فهرست، نظر و کارت
- گروه مشارکت‌کنندگان یا اعضای تیم
- نمایهٔ کاربر
چه وقت نه
- تصویر محتوایی (از img با alt واقعی استفاده کنید)
- لوگوی برند
- کنش قابل‌کلیک بدون دکمهٔ والد
Badge
برچسب کوچک وضعیت یا شمارنده؛ وضعیت‌ها همیشه آیکون + متن دارند و عدد با ارقام فارسی و سقف «۹۹+» نمایش داده می‌شود.
تأیید شدرد شددر انتظار بررسیپیش‌نویس
موفق
برچسبویژه
۳۳ اعلان خوانده‌نشده۹۹+۲۵۰ پیام
import { Badge } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- وضعیت آیتم (تأیید شده، در انتظار، رد شده)
- شمارندهٔ اعلان یا پیام
- برچسب دسته‌بندی کوتاه
چه وقت نه
- پیام کامل یا توضیح (Alert)
- کنش قابل‌کلیک (Button/Tag تعاملی)
- وضعیتی که فقط با رنگ نشان داده شود
Calendar
تقویم تسک و رویداد با سه نمای امروز، هفته و ماه؛ نقطه‌ها روز دارای کار را نشان می‌دهند و کلیک روی روز آکاردئون فهرست کارهای آن روز را زیر همان ردیف باز می‌کند. سامانهٔ شمسی یا میلادی.
1405 مهر
اکتبر 2026
1405 مهر
1405 مهر
25 مهر – 1 آبان 1405
1405 مهر 25, شنبه
امروز کاری نداری. روز آرامی است.
1405 مهر 25, شنبه
- ثبت گزارش هفتگی
- ارسال پیش‌نویس ایده
- بررسی بازخورد داوران
- جلسهٔ تیم محصول
import { Calendar } from '@tokapps/tuk/data-display'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- نمایش کارها و رویدادهای یک کاربر روی تقویم
- مرور برنامهٔ امروز، هفته یا ماه با نقطه‌های روزهای پُرکار
- تیک زدن انجام تسک‌ها از روی تقویم
چه وقت نه
- انتخاب یک تاریخ در فرم (DatePicker)
- جدول رویدادهای بدون بازهٔ زمانی (DataTable)
- خط زمانی رخدادهای یک فرایند (Timeline)
Card
سطح محتوایی با اسلات‌های سربرگ، بدنه و پانویس؛ نسخهٔ لینک‌دار با الگوی «لینک کشیده» که یک توقف Tab و یک نام دسترسی دارد؛ کاور اختیاری CardMedia (تصویر یا کاور گرادیانی از توکن‌ها).
پلتفرم گفت‌وگوی هم‌محله‌ای
ایده‌ای برای اتصال همسایه‌ها و کسب‌وکارهای محلی.
برجسته
خط‌دار
تخت
معماری
کاور گرادیانی از توکن‌های تم ساخته می‌شود؛ بدون تصویر هم کارت هویت دارد.
accent
series-1
series-2
series-3
series-4
series-5
series-6
series-7
کاشی کوچک برای لوگو یا حرف اول، کنار عنوان.
import { Card, CardHeader, CardBody, CardFooter, CardTitle, CardLink, CardMedia } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- گروه‌بندی محتوای مرتبط (ایده، کمپین، محصول)
- آیتم قابل‌ورود در فهرست یا شبکه
- سطح پایه برای الگوها
چه وقت نه
- فقط برای تزئین بدون محتوا
- ردیف‌های داده با ستون‌های قابل‌مقایسه (Table)
- پیام وضعیت (Alert)
CatalogTile
تایل کتابخانه برای کشیدن به بوم: پیش‌نمایش، نام، کشیدن مبتنی بر Pointer با بار سفارشی و جایگزین کیبوردی Enter.
هنوز چیزی افزوده نشده
import { CatalogTile } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- فهرست کامپوننت‌ها/عناصر برای افزودن به بوم با کشیدن
- پالت ابزار در ویرایشگر بصری
چه وقت نه
- مرتب‌سازی ردیف‌های یک فهرست (Repeater)
- کارت محتوای عمومی (Card)
CodeBlock
بلوک کد با شناخت زبان، سینتکس توکن‌محور، شماره خط، خطوط برجسته و دکمهٔ کپی. رنگ‌ها فقط از --tds-syntax-* می‌آیند و هر تم هویت سینتکس خودش را دارد.
const sum = (a: number, b: number) => a + b;export const sum = (a: number, b: number) => a + b;export const avg = (a: number, b: number) => sum(a, b) / 2;pnpm add @tokapps/tukpnpm dev// کامپوننت‌ها را از یک نقطه وارد کنیدimport { Button } from "@tokapps/tuk";import { CodeBlock } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- نمایش کد منبع یا دستور قابل کپی در مستندات و محصول
- کدی که باید اسکرول افقی داشته باشد و خط‌ها شماره‌گذاری یا هایلایت شوند
- توضیح یک تابع، کلیدواژه یا متغیر کد با نگه داشتن ماوس یا فوکوس کیبورد روی همان کلمه
چه وقت نه
- کد درون‌خطی وسط پاراگراف (از InlineCode استفاده کنید)
- داده‌های جدولی (از Table یا DataTable استفاده کنید)
DataTable
Table + مرتب‌سازی چرخه‌ای، فیلتر متنی با یکسان‌سازی فارسی (ی/ک و ارقام)، صفحه‌بند داخلی و انتخاب اختیاری؛ منطق در هوک useDataTable.
| پلتفرم گفت‌وگوی هم‌محله‌ای | علی رضایی | ۱۲۴ | تأیید شد |
|---|---|---|---|
| کتابخانهٔ اشتراکی | سارا محمدی | ۸۸ | در انتظار |
| Open Data Day | Mehdi Karimi | ۱٬۲۰۴ | تأیید شد |
۳ نتیجه
| پلتفرم گفت‌وگوی هم‌محله‌ای | علی رضایی | ۱۲۴ | تأیید شد |
|---|---|---|---|
| کتابخانهٔ اشتراکی | سارا محمدی | ۸۸ | در انتظار |
| Open Data Day | Mehdi Karimi | ۱٬۲۰۴ | تأیید شد |
۳ نتیجه
| پلتفرم گفت‌وگوی هم‌محله‌ای | علی رضایی | ۱۲۴ | تأیید شد |
|---|---|---|---|
| کتابخانهٔ اشتراکی | سارا محمدی | ۸۸ | در انتظار |
۳ نتیجه
| پلتفرم گفت‌وگوی هم‌محله‌ای | علی رضایی | ۱۲۴ | تأیید شد | |
|---|---|---|---|---|
| کتابخانهٔ اشتراکی | سارا محمدی | ۸۸ | در انتظار | |
| Open Data Day | Mehdi Karimi | ۱٬۲۰۴ | تأیید شد |
۳ نتیجه
import { DataTable, useDataTable } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- فهرست‌های داده‌ای با مرتب‌سازی و جستجو
- رتبه‌بندی و گزارش
- مدیریت انتخاب چندردیفه
چه وقت نه
- داده‌های سروری حجیم (صفحه‌بندی/مرتب‌سازی سمت سرور لازم است)
- ویرایش درون‌سلولی
- آیتم‌های غنی کم‌ستون (Card)
InlineCode
کد کوتاه وسط متن با یک کلیک کپی (بدون انتخاب متن). برچسب کمکی روی hover و فوکوس و حالت پس از کپی دارد؛ شکل و حرکت هر تم را توکن‌ها و فایل حرکت همان تم تعیین می‌کنند. چیدمان: dir=ltr + isolate.
برای نصب از کپی کد استفاده کنید.
کامپوننت کپی کد از بسته TUK است.
دستور کپی کد را اجرا کنید.
مسیر کامل: کپی کد را ببینید.
مقدار کپی کد تعیین می‌کند کدام کلید دیده شود.
import { InlineCode } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- نام تابع، دستور یا مسیری که خواننده ممکن است بخواهد کپی کند و وسط جمله می‌آید
- اشاره به نام توکن، کلاس یا ویژگی در مستندات
چه وقت نه
- کد چندخطی یا بلوک با شماره خط (از CodeBlock استفاده کنید)
- متنی که کپی‌پذیر نیست و فقط نمایش کد است؛ برای آن از کد ساده استفاده کنید
Kbd
نمایش میان‌بُر صفحه‌کلید با نگاشت mod به ⌘ یا Ctrl، نام‌های هم‌ارز کلید، ترکیب و دنباله، همیشه LTR و با نام گفتاری.
Ctrl+K
Ctrl+Shift+P
Alt+←
GI
⌘⌥↩
Esc
import { Kbd } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- نمایش میان‌بُر کنار آیتم منو، دکمه یا Tooltip
- راهنمای کلیدهای پالت فرمان
چه وقت نه
- متن کد یا فرمان (InlineCode)
- کنترل تعاملی (Button)
Table
جدول معنایی با <table> بومی، سربرگ‌های قابل‌مرتب‌سازی با aria-sort، سربرگ چسبان، ناحیهٔ اسکرول افقی فوکوس‌پذیر و انتخاب اختیاری با چک‌باکس.
| نام | رأی | وضعیت |
|---|---|---|
| علی رضایی | ۱۲۴ | تأیید شد |
| سارا محمدی‌نژاد | ۸۸ | در انتظار |
| Mehdi Karimi | ۱٬۲۰۴ | تأیید شد |
| نام | |
|---|---|
| سارا محمدی‌نژاد | ۸۸ |
| علی رضایی | ۱۲۴ |
| Mehdi Karimi | ۱٬۲۰۴ |
import { Table, TableHead, TableBody, TableFoot, TableRow, TableHeaderCell, TableCell, TableRowHeader, TableCheckbox } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- داده‌های ساخت‌یافته با ستون‌های قابل‌مقایسه
- فهرست‌هایی که مرتب‌سازی یا انتخاب می‌خواهند
- گزارش و رتبه‌بندی
چه وقت نه
- چیدمان صفحه (از Grid/Stack استفاده کنید)
- فهرست ساده‌ای از آیتم‌های غنی (Card)
- جدول تعاملی با ویرایش درون‌سلولی پیچیده (Grid ARIA)
Timeline
فهرست عمودی رویدادهای زمانی با پنج وضعیت (انجام شد، جاری، در انتظار، هشدار، خطا)؛ وضعیت جاری با aria-current=step علامت می‌خورد.
- ۱۴۰۵/۰۷/۰۱انجام شدثبت ایدهایده ثبت و برای بررسی ارسال شد
- ۱۴۰۵/۰۷/۰۵در حال انجامبررسی تیمدر حال بررسی توسط داوران
- ۱۴۰۵/۰۷/۱۰در انتظاررأیگیری عمومی
- ۱۰:۰۰انجام شددرخواست ثبت شد
- ۱۰:۰۵هشدارتأیید بانککد پیگیری دریافت نشد
- ۱۰:۱۰خطابازگشت وجهتراکنش ناموفق بود
- ۱۴۰۵/۰۷/۰۱تمامشدهثبت ایدهایده ثبت و برای بررسی ارسال شد
- ۱۴۰۵/۰۷/۰۵جاریبررسی تیمدر حال بررسی توسط داوران
- ۱۴۰۵/۰۷/۱۰بعدیرأیگیری عمومی
import { Timeline } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- نمایش مراحل یک فرایند یا تاریخچهٔ رویدادها به ترتیب زمان
- پیگیری وضعیت درخواست، ایده یا تراکنش
چه وقت نه
- مراحل دریافت ورودی از کاربر (Stepper)
- فهرست بدون ترتیب زمانی (List)
- هشدار تکی (Alert)
TreeView
درخت تو در تو با انتخاب تکی/چندتایی (Shift/Ctrl)، ناوبری WAI-ARIA هم‌جهت با RTL، کشیدن برای جابه‌جایی و بازوالدگذاری (با جایگزین صفحه‌کلید)، اکشن‌های درون‌خطی، تغییر نام درجا و مجازی‌سازی برای ده‌ها هزار ردیف.
صفحهٔ اصلی
سربرگ
قهرمان
پابرگ
دارایی‌ها
صفحهٔ اصلی
سربرگ
قهرمان
پابرگ
دارایی‌ها
گروه 1
گره 1-1
گره 1-2
گره 1-3
گره 1-4
گره 1-5
گره 1-6
گره 1-7
گره 1-8
گره 1-9
گره 1-10
گره 1-11
گره 1-12
گره 1-13
گره 1-14
گره 1-15
import { TreeView } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- نمایش سلسله‌مراتب پوشه/لایه/فهرست با باز و بسته شدن
- بازرس لایه‌ها با چشم و قفل و جابه‌جایی با کشیدن
- فهرست‌های بسیار بزرگ (تا ده‌ها هزار ردیف)
چه وقت نه
- جدول داده با ستون‌های متعدد (DataTable)
- فهرست تخت بدون سلسله‌مراتب (Select/Listbox)
- آکاردئون محتوایی (Accordion)
Typewriter
متن با تایپ کاراکتر به کاراکتر، مکث‌های قابل تنظیم برای هر بخش، حالت پیشروی با اسکرول، سلکت‌پذیری (توقف هنگام انتخاب) و کنترل پخش/مکث. رنگ و کرسر از توکن‌های معنایی.
سلام، من تایپ‌نویس TDS هستم.
ابتدا یک جمله. بعد با مکث بلندتر. و پایان.
طراحی را سریع کنید.اجزای آماده استفاده کنید.در همه‌جا یک‌دست بمانید.
import { Typewriter } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- معرفی یک جمله یا شعار با ریتم تایپ و مکث بین عبارت‌ها
- متن‌های چرخشی کوتاه در لندینگ (erase + loop)
- پیشروی متن با اسکرول صفحه در بخش‌های روایی (mode=scroll)
چه وقت نه
- متن طولانی یا محتوایی که باید فوراً خوانده شود (انیمیشن زمان می‌برد)
- نمایش کد یا خروجی ترمینال (از TypingCodeBlock استفاده کنید)
- پیام‌های خطا یا وضعیت که باید بی‌درنگ دیده شوند (از Toast یا Alert استفاده کنید)
TypingCodeBlock
بلوک کد با انیمیشن تایپ: پرامپت ترمینال، تایپ کاراکتر به کاراکتر با سینتکس، خروجی و تفاوت‌ها. رنگ‌ها از --tds-syntax-* و هر مرحله فقط DOM را پیش می‌برد.
import { TypingCodeBlock } from '@tokapps/tuk'- RTL
- تیره
- کنتراست بالا
- موبایل
- صفحه‌خوان
- حرکت
- چاپ
چه وقت
- نشان دادن یک جلسه ترمینال یا دستورهایی که به‌ترتیب اجرا می‌شوند
- معرفی یک قطعه کد یا تغییر کد در لندینگ و مستندات با تأکید بر ترتیب
- نمایش پاسخ یک سرویس یا مدل که به‌تدریج می‌آید
چه وقت نه
- کدی که کاربر باید آن را کپی کند (از CodeBlock استفاده کنید؛ انیمیشن کپی را سخت می‌کند)
- متن طولانی یا محتوایی که باید فوراً خوانده شود (انیمیشن زمان می‌برد)
- کد درون‌خطی وسط پاراگراف (از InlineCode استفاده کنید)