Skip to content
This repository was archived by the owner on Jun 17, 2025. It is now read-only.

README.md

Latest commit

 

History

History
68 lines (55 loc) · 1.53 KB

README.md

File metadata and controls

68 lines (55 loc) · 1.53 KB

@axa-fr/react-toolkit-collapse

  1. Installation
  2. Collapse
  3. Accordion

Installation

npm i @axa-fr/react-toolkit-collapse

Collapse

Import

import { CollapseCard } from '@axa-fr/react-toolkit-collapse';
import '@axa-fr/react-toolkit-collapse/dist/af-accordion.css';

Use

const Collapse = () => (
  <CollapseCard>
    <CollapseCard.Header>Your Header Text #1</CollapseCard.Header>
    <CollapseCard.Body>
      Your Body Text <b>Your Bold Text</b>
    </CollapseCard.Body>
  </CollapseCard>
);
export default Collapse;

Accordion

Import

import { Accordion, CollapseCard } from '@axa-fr/react-toolkit-collapse';
import '@axa-fr/react-toolkit-collapse/dist/af-accordion.css';

Use

const AccordionCollapse = () => (
  <Accordion
    collapses={[]}
    handleToggle={() => console.log('your function')}
    onlyOne={true}>
    <CollapseCard>
      <CollapseCard.Header>CollpaseCard #1 Title</CollapseCard.Header>
      <CollapseCard.Body>Your Body Text #1</CollapseCard.Body>
    </CollapseCard>
    <CollapseCard>
      <CollapseCard.Header>CollpaseCard #2 Title</CollapseCard.Header>
      <CollapseCard.Body>Your Body Text #2</CollapseCard.Body>
    </CollapseCard>
    <CollapseCard>
      <CollapseCard.Header>CollpaseCard #3 Title</CollapseCard.Header>
      <CollapseCard.Body>Your Body Text #3</CollapseCard.Body>
    </CollapseCard>
  </Accordion>
);
export default AccordionCollapse;