خط زمانی — Timeline

خط زمانی رویدادها یا مراحل یک فرایند را به ترتیب زمان نشان می‌دهد؛ مثل پیگیری وضعیت یک درخواست، ایده یا تراکنش. هر رویداد یکی از پنج وضعیت را دارد و وضعیت همیشه با برچسب متنی بیان می‌شود، نه تنها با رنگ. کامپوننت غیرتعاملی و ایستاست؛ برای مراحلی که کاربر در آن‌ها ورودی می‌دهد، از استپر استفاده کنید.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Timeline } from '@tokapps/tuk';

نمونهٔ زنده

۱۴۰۵/۰۷/۰۱انجام شد
ثبت ایده
ایده ثبت و برای بررسی ارسال شد
۱۴۰۵/۰۷/۰۵در حال انجام
بررسی تیم
در حال بررسی توسط داوران
۱۴۰۵/۰۷/۱۰در انتظار
رأی‌گیری عمومی

۱۰:۰۰انجام شد
درخواست ثبت شد
۱۰:۰۵هشدار
تأیید بانک
کد پیگیری دریافت نشد
۱۰:۱۰خطا
بازگشت وجه
تراکنش ناموفق بود

۱۴۰۵/۰۷/۰۱تمام‌شده
ثبت ایده
ایده ثبت و برای بررسی ارسال شد
۱۴۰۵/۰۷/۰۵جاری
بررسی تیم
در حال بررسی توسط داوران
۱۴۰۵/۰۷/۱۰بعدی
رأی‌گیری عمومی

کد قابل کپی

پایه: مراحل یک ایده

TSX

import { Timeline } from '@tokapps/tuk';const steps = [  { id: 'idea', title: 'ثبت ایده', time: '۱۴۰۵/۰۷/۰۱', description: 'ایده ثبت و برای بررسی ارسال شد', status: 'complete' as const },  { id: 'review', title: 'بررسی تیم', time: '۱۴۰۵/۰۷/۰۵', description: 'در حال بررسی توسط داوران', status: 'current' as const },  { id: 'vote', title: 'رأی‌گیری عمومی', time: '۱۴۰۵/۰۷/۱۰', status: 'upcoming' as const },];export function IdeaProgress() {  return <Timeline aria-label="مراحل ایده" items={steps} />;}

پیشرفته: رویدادهای با هشدار و خطا

TSX

import { Timeline } from '@tokapps/tuk';export function PaymentTrail() {  return (    <Timeline      aria-label="وضعیت پرداخت"      items={[        { id: 'a', title: 'درخواست ثبت شد', time: '۱۰:۰۰', status: 'complete' },        { id: 'b', title: 'تأیید بانک', time: '۱۰:۰۵', description: 'کد پیگیری دریافت نشد', status: 'warning' },        { id: 'c', title: 'بازگشت وجه', time: '۱۰:۱۰', description: 'تراکنش ناموفق بود', status: 'danger' },      ]}    />  );}

حالت خطا با برچسب سفارشی

برچسب‌های وضعیت را می‌توان ترجمه یا تغییر داد. در این نمونه برچسب‌ها کوتاه شده‌اند.

TSX

import { Timeline } from '@tokapps/tuk';const steps = [  { id: 'req', title: 'درخواست', time: '۱۰:۰۰', status: 'complete' as const },  { id: 'pay', title: 'پرداخت', time: '۱۰:۰۵', description: 'پرداخت رد شد', status: 'danger' as const },  { id: 'next', title: 'ارسال', status: 'upcoming' as const },];export function CustomLabelTimeline() {  return (    <Timeline      aria-label="مراحل سفارش"      labels={{ complete: 'تمام‌شده', current: 'جاری', upcoming: 'بعدی', danger: 'ناموفق' }}      items={steps}    />  );}

همهٔ پیکربندی‌ها

