إعادة استخدام تصميم بالمكوّنات

الهدف

ارسم الشيء مرة واحدة، واستخدمه في كل مكان، واجعله يبدو صحيحًا في الوضعين الفاتح والداكن معًا.

ثلاثة أشياء تعمل معًا: لوحة المكوّنات التي تسحب منها، والحالات التي يمكن عرض المكوّن فيها، وألوان السمة التي تتبع القارئ لا المؤلّف.

لوحة المكوّنات

اللوحة المجاورة للوحة الرسم تعرض القائمتين معًا: الطبقات في الأعلى، وهو المعروف لديك، والمكوّنات تحتها. اسحب الخط بينهما لتوسيع إحداهما — شجرةٌ عميقة تريد قسمةً وتصميمٌ مليء بالمكوّنات يريد أخرى — واسحب الحافة الخارجية للوحة لتوسيعها كلّها. والخطّان يعملان بمفاتيح الأسهم أيضًا، لا بالفأرة وحدها.

اضغط عنوان أي قائمة لطيّها، فتأخذ الأخرى اللوحة كلّها؛ واضغطه ثانيةً لتعود القائمة والخط حيث تركته بالضبط. تبقى إحدى القائمتين مفتوحة دائمًا، لذا لا يستجيب عنوان آخر قائمة مفتوحة.

تحتوي المكوّنات على هذه القوائم:

المجموعة	ما هي
عناصر التحكم	عناصر المنصة نفسها — زر، مربع نص، منطقة نص، مربع تعليم، قائمة منسدلة، منتقي تاريخ، منتقي ملفات
العناصر	ما تُبنى منه الشاشة — الشاشة، منطقة، قائمة، عنصر قائمة، عنوان، فقرة، رابط
من تطبيقات أخرى	تظهر هنا المكوّنات المرسومة في تطبيقات الحلّ الأخرى، جاهزة للوضع.
المكوّنات	ما صنعته أنت في هذا التصميم

اسحب أحدها إلى لوحة الرسم فيستقر حيث أفلتّه. أو انقره (أو اضغط Enter) فيستقر في منتصف ما تنظر إليه — وهو ما يهمّ إن كنت تعمل دون فأرة.

سحب عنصر تحكم من هذه اللوحة هو الطريق السريع إلى عنصر حقيقي: يصل وهو مربع نص فعلًا، وبحجم مربع النص تقريبًا ومطليًّا مثله، بدل أن يصل مستطيلًا عليك تصنيفه في المُفتّش بعد ذلك.

وسحب عنصر هو كيف تبني هيكل الشاشة. المنطقة تصل معيَّنة أصلًا فتصير <section> حقيقيًّا والعنوان عنوانًا حقيقيًّا — وهذا ما يضع شاشتك في مخطّط قارئ الشاشة وما يجعل Ctrl+F يجد نصّك. ويمكن تعيين المستطيل العادي لاحقًا من تبويب الشاشة؛ لكن إسقاط العنصر يعفيك من تذكّر ذلك.

لا أشكال في هذه اللوحة

كانت فيها، ثم عادت إلى حيث تعمل: شريط الأدوات في أقصى اليسار فيه كل شكل، والأداة وضع — تختارها ثم تسحب الحجم الذي تريد، وهذا ما تريده لخطّ أو لمسار قلم حيث السحب هو الشكل. أما هذه اللوحة فارتفاعها نصف الشريط الجانبي وتتقاسمه مع شجرة الكائنات، فتحتفظ بما لا يمكن الحصول عليه إلا هنا.

ملاحظة

لا تظهر عناصر التحكم ولا العناصر إلا حين تصمّم شاشة. في تقرير أو لوحة معلومات لا يعني مربع النص شيئًا ولا تعني المنطقة شيئًا، فلا يُعرض أيٌّ منهما.

إنشاء مكوّن

حدّد العناصر التي تريد إعادة استخدامها، انقر بالزر الأيمن، واختر إنشاء مكوّن. تصير أصلًا لمكوّن — ويظهر الأصل في لوحة المكوّنات فورًا.

