Switch — سوییچ روشن/خاموش

سوییچ برای تنظیمی است که همان لحظه اثر می‌کند: حالت تاریک، Wi-Fi، یادآور روزانه. اگر تغییر باید با دکمهٔ «ذخیره» تأیید شود، از Checkbox استفاده کنید.

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

TSX

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

نمونهٔ زنده

اعلان‌های ایمیلی

حالت تاریک

یادآور روزانههر روز ساعت ۹ صبح

مدیریت‌شده توسط سازمان

غیرفعال

در حال همگام‌سازی…

Wi-Fi

کد قابل کپی

تنظیم ساده با توضیح

TSX

import { Switch } from '@tokapps/tuk';<Switch description="هر روز ساعت ۹ صبح" isSelected={remind} onChange={setRemind}>  یادآور روزانه</Switch>

برچسب‌های متنی روشن و خاموش

TSX

<Switch onLabel="روشن" offLabel="خاموش" defaultSelected>  Wi-Fi</Switch>

در حال اعمال (ذخیره روی سرور)

TSX

<Switch isLoading={saving} isSelected={enabled} onChange={async (on) => {  setSaving(true);  await saveSetting(on);  setEnabled(on);  setSaving(false);}}>  همگام‌سازی خودکار</Switch>

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

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

حالت‌ها

حالت	نمایش
خاموش	مسیر خنثی، دایرهٔ کوچک‌تر، برچسب «خاموش»
روشن	مسیر رنگ اکسنت، دایره به سمت پایان مسیر، برچسب «روشن»
	قفل تغییر و آیکون چرخان
	بدون تغییر و بدون پاسخ به کلیک
	کدری کم

RTL و کیبورد

در RTL دایره به سمت راست می‌رود (به جهت خوانش)؛ مسیر حرکت با منطق RTL هم‌جهت است.
یا حالت را عوض می‌کند؛ از سوییچ عبور می‌کند.
نقش با خوانده می‌شود؛ برچسب، توضیح و خطا متصل‌اند.

صدا، حرکت، چاپ

صدا: پیش‌فرض هنگام تغییر. معادل بصری: تغییر موقعیت دایره و متن روشن/خاموش.
حرکت: انتقال دایره با و . در بدون حرکت می‌پرد.
چاپ: پیش‌فرض؛ حالت با متن «روشن/خاموش» چاپ می‌شود.

توکن‌ها

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

نکات

اگر تنظیم نیاز به تأیید دارد، از Checkbox یا دکمه استفاده کنید.
برای انتخاب از چند گزینه از RadioGroup استفاده کنید.