Fisht

Accordion

Accordion — это гибкий компонент для отображения сворачиваемых и разворачиваемых секций контента.

Базовый

Компонент Accordion позволяет отображать контент в сворачиваемых секциях. Пользователи могут разворачивать и сворачивать отдельные секции для просмотра или скрытия их содержимого.

Содержимое для секции 1

Содержимое для секции 2

Содержимое для секции 2

Ответ на вопрос 1

Ответ на вопрос 2

<Accordion :dataSource="[
  { title: 'Секция 1', subtitle: 'Контент для секции 1' },
  { title: 'Секция 2', subtitle: 'Контент для секции 2', open: true },
  { title: 'Секция 3', subtitle: 'Контент для секции 3' }
]">
</Accordion>
<Accordion :dataSource="[
  { title: 'FAQ 1', subtitle: 'Ответ на FAQ 1' },
  { title: 'FAQ 2', subtitle: 'Ответ на FAQ 2' }
]" :multiple="true">
</Accordion>

Базовое использование компонента Accordion включает предоставление массива dataSource, который определяет секции и их содержимое.

Несколько секций

Свойство multiple позволяет одновременно открывать несколько секций.

Подготовка тела к тренировке

Развитие мышц и выносливости

Улучшение сердечно-сосудистого здоровья

Помощь телу в восстановлении

Питание для ваших тренировок

<Accordion :dataSource="[
  { title: 'Элемент 1', subtitle: 'Детали для элемента 1' },
  { title: 'Элемент 2', subtitle: 'Детали для элемента 2' }
]" :multiple="true">
</Accordion>

Длительность анимации

Свойство animationDuration контролирует скорость открытия или закрытия секций, измеряемую в миллисекундах.

Открывается быстро

Открывается быстро

Открывается медленно

Открывается медленно

<Accordion :dataSource="[
  { title: 'Быстро', subtitle: 'Открывается быстро' },
  { title: 'Медленно', subtitle: 'Открывается медленно' }
]" :animationDuration="1000">
</Accordion>

Тип иконки

Свойство icon указывает иконку, используемую для переключения аккордеона.

Поддерживаемые иконки:

  • "ChevronDown": Иконка шеврона, указывающая вниз.
  • "ArrowDownCircle": Круглая иконка стрелки вниз.
  • "Plus": Иконка плюса для разворачивания/сворачивания.

Общие вопросы и ответы

Просмотрите наш ассортимент продуктов

Узнайте, что говорят наши клиенты

Детали нашего процесса доставки

Наша политика возврата и возмещения

Список ингредиентов для рецепта

Пошаговое руководство по приготовлению

Пищевая ценность и значения

Идеи для подачи блюда

Комментарии и оценки пользователей

<Accordion :dataSource="[
  { title: 'Стиль Chevron', subtitle: 'Использует иконку ChevronDown' },
  { title: 'Стиль Arrow', subtitle: 'Использует иконку ArrowDownCircle' }
]" icon="ChevronDown">
</Accordion>
<Accordion :dataSource="[
  { title: 'Стиль Chevron', subtitle: 'Использует иконку ChevronDown' },
  { title: 'Стиль Arrow', subtitle: 'Использует иконку ArrowDownCircle' }
]" icon="ArrowDownCircle">
</Accordion>

Пользовательские классы

Вы можете настроить внешний вид аккордеона с помощью следующих свойств классов:

  • class: CSS класс для контейнера аккордеона.
  • classItem: CSS класс для отдельных элементов аккордеона.
  • classTitle: CSS класс для заголовка элемента аккордеона.
  • classSubtitle: CSS класс для подзаголовка элемента аккордеона.
Класс
Класс элемента
Класс заголовка
Класс подзаголовка

Применены пользовательские стили

<Accordion
  :dataSource="[
    { title: 'Стилизованный элемент', subtitle: 'Применены пользовательские стили' }
  ]"
  class="custom-accordion"
  classItem="custom-item"
  classTitle="custom-title"
  classSubtitle="custom-subtitle">
</Accordion>

Слоты

Слот title позволяет настроить контент, отображаемый в заголовке аккордеона.

Использует стандартный слот заголовка

В этом разделе есть пользовательский заголовок

<template>
  <Accordion :dataSource="[
      { title: 'Заголовок по умолчанию', subtitle: 'Использует слот заголовка по умолчанию' },
      { title: 'Пользовательский заголовок', subtitle: 'Эта секция имеет пользовательский заголовок' }
    ]">
    <template #title="{ title }">
    <span>
      🔖 {{ title }}
    </span>
    </template>
  </Accordion>
</template>
© 2025 FishtVue by Egoka