ما حدّدته هو المكوّن نفسه. إن حدّدت شيئًا واحدًا — بطاقة رسمتها داخل إطار، أو شارة رسمتها مستطيلًا واحدًا، أو مجموعة تضمّ أيقونة وعنوانها — فذلك الشيء هو الأصل، في مكانه الذي كان فيه، ويأخذ المكوّن اسمه. لا يُضاف شيء فوقه، فلا تكبر الشجرة طبقةً ولا يجلس «مكوّن» فوق الاسم الذي اخترته. أما إن حدّدت عدّة أشياء معًا فتُلَفّ في إطار، لأن المكوّن يحتاج جذرًا واحدًا والتحديد المتفرّق بلا جذر.

ولأن المكوّن هو الشيء نفسه، فاسمه يتبعه: غيّر اسم الطبقة يتغيّر اسم المكوّن معها، في لوحة المكوّنات وفي كل موضع يُعرض فيه.

من ثَمّ:

• اسحبه من اللوحة بقدر ما تشاء. كل واحد نسخة.
• حرّر الأصل فتتغير كل النسخ معه.
• أضف إليه جزءًا لاحقًا. حدّد الأصل، واضغط Shift+2 لإظهاره، وضع داخله شيئًا من اللوحة: نصًا أو رابطًا أو زرًا. يصبح جزءًا من المكوّن، وتحصل عليه كل نسخة.
• اختر ما يجوز للنسخة تغييره. حدّد طبقة داخل الأصل وعلّم الخصائص التي تريد للنسخ أن تتجاوزها. وكل ما لا تعلّمه يبقى مقفلًا على الأصل — وهذا هو المقصود: المكوّن لا يستحق إلا إذا كان فعلًا واحدًا في كل مكان.

تمييز الأصل من النسخة

في قائمة الطبقات لكلٍّ منهما رمز مختلف، فتعرف أيّهما بنظرة واحدة دون أن تنقر شيئًا: المعيَّن الرباعي هو الأصل — التعريف الواحد — والمعيَّن المفرغ المفرد نسخة منه. مرِّر المؤشّر فوق أيٍّ منهما لترى اسمه بالكلمات. ولا يُعلَّم إلا الصف الخارجي لكلٍّ منهما؛ أما الطبقات في داخله فهي تابعة له ولا تُعلَّم مرة أخرى.

الانتقال من نسخة إلى أصلها

لا يمكن تحرير النسخة حيث هي، فإن أردت تغييرها فعليك الذهاب إلى أصلها. وهناك طريقتان، وكلتاهما تعملان من طبقة داخل النسخة كما تعملان من النسخة نفسها:

• انقر عليها بالزر الأيمن واختر الانتقال إلى المكوّن الرئيسي.
• في المفتّش، اضغط الانتقال إلى المكوّن الرئيسي في لوحة نسخة، تحت اسم المكوّن.

وكلتاهما تحدّد الأصل وتُحضره إلى العرض، فتصف اللوحة ما أنت على وشك تحريره لا النسخة التي جئت منها.

استعادة الأشكال: تكرار كإطار

تكرار على مكوّن يفعل ما يقوله لا ما قد تقصده: على الأصل يصنع أصلًا ثانيًا، وعلى النسخة نسخةً ثانية. وكلاهما يظل يتبع شيئًا — وهذا هو جوهر المكوّن — وهو الجواب الخطأ حين يكون مرادك «هذه البطاقة تكاد تكون صحيحة، أعطني واحدة أغيّرها بحرية».

انقر بالزر الأيمن على مكوّن أو نسخة واختر تكرار كإطار. ما ينزل إطارٌ عادي مملوء بأشكال عادية: الرسم نفسه، لم يعد يتبع شيئًا، وقابل للتحرير في كل موضع. اصنع منه مكوّنًا لاحقًا إن استحق — وبما أن الإطار يصير المكوّن نفسه، فلن يكلّفك ذلك طبقة زائدة في الشجرة.

ولا تأتي معه الحالات المرسومة. الحالة صورةٌ لمكوّن، ونسخةٌ لم تعد مكوّنًا لا شيء لديها لتكون تلك الصور صورًا له.

جعل النسخة عادية: فصل النسخة

انقر بزر الفأرة الأيمن على نسخة — أو على أي شيء داخلها — واختر فصل النسخة. تصبح إطارًا عاديًا في مكانها: الأشكال نفسها، والموضع نفسه، ولم تعد تتبع الأصل، وكل جزء منها قابل للتحرير. لا يُنسخ شيء، بخلاف تكرار كإطار. لا يمكن فصل الأصل؛ احذفه بدلًا من ذلك.