نوع	پیش‌فرض	توضیح
	— (الزامی)	فهرست رویدادها به ترتیب نمایش.
	برچسب‌های فارسی هر وضعیت	برچسب متنی هر وضعیت؛ مقادیر داده‌شده با پیش‌فرض‌ها ادغام می‌شوند.
		نام فهرست برای صفحه‌خوان.
·		کل خط زمانی را در چاپ پنهان می‌کند.
	—	کلاس روی ریشهٔ .

برچسب‌های پیش‌فرض وضعیت: «انجام شد»، «در حال انجام»، «در انتظار»، «هشدار»، «خطا».

نوع	پیش‌فرض	توضیح
	— (الزامی)	کلید یکتای رویداد.
	— (الزامی)	عنوان رویداد.
	—	زمان یا تاریخ نمایشی؛ متن است و قالب‌بندی خودکار ندارد.
	—	توضیح کوتاه زیر عنوان.
· · · ·		وضعیت رویداد.

ساختار و اسلات‌ها

code

ol                           data-tds="timeline"  data-print  aria-label└─ li (هر رویداد)            data-part="item"  data-status  [aria-current="step"]   ├─ span «نشانه»           data-part="marker"  aria-hidden="true"   └─ div «محتوا»            data-part="content"      ├─ div «زمان و وضعیت»  data-part="meta"      │  ├─ span «زمان»       data-part="time"  dir="auto"    (وقتی time داده شده)      │  └─ span «برچسب»      data-part="status-label"      ├─ div «عنوان»         data-part="title"      └─ div «توضیح»         data-part="description"        (وقتی description داده شده)

بخش ثابت: فهرست ، ترتیب و و ، نشانه با و برچسب متنی وضعیت. بخش قابل‌تغییر: محتوای ، و ، ، و توکن‌های .

همهٔ حالت‌ها

حالت	نشانه	نمایش
complete (انجام شد)	روی	نشانهٔ پرشده با رنگ و آیکون تیک؛ خط اتصال به رنگ .
current (در حال انجام)	و	نشانه با حلقهٔ فوکوس و آیکون اطلاعات.
upcoming (در انتظار)		نشانهٔ خالی بدون آیکون؛ خط اتصال خنثی.
warning (هشدار)		آیکون هشدار با رنگ .
danger (خطا)		آیکون خطا با رنگ .
آخرین رویداد		بدون خط اتصال به پایین.
چاپ پنهان		خط زمانی در چاپ پنهان.

تعاملی نیست؛ حالت hover یا focus ندارد. در کد حالت بارگذاری () تعریف نشده است. حالت عمداً آیکون ندارد و فقط با برچسب متنی و نشانهٔ خالی بیان می‌شود.

تغییرات مجاز برای توسعه‌دهنده

وضعیت هر رویداد: ، ، ، ، .
برچسب‌ها: برای ترجمه یا لحن دیگر (مثلاً «تمام‌شده» به‌جای «انجام شد»).
نام فهرست: .
محتوا: ، و با هر .
چاپ: یا .
نقاط توسعه: روی فهرست؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، ، ، ، ، ، ، ، ، .
اندازه: در کد پراپ یا تعریف نشده است.

تغییرات ممنوع (بنیان ثابت)

ریشه باید بومی باشد و هر رویداد باشد.
وضعیت باید همیشه برچسب متنی داشته باشد ()؛ حذف آن یا اتکا به رنگ یا آیکون به‌تنهایی ممنوع است.
مرحلهٔ جاری باید داشته باشد؛ فقط یک رویداد باید باشد.
نشانه‌ها باید بمانند.
ترتیب زمانی رویدادها با ترتیب آرایهٔ تعیین می‌شود؛ کامپوننت مرتب‌سازی خودکار ندارد.
رنگ خام یا گرادیان ممنوع است.

RTL، کیبورد و صفحه‌خوان

