Демонстрация работы компонента
Curabitur at pellentesque quam. Nam magna turpis, bibendum eget molestie eget, pulvinar ut nunc. Donec at efficitur nisl. Pellentesque eget aliquet felis. Vivamus sed luctus erat. Pellentesque egestas tortor elit, in mollis sapien lobortis non. Fusce venenatis nec mi nec vulputate. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ex metus, luctus non mollis et, gravida eget leo. Integer vel tortor in justo molestie malesuada in eget felis. Donec urna eros, blandit et commodo vitae, bibendum nec dui. Integer laoreet imperdiet sapien, non laoreet ante.
html
<div class="v-collapse-box">
<div class="v-collapse-box__header">
<button class="v-collapse-box__btn" type="button">
<span>Collapse box 01</span>
<svg
class="v-collapse-box__btn-icon-right"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
width="24"
height="24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</button>
</div>
<div class="v-collapse-box__body">
<p>
Curabitur at pellentesque quam. Nam magna turpis, bibendum eget molestie
eget, pulvinar ut nunc. Donec at efficitur nisl. Pellentesque eget aliquet
felis. Vivamus sed luctus erat. Pellentesque egestas tortor elit, in
mollis sapien lobortis non. Fusce venenatis nec mi nec vulputate. Orci
varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Sed ex metus, luctus non mollis et, gravida eget leo.
Integer vel tortor in justo molestie malesuada in eget felis. Donec urna
eros, blandit et commodo vitae, bibendum nec dui. Integer laoreet
imperdiet sapien, non laoreet ante.
</p>
</div>
</div>
Инициализация компонента
TypeScript
const a = 2;