منح المكوّن خصائص

تزداد قيمة المكوّن حين تستطيع كل نسخة منه أن تقول شيئًا مختلفًا. تلك هي الخصائص، وهي نوعان — والفرق بينهما أين تسكن القيمة.

ملاحظة

الخصائص والأحداث في تبويب الشاشة، تحت واجهة المكوّن — لا في «الرسم» مع الألوان وأنصاف الأقطار. الخاصية شيء تضبطه الشاشة والحدث شيء تسمعه؛ وليس أيٌّ منهما واقعةً عن الرسم، وكلاهما تقرؤه تعبيرات التبويب نفسه.

النوع المرسوم: علّم خاصية طبقة

حدّد طبقة داخل الأصل وعلّم خاصية تحت «العرض على النسخ» — هذا التعليم في تبويب الرسم، حيث بقيّة خصائص الطبقة. بذلك تُعلَن خاصية باسم تلك الطبقة — Caption + النص تصبح captionText — وتظهر في قائمة الخصائص تحت واجهة المكوّن في تبويب الشاشة.

تضبطها النسخة بتحرير نسختها الخاصة: انقر داخل النسخة، غيّر الكلمات أو اللون، فيبقى التغيير. وتراه على لوحة الرسم وأنت ترتّب الشاشة، وهذا كل مقصد هذا النوع.

نوع القيمة: أضِف واحدة بنفسك

حدّد أصل المكوّن، وانتقل إلى تبويب الشاشة، واضغط ＋ خاصية تحت واجهة المكوّن ← الخصائص. امنحها اسمًا ونوعًا (نص، رقم، نعم / لا).

وإن أردت قيمة افتراضية، فتُكتب في صفحة الكود. مع بقاء الأصل محدَّدًا، اضغط كتابة كود (زر </>)، واختر الخاصية من القائمة التي بجانب المحرِّر، واكتب التعبير: ‎"Untitled"‎ أو 0 أو false. وهي BS كأي شيء آخر في هذه الشاشة، فتُكتب حيث بقية الكود.

لن يظهر شيء بعد، لأنه لا شيء مرسوم لها. اربط بها شيئًا: حدّد طبقة داخل الأصل، وتحت النص (أو الظهور أو مفعّل) اكتب props.title. وانظر اجعل الشاشة تتفاعل لكيفية الربط.

الآن تستطيع كل نسخة أن تأخذ قيمتها: حدّدها، فتسرد لوحة النسخة الخصائص نفسها. تأخذ خاصية القيمة تعبيرًا، فقد تكون قيمة ثابتة — ‎"Standard"‎ — أو تتبع الشاشة: ‎state.chosenPlan‎. وحين تتغير حالة الشاشة تتبعها البطاقة.

ملاحظة

نوع القيمة وحده يمكن قراءته بـ ‎props.‎ فالخاصية المرسومة تُضبط على نسخة الطبقة الخاصة بالنسخة، ولا يبقى للتعبير ما يقرأه. فإن أردت أن يستخدم داخلُ المكوّن قيمةً، أضِف خاصية هنا واربط بها.

رفع حدث

ينبغي أن يقول المكوّن ما الذي حدث لا أن يقرّر معناه — تقرّر ذلك الشاشة التي وُضع عليها، ولكل شاشة أن تقرّر على نحو مختلف.

1. حدّد الأصل، وانتقل إلى تبويب الشاشة، واضغط ＋ حدث تحت واجهة المكوّن ← الأحداث. سمِّه: chosen أو submitted.
2. من أي معالج داخل المكوّن، ارفعه: ‎emit("chosen", props.title)‎. والوسيط الثاني اختياري.
3. حدّد نسخة وافتح تبويب الشاشة لها. صارت قائمة الأحداث فيها تضمّ حدثك، ومعه مربّع لما تفعله هذه الشاشة — كود معالج عادي في نطاق الشاشة نفسها. وما أرسله المكوّن هو ‎event.payload‎.

المكوّن نفسه موضوعًا مرتين على الشاشة نفسها قد يجيب إجابتين، لأن المعالج ملك النسخة. وهذا هو الفرق بين الحدث وحقل حالة مشترك.

تلميح

جرّبه في نموذج اختر خطة: بطاقة واحدة موضوعة مرتين، بخطتين مختلفتين وإجابتين مختلفتين عن الحدث نفسه.

