جزئیات (details)
تگ «جزئیات (details)» یک بخش تاشو می سازد. کاربر می تواند آن را باز و بسته کند. این مثل بازکردن توضیحات یک مرحله در بازی است. برای عنوان بخش، از «خلاصه (summary)» کنار آن استفاده می شود.
تگ details چیست؟
تگ تگ details یک ابزار تعاملی است. پیش فرض بسته است. وقتی باز شود، محتوای داخلش نمایش داده می شود. هر نوع محتوایی می تواند داخلش باشد.
نکته: برای عنوان قابل کلیک از تگ summary استفاده کن.
نمونه کاربرد details + summary
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
ویژگی ها (Attributes)
open و name
open: اگر باشد، جزئیات از ابتدا باز است. name: نام گروه را مشخص می کند؛ با نام یکسان، فقط یکی باز می ماند.
استایل دهی details و summary
می توانی ظاهر summary و متن داخل details را شخصی سازی کنی. این کار تجربه کاربر را بهتر می کند.
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
پشتیبانی مرورگر و رفتار پیش فرض
این عنصر به صورت گسترده پشتیبانی می شود. به طور پیش فرض یک عنصر بلوکی است.
details {
display: block;
}
مراحل کاربردی سریع
- یک <details> بساز و محتوای توضیحی قرار بده.
- یک <summary> بعنوان عنوان قابل کلیک اضافه کن.
- در صورت نیاز، ویژگی open را برای بازبودن اولیه بگذار.
- برای چند پنل مرتبط، از name یکسان استفاده کن.
جمع بندی سریع
- تگ details پنل تاشو می سازد.
- summary عنوان پنل است.
- open پنل را از ابتدا باز می کند.
- name فقط یک پنل را باز نگه می دارد.
- نمایش پیش فرض: display:block.