التطبيقات المصغّرة: أزرار التنقّل

يسمح العنصر المخصّص "<devsite-nav-buttons>" لمجموعة من الأزرار بإعادة تحميل الصفحة. الصفحة الحالية بمعلمة سلسلة طلب بحث مختلفة.

عرض توضيحي

Java sample code

الاستخدام

لاستخدام هذا العنصر، يجب إنشاء عنصر <devsite-nav-buttons> مع السمة name وضع عدة عناصر button بسمات value مختلفة داخلها. لكل مجموعة من الأزرار، يمكنك اختيار زر كإعداد تلقائي من خلال إضافة default. إلى العنصر.

<devsite-nav-buttons name="language">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

في ملف Markdown (.md)، تأكَّد من أنّ العنصر المخصّص ملفوف عنصر HTML عادي، مثل section أو div أو p:

<div>
  <devsite-nav-buttons name="language">
    <button value="java" default>Java example</button>
    <button value="python">Python example</button>
    <button value="go">Go example</button>
  </devsite-nav-buttons>
</div>

يمكنك بعد ذلك استخدام العلامات الديناميكية تفحص معلَمات سلسلة طلب البحث لتحديد المحتوى المطلوب عرضه للمستخدم.

{% dynamic if request.query_string.language == "python" %}
Python sample code
{% dynamic elif request.query_string.language == "go" %}
Go sample code
{% dynamic else %}
Java sample code
{% dynamic endif %}

الربط في الصفحة باستخدام معرّف

كقاعدة عامة، من الأفضل وضع العنصر <devsite-nav-buttons> بالقرب من أعلى الصفحة لأنّ النقر على أيّ من أزرارها ينقل المستخدمين إلى عنوان URL جديد ويعيد تحميل الصفحة. إذا كنت تستخدم العنصر في منتصف صفحة و/أو تريد جعل مكان العنصر على الصفحة قابلاً للإشارة المرجعية، يجب عليك حدد id فريدًا في العنصر، وستؤدي هذه العلامة إلى إلحاق علامة ارتساء باسم عنوان URL وجعل الصفحة يتم تمريرها إلى مكان العنصر عند تحميل الصفحة.

<devsite-nav-buttons name="language" id="code-examples">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

خيارات مَعلمة عناوين URL

بشكل تلقائي، بعد أن ينقر المستخدم على أحد الأزرار، يتم حفظ قيمة الزر. على التخزين المحلي. تتم إضافة القيمة المحددة تلقائيًا إلى شريط العناوين باعتباره معلمة عنوان URL في صفحات أخرى تحتوي على عناصر <devsite-nav-buttons> تستخدم نفس حقلَي name وvalue.

إزالة معلمة عنوان URL للزر التلقائي

لإلغاء السلوك التلقائي وإزالة معلَمة عنوان URL عند استخدام تم النقر على زر "default". أضِف param="reset" إلى العنصر:

<devsite-nav-buttons name="language" param="reset">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

عرض معلمة عنوان URL للزر التلقائي دائمًا

عندما يزور أحد المستخدمين صفحة تحتوي على عنصر <devsite-nav-buttons> في البداية الوقت، يتم تمييز الزر "default" وليس هناك أي تغيير في العنوان. الشريط حتى يتم النقر فوق أحد الأزرار.

لتعديل شريط العناوين باستخدام مَعلمة عنوان URL للزر default، اتّبِع الخطوات التالية: والتأكد من وجود معلمة عنوان URL دائمًا في الصفحات التي تحتوي <devsite-nav-buttons>، إضافة param="always" إلى العنصر:

<devsite-nav-buttons name="language" param="always">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

تصميم الأزرار

تتضمّن الأزرار داخل العنصر <devsite-nav-buttons> كلمة "شريحة" تلقائيًا. التصميم. لزيادة التأثير المرئي للأزرار أو تقليله، يمكنك إضافة سمة type بقيمة filled أو text، وسيتم تصميم كل منها button.

تصميم الزر باستخدام type="filled" :

<devsite-nav-buttons name="language" type="filled">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

تصميم الزر باستخدام type="text" :

<devsite-nav-buttons name="language" type="text">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>