Kомпонент Accordion

Назначение компонента

Компонент Accordion (аккордеон) позволяет организовать контент в складные секции, где пользователь может разворачивать и сворачивать отдельные элементы для просмотра содержимого. Это полезно для:

  • Организации FAQ-разделов
  • Отображения дополнительной информации без перегрузки интерфейса
  • Создания компактных меню и навигации
  • Группировки связанного контента

Структура компонента

Компонент состоит из трех основных частей:

  1. Контейнер аккордеона (.sf-accordion)
  2. Элементы аккордеона (.sf-accordion-item)
  3. Заголовки (.sf-accordion-item--title) и содержимое (.sf-accordion-item--content) каждого элемента

Пример компонента:

Accordion 1 keyboard_arrow_down
This is an example content for accordion. You can click on the header to expand or hide the content.
Accordion 2 keyboard_arrow_down
This is an example content for accordion. You can click on the header to expand or hide the content.
Accordion 3 keyboard_arrow_down
This is an example content for accordion. You can click on the header to expand or hide the content. 
            
<div class="sf-accordion">
    <div class="sf-accordion-item">
        <div class="sf-accordion-item--title">
        Accordion 1 <i class="sf-icon sf-icon-solid">keyboard_arrow_down</i>
        </div>
        <div class="sf-accordion-item--content">
        This is an example content for accordion. You can click on the header to expand or hide the content.
        </div>
    </div>
    
    <div class="sf-accordion-item">
        <div class="sf-accordion-item--title">
        Accordion 2 <i class="sf-icon sf-icon-solid">keyboard_arrow_down</i>
        </div>
        <div class="sf-accordion-item--content">
        This is an example content for accordion. You can click on the header to expand or hide the content.
        </div>
    </div>
    
    <div class="sf-accordion-item">
        <div class="sf-accordion-item--title">
        Accordion 3 <i class="sf-icon sf-icon-solid">keyboard_arrow_down</i>
        </div>
        <div class="sf-accordion-item--content">
        This is an example content for accordion. You can click on the header to expand or hide the content.
        </div>
    </div>
</div>

Классы и их назначение

Класс Назначение
.sf-accordion Основной контейнер для всех элементов аккордеона
.sf-accordion-item Отдельный элемент/секция аккордеона
.sf-accordion-item--title Заголовок элемента, по клику на который происходит раскрытие
.sf-accordion-item--title.active Стиль активного (развернутого) заголовка
.sf-accordion-item--content Контейнер скрытого содержимого элемента
.sf-accordion-item--content.open Класс, который показывает содержимое элемента

Типы состояний

1. Свернутое состояние:

  • Заголовок имеет стандартный стиль
  • Контент скрыт (display: none)

2. Развернутое состояние:

  • Заголовок получает класс .active
  • Контент получает класс .open и отображается (display: block)

Таблица CSS-переменных

Переменная Описание Значение по умолчанию
--sf-radius-1 Радиус скругления углов элементов Не указано
--sf-surface-container Фон заголовка в неактивном состоянии Не указано
--sf-surface-container-hover Фон заголовка при наведении Не указано
--sf-surface-container-active Фон заголовка и контента в активном состоянии Не указано
--sf-on-surface-variant Цвет текста содержимого Не указано
--sf-space-1/3, --sf-space-3 Отступы внутри элементов Не указано
--sf-text--font-weight-7 Толщина шрифта заголовка Не указано
--sf-text--size-3 Размер иконки в заголовке Не указано

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

Интерактивность:

  • Заголовки реагируют на hover (изменение фона)
  • Иконка стрелки (keyboard_arrow_down) указывает на возможность раскрытия

Анимации:

  • В текущей реализации анимации нет, раскрытие происходит мгновенно
  • Можно добавить плавное раскрытие через transition или max-height

Пример улучшенной разметки с ARIA

<div class="sf-accordion" role="tablist">
    <div class="sf-accordion-item" role="tab">
        <div class="sf-accordion-item--title" aria-expanded="false" aria-controls="panel1">
            Accordion 1 <i class="sf-icon sf-icon-solid">keyboard_arrow_down</i>
        </div>
        <div class="sf-accordion-item--content" id="panel1" role="tabpanel" hidden>
            Content...
        </div>
    </div>
</div>

Изменить статью