منح المكوّن حالات

قد يبدو المكوّن مختلفًا بحسب ما هو عليه: خطأ، تحذير، شيء محدَّد، شيء ما يزال يُحمَّل.

الحالات ملك للمكوّن، وعنده تُعرَّف. حدّد أصل المكوّن فتسردها لوحة المكوّن:

• عادي يتصدّر القائمة ولا شيء يُرسم له — الأصل نفسه هو عادي.
• تحته كل حالة أضفتها. اضغط أيّها لتنتقل إلى رسمها.

لإضافة واحدة:

1. حدّد أصل المكوّن.
2. في لوحة المكوّن، تحت الحالات، اكتب اسم حالة — أيّ اسم تحمله شاشتك فعلًا: invalid أو overBudget أو awaitingApproval — أو اختر أحد الاقتراحات. اضغط ＋ حالة.
3. تظهر صيغة أسفل المكوّن مباشرة، في الإطار نفسه الذي فيه المكوّن، باسم <المكوّن> — <الحالة>. غيّر ألوانها. تلك هي الحالة.

تلميح

الصيغ تعيش بجوار المكوّن، لا في صندوق خاص بها. تتراصّ في عمود المكوّن نفسه — الثانية أسفل الأولى وهكذا — وإن كان المكوّن داخل إطار، كبر ذلك الإطار نزولًا ليتّسع؛ ولا يتحرّك شيء ممّا فيه أصلًا.

كان حولها صندوق اسمه صيغ <المكوّن>. وقد زال: فحالات المكوّن هي صيغه، وصندوق بين المكوّن وحالاته كان مستوى زائدًا في شجرة الطبقات وجعل الحالات تُقرأ كقائمة منفصلة محفوظة في مكان آخر. وإن كانت لديك شاشة ما زالت تحمل واحدًا، فإنه يتفكّك في المرة التالية التي تفتح فيها تلك الشاشة — تبقى الصيغ في موضع رسمها بالضبط، ويذهب الصندوق الفارغ.

ولا يُرسم على الصفحة شيء ممّا ترسمه الصيغة. الصيغة صورة لمكوّن لا جزء من الشاشة، والمترجم يتخطّاها أينما وضعتها — وهذا ما يجعل جلوس إحداها داخل تخطيطك آمنًا.

وثلاثة أُطر لا تنضمّ إليها الصيغة، ولكلٍّ سبب: إطار الشاشة، لأن مقاسه هو مقاس الشاشة وتكبيره يغيّر مقاس شاشتك كلما رسمت حالة؛ وإطار التخطيط التلقائي، لأنه سيُدرَج في تدفّق تخطيطك ويزيح رسمك؛ ومكوّن ليس داخل إطار أصلًا. وفي الثلاثة تجلس الصيغة على اللوحة أسفل المكوّن.

الاسم الذي تعطيه للصيغة هو اسم الحالة. هذا كل شيء: لا قائمة ثانية يلزم إبقاؤها متوافقة مع الرسوم.

وهذا هو الموضع الوحيد الذي تُضاف فيه حالة. الكائن العادي لا حالات له: تبويب الشاشة يقول ذلك ويشير إلى إنشاء مكوّن. حركة واحدة، في موضع واحد، بجانب قائمة الحالات الموجودة — ومكوّن بنسخة واحدة صحيح تمامًا إن كان كل ما تريده حالة إشارة على زرّ واحد.

المؤشّر نفسه

الصندوق المرسوم الذي يفعل شيئًا يبدو تمامًا كالصندوق الذي لا يفعل، ومؤشّر الفأرة هو الشيء الوحيد الذي يخبر أحدًا أيّهما — قبل أن ينقر.

حدّد أي كائن فيظهر في تبويب الشاشة منتقي المؤشّر: يد، نص، تحريك، إمساك، غير مسموح، مشغول، أو سهم. اضبطه على صيغة فينطبق في تلك الحالة وحدها، وهو المطلوب عادةً: «اليد» على صيغة الإشارة هي كيف تقول بطاقةٌ مرسومة إنها قابلة للضغط.

ولا يكلّف شيئًا. المؤشّر جزء من الرسم، فيذهب إلى ورقة أنماط الشاشة مع كل اختلاف آخر تصنعه تلك الحالة — بلا معالج، ودون أن يعمل شيء عند تحريك الفأرة.

