استفادهٔ دوباره از یک طرح با مؤلفه‌ها
هدف
چیزی را یک‌بار بکشید، همه‌جا از آن استفاده کنید، و کاری کنید که در حالت روشن و تیره هر دو درست دیده شود.
سه چیز، و با هم کار می‌کنند: پنل مؤلفه‌ها که از آن می‌کشید، حالت‌هایی که یک مؤلفه می‌تواند در آن‌ها نمایش داده شود، و رنگ‌های پوسته که به‌جای نویسنده، خواننده را دنبال می‌کنند.
پنل مؤلفه‌ها
پنل کنار بوم هر دو فهرست را با هم نشان می‌دهد: لایه‌ها در بالا، که می‌شناسید، و مؤلفه‌ها زیر آن. خط میانشان را بکشید تا یکی جا بیشتری بگیرد — درختی عمیق یک تقسیم می‌خواهد و طرحی پر از مؤلفه تقسیمی دیگر — و لبهٔ بیرونی پنل را بکشید تا کل پنل پهن‌تر شود. هر دو خط با کلیدهای جهت‌دار هم کار می‌کنند، نه فقط با ماوس.
برای جمع کردن یک فهرست، سرعنوان آن را بزنید؛ آن‌گاه فهرست دیگر کل پنل را می‌گیرد. با زدن دوبارهٔ سرعنوان، فهرست دقیقاً با همان خطی که گذاشته بودید برمی‌گردد. همیشه یک فهرست باز می‌ماند، بنابراین سرعنوان آخرین فهرستِ باز پاسخ نمی‌دهد.
مؤلفه‌ها این فهرست‌ها را دارد:
| گروه | چیست |
|---|---|
| کنترل‌ها | کنترل‌های خود پلتفرم — دکمه، جعبه‌متن، ناحیهٔ متن، تیک، فهرست بازشو، انتخابگر تاریخ، انتخابگر فایل |
| عنصرها | آنچه صفحه از آن ساخته می‌شود — صفحه، ناحیه، فهرست، آیتم فهرست، عنوان، بند، پیوند |
| از برنامه‌های دیگر | مؤلفه‌های ی که در برنامه‌های دیگرِ این راه‌حل کشیده شده‌اند اینجا می‌آیند، آمادهٔ گذاشتن. |
| مؤلفه‌ها | آن‌هایی که خودتان در این طرح ساخته‌اید |
یکی را روی بوم بکشید و همان‌جا که رها کنید می‌نشیند. یا رویش کلیک کنید (یا Enter بزنید) تا در میانهٔ آنچه می‌بینید بنشیند — اگر بدون ماوس کار می‌کنید این را بدانید.
کشیدن یک کنترل از این پنل، راه سریع رسیدن به کنترل واقعی است: از همان ابتدا جعبه‌متن است، تقریباً به اندازهٔ یک جعبه‌متن و رنگ‌آمیزی‌شده مثل آن، به‌جای اینکه مستطیلی باشد که بعداً باید در بازرس دسته‌بندی‌اش کنید.
کشیدن یک عنصر راهی است برای ساختن اسکلت صفحه. یک ناحیه از همان ابتدا برچسب‌خورده می‌آید، پس
واقعاً یک <section> می‌شود و یک عنوان واقعاً یک عنوان — و همین است که صفحه‌تان را در فهرست
صفحه‌خوان می‌گذارد و باعث می‌شود Ctrl+F متن شما را پیدا کند. مستطیل ساده را بعداً هم می‌توان در زبانهٔ
صفحه برچسب زد؛ رهاکردن عنصر شما را از یادآوردنِ آن بی‌نیاز می‌کند.
پیش‌تر بود، و به همان‌جا که کار می‌کند برگشت: نوار ابزار سمت دورِ چپ همهٔ شکل‌ها را دارد، و ابزار یک وضعیت است — آن را برگزینید و اندازه‌ای را که می‌خواهید بکشید، که همان چیزی است که برای خط یا مسیر قلم می‌خواهید و خودِ کشیدن همان شکل است. این پنل نصفِ ارتفاع ریل است و آن ارتفاع را با درخت اشیاء تقسیم می‌کند، پس چیزی را نگه می‌دارد که تنها اینجا می‌توان گرفت.
کنترل‌ها و عنصرها فقط وقتی دیده می‌شوند که صفحه می‌سازید. در گزارش یا داشبورد نه جعبه‌متن معنایی دارد نه ناحیه، پس هیچ‌کدام پیشنهاد نمی‌شود.
ساختن یک مؤلفه
شیءهایی را که می‌خواهید دوباره استفاده کنید انتخاب کنید، راست‌کلیک کنید و ساخت مؤلفه را بزنید. آن‌ها اصل یک مؤلفه می‌شوند — و اصل بی‌درنگ در پنل مؤلفه‌ها پیدا می‌شود.
هر چه انتخاب کرده‌اید، خودش مؤلفه می‌شود. اگر یک شیء انتخاب کرده باشید — کارتی که در یک فریم کشیده‌اید، نشانی که فقط یک مستطیل است، یا گروهی شامل یک آیکن و برچسبش — همان شیء اصل است، در همان جایی که بود، و مؤلفه نامِ او را می‌گیرد. چیزی بالای آن ساخته نمی‌شود، پس درخت یک طبقه بلندتر نمی‌شود و «مؤلفه»ای بالای نامی که خودتان انتخاب کرده‌اید نمی‌نشیند. اگر چند شیء را با هم انتخاب کنید، در یک فریم پیچیده می‌شوند، چون مؤلفه به یک ریشه نیاز دارد و انتخابی پراکنده ریشه‌ای ندارد.
چون مؤلفه همان شیء است، نامش هم با او میآی د: نام لایه را که عوض کنید، نام مؤلفه هم عوض می‌شود — در پنل مؤلفه‌ها و هر جای دیگری که پیشنهاد می‌شود.
از آن پس:
- هر چند بار که خواستید از پنل بیرون بکشید. هر کدام یک نمونه است.
- اصل را ویرایش کنید و همهٔ نمونه‌ها با آن تغییر می‌کنند.
- بعدها بخشی به آن اضافه کنید. اصل را انتخاب کنید، با Shift+2 آن را در دید بیاورید و چیزی از پالت را درونش بگذارید: یک متن، یک پیوند، یک دکمه. آن بخش جزو مؤلفه می‌شود و هر نمونه هم آن را می‌گیرد.
- انتخاب کنید نمونه چه چیزی را می‌تواند تغییر دهد. لایه‌ای درون اصل را انتخاب کنید و ویژگی‌هایی را که می‌خواهید نمونه‌ها بتوانند بازنویسی کنند تیک بزنید. هرچه تیک نزنید به اصل قفل می‌ماند — و نکته همین است: مؤلفه تنها وقتی ارزش دارد که واقعاً همه‌جا یکسان باشد.
تشخیص اصل از نمونه
در فهرست لایه‌ها نشان این دو فرق می‌کند، پس بدون کلیک کردن هم می‌شود در یک نگاه فهمید کدام کدام است: لوزی چهارتایی اصل است — همان یک تعریف — و لوزی تویِ‌خالی تکی یک نمونه است، یعنی رونوشتی از آن. نشانگر ماوس را روی هرکدام ببرید تا نامش را هم ببینید. فقط بیرونی‌ترین سطرِ هرکدام نشان‌دار می‌شود؛ لایه‌های درونش به آن تعلق دارند و دوباره نشان‌دار نمی‌شوند.
رفتن از یک نمونه به اصل آن
یک نمونه را نمی‌شود همان‌جا که هست ویرایش کرد، پس برای تغییر دادنش باید به اصلش بروید. دو راه دارد، و هر دو از لایه‌ای درونِ نمونه هم کار می‌کنند، نه فقط از خودِ نمونه:
- روی آن راست‌کلیک کنید و رفتن به مؤلفهٔ اصلی را بزنید.
- در بازرس، در پنل نمونه و زیر نام مؤلفه، رفتن به مؤلفهٔ اصلی را بزنید.
هر کدام، اصل را انتخاب می‌کند و آن را به نما می‌آورد؛ بنابراین پنل همان چیزی را توصیف می‌کند که می‌خواهید ویرایش کنید، نه رونوشتی که از آن آمده‌اید.
پس‌گرفتن شکل‌ها: تکثیر به‌صورت فریم
تکثیر روی یک مؤلفه دقیقاً همان کاری را می‌کند که می‌گوید، نه آنچه شاید منظورتان بوده: روی اصل، اصلِ دومی می‌سازد و روی نمونه، نمونهٔ دومی. هر دو همچنان چیزی را دنبال می‌کنند — که تمام نکتهٔ یک مؤلفه است — و پاسخ نادرست وقتی است که می‌خواهید بگویید «این کارت تقریباً درست است، یکی بدهید که آزادانه تغییرش دهم».
روی یک مؤلفه یا نمونه راست‌کلیک کنید و تکثیر به‌صورت فریم را بزنید. آنچه می‌نشیند یک فریم معمولی پر از شکل‌های معمولی است: همان نقاشی، دیگر چیزی را دنبال نمی‌کند، و همه‌جا قابل ویرایش است. اگر بعدها ارزشش را داشت، از آن یک مؤلفه بسازید — و چون فریم خودش مؤلفه می‌شود، این کار طبقه‌ای اضافه به درخت تحمیل نمی‌کند.
حالت‌های کشیده‌شده با آن نمی‌آیند. حالت، تصویرِ یک مؤلفه است، و رونوشتی که دیگر مؤلفه نیست چیزی ندارد که آن تصویرها از آن باشند.
معمولی کردن یک نمونه: جدا کردن نمونه
روی یک نمونه — یا هر چیزی درون آن — راست‌کلیک کنید و جدا کردن نمونه را انتخاب کنید. همان‌جا که هست به یک فریم معمولی تبدیل می‌شود: همان شکل‌ها، همان جا، دیگر پیرو نسخهٔ اصلی نیست و همهٔ اجزایش ویرایش‌پذیر است. برخلاف تکثیر به‌صورت فریم چیزی کپی نمی‌شود. نسخهٔ اصلی را نمی‌توان جدا کرد؛ آن را حذف کنید.
دادن ویژگی به یک مؤلفه
مؤلفه وقتی ارزش بیشتری دارد که هر نسخه‌اش بتواند چیز دیگری بگوید. ویژگی‌ها همین‌اند و دو گونه‌اند — تفاوتشان در این است که مقدار کجا زندگی می‌کند.
ویژگی‌ها و رویدادها در زبانهٔ صفحه‌اند، زیر رابط مؤلفه — نه در گرافیک کنار رنگ و شعاع گوشه. ویژگی چیزی است که صفحه می‌گذارد و رویداد چیزی است که صفحه می‌شنود؛ هیچ‌کدام واقعیتی دربارهٔ نقشه نیستند و هر دو را عبارت‌های همان زبانه می‌خوانند.
گونهٔ کشیده‌شده: ویژگی یک لایه را تیک بزنید
لایه‌ای را درون اصل انتخاب کنید و زیر «نمایش روی نمونه‌ها» ویژگی‌ای را تیک بزنید — این تیک در
زبانهٔ گرافیک است، همان‌جا که بقیهٔ ویژگی‌های لایه هستند. با این کار ویژگی‌ای به نام همان لایه
اعلام می‌شود — Caption + متن می‌شود captionText — و در فهرست ویژگی‌ها زیر رابط مؤلفه
در زبانهٔ صفحه پیدا می‌شود.
نمونه آن را با ویرایش نسخهٔ خودش می‌گذارد: درون نمونه کلیک کنید، واژه‌ها یا رنگ را تغییر دهید و می‌ماند. همان‌جا روی بوم می‌بینیدش، و کل فایدهٔ این گونه همین است.
گونهٔ مقداری: خودتان یکی بیفزایید
اصلِ مؤلفه را انتخاب کنید، به زبانهٔ صفحه بروید و زیر رابط مؤلفه ← ویژگی‌ها دکمهٔ ＋ ویژگی را بزنید. نام و نوع (متن، عدد، بله / خیر) بدهید.
اگر پیش‌فرضی می‌خواهید، در صفحهٔ کد نوشته می‌شود. با همان اصلِ انتخاب‌شده، نوشتن کد (دکمهٔ
</>) را بزنید، ویژگی را از فهرست کنار ویرایشگر بردارید و عبارت را بنویسید: "Untitled"، 0، false.
این هم مثل هر چیز دیگری در این صفحه BS است، پس همان‌جا نوشته می‌شود که بقیهٔ کدها هستند.
هنوز چیزی دیده نمی‌شود، چون چیزی برایش کشیده نشده. چیزی را به آن ببندید: لایه‌ای را درون اصل
انتخاب کنید و زیر متن (یا نمایش، یا فعال) بنویسید props.title. برای آش نایی با بستن،
صفحه را واکنش‌گر کنید را ببینید.
حالا هر نمونه می‌تواند مقدار خودش را بگیرد: نمونه را انتخاب کنید و پنل نمونه همان ویژگی‌ها را
فهرست می‌کند. ویژگی مقداری یک عبارت می‌گیرد، پس می‌تواند یک مقدار ثابت باشد — "Standard" — یا
از صفحه پیروی کند: state.chosenPlan. با تغییر وضعیت صفحه، کارت هم دنبالش می‌رود.
فقط گونهٔ مقداری را می‌توان با props. خواند. ویژگی کشیده‌شده روی نسخهٔ خودِ نمونه از یک لایه
گذاشته می‌شود و چیزی برای خواندن عبارت باقی نمی‌ماند. اگر می‌خواهید درونِ مؤلفه از مقداری استفاده
کند، اینجا ویژگی بیفزایید و به آن ببندید.
بلندکردن یک رویداد
مؤلفه باید بگوید چه اتفاقی افتاد، نه اینکه معنایش را تعیین کند — این را صفحه‌ای که مؤلفه رویش گذاشته شده تصمیم می‌گیرد، و هر صفحه می‌تواند جور دیگری تصمیم بگیرد.
- اصل را انتخاب کنید، به زبانهٔ صفحه بروید و زیر رابط مؤلفه ← رویدادها دکمهٔ
＋ رویداد را بزنید. نامش را بگذارید:
chosen،submitted. - درون مؤلفه، از هر دست‌گیره‌ای بلندش کنید:
emit("chosen", props.title). آرگومان دوم اختیاری است. - یک نمونه را انتخاب کنید و زبانهٔ صفحهاش را باز کنید. حالا فهرست رویدادهایش رویداد
شما را دارد، با جعبه‌ای برای اینکه
این صفحه چه می‌کند — کد دست‌گیرهٔ معمولی، در دامنهٔ خودِ صفحه. آنچه مؤلفه فرستاده
event.payload است.
یک مؤلفه دو بار روی یک صفحه می‌تواند دو پاسخ متفاوت بدهد، چون دست‌گیره به نمونه تعلق دارد. تفاوت رویداد با یک فیلد وضعیت مشترک همین است.
در نمونهٔ انتخاب یک طرح امتحانش کنید: یک کارت، دو بار گذاشته‌شده، با طرح‌های متفاوت و دو پاسخ متفاوت به یک رویداد.
دادن حالت به یک مؤلفه
یک مؤلفه بسته به اینکه چه هست می‌تواند متفاوت دیده شود: خطا، هشدار، چیزی انتخاب‌شده، چیزی در حال بارگذاری.
حالت‌ها به مؤلفه تعلق دارند و همان‌جا هم تعریف می‌شوند. اصلِ مؤلفه را انتخاب کنید تا پنل مؤلفه آن‌ها را فهرست کند:
- عادی سرِ فهرست است و چیزی برای کشیدن ندارد — خودِ اصل همان عادی است.
- زیر آن، هر حالتی که افزوده‌اید. روی هرکدام بزنید تا به نقشه‌اش بروید.
برای افزودن یکی:
- ا صلِ مؤلفه را انتخاب کنید.
- در پنل مؤلفه، زیر حالت‌ها، نام یک حالت را بنویسید — هر چه صفحه‌تان واقعاً دارد:
invalid،overBudget،awaitingApproval— یا از پیشنهادها یکی را برگزینید. ＋ حالت را بزنید. - یک صیغه درست زیرِ مؤلفه پیدا می‌شود، در همان قابی که مؤلفه در آن است، به نام <مؤلفه> — <حالت>. رنگ‌هایش را تغییر دهید. همین حالت است.
صیغه‌ها کنار مؤلفه زندگی می‌کنند، نه در جعبه‌ای از آنِ خودشان. در ستونِ خودِ مؤلفه روی هم می‌نشینند — دومی زیر اولی و همین‌طور — و اگر مؤلفه درون قابی باشد، آن قاب رو به پایین بزرگ می‌شود تا جا باز کند؛ چیزی که از پیش درونش بوده جابه‌جا نمی‌شود.
پیش‌تر جعبه‌ای دورشان بود به نام صیغه های <مؤلفه>. آن جعبه رفته است: حالت‌های یک مؤلفه همان صیغه‌های آن‌اند، پس جعبه‌ای میان مؤلفه و حالت‌های خودش یک لایهٔ اضافی در درخت لایه‌ها بود و کاری می‌کرد که حالت‌ها مثل فهرستی جداگانه در جایی دیگر خوانده شوند. اگر صفحه‌ای دارید که هنوز یکی از آن‌ها را دارد، همان بار بعد که صفحه را باز کنید از هم باز می‌شود — صیغه‌ها دقیقاً همان‌جا که کشیده شده‌اند می‌مانند و جعبهٔ خالی می‌رود.
هیچ‌چیزی که یک صیغه می‌کشد روی صفحه رندر نمی‌شود. صیغه تصویری از یک مؤلفه است نه بخشی از صفحه، و کامپایلر آن را هرجا که بگذاریدش نادیده می‌گیرد — و همین است که نشستنِ یکی از آن‌ها درون چیدمانِ شما را بی‌خطر می‌کند.
سه قاب هست که صیغه به آن‌ها نمی‌پیوندد و هرکدام دلیلی دارد: قابِ صفحه، چون اندازه‌اش همان اندازهٔ صفحه است و بزرگ‌کردنش هر بار که حالتی بکشید صفحه‌تان را تغییر اندازه می‌دهد؛ قابِ چیدمان خودکار، چون در جریانِ چیدمانِ شما قرار می‌گیرد و نقشه‌تان را کنار می‌زند؛ و مؤلفه‌ای که اصلاً درون قابی نیست. در هر سه، صیغه روی بوم و زیرِ مؤلفه می‌نشیند.
نامی که به آن صیغه می‌دهید همان نام حالت است. همین و بس: فهرست دومی نیست که لازم باشد با نقشه‌ها هماهنگ نگه دارید.
تنها جایی که حالت افزوده می‌شود همین‌جاست. یک شیء معمولی حالتی ندارد: زبانهٔ صفحهاش همین را می‌گوید و به ساخت مؤلفه اشاره می‌کند. یک حرکت، در یک جا، کنار فهرست حالت‌هایی که از پیش هستند — و اگر تنها چیزی که می‌خواستید یک حالتِ اشاره روی یک دکمه است، مؤلفه‌ای با یک نمونه هم کاملاً درست است.
خودِ نشانگر
جعبه‌ای که کاری می‌کند دقیقاً شبیه جعبه‌ای است که نمی‌کند، و نشانگر ماوس تنها چیزی است که پیش از کلیک به کسی می‌گوید کدام است.
هر شیئی را انتخاب کنید؛ تبِ صفحهاش یک انتخابگرِ نشانگر دارد: دست، متن، جابه‌جایی، گرفتن، مجاز نیست، مشغول یا پیکان. اگر روی یک صیغه تنظیمش کنید فقط در همان حالت اعمال می‌شود، و معمولاً همین را می‌خواهید: «دست» روی صیغهٔ اشاره‌شده، راهی است که یک کارتِ کشیده‌شده می‌گوید می‌توان فشارش داد.
هیچ هزینه‌ای ندارد. نشانگر بخشی از نقاشی است، پس همراه هر تفاوت دیگری که آن حالت می‌سازد به شیوه‌نامهٔ صفحه می‌رود — نه دستوری، و نه چیزی که با حرکت ماوس اجرا شود.
گزینهٔ خالی همان‌طور که هست است و با پیکان یکی نیست. تنظیم‌نشده یعنی «هرچه به‌هرحال می‌بود»، که برای یک دکمهٔ واقعی از پیش دست است؛ پیکان یعنی شما حتی آنجا هم پیکان می‌خواهید.
در حالی که نشانگر رویش است
یک صیغه را انتخاب کنید تا زبانهٔ صفحهاش یک انتخابگر در حالِ داشته باشد: همیشه، یا اشاره‌شده، فشرده، فوکوس‌شده.
این نیمهٔ دوم چیزی است که حالت هست، و روی خودِ نقشه زندگی می‌کند چون پاسخ همان‌جا آشکار است: این تصویرِ «نامعتبر» است، و این همان است که «نامعتبر» زیر نشانگر چگونه دیده می‌شود. دوباره هم می‌شود پاسخش داد — «نامعتبر»ی که هفتهٔ پیش کشیده‌اید بدون بازنویسی یا بازکشیدن می‌شود «نامعتبر در حالِ اشاره‌شده».
دو کاری که نمی‌کند، و دلیل هر دو را می‌گوید:
- تداخل نمی‌سازد. اگر از پیش «نامعتبر در حالِ اشاره‌شده» دارید، انتخابگر از ساختن دومی سر باز می‌زند — یک نقشه برای هر حالت، وگر نه هیچ‌چیز نمی‌تواند بگوید کدام‌یک منظور بوده.
- روی حالتی که فقط تعامل است، «همیشه» خاکستری است. صیغه‌ای به نام
hoverهمان حالت اشاره‌شده است؛ برداشتن تعامل، آن را بی‌نام می‌گذارد. اگر حالتی می‌خواهید که به تعامل گره نخورده باشد، یکی با نام خودتان بکشید —overBudget.
گذاشتن «در حالِ» روی یک حالت، هر نمونهای را که آن حالت را نشان می‌داد از پین درمی‌آورد، چون فقط حالتِ بدون تعامل پین‌شدنی است — هیچ‌چیز نمی‌تواند اعلام کند چیزی برای همیشه اشاره‌شده است.
روی یک نمونه نمی‌توانید حالت بکشید و بازرس هم همین را می‌گوید. حالتی روی یک رونوشت، حالتی است که فقط همان رونوشت دارد — از دید مؤلفه نامرئی، در نمونه‌های دیگر غایب، و با نخستین بازنشانی نابود. به مؤلفهٔ اصلی بروید و آنجا بیفزایید تا هر نمونه بتواند در آن حالت نشان داده شود.
نام حالت از آنِ شماست. نامعتبر، موفق و بقیه فقط پیشنهادند: awaitingApproval،
overBudget یا هر چه این صفحه واقعاً دارد را بنویسید؛ دقیقاً مثل پیشنهادها رفتار می‌کند. از حرف،
رقم، - و _ استفاده کنید و با حرف شروع کنید.
تعامل‌ها ثابت‌اند و تنها جایی‌اند که نمی‌توانید نام تازه بسازید: اشاره‌شده، فشرده و متمرکز از آنِ مرورگرند — به همین دلیل هزینه‌ای ندارند و بدون نوشتن چیزی کار می‌کنند.
«غیرفعال» یک نام است، نه یک «در حالِ». پیش‌تر مدخل چهارمِ همان انتخابگر بود و جایش آنجا نیست:
آن سه تای بالا کارهایی‌اند که کسی دارد انجام می‌دهد و هر کدام همان لحظه که بایستد تمام می‌شود.
غیرفعال چیزی است که کنترل هست — صفحهٔ شما تصمیمش را گرفته — پس یک نام حالت عادی است و
disabled نوشته می‌شود.
تنها نامی هم هست که هرگز لازم نیست بگویید کِی روشن است. صفحه از پیش می‌داند، از تیکِ غیرفعال
کنترل یا از عبارتِ فعال آن. نام یک صیغه را disabled بگذارید و کنترلی که نمی‌شود از آن استفاده
کرد همان را می‌پوشد، بی‌آنکه عبارتی بنویسید.
حالا روی هر نمونهای از آن مؤلفه، بازرس نمایش در حالت را پیشنهاد می‌کند. نامعتبر را برگزینید و همان نمونه به‌شکل خطا کشیده می‌شود، همان‌جا روی بوم، در حالی که صفحه را می‌چینید. بقیه عادی می‌مانند.
عادی همان اصل است. چیزی برای کشیدنش نیست و چیزی برای انتخاب کردن نیست — ماندن نمایش در حالت روی عادی یعنی «همان‌طور که کشیدید».
فقط فهرست سمت راست را می‌توان نمایش داد. نمایش در حالت گزینه‌های نامعتبر، موفق و مانند آن را می‌دهد، اما اشاره‌شده را نه — آن را مرورگر تصمیم می‌گیرد، و صفحه‌ای که ادعا کند چیزی همیشه اشاره‌شده است، صفحه‌ای است که دروغ میگو ید. حالت اشاره‌شده را بکشید، باز هم کار می‌کند؛ فقط انتخابش نمی‌کنید.
دو نکتهٔ دیگر:
- فقط تفاوت‌ها نگه داشته می‌شوند. رنگ کادر رونوشت را تغییر دهید و معنای حالت همان رنگ کادر است. بعداً اندازهٔ اصل را تغییر دهید و همهٔ حالت‌ها دنبالش می‌آیند، چون حالت هرگز اندازه و جا را عوض نمی‌کند.
- ترکیب‌ها خودشان پس‌نشینی می‌کنند. اگر موفق و موفق + اشاره‌شده را بکشید، کاربری که به آن اشاره می‌کند دومی را می‌بیند و کاربری که اشاره نمی‌کند اولی را. اگر فقط موفق را کشیده باشید، اشاره‌کردن هم موفق را نشان می‌دهد. هرگز لازم نیست همهٔ ترکیب‌ها را بکشید.
روشن‌کردن حالت از کد
انتخاب حالت هنگام طراحی نیمی از کار است. نیم دیگر آن است که صفحهٔ در حال اجرا تغییرش دهد، و آن یک خط در یک رویدادگردان است:
setVisualState("invalid");
setVisualState("") آن را به عادی برمی‌گرداند. هر جا که صفحه خبردار می‌شود بنویسیدش — کلیکِ یک
دکمه، تغییرِ یک کادر — در صفحهٔ کد، همان‌جایی که هر رویدادگردان دیگری نوشته می‌شود. برای
اینکه یک رویدادگردان چه می‌تواند بکند، کاری کنید صفحه واکنش نشان دهد را
ببینید.
نام هیچ شیئی را نمی‌برد و لازم هم ندارد. حالتی که تغییر می‌دهد از آنِ نزدیک‌ترین چیزی است که روی خودِ رویدادگردان یا بالای آن حالتی کشیده شده باشد. حالتی از یک کارت بکشید، رویدادگردانی به دکمه‌ای درون همان کارت ببندید، و فراخوانی دربارهٔ کارت است — که در هر نقشه‌ای همان پاسخ درست است، چون حالت روی شیئی کشیده می‌شود که تغییرش می‌دهد و رویدادگردان به چیزی درون آن بسته می‌شود.
حالت به شیئی تعلق دارد که روی آن کشیده شده، و به درونِ آن هم می‌رسد: حالتی از یک کارت بکشید و برچسب، کادر و هر چیز دیگری که در رونوشت تغییر داده‌اید، همه با هم دنبال می‌کنند. یک فراخوانی، و یک جا برای نگاه‌کردن وقتی حالتی روشن است و نباید باشد.
حالت‌های تعاملی از کد تنظیم نمی‌شوند و پنل همین را می‌گوید: مرورگر خودش می‌داند چه وقت به چیزی اشاره شده، فشرده شده یا فوکوس دارد.
حالتی که هیچ‌چیز روشنش نمی‌کند هم کار می‌کند — همان است که نمایش در حالت هنگام چیدن صفحه نمونه را به آن سنجاق می‌کند. کد، وقتی حرف بزند، جای سنجاق را می‌گیرد.
اینجا دکمهٔ «افزودن شرط» بود و دیگر نیست. عبارتی می‌گرفت که صفحه مدام بازبینی‌اش می‌کرد، و این یعنی صفحه دو راه برای تصمیم‌گیری دربارهٔ ظاهر چیزها داشت — صیغه‌ای که خودش را روشن می‌کرد، کنار رویدادگردان‌هایی که نمی‌توانستند دستش بزنند، و هیچ‌چیز روی بوم نمی‌گفت کدام‌یک برای یک صیغهٔ معیّن به‌کار رفته. حالا صفحه در یک جا تصمیم می‌گیرد.
هزینه‌اش واقعی است و دانستنش می‌ارزد: شرط همان لح ظه که صفحه بار می‌شد خودش را روشن می‌کرد، اما رویدادگردان فقط وقتی اتفاقی بیفتد اجرا می‌شود. اگر حالتی باید پیش از هر کاری روشن باشد، آن را با نمایش در حالت سنجاق کنید — سنجاق همیشه برای همین بوده، و نخستین بار که رویدادگردانی حرف بزند کد جایش را می‌گیرد.
رنگ‌های پوسته
زیر انتخابگرهای رنگِ پُرکننده و کادر، ردیفی از نمونه‌رنگ‌های گرد هست. آن‌ها رنگ‌های پوستهٔ پلتفرم‌اند — پس‌زمینه، سطح، متن، متن فرعی، کادر، اصلی، خطا، موفقیت.
به‌جای یک رنگ یکی از این‌ها را بردارید و آن شیء دیگر آن رنگ نیست، بلکه آن نقش است. و این مهم است چون:
- پوستهٔ خواننده را دنبال می‌کند. کسی که پارس‌ور را در حالت تیره به کار می‌برد صفحهٔ شما را تیره می‌بیند: سطح‌ها تیره، متن روشن، کادرها متناسب. لازم نیست دو بار بکشید.
- رنگ تأکید مستأجر را دنبال می‌کند. «اصلی» همان رنگ تأکیدی است که انتخاب شده، نه آبی‌ای که شما در ۱۴۰۵ برداشته‌اید.
ماه را در نوار ابزار ب زنید تا طرحتان را تیره ببینید و خورشید را بزنید تا برگردید. این کلید فقط آنچه را می‌بینید عوض می‌کند — پوستهٔ خودِ برنامه را تغییر نمی‌دهد؛ آن در تنظیمات است.
کلیک دوباره روی نمونه‌رنگی که برگزیده‌اید آن را جدا می‌کند و همان رنگی که نشان می‌داد به‌صورت رنگ معمولی می‌ماند. اگر تصمیم گرفتید همان خاکستری دقیق را می‌خواستید، راه بازگشت همین است.
قاب سبک‌ها در یک طرح تازه از پیش با رنگ‌های پوسته ساخته شده است. شکل‌هایتان را به آن نمونه‌رنگ‌ها وصل کنید تا همه‌چیز رایگان پوسته را دنبال کند.
سبک‌های مشترک
سبک م شترک شکلی است که بقیه از آن پیروی می‌کنند. شکلی را انتخاب کنید و ذخیره به‌عنوان رنگ (پرِ آن) یا ذخیره به‌عنوان شکل (پر، حاشیه، گردی گوشه، شفافیت و سایه) را بزنید؛ متن ذخیره به‌عنوان متن دارد. شکل روی بوم می‌ماند و بخش سبک آن می‌گوید چند شکل از آن پیروی می‌کنند.
برای پیروی، فهرست بالای یکدست، خطی و شعاعی را در بخش پر باز کنید، یا فهرست سبک در بالا را برای سبک شکل، یا فهرست سبک متن را در بخش متن. شکلِ خود سبک را تغییر دهید تا هرچه از آن پیروی می‌کند تغییر کند. به پیرو مقداری از خودتان بدهید تا دیگر پیروی نکند؛ لغو سبک سبک را دوباره شکلی معمولی می‌کند و شکل‌های پیرو مقدارهایشان را نگه می‌دارند. درج ← سبک‌های پیش‌فرض مجموعه‌ای آماده می‌افزاید.
این فهرست‌ها با صفحه‌کلید هم کار می‌کنند: Enter یا Space بازش می‌کند، کلیدهای جهت در آن جابه‌جا می‌شوند و Escape می‌بندد.
پیش‌نیازها
- صفحه‌ای برای کشیدن — ساخت برنامهٔ استودیو را ببینید.
گام‌ها
- چیزی را که می‌خواهید دوباره استفاده کنید بکشید — نشان وضعیت، یک فیلد با برچسبش، یک کارت.
- انتخابش کنید، راست‌کلیک، ساخت مؤلفه.
- از فهرست مؤلفه‌ها دو بار بیرون بکشید.
- اصل را انتخاب کنید و زیر حالت‌ها نام invalid را بنویسید، سپس ＋ حالت را بزنید.
- کادر صیغه را به رنگ پوستهٔ خطا تغییر دهید.
- نمونهٔ دوم را انتخاب کنید و نمایش در حالت را روی نامعتبر بگذارید. روی بوم تغییر می‌کند.
- ماه را در نوار ابزار بزنید. هرچه با رنگ پوسته کشیده شده دنبال می‌کند.
- ذخیره را بزنید.
رفع اشکال
- فهرست مؤلفه‌ها خالی است. — هنوز چیزی در این طرح مؤلفه نیست. چند شیء را انتخاب کنید و ساخت مؤلفه را بزنید.
- نمایش در حالت پیشنهاد نمی‌شود. — یا شیء انتخاب‌شده نمونه نیست (بیرونی‌ترین کادرش را انتخاب کنید)، یا مؤلفه‌اش هنوز هیچ حالتی ندارد: اصل را انتخاب کنید و زیر حالت‌ها یکی بیفزایید.
- دکمهٔ ＋ حالت نیست. — شیء انتخاب‌شده اصلِ یک مؤلفه نیست. بیرونی‌ترین کادر مؤلفه را انتخاب کنید، یا روی یک نمونه نامش را بزنید تا به آنجا بروید.
- دکمهٔ ＋ نمونه دیگر نیست. — گذاشتن نسخهٔ تازه کارِ فهرست مؤلفه‌ها است: مؤلفه را دقیقاً به جایی که می‌خواهید بکشید. راست‌کلیک ← نمونه هم همچنان کار می‌کند.
- ویژگی افزودم و چیزی تغییر نکرد. — برای ویژگی مقداری چیزی کشیده نشده. درون اصل چیزی را به
props.<name> ببندید، وگرنه مقداری است که کسی نمی‌خواندش. -
props.something در یک عبارت خالی است. — یا مؤلفه ویژگی‌ای به این نام ندارد، یا آنکه دارد از گونهٔ کشیده‌شده است که عبارت نمی‌تواند بخواندش. یک ویژگی مقداری بیفزایید و به آن ببندید. - رویدادم کاری نمی‌کند. — سه چیز را بررسی کنید: مؤلفه آن را اعلام کرده باشد (رویدادها، روی
اصل)، دست‌گیره‌ای درون مؤلفه واقعاً
emit("name") را صدا بزند، و نمونه برایش دست‌گیره داشته باشد. مؤلفه‌ای که رویدادی بلند کند و کسی پاسخش ندهد خطا نیست. - نمونهای را به حالتی وصل کردم و چیزی تغییر نکرد. — رونوشت حالت با اصل یکسان است. رنگی را روی رونوشت تغییر دهید.
- کشیدن کار نمی‌کند. — روی خود بوم رها کنید، نه روی پنل. یا فقط روی ردیف کلیک کنید: در میانهٔ نما می‌نشیند.
- پیش‌نمایش تیره هیچ فرقی ندارد. — طرح از رنگ‌های معمولی استفاده می‌کند نه رنگ‌های پوسته. از نمونه‌رنگ‌های گرد زیر انتخابگر رنگ بردارید.
- کنترل من رنگ پوسته‌ای را که دادم نادیده می‌گیرد. — ظاهر کنترل از آنِ پلتفرم است، پس خودش پوسته را دنبال می‌کند؛ فقط جا و اندازه‌اش از طرح شما می‌آید.
- نمونه را ویرایش کردم و برگشت. — آن ویژگی به اصل قفل است. لایهٔ متناظر را درون اصل انتخاب کنید و زیر نمایان‌سازی روی نمونه‌ها تیک بزنید.
- حالتی را حذف کردم و نمونه‌هایی که از آن استفاده می‌کردند دوباره عادی شدند. — عمدی است: نمونهای که به حالتِ حذف‌شده وصل بود به عادی برمی‌گردد، نه اینکه ناپدید شود.
نکته: بخشی از یک مؤلفه دیگر با کشیدن از آن بیرون نمی‌رود. برچسبِ درون یک دکمه هر جا که بگذاریدش می‌رود — حتی بیرون از لبهٔ دکمه — و همچنان بخشی از د کمه می‌ماند. فقط قابِ خودِ مؤلفه است که به درون و بیرونِ قاب‌های پیرامونش جابه‌جا می‌شود.
حذف یک حالت، یا کلِّ یک مؤلفه
هر دو اول می‌پرسند — و هر دو فقط وقتی چیزی برای از دست دادن هست.
- حذف یک حالت (همان ✕ کنارش در فهرست حالت‌ها) نقشه‌اش را می‌برد، و هر نمونهای که در آن حالت نمایش داده می‌شد به عادی برمی‌گردد. اگر چیزی به آن سنجاق نشده باشد، بی‌هیچ پرسشی حذف می‌شود.
- حذف یک مؤلفه (اصلش را برگزینید و Delete بزنید) نمونه‌هایش و هر حالتی که برایش کشیده شده را با خود می‌برد، و پنجرهٔ تأیید هر دو را می‌شمارد. همین یکی است که ارزش خواندن دارد: ممکن است نمونه‌ها در بخش دیگری از صفحه باشند، نه آنجا که اصل را برگزیده‌اید، و صیغه‌ها هم کنارش‌اند. مؤلفه‌ای که هیچ‌کدام را ندارد بی‌هیچ پرسشی حذف می‌شود.
- حذف چیزی که مؤلفه‌ای درونش کشیده شده — قابی که کارتی را در آن به مؤلفه تبدیل کرده‌اید — آن مؤلفه را هم برمی‌دارد، و اول می‌پرسد و می‌گوید چند تا می‌روند. این همان زیانی است که از روی چیزی که برگزیده‌اید دیده نمی‌شود: قاب فقط شبیه یک قاب است.
مورد آخر پیش‌تر بی‌صدا رخ می‌داد و ارزش یک اصلاح جداگانه را داشت. مؤلفه از بوم برداشته می‌شد و تعریفش می‌ماند و به نقشه‌ای اشاره می‌کرد که دیگر وجود نداشت — پس پالت همچنان آن را فهرست می‌کرد، کشیدنش هیچ کاری نمی‌کرد، و یک قطعهٔ مشترک در آن حال هنگام ذخیره می‌گفت هنوز چیزی اینجا مؤلفه نیست. اگر قطعه‌ای در این حال دارید، بازکردنش اکنون آن شبح را پاک می‌کند و صادقانه می‌بینید که چیزی برای گذاشتن در آن نیست.
برای حرکتی که فقط روی همان چیزِ برگزیده اثر دارد هیچ پنجره‌ای ظاهر نمی‌شود، چون تأییدیه‌ای که می‌پرسد آیا همان کاری را که همین حالا کردید می‌خواستید، کلیکی است که یاد می‌دهد دیگر نخوانید.
یک حذف هست که می‌پرسد، و سرِ ذخیره می‌پرسد: مؤلفه‌ای که برنامه‌های دیگر آن را گذاشته‌اند. مؤلفه‌های شما به همهٔ برنامه‌های دیگرِ محیط پیشنهاد می‌شوند، پس حذف یکی تغییری در آن‌هاست — پرسش نامشان را می‌برد و لغو، بوم شما را دقیقاً همان‌طور که هست می‌گذارد. ببینید استفاده از یک مؤلفه در برنامه‌ای دیگر.