خط اتصال و نشانه با حاشیهٔ منطقی ساخته شده‌اند؛ در RTL خط زمانی از راست به چپ و نشانه سمت راست قرار می‌گیرد.
زمان با نمایش داده می‌شود تا ترکیب فارسی و لاتین درست جهت‌دهی شود.
کیبورد: غیرتعاملی است؛ از آن عبور می‌کند.
صفحه‌خوان: فهرست با (پیش‌فرض «خط زمانی») خوانده می‌شود؛ وضعیت به‌صورت متن خوانده می‌شود؛ مرحلهٔ جاری با مشخص است.

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. معادل بصری: متن وضعیت و آیکون.
حرکت: ندارد؛ نمایش ایستاست (). در کاهش حرکت تغییری لازم نیست.
چاپ: پیش‌فرض با رنگ تک‌رنگ؛ وضعیت با متن در چاپ سیاه‌وسفید هم خوانده می‌شود؛ ندارد؛ با پنهان می‌شود.

توکن‌ها

معنایی: ، ، ، ، ، ، ، ، ، ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، ، ، ، ، ، ، ، .
کنترل: ، ، ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

آیکون‌های نشانه (تیک، اطلاعات، هشدار، خطا) فقط از طریق کامپوننت با نام معنایی رسم می‌شوند؛ مسیر asset مستند نمی‌شود.
تم فقط توکن‌ها را تغییر می‌دهد؛ ساختار فهرست و ARIA ثابت است.
Gesture ندارد.

نکات

برای مراحلی که کاربر در آن‌ها ورودی می‌دهد یا بین آن‌ها جابه‌جا می‌شود، از گام‌ها استفاده کنید.
برای یک پیام هشدار تکی، از هشدار استفاده کنید.
برای نشان دادن یک وضعیت کوتاه در کنار هر رویداد، از نشان استفاده کنید.

خط زمانی — Timeline

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { Timeline } from '@tokapps/tuk';

نمونهٔ زنده

۱۴۰۵/۰۷/۰۱انجام شد
ثبت ایده
ایده ثبت و برای بررسی ارسال شد
۱۴۰۵/۰۷/۰۵در حال انجام
بررسی تیم
در حال بررسی توسط داوران
۱۴۰۵/۰۷/۱۰در انتظار
رأی‌گیری عمومی

۱۰:۰۰انجام شد
درخواست ثبت شد
۱۰:۰۵هشدار
تأیید بانک
کد پیگیری دریافت نشد
۱۰:۱۰خطا
بازگشت وجه
تراکنش ناموفق بود

۱۴۰۵/۰۷/۰۱تمام‌شده
ثبت ایده
ایده ثبت و برای بررسی ارسال شد
۱۴۰۵/۰۷/۰۵جاری
بررسی تیم
در حال بررسی توسط داوران
۱۴۰۵/۰۷/۱۰بعدی
رأی‌گیری عمومی

کد قابل کپی

پایه: مراحل یک ایده

TSX

import { Timeline } from '@tokapps/tuk';const steps = [  { id: 'idea', title: 'ثبت ایده', time: '۱۴۰۵/۰۷/۰۱', description: 'ایده ثبت و برای بررسی ارسال شد', status: 'complete' as const },  { id: 'review', title: 'بررسی تیم', time: '۱۴۰۵/۰۷/۰۵', description: 'در حال بررسی توسط داوران', status: 'current' as const },  { id: 'vote', title: 'رأی‌گیری عمومی', time: '۱۴۰۵/۰۷/۱۰', status: 'upcoming' as const },];export function IdeaProgress() {  return <Timeline aria-label="مراحل ایده" items={steps} />;}

پیشرفته: رویدادهای با هشدار و خطا

TSX

import { Timeline } from '@tokapps/tuk';export function PaymentTrail() {  return (    <Timeline      aria-label="وضعیت پرداخت"      items={[        { id: 'a', title: 'درخواست ثبت شد', time: '۱۰:۰۰', status: 'complete' },        { id: 'b', title: 'تأیید بانک', time: '۱۰:۰۵', description: 'کد پیگیری دریافت نشد', status: 'warning' },        { id: 'c', title: 'بازگشت وجه', time: '۱۰:۱۰', description: 'تراکنش ناموفق بود', status: 'danger' },      ]}    />  );}

