Collapse

Alpha

Creates regions of content that can expand/collapse with a simple animation.

Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Source Storybook

Collapse provides an orchestrated animation for situations where you may need to reduce cognitive load with progressive disclosure.

Import

import {Collapse} from '@fuegokit/react'

Usage

function Example() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <AtlasButton onClick={() => setOpen(!open)}>Toggle collapse</AtlasButton>
      <Collapse in={open}>
        <Box
          sx={{
            backgroundColor: 'background.accent.teal.subtlest',
            border: '1px dashed',
            borderColor: 'border.accent.teal',
            color: 'text.default',
            padding: 4,
            marginTop: 3
          }}
        >
          Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non at interdum
          iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non at
          interdum iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non
          at interdum iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut
          non at interdum iac.
        </Box>
      </Collapse>
    </>
  )
}
render(<Example />)

function Example() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <AtlasButton onClick={() => setOpen(!open)}>Toggle collapse</AtlasButton>
      <Collapse in={open}>
        <Box
          sx={{
            backgroundColor: 'background.accent.teal.subtlest',
            border: '1px dashed',
            borderColor: 'border.accent.teal',
            color: 'text.default',
            padding: 4,
            marginTop: 3
          }}
        >
          Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non at interdum
          iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non at
          interdum iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut non
          at interdum iac. Lorem ipsum dolor sit amet, consec adipiscing elit. Et volutpat ut vitae fusce. In tellus ut
          non at interdum iac.
        </Box>
      </Collapse>
    </>
  )
}
render(<Example />)