والخيار الفارغ هو كما هو، وليس كـسهم. غير المضبوط يعني «ما كان سيكون عليه على أي حال»، وهو لزرٍّ حقيقي يدٌ أصلًا؛ أما سهم فهو أن تطلبه حتى هناك.

أثناء وجود المؤشّر فوقه

حدّد صيغة فيظهر في تبويب الشاشة منتقي أثناء: دائمًا، أو مُشار إليه، مضغوط، مركّز عليه.

هذا هو النصف الثاني من معنى الحالة، وهو يسكن على الرسم لأن الجواب هناك بديهي: هذه صورة «غير صالح»، وهكذا تبدو «غير صالح» تحت المؤشّر. ويمكن إعادة الإجابة عنه أيضًا — «غير صالح» رسمتها الأسبوع الماضي تصير «غير صالح أثناء الإشارة» دون إعادة كتابة ولا إعادة رسم.

أمران لا يفعلهما، ويقول سبب كلٍّ منهما:

• لا يُحدث تعارضًا. إن كانت لديك «غير صالح أثناء الإشارة» فعلًا، رفض المنتقي صنع ثانية — رسمٌ واحد لكل حالة، وإلا فلا شيء يستطيع تحديد أيّهما قُصد.
• و«دائمًا» فيه معطّلة على حالة ليست إلا تفاعلًا. صيغة اسمها hover هي حالة الإشارة؛ ونزع التفاعل عنها يتركها بلا اسم. وإن أردت حالة غير مرتبطة بتفاعل، فارسم واحدة باسم من عندك — overBudget.

كما أن ضبط «أثناء» على حالة يفكّ تثبيت أي نسخة كانت تعرضها، لأن الحالة التي بلا تفاعل هي وحدها القابلة للتثبيت — ولا شيء يستطيع إعلان أن شيئًا مُشار إليه إلى الأبد.

ملاحظة

لا يمكنك رسم حالة على نسخة، والمفتّش يقول ذلك عند تحديدها. حالةٌ على نسخة هي حالة تخصّ تلك النسخة وحدها — لا يراها المكوّن، ولا توجد في بقية النسخ، وتزول بأول إعادة تعيين. انتقل إلى المكوّن الرئيسي وأضِفها هناك، فتستطيع كل نسخة أن تُعرض بها.

اسم الحالة لك. غير صالح ونجاح وغيرهما مجرّد اقتراحات: اكتب awaitingApproval أو overBudget أو ما تحتاجه هذه الشاشة فعلًا، وسيتصرّف تمامًا كالمقترحات. استخدم الحروف والأرقام و- و_ وابدأ بحرف.

التفاعلات ثابتة، وهي الموضع الوحيد الذي لا يمكنك اختراع اسم فيه: مُشار إليه ومضغوط ومركَّز للمتصفّح — ولهذا لا تكلّف شيئًا وتعمل دون أن تكتب أي شيء.

ملاحظة

«معطّل» اسمٌ لا «أثناء». كان المدخل الرابع في ذلك المنتقي، وليس موضعه: الثلاثة أعلاه أشياء يفعلها أحدهم، وكلٌّ منها ينتهي لحظة توقّفه. أما «معطّل» فهو ما يكونه عنصر التحكّم — شاشتك هي التي قرّرته — فهو اسم حالة عادي، يُكتب disabled.

وهو أيضًا الاسم الوحيد الذي لا تحتاج أبدًا أن تقول متى يعمل. الشاشة تعرف ذلك أصلًا، من علامة معطّل أو من تعبير مُفعَّل. سمِّ صيغةً disabled فيرتديها كل عنصر تحكّم لا يمكن استخدامه، دون أن تكتب تعبيرًا.

الآن، على أي نسخة من ذلك المكوّن، يعرض المُفتّش يُعرض في الحالة. اختر غير صالح فتُرسم تلك النسخة كخطأ، هناك على لوحة الرسم، بينما تُرتّب الشاشة. وتبقى البقية عادية.

العادي هو الأصل. لا شيء لرسمه ولا شيء لاختياره — إبقاء يُعرض في الحالة على عادي يعني «كما رسمته».

