Develop ultra fast with Prismane 🎉

Collapse

Collapse displays a container that can hide and show content.

Import

import { Collapse } from "@prismane/core";

Usage

function Default() {
  const [open, setOpen] = useState(false);

  return (
    <Flex direction="column" gap={10}>
      <Collapse open={open} w={fr(64)}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nam,
        ullam, natus qui facilis voluptatum quibusdam explicabo doloremque
        maxime architecto dicta error! Voluptas obcaecati fugiat nihil culpa
        laudantium quae quos.
      </Collapse>
      <Button
        onClick={() => {
          setOpen(!open);
        }}
      >
        {!open ? "Click to expand" : "Click to collapse"}
      </Button>
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.