Customising header
You may provide the header
prop of AccordionItem
with any JSX elements or React
components, allowing the item header be to freely customised.
import { Accordion, AccordionItem } from '@szhsin/react-accordion';
import styles from './styles.module.css';
export default function Example() {
return (
<Accordion>
<AccordionItem
header={
<div>
<p className={styles.title}>What is Lorem Ipsum?</p>
<p className={styles.description}>
Lorem ipsum is a placeholder text commonly used to
demonstrate the visual form of a document.
</p>
</div>
}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</AccordionItem>
<AccordionItem header="Where does it come from?">
Quisque eget luctus mi, vehicula mollis lorem. Proin fringilla
vel erat quis sodales. Nam ex enim, eleifend venenatis lectus
vitae, accumsan auctor mi.
</AccordionItem>
</Accordion>
);
}
styles.module.css
.title {
font-size: 1.5rem;
font-weight: bold;
}
.description {
color: var(--ifm-color-gray-600);
margin: 0;
}
info
You may use the
headingTag
prop to set a heading level which is appropriate for the information structure of the
page. By default a h3
tag is rendered.