القائمة الأولى وحدها هي ما يمكن عرضه. يعرض يُعرض في الحالة خيارات غير صالح ونجاح وغيرها، لا مُشار إليه — فتلك يقرّرها المتصفح، وشاشة تدّعي أن شيئًا مُشارٌ إليه دائمًا شاشةٌ تكذب. ارسم حالة الإشارة وستظل تعمل؛ أنت فقط لا تختارها.

نقطتان أخريان:

• تُحفظ الفروق فقط. غيّر لون حدّ النسخة فيصير لون الحدّ هو معنى الحالة. غيّر حجم الأصل بعدها فتتبعه كل الحالات، لأن الحالة لا تغيّر حجمًا ولا موضعًا أبدًا.
• التركيبات تتراجع من تلقاء نفسها. إن رسمت نجاح ونجاح + مُشار إليه، فمن يشير إليه يرى الثانية ومن لا يشير يرى الأولى. وإن رسمت نجاح وحدها، فالإشارة إليه تُظهر نجاح أيضًا. لست مضطرًا أبدًا لرسم كل التركيبات.

تشغيل الحالة من الكود

اختيار الحالة أثناء التصميم نصف الأمر. والنصف الآخر أن تغيّرها الشاشة وهي تعمل، وذلك سطر واحد في معالج:

setVisualState("invalid");

و setVisualState("") يعيدها إلى العادي. اكتبه حيث تعرف الشاشة — نقر زر، أو تغيّر صندوق — في صفحة الكود، الموضع نفسه الذي يُكتب فيه كل معالج آخر. ولمعرفة ما يستطيع المعالج فعله، انظر اجعل الشاشة تتفاعل.

لا يسمّي كائنًا، ولا يحتاج. فالحالة التي يغيّرها هي حالة أقرب شيء عند المعالج أو فوقه رُسمت عليه حالة. ارسم حالة لبطاقة، واربط معالجًا بزرّ داخلها، فيكون النداء عن البطاقة — وهو الجواب الصحيح في كل رسم، لأن الحالة تُرسم على الكائن الذي تغيّره والمعالج يُربط بشيء داخله.

الحالة تخصّ الكائن الذي رُسمت عليه، وتصل إلى داخله أيضًا: ارسم حالة لبطاقة فتتبعها التسمية والحدّ وكل ما غيّرته في النسخة، معًا. نداء واحد، وموضع واحد تنظر فيه حين تكون حالة مفعّلة وينبغي ألا تكون.

حالات التفاعل لا تُضبط من الكود، واللوحة تقول ذلك: المتصفّح يعرف أصلًا متى يُشار إلى شيء أو يُضغط عليه أو يملك التركيز.

والحالة التي لا يشغّلها شيء تعمل أيضًا — فهي ما يثبّت يُعرض في الحالة النسخةَ عليه أثناء ترتيب الشاشة. والكود، حين ينطق، يحلّ محلّ التثبيت.

ملاحظة

كان هنا زرّ «إضافة شرط» ولم يعد. كان يأخذ تعبيرًا تعيد الشاشة فحصه باستمرار، ما يعني أن للشاشة طريقين لتقرير شكل الأشياء — صيغة تشغّل نفسها، إلى جانب معالجات لا تستطيع مسّها، ولا شيء على لوحة الرسم يقول أيّهما استُخدم لصيغة بعينها. الشاشة الآن تقرّر في موضع واحد.

والكلفة حقيقية وتستحقّ المعرفة: الشرط كان يشغّل نفسه لحظة تحميل الشاشة، أما المعالج فلا يعمل إلا حين يقع شيء. فإن كان ينبغي لحالة أن تكون مفعّلة قبل أن يفعل أحد شيئًا، ثبّتها بـ يُعرض في الحالة — فذلك ما كان التثبيت له دائمًا، ويحلّ الكود محلّه أول مرة ينطق فيها معالج.

ألوان السمة

تحت منتقيَي لون التعبئة والحدّ صفٌّ من العيّنات الدائرية. تلك هي ألوان سمة المنصة — الخلفية، السطح، النص، النص الثانوي، الحدّ، الأساسي، الخطأ، النجاح.

اختر واحدة بدل لون فيتوقف العنصر عن كونه ذلك اللون ويصير ذلك الدور. وهذا مهم لأن:

• يتبع سمة القارئ. من يستخدم پارس‌وير في الوضع الداكن يرى شاشتك داكنة: تُظلم الأسطح، ويفتح النص، وتتوافق الحدود. ولا ترسمها مرتين.
• يتبع لون التمييز للمستأجر. «الأساسي» هو لون التمييز المختار، لا أزرق اخترته أنت في ٢٠٢٦.

