КРЕАТИВНЫЕ САЙТЫ И ПРИЛОЖЕНИЯ,
КАЧЕСТВЕННЫЕ WEB-УСЛУГИ
phone

SwCollapse

Компонент SwCollapse представляет собой
аналог тегов , <details> + <summary>
но с анимацией.

SwCollapse

Компонент SwCollapse представляет собой аналог тегов <details> + <summary> , но с анимацией.

Свойства / Properties

ИмяТипПо умолчаниюЗначения/Описание
visualBooleantrueВидимость

Слоты / Slots

Default - Контент для скрытия

Особенности реализации

  • Плавная анимация открытия/закрытия с использованием CSS transitions
  • Автоматический расчет высоты контента через ResizeObserver
  • Адаптивное изменение размеров при динамическом контенте

Пример использования / Example Usage

<script setup>
import { ref } from 'vue'

const open = ref(true)
</script>

<sw-button label="Показать / скрыть" type="primary" @click="open = !open" />

<sw-collapse :visual="open">
  <p>Скрываемый контент / Collapsible content</p>
</sw-collapse>