حالت خطا با برچسب سفارشی

برچسب‌های وضعیت را می‌توان ترجمه یا تغییر داد. در این نمونه برچسب‌ها کوتاه شده‌اند.

TSX

import { Timeline } from '@tokapps/tuk';const steps = [  { id: 'req', title: 'درخواست', time: '۱۰:۰۰', status: 'complete' as const },  { id: 'pay', title: 'پرداخت', time: '۱۰:۰۵', description: 'پرداخت رد شد', status: 'danger' as const },  { id: 'next', title: 'ارسال', status: 'upcoming' as const },];export function CustomLabelTimeline() {  return (    <Timeline      aria-label="مراحل سفارش"      labels={{ complete: 'تمام‌شده', current: 'جاری', upcoming: 'بعدی', danger: 'ناموفق' }}      items={steps}    />  );}

همهٔ پیکربندی‌ها

نوع	پیش‌فرض	توضیح
	— (الزامی)	فهرست رویدادها به ترتیب نمایش.
	برچسب‌های فارسی هر وضعیت	برچسب متنی هر وضعیت؛ مقادیر داده‌شده با پیش‌فرض‌ها ادغام می‌شوند.
		نام فهرست برای صفحه‌خوان.
·		کل خط زمانی را در چاپ پنهان می‌کند.
	—	کلاس روی ریشهٔ .

برچسب‌های پیش‌فرض وضعیت: «انجام شد»، «در حال انجام»، «در انتظار»، «هشدار»، «خطا».

نوع	پیش‌فرض	توضیح
	— (الزامی)	کلید یکتای رویداد.
	— (الزامی)	عنوان رویداد.
	—	زمان یا تاریخ نمایشی؛ متن است و قالب‌بندی خودکار ندارد.
	—	توضیح کوتاه زیر عنوان.
· · · ·		وضعیت رویداد.

ساختار و اسلات‌ها

code

ol                           data-tds="timeline"  data-print  aria-label└─ li (هر رویداد)            data-part="item"  data-status  [aria-current="step"]   ├─ span «نشانه»           data-part="marker"  aria-hidden="true"   └─ div «محتوا»            data-part="content"      ├─ div «زمان و وضعیت»  data-part="meta"      │  ├─ span «زمان»       data-part="time"  dir="auto"    (وقتی time داده شده)      │  └─ span «برچسب»      data-part="status-label"      ├─ div «عنوان»         data-part="title"      └─ div «توضیح»         data-part="description"        (وقتی description داده شده)

بخش ثابت: فهرست ، ترتیب و و ، نشانه با و برچسب متنی وضعیت. بخش قابل‌تغییر: محتوای ، و ، ، و توکن‌های .

همهٔ حالت‌ها

حالت	نشانه	نمایش
complete (انجام شد)	روی	نشانهٔ پرشده با رنگ و آیکون تیک؛ خط اتصال به رنگ .
current (در حال انجام)	و	نشانه با حلقهٔ فوکوس و آیکون اطلاعات.
upcoming (در انتظار)		نشانهٔ خالی بدون آیکون؛ خط اتصال خنثی.
warning (هشدار)		آیکون هشدار با رنگ .
danger (خطا)		آیکون خطا با رنگ .
آخرین رویداد		بدون خط اتصال به پایین.
چاپ پنهان		خط زمانی در چاپ پنهان.

تغییرات مجاز برای توسعه‌دهنده

وضعیت هر رویداد: ، ، ، ، .
برچسب‌ها: برای ترجمه یا لحن دیگر (مثلاً «تمام‌شده» به‌جای «انجام شد»).
نام فهرست: .
محتوا: ، و با هر .
چاپ: یا .
نقاط توسعه: روی فهرست؛ توکن‌های سطح کامپوننت ، ، ، ، ، ، ، ، ، ، ، ، ، ، .
اندازه: در کد پراپ یا تعریف نشده است.