اضغط القمر في شريط الأدوات لترى رسمك داكنًا، والشمس للعودة. هذا المفتاح يغيّر ما تنظر إليه فقط — ولا يغيّر سمة التطبيق نفسها، فتلك في الإعدادات.

النقر على العيّنة المختارة أصلًا يفصلها، فيبقى اللون الذي كانت تُظهره لونًا عاديًا. هذا هو طريق العودة إن قررت أنك أردت ذلك الرمادي بعينه.

تلميح

إطار الأنماط في تصميم جديد مبنيّ أصلًا من ألوان السمة. وجّه أشكالك إلى تلك العيّنات فيتبع كل شيء السمة مجانًا.

الأنماط المشتركة

النمط المشترك شكلٌ تتبعه الأشكال الأخرى. حدّد شكلًا واضغط حفظ كلون (تعبئته) أو حفظ كشكل (التعبئة والحدّ واستدارة الزوايا والشفافية والظل)؛ وللنص حفظ كنص. يبقى الشكل على اللوحة، ويذكر قسم النمط فيه عدد الأشكال التي تتبعه.

لتتبعه، افتح القائمة فوق صلب وخطي وشعاعي في قسم التعبئة، أو قائمة النمط في الأعلى لنمط الشكل، أو قائمة نمط نص في قسم النص. غيّر شكل النمط نفسه فيتغيّر كل ما يتبعه. أعطِ تابعًا قيمةً خاصة به فيتوقف عن التتبّع؛ وإلغاء النمط يعيد النمط شكلًا عاديًا، وتحتفظ الأشكال التي تتبعه بقيمها. إدراج ← الأنماط الافتراضية يضيف مجموعة جاهزة.

تعمل هذه القوائم من لوحة المفاتيح: Enter أو Space يفتحها، ومفاتيح الأسهم تتنقل فيها، وEscape يغلقها.

المتطلبات

• شاشة ترسم عليها — انظر إنشاء تطبيق استوديو.

الخطوات

1. ارسم ما تريد إعادة استخدامه — شارة حالة، حقلًا مع تسميته، بطاقة.
2. حدّده، انقر بالزر الأيمن، إنشاء مكوّن.
3. اسحبه مرتين من قائمة المكوّنات.
4. حدّد الأصل، وتحت الحالات اكتب invalid، ثم اضغط ＋ حالة.
5. غيّر حدّ الصيغة إلى لون السمة خطأ.
6. حدّد النسخة الثانية واضبط يُعرض في الحالة على غير صالح. تتغير على لوحة الرسم.
7. اضغط القمر في شريط الأدوات. كل ما رُسم بلون سمة يتبعه.
8. اضغط حفظ.

استكشاف الأخطاء

• قائمة المكوّنات فارغة. — لا شيء في هذا التصميم مكوّنٌ بعد. حدّد بعض العناصر واختر إنشاء مكوّن.
• «يُعرض في الحالة» غير معروض. — إمّا أن العنصر المحدَّد ليس نسخة (حدّد أبعد إطار له)، وإمّا أن مكوّنه لا يحمل حالات بعد: حدّد الأصل وأضِف واحدة تحت الحالات.
• لا يوجد زر ＋ حالة. — العنصر المحدَّد ليس أصل مكوّن. حدّد أبعد إطار للمكوّن، أو اضغط اسمه على نسخةٍ للانتقال إليه.
• لم يعد هناك زر ＋ نسخة. — وضعُ نسخة أخرى مهمّة قائمة المكوّنات: اسحب المكوّن إلى حيث تريده بالضبط. ولا يزال النقر بالزر الأيمن ← نسخة يعمل.
• أضفت خاصية ولم يتغيّر شيء. — خاصية القيمة لا شيء مرسوم لها. اربط شيئًا داخل الأصل بـ ‎props.<name>‎، وإلا فهي قيمة لا يقرأها أحد.
• ‎props.something‎ فارغة في تعبير. — إمّا أن المكوّن لا يملك خاصية بهذا الاسم، وإمّا أن التي يملكها من النوع المرسوم الذي لا يستطيع التعبير قراءته. أضِف خاصية قيمة واربط بها.
• حدثي لا يفعل شيئًا. — تحقّق من ثلاثة: أن المكوّن يعلنه (الأحداث، على الأصل)، وأن معالجًا داخل المكوّن يستدعي ‎emit("name")‎ فعلًا، وأن لدى النسخة معالجًا له. ومكوّنٌ يرفع حدثًا لم يجبه أحد ليس خطأً.
• ربطت نسخة بحالة ولم يتغير شيء. — نسخة الحالة مطابقة للأصل. غيّر لونًا على النسخة.
• السحب لا يفعل شيئًا. — أفلته على لوحة الرسم نفسها لا على لوحة جانبية. أو انقر الصف فحسب: فيستقر في منتصف العرض.
• المعاينة الداكنة لا تختلف. — التصميم يستخدم ألوانًا عادية لا ألوان سمة. اختر من العيّنات الدائرية تحت منتقي اللون.
• عنصر التحكم يتجاهل لون السمة الذي أعطيته. — مظهر عنصر التحكم للمنصة، فهو يتبع السمة أصلًا؛ موضعه وحجمه فقط يأتيان من رسمك.
• حرّرت نسخة فعادت كما كانت. — تلك الخاصية مقفلة على الأصل. حدّد الطبقة المقابلة داخل الأصل وعلّمها تحت الإتاحة على النسخ.
• حذفت حالة فعادت النسخ التي تستخدمها عادية. — هذا مقصود: النسخة المربوطة بحالة لم تعد موجودة تعود إلى العادي بدل أن تختفي.

