Details

A Web Component that enhances HTML <details /> with smooth height transition animations.

<msc-details /> is a lightweight, dependency-free Web Component designed to elevate the interactive experience of native HTML <details /> and <summary /> elements. By leveraging modern CSS height interpolation techniques, it brings smooth, bouncy height expand and collapse transitions to your accordions while preserving full native accessibility (A11y) and semantics.

Let's see what can <msc-details /> do ?

銷售規格

提供清晰完整的商品樣貌給買家，更有助於自身成效的依歸。透過規格的設定以及不同價格設定，讓買家可以在第一時間選購確切的商品，讓銷售成績能有卓越的成長。

保存期限

內容物成份

內容量

品名

廠商名稱

廠商地址

廠商電話

每日營養成份

熱量

產地

製造/有效日期

食物添加物名稱

  • open：

Basic Usage

<msc-details /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-details />'s html structure and everything will be all set.

Required Script

<script type="module" src="https://unpkg.com/msc-details/mjs/wc-msc-details.js"> </script>

Structure

Put <msc-details /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-details> <details slot="details"> <summary> Summary here </summary> Content here </details> </msc-details>

JavaScript Instantiation

<msc-details /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module"> import { MscDetails } from 'https://unpkg.com/msc-details/mjs/wc-msc-details.js'; const detailsTemplate = document.querySelector('.my-details-template'); // use DOM api const nodeA = document.createElement('msc-details'); nodeA.appendChild(detailsTemplate.content.cloneNode(true)); document.body.appendChild(nodeA); // new instance with Class const nodeB = new MscDetails(); nodeB.appendChild(detailsTemplate.content.cloneNode(true)); document.body.appendChild(nodeB); </script>

Style Customization

Developers could apply styles to decorate <msc-details />'s looking.

<style> msc-details { --msc-details-transition-duration: .5s; } </style>

Reference