SectionAccordionGroup

import { SectionAccordionGroup } from '@megafon/ui-core';

Базовое состояние

<SectionAccordionGroup
  sections={[
      {
          id: 'group-1',
          title: 'Название группы',
          icon: <HeartIcon24 />,
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-2',
          title: 'Название группы',
          icon: <HeartIcon24 />,
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-3',
          title: 'Название группы',
          icon: <HeartIcon24 />,
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-4',
          title: 'Название группы',
          icon: <HeartIcon24 />,
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
  ]} />

Без иконок

Показать код

<SectionAccordionGroup
  sections={[
      {
          id: 'group-1',
          title: 'Название группы',
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-2',
          title: 'Название группы',
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-3',
          title: 'Название группы',
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
  ]} />

С бейджами

Показать код

<SectionAccordionGroup
  sections={[
      {
          id: 'group-1',
          title: 'Название группы',
          icon: <HeartIcon24 />,
          badge: { color: PromoBadgeColors.GRADIENT_PURPLE, label: 'ВИП' },
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-2',
          title: 'Название группы',
          icon: <HeartIcon24 />,
          badge: { color: PromoBadgeColors.NIGHT, label: 'Эксклюзив' },
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-3',
          title: 'Название группы',
          icon: <HeartIcon24 />,
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
  ]} />

Одиночный

Показать код

<SectionAccordionGroup
  sections={[
      {
          id: 'group-1',
          title: 'Название группы',
          icon: <HeartIcon24 />,
          badge: { color: PromoBadgeColors.GRADIENT_PURPLE, label: 'ВИП' },
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
  ]} />

Начально открытая секция

Показать код

<SectionAccordionGroup
  initialOpenedId='group-1'
  sections={[
      {
          id: 'group-1',
          title: 'Группа 1',
          icon: <HeartIcon24 />,
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-2',
          title: 'Группа 2',
          icon: <HeartIcon24 />,
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
      {
          id: 'group-3',
          title: 'Группа 3',
          icon: <HeartIcon24 />,
          content: <div style={{display:'flex',flexDirection:'column',gap:'16px'}}><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row><Row backgroundView="gray" title="Название" subTitle="Значение"><Button type="text">Изменить</Button></Row></div>,
      },
  ]} />

Prop name	Type	Default	Description
sections*	ISectionAccordion[]		Массив секций аккордеона
initialOpenedId	string \| undefined		Начально открытая секция
classes	ISectionAccordionGroupClasses \| undefined	{}	Дополнительные классы для внутренних элементов
dataAttrs	ISectionAccordionGroupDataAttrs \| undefined		Дополнительные data-атрибуты для внутренних элементов
className	string \| undefined		Дополнительный класс корневого элемента
onChange	((openedId: string \| null) => void) \| undefined		Обработчик изменения открытой секции