@eisgs/collapse-panel
v4.0.1
Published
`title`, `summary` и `hint` позволяют управлять контентом в заголовке. `variant` управляет внешним видом заголовка.
Downloads
59
Readme
Компонент 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>
</>