Collapse

Collapse is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

This component uses react-animate-height for animating height.

Import

copy
import { Collapse } from '@trendmicro/react-styled-ui';
import { Collapse } from '@trendmicro/react-styled-ui';

Usage

Basic usage

EDITABLE EXAMPLE
copy
function Example() {
  const [show, setShow] = React.useState(false);
  const handleToggle = () => setShow(!show);

  return (
    <Box whiteSpace="pre-wrap">
      <Box mb="2x">
        <Button variantColor="red" onClick={handleToggle}>
          Toggle
        </Button>
      </Box>
      <Collapse isOpen={show}>
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Collapse>
    </Box>
  );
}
function Example() {
  const [show, setShow] = React.useState(false);
  const handleToggle = () => setShow(!show);

  return (
    <Box whiteSpace="pre-wrap">
      <Box mb="2x">
        <Button variantColor="red" onClick={handleToggle}>
          Toggle
        </Button>
      </Box>
      <Collapse isOpen={show}>
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Collapse>
    </Box>
  );
}

Changing the startingHeight

EDITABLE EXAMPLE
copy
function Example() {
  const [show, setShow] = React.useState(false);
  const handleToggle = () => setShow(!show);
  const textStyleProps = {
    whiteSpace: show ? 'wrap' : 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    width: '100%',
  };

  return (
    <Box whiteSpace="pre-wrap">
      <Collapse startingHeight={20} isOpen={show}>
        <Text {...textStyleProps}>
          Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
        </Text>
      </Collapse>
      <Link onClick={handleToggle}>
        {show ? 'Show less' : 'Show more'}
      </Link>
    </Box>
  );
}
function Example() {
  const [show, setShow] = React.useState(false);
  const handleToggle = () => setShow(!show);
  const textStyleProps = {
    whiteSpace: show ? 'wrap' : 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    width: '100%',
  };

  return (
    <Box whiteSpace="pre-wrap">
      <Collapse startingHeight={20} isOpen={show}>
        <Text {...textStyleProps}>
          Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
        </Text>
      </Collapse>
      <Link onClick={handleToggle}>
        {show ? 'Show less' : 'Show more'}
      </Link>
    </Box>
  );
}

Props