مرجع عناصر HTML : عنصر <details>
عنصر HTML <details> یک ویجت افشا ایجاد میکند که در آن اطلاعات فقط زمانی قابل مشاهده هستند که ویجت به حالت باز تغییر وضعیت داده شود. یک خلاصه یا برچسب باید با استفاده از عنصر <summary> ارائه شود.
یک ویجت افشا معمولاً با استفاده از یک مثلث کوچک که میچرخد (یا میچرخد) برای نشان دادن حالت باز/بسته، با یک برچسب در کنار مثلث، روی صفحه نمایش داده میشود. محتویات عنصر <summary> به عنوان برچسب ویجت افشا استفاده میشود. محتویات <details> توضیحات قابل دسترسی برای <summary> را ارائه میدهد.
یک ویجت میتواند در یکی از دو حالت باشد. حالت پیشفرض بسته فقط مثلث و برچسب داخل (یا یک رشته پیشفرض تعریفشده توسط عامل کاربر در صورت عدم وجود ) را نمایش میدهد.
وقتی کاربر روی ویجت کلیک میکند یا روی آن فوکوس میکند و سپس کلید فاصله را فشار میدهد، آن را "میپیچند" و محتویاتش را آشکار میکند. استفاده رایج از مثلثی که میچرخد یا میچرخد تا باز یا بسته شدن ویجت را نشان دهد، دلیل این است که گاهی اوقات به آنها "پیچخورده" میگویند.
شما میتوانید از CSS برای استایلدهی به ویجت افشای اطلاعات استفاده کنید و میتوانید با تنظیم/حذف ویژگی باز بودن آن، ویجت را به صورت برنامهنویسی باز و بسته کنید. متأسفانه، در حال حاضر، هیچ روش داخلی برای متحرکسازی انتقال بین باز و بسته وجود ندارد.
به طور پیشفرض، وقتی ویجت بسته است، فقط به اندازهای بلند است که مثلث افشای اطلاعات و خلاصه را نمایش دهد. وقتی باز است، برای نمایش جزئیات موجود در آن، گسترش مییابد.
پیادهسازیهای کاملاً مطابق با استاندارد، به طور خودکار CSS را به عنصر اعمال میکنند. شما میتوانید از این یا شبهعنصر برای سفارشیسازی ویجت افشای اطلاعات استفاده کنید.
این عنصر شامل ویژگیهای سراسری است.
open
این ویژگی بولی نشان میدهد که آیا جزئیات - یعنی محتوای عنصر - در حال حاضر قابل مشاهده هستند یا خیر. جزئیات زمانی که این ویژگی وجود دارد، نشان داده میشوند یا زمانی که این ویژگی وجود ندارد، پنهان میشوند. به طور پیشفرض این ویژگی وجود ندارد، به این معنی که جزئیات قابل مشاهده نیستند.
برای پنهان کردن جزئیات، باید این ویژگی را به طور کامل حذف کنید. جزئیات را قابل مشاهده میکند زیرا این ویژگی بولی است.
name
این ویژگی امکان اتصال چندین عنصر را فراهم میکند، به طوری که فقط یکی از آنها در یک زمان باز باشد. این به توسعهدهندگان اجازه میدهد تا به راحتی ویژگیهای رابط کاربری مانند آکاردئونها را بدون اسکریپتنویسی ایجاد کنند.
ویژگی نام، نام یک گروه را مشخص میکند - به چندین عنصر مقدار نام یکسانی برای گروهبندی آنها بدهید. فقط یکی از عناصر گروهبندی شده میتواند در یک زمان باز باشد - باز کردن یکی باعث بسته شدن دیگری میشود. اگر به چندین عنصر گروهبندی شده، ویژگی باز داده شود، فقط اولین عنصر در ترتیب منبع باز نمایش داده میشود.
عناصر برای اینکه عضوی از یک گروه باشند، لازم نیست در منبع در مجاورت یکدیگر باشند.
علاوه بر رویدادهای معمول پشتیبانی شده توسط عناصر HTML، عنصر از رویداد toggle پشتیبانی میکند که هر زمان که حالت عنصر بین باز و بسته تغییر کند، به آن ارسال میشود. این رویداد پس از تغییر حالت ارسال میشود، اگرچه اگر حالت قبل از اینکه مرورگر بتواند رویداد را ارسال کند، چندین بار تغییر کند، رویدادها با هم ترکیب میشوند تا فقط یکی ارسال شود.
میتوانید از یک شنونده رویداد برای رویداد toggle استفاده کنید تا زمان تغییر حالت ویجت را تشخیص دهید:
یک مثال افشای اطلاعات اولیه
این مثال یک عنصر ساده به همراه یک را نشان میدهد.
ایجاد یک جعبه افشای اطلاعات عمومی
برای شروع باز شدن کادر ، ویژگی Boolean open را اضافه کنید:
چندین جعبه افشای نامگذاری شده
ما چندین کادر را با نام یکسان قرار میدهیم تا فقط یکی از آنها بتواند همزمان باز باشد:
سعی کنید همه ویجتهای افشا را باز کنید. وقتی یکی را باز میکنید، بقیه به طور خودکار بسته میشوند.
حالا بیایید کمی CSS برای سفارشیسازی ظاهر کادر افشا اعمال کنیم.
این CSS ظاهری شبیه به رابط کاربری تببندی شده ایجاد میکند، که با کلیک بر روی تب، آن را باز میکند تا محتوای آن نمایان شود.
در مرورگرهایی که از شبه کلاس پشتیبانی نمیکنند، میتوانید از انتخابگر ویژگی برای استایلدهی به عنصر در حالت باز استفاده کنید.
برای مثالی از سفارشیسازی ابزارک افشا، به صفحه مراجعه کنید.
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, sectioning root, interactive content, palpable content. |
| محتوای مجاز | یک عنصر <summary> و به دنبال آن محتوای جریان. |
| حذف برچسب | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای جریان را میپذیرد. |
| نقش ضمنی ARIA | group |
| نقشهای مجاز ARIA | نقشی مجاز نیست |
| رابط DOM | HTMLDetailsElement |
