تگ details در HTML

  /  Frontend   /  تگ details در HTML

با استفاده از تگ details در HTML میتوان یک متن مخفی شده به طور پیش فرض را ایجاد کرد ، که با کلیک کاربر روی آن ، متن به نمایش در می آید.

مثال

<details>
<summary>روی من کلیک کن</summary>
<p>همانطور که مشاهده میکنید با کلیک برروی متن درون تگ summary متون مخفی شده به نمایش درآمدند.</p>
</details>


تعریف و کاربرد

تگ details در HTML جزئیات بیشتری را در رابطه با یک موضوع تعریف میکند و متنی مخفی شده درون خود دارد که توسط کاربر میتواند باز و بسته شود.

هر نوع محتوایی را میتوان درون تگ <details> قرار داد.

از تگ <summary> در عنصر <details> برای تعریف عنوان استفاده می شود که مخفی نیست و برای کاربر جهت مشاهده جزئیات بیشتر تگ <details> به نمایش در خواهد آمد.


پشتیبانی مرورگر ها

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

عنصر
<details>12.079.049.06.015.0

خواص

خاصیتمقدارتوضیحات
openopenمشخص میکند که جزئیات و محتوای تگ details به طور پیش فرض قابل مشاهده باشد.

خواص عمومی

تگ details از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ details از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر details در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

details {
  display: block;
}

مثال های بیشتر

در این مثال ما از خواص CSS در تگ <details> استفاده کرده ایم و یک شکل اختصاصی برای خود طراحی کردیم:

<!DOCTYPE html>
<html dir="rtl">
<head>
<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>
</head>
<body>

<details>
<summary>روی من کلیک کن ، یک قورباغه دارم رو پایی میزنه !</summary>
<p>سلام خوبی ؟ شوخی کردم میخواستم تگ details رو همراه با یک استایل سفارشی CSS بهت یاد بدم.</p>
</details>

</body>
</html>

من یک برنامه نویس خستگی ناپذیر هستم که رویا هاش رو کد نویسی میکنه...

ارسال یک نظر