Expandable 🔗

Компонент с раскрывающимся контентом

Пример использования:

Исходный код для примера выше:

<Expandable interactive>
    <svelte:fragment slot="header">Нажми на меня</svelte:fragment>
    <svelte:fragment slot="text">Lorem ipsum dolor sit amet consectetur adipisicing elit...</svelte:fragment>
</Expandable>
<Expandable interactive>
    <svelte:fragment slot="header">Нажми на меня</svelte:fragment>
    <svelte:fragment slot="text">Lorem ipsum dolor sit amet consectetur adipisicing elit...</svelte:fragment>
</Expandable>

Параметры:

interactive

boolean

Если значение = true, то компонент будет раскрываться и закрываться по нажатию на него
Значение по умолчанию: false

transition

object

Объект, описывающий переходы для компонента. Имеет следующие свойства:
in – переход при монтировании компонента
out – переход при демонтировании компонента

Каждое из этих свойств может содержать в себе объект со следующими свойствами:
func – функция, выполняющая переход от начального состояния к конечному
options – опциональный объект с опциональными свойствами delay, duration и easing
Подробнее: Документация по Svelte

node

HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id

string

Аналог стандартного атрибута id

className

string

Аналог стандартного атрибута class

Слоты:

header

Слот для заголовка (отображается всегда)

text

Слот для внутреннего текста (отображается только когда active = true)

Методы:

open

Метод для открытия компонента

close

Метод для закрытия компонента

toggle

Метод для открытия/закрытия компонента

Поддерживаемые события:

on:click

on:mouseover

on:mouseleave

on:mouseup

on:mousedown