@eisgs/collapse-panel v4.0.1

Компонент CollapsePanel

title, summary и hint позволяют управлять контентом в заголовке. variant управляет внешним видом заголовка.

  import { Typography } from "@eisgs/typography";
  import colors from '@constants/colors';


  const Title = () => (
    <div style={{display: 'flex', justifyContent: 'space-between', width: '100%'}}>
      <Typography type="p2" weight="bold">Заголовок третьей темы</Typography>
      <Typography type="p2" weight="bold">Заголовок третьей темы</Typography>
      <Typography type="p2" weight="bold">Заголовок третьей темы</Typography>
    </div>
  );


  <>
    <CollapsePanel
      title="Заголовок первой темы"
      summary="Подзаголовок первой темы с каким-то описанием"
      hint="Подсказка"
    >
      Контент первой темы с каким-то описанием
      Контент первой темы с каким-то описанием
      Контент первой темы с каким-то описанием
      Контент первой темы с каким-то описанием
      Контент первой темы с каким-то описанием
      Контент первой темы с каким-то описанием
      Контент первой темы с каким-то описанием
      Контент первой темы с каким-то описанием
    </CollapsePanel>
    <CollapsePanel
      title="Заголовок второй темы"
      summary="Подзаголовок второй темы с каким-то описанием"
      hint="Подсказка"
      openByDefault
      variant="small"
    >
      Контент второй темы с каким-то описанием
    </CollapsePanel>
    <div style={{backgroundColor: colors.white, padding: 24, marginBottom: 24}}>
      <CollapsePanel
        styles={{backgroundColor: colors.M6, marginBottom: 0}}
        variant="custom"
        title={<Title/>}
        summary="Подзаголовок третьей темы с каким-то описанием"
        hint="Подсказка"
      >
        Контент третьей темы с каким-то описанием
      </CollapsePanel>
    </div>
    <CollapsePanel
      title="Заголовок кастомным summary"
      summary={(
          <code style={{marginLeft: 'auto'}}>Кастомный summary</code>
      )}
      hint="Подсказка"
    >
      Контент четвертой темы с каким-то описанием
    </CollapsePanel>
  </>