وانەی 31 لە 67

وانەی ٣١: پیشاندان و شاردنەوەی ناوەڕۆک: details و summary

ناوەڕۆکی ئەم وانەیە بەشی ١: پرسیارێک کە وەڵامەکەی دەکرێتەوە بەشی ٢: بە کیبۆردیش کار دەکات بەشی ٣: لە سەرەتاوە کراوە بێت

بەشی ١: پرسیارێک کە وەڵامەکەی دەکرێتەوە

هەندێک جار دەتەوێت پرسیارێک پیشان بدەیت و وەڵامەکە بشاریتەوە، تا سەردانکەر کرتە لە پرسیارەکە بکات و وەڵامەکە ببینێت. HTML دەتوانێت ئەمە بکات بەبێ هیچ سکریپتێک. دوو توخم بەکاردەهێنین: <details> و <summary>.
ئەمە لەناو <body> بنووسە:
<details>
  <summary>ئایا چای گیایی پێشکەش دەکەن؟</summary>
  <p>بەڵێ، سێ جۆر پێشکەش دەکەین.</p>
</details>

<summary> وەک یەکەم توخمی ناو <details> دابنێ. ئەو بەشەیە کە هەمیشە دیارە؛ لەم نموونەیەدا پرسیارەکەیە. ناوەڕۆکی دوای ئەو دەشاردرێتەوە تا سەردانیکەر بیکاتەوە.

کۆدەکە کارپێبکە، پرسیارەکە لەگەڵ نیشانەیەکی بچووک پیشان بدە. کرتەی لێ بکە؛ وەڵامەکە دەردەکەوێت. دووبارە کرتە بکە؛ وەڵامەکە دەشاردرێتەوە.

بەشی ٢: بە کیبۆردیش کار دەکات

چونکە ئەم توانایە لە خودی HTMLـدا هەیە، بە کیبۆردیش کار دەکات. دوگمەی Tab دابگرە تا فۆکەس بگاتە سەر پرسیارەکەی ناو <summary>. پاشان Enter یان دوگمەی بۆشایی(space) دابگرە بۆ کردنەوە و داخستنی وەڵامەکە.
لەناو <details>، دوای <summary>، دەتوانیت پەرەگراف، لیست، تەنانەت وێنەش دابنێیت.

بەشی ٣: لە سەرەتاوە کراوە بێت

بە شێوەی بنەڕەتی، <details> بە داخراوی دەست پێدەکات. بۆ ئەوەی لە سەرەتاوە کراوە بێت، تایبەتمەندی open زیاد بکە.
ئەمە تایبەتمەندییەکی بووڵیەنەboolean ، وەک ئەوانەی لە وانەی ٦ بینیمان، بۆیە دەتوانین بەبێ بەها بینووسین. تەنها بوونی open بەسە بۆ ئەوەی ناوەڕۆکەکە دیار بێت. تەنانەت ئەگەر open="false" بنووسیت، هەر بە کراوەیی دەست پێدەکات. بۆ ئەوەی بە داخراوی دەست پێبکات، تایبەتمەندی open لاببە.
<details open>
  <summary>کەی دەکەنەوە؟</summary>
  <p>هەموو ڕۆژێک، لە کاتژمێر نۆی بەیانییەوە.</p>
</details>
هەڵەیەکی باو: <summary> لەبیر بکەیت. ئەو کاتە وێبگەڕ لەجیاتی پرسیارەکەت، ناونیشانێکی بنەڕەتی پیشان دەدات.
پوختە
  • <details> بە شێوەی بنەڕەتی ناوەڕۆکەکە دەشارێتەوە تا سەردانکەر بیکاتەوە.
  • <summary> ئەو بەشەیە کە هەمیشە دیارە، وەک پرسیارەکە لەم نموونەیەدا.
  • بە ماوس و کیبۆرد کار دەکات.
  • تایبەتمەندی بوولی open وا دەکات ناوەڕۆکەکە لە سەرەتاوە دیار بێت.
ڕاهێنان
١. پرسیارێکی سێیەم لەگەڵ وەڵامەکەی زیاد بکە.
٢. وا بکە وەڵامی یەکێک لە پرسیارەکان لە سەرەتاوە دیار بێت.
٣. بە کیبۆرد وەڵامەکان بکەرەوە و دایانخە.

نموونە

html
<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>پرسیارەکان</title>
  </head>
  <body>
  <h1>پرسیارەکان</h1>
  <details>
    <summary>ئایا چای گیایی پێشکەش دەکەن؟</summary>
    <p>بەڵێ، سێ جۆر پێشکەش دەکەین.</p>
  </details>
  <details open>
    <summary>کەی دەکەنەوە؟</summary>
    <p>هەموو ڕۆژێک، لە کاتژمێر نۆی بەیانییەوە.</p>
  </details>
</body>
</html>
خۆت تاقی بکەرەوە ↗

ئەنجام

چوونەژوورەوە بۆ پاشەکەوتکردنی پێشکەوتنت لە فێربووندا.