تغییرات ممنوع (بنیان ثابت)

ریشه باید بومی باشد و هر رویداد باشد.
وضعیت باید همیشه برچسب متنی داشته باشد ()؛ حذف آن یا اتکا به رنگ یا آیکون به‌تنهایی ممنوع است.
مرحلهٔ جاری باید داشته باشد؛ فقط یک رویداد باید باشد.
نشانه‌ها باید بمانند.
ترتیب زمانی رویدادها با ترتیب آرایهٔ تعیین می‌شود؛ کامپوننت مرتب‌سازی خودکار ندارد.
رنگ خام یا گرادیان ممنوع است.

RTL، کیبورد و صفحه‌خوان

خط اتصال و نشانه با حاشیهٔ منطقی ساخته شده‌اند؛ در RTL خط زمانی از راست به چپ و نشانه سمت راست قرار می‌گیرد.
زمان با نمایش داده می‌شود تا ترکیب فارسی و لاتین درست جهت‌دهی شود.
کیبورد: غیرتعاملی است؛ از آن عبور می‌کند.
صفحه‌خوان: فهرست با (پیش‌فرض «خط زمانی») خوانده می‌شود؛ وضعیت به‌صورت متن خوانده می‌شود؛ مرحلهٔ جاری با مشخص است.

صدا، حرکت، چاپ و کاهش حرکت

صدا: در کد پراپ تعریف نشده و کامپوننت بی‌صداست. معادل بصری: متن وضعیت و آیکون.
حرکت: ندارد؛ نمایش ایستاست (). در کاهش حرکت تغییری لازم نیست.
چاپ: پیش‌فرض با رنگ تک‌رنگ؛ وضعیت با متن در چاپ سیاه‌وسفید هم خوانده می‌شود؛ ندارد؛ با پنهان می‌شود.

توکن‌ها

معنایی: ، ، ، ، ، ، ، ، ، ، ، ، ، .
کامپوننتی: ، ، ، ، ، ، ، ، ، ، ، ، ، ، .
کنترل: ، ، ، .
فایل توکن: ؛ فهرست مصرفی در .

قرارداد ARCH

آیکون‌های نشانه (تیک، اطلاعات، هشدار، خطا) فقط از طریق کامپوننت با نام معنایی رسم می‌شوند؛ مسیر asset مستند نمی‌شود.
تم فقط توکن‌ها را تغییر می‌دهد؛ ساختار فهرست و ARIA ثابت است.
Gesture ندارد.

نکات

برای مراحلی که کاربر در آن‌ها ورودی می‌دهد یا بین آن‌ها جابه‌جا می‌شود، از گام‌ها استفاده کنید.
برای یک پیام هشدار تکی، از هشدار استفاده کنید.
برای نشان دادن یک وضعیت کوتاه در کنار هر رویداد، از نشان استفاده کنید.

خط زمانی — Timeline

نمونهٔ زنده

کد قابل کپی

پایه: مراحل یک ایده

پیشرفته: رویدادهای با هشدار و خطا

حالت خطا با برچسب سفارشی

همهٔ پیکربندی‌ها

Timelineکپی کدکپی کد

TimelineItemکپی کدکپی کد

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

RTL، کیبورد و صفحه‌خوان

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات

خط زمانی — Timeline

نمونهٔ زنده

کد قابل کپی

پایه: مراحل یک ایده

پیشرفته: رویدادهای با هشدار و خطا

حالت خطا با برچسب سفارشی

همهٔ پیکربندی‌ها

Timelineکپی کدکپی کد

TimelineItemکپی کدکپی کد

ساختار و اسلات‌ها

همهٔ حالت‌ها

تغییرات مجاز برای توسعه‌دهنده

تغییرات ممنوع (بنیان ثابت)

RTL، کیبورد و صفحه‌خوان

صدا، حرکت، چاپ و کاهش حرکت

توکن‌ها

قرارداد ARCH

نکات