@contentful/f36-collapse

Forma 36: Collapse React Component

Usage no npm install needed!

<script type="module">
  import contentfulF36Collapse from 'https://cdn.skypack.dev/@contentful/f36-collapse';
</script>

README

title: 'Collapse' slug: /components/collapse/ section: 'animationComponents' github: 'https://github.com/contentful/forma-36/tree/master/packages/components/collapse' typescript: ./src/Collapse.tsx, storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/animation-collapse--basic'

import { Button, Text } from '@contentful/f36-components'; import { ExternalLinkIcon } from '@contentful/f36-icons';

Collapse is used to elegantly hide and show extended content programmatically.

Import

import { Collapse } from '@contentful/f36-components';

Examples

The collapse component is a basic component to show and hide content programmatically.

Basic usage

function CollapseExample() {
  const [isExpanded, setIsExpanded] = React.useState(true);
  return (
    <div>
      <Button onClick={() => setIsExpanded(!isExpanded)}>Toggle</Button>
      <Collapse isExpanded={isExpanded}>
        <Text>
          Customers on the Team tier can pay with a credit card (American
          Express, MasterCard or Visa). Enterprise customers have the choice of
          paying with a credit card or wire transfer.
        </Text>
      </Collapse>
    </div>
  );
}

Props (API reference)

Content guidelines

  • This component offers a controllable way to hide or show content programmatically
  • Anything can be passed as the content of the collapse

Accessibility

  • Trigger for expanding and closing should be an accessible button. If content is hidden, it gets set to "aria-hidden"="true".