ملاحظة: لم يعد جزء من مكوّن يخرج منه بالسحب. تنتقل التسمية داخل الزرّ إلى حيث تضعها — حتى خارج حافّة الزرّ — وتبقى جزءًا منه. ولا ينتقل بين الأطر المحيطة إلا إطار المكوّن نفسه.

إزالة حالة، أو مكوّن بأكمله

كلاهما يسأل أولًا — وكلاهما فقط حين يكون هناك ما يُفقد.

• إزالة حالة (علامة ✕ بجوارها في قائمة الحالات) تُذهب رسمها، وتعود كل نسخة كانت تُعرض به إلى العادي. وإن لم يكن شيء مثبّتًا عليه، أُزيل بلا سؤال.
• إزالة مكوّن (حدّد أصله واضغط Delete) تأخذ معها نسخه وكل حالة رُسمت له، ويعدّ الحوار الاثنين. وهذه هي التي تستحقّ القراءة: قد تكون النسخ في جزء آخر من الشاشة غير الذي حدّدت فيه الأصل، والصيغ المرسومة بجواره. والمكوّن الذي لا يملك أيًّا منهما يُزال بلا سؤال.
• حذف شيء رُسم مكوّن بداخله — إطار يحوي بطاقة جعلتها مكوّنًا — يزيل ذلك المكوّن أيضًا، ويسأل أولًا ويسمّي كم سيذهب. وهذه هي الخسارة التي لا تراها قادمة ممّا حدّدته: الإطار يبدو إطارًا.

كان الأخير يحدث في صمت، واستحقّ إصلاحًا خاصًّا به. كان المكوّن يُرفع عن اللوحة ويبقى تعريفه يشير إلى رسم لم يعد موجودًا — فتظلّ اللوحة تسرده، ولا يفعل سحبه شيئًا، ويقول جزءٌ مشترك في تلك الحال عند الحفظ إنه لا شيء هنا مكوّن بعد. وإن كان لديك جزء في تلك الحال، ففتحه الآن يمسح الشبح وترى بصدق أن لا شيء فيه لوضعه.

ولا يظهر حوار لحركة لا تمسّ إلا ما حدّدته، لأن تأكيدًا يسألك إن كنت تقصد ما فعلته للتوّ نقرةٌ تعلّمك أن تتوقّف عن القراءة.

وهناك حذف واحد يسأل، ويسأل عند الحفظ: مكوّن تضعه تطبيقات أخرى. فمكوّناتك تُعرض على كل تطبيق آخر في البيئة، فحذف واحد تغييرٌ فيها — والسؤال يسمّيها، والإلغاء يترك لوحك كما هو تمامًا. انظر استخدام مكوّن في تطبيق آخر.

سيناريوهات ذات صلة

• استخدام مكوّن في تطبيق آخر.
• رسم تطبيق استوديو.
• إنشاء تطبيق استوديو.