Collapse

Collapse shows and hides content with a sliding animation. Use it for details, logs and advanced settings.

Usage#

import { Collapse } from "@clawscale/react";

<Collapse isOpen={isOpen}>
  <RunLog />
</Collapse>

Examples#

Basic#

isOpen controls visibility. Keep the content in normal flow, because Collapse measures its height to animate. Set aria-expanded on the toggle.

core/collapse/basic.tsx

import { Button, Collapse, Pre } from "@clawscale/react";
import { useState } from "react";

export default function CollapseBasic() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div style={{ width: "100%", maxWidth: 480 }}>
      <Button
        aria-expanded={isOpen}
        endIcon={isOpen ? "chevron-up" : "chevron-down"}
        text={isOpen ? "Hide run log" : "Show run log"}
        onClick={() => setIsOpen(!isOpen)}
      />
      <Collapse isOpen={isOpen}>
        <Pre>
          {`02:00:04  extract    1,204,331 rows
02:03:12  transform  1,203,907 rows
02:04:40  load       done in 4m 36s`}
        </Pre>
      </Collapse>
    </div>
  );
}

Keep children mounted#

Closed content unmounts by default. keepChildrenMounted keeps it in the DOM, so state such as typed text survives. Type a filter, hide the panel and show it again.

core/collapse/keep-mounted.tsx

import { Button, Collapse, InputGroup } from "@clawscale/react";
import { useState } from "react";

export default function CollapseKeepMounted() {
  const [isOpen, setIsOpen] = useState(true);
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <Button
        aria-expanded={isOpen}
        icon="filter"
        text={isOpen ? "Hide filters" : "Show filters"}
        onClick={() => setIsOpen(!isOpen)}
      />
      <Collapse isOpen={isOpen} keepChildrenMounted>
        <div style={{ paddingTop: 8 }}>
          <InputGroup leftIcon="search" placeholder="Filter by pipeline" aria-label="Filter by pipeline" />
        </div>
      </Collapse>
    </div>
  );
}

Props interface#

interface CollapseProps extends Props@clawscale/react

Props	Description
`children`	`React.ReactNode` Contents to collapse.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`component`	`React.ElementType` = `"div"` Component to render as the root element. Useful when rendering a `Collapse` inside a `<table>`, for instance.
`isOpen`	`boolean` = `false` Whether the component is open or closed.
`keepChildrenMounted`	`boolean` = `false` Whether the child components will remain mounted when the `Collapse` is closed. Setting to true may improve performance by avoiding re-mounting children.
`transitionDuration`	`number` = `200` The length of time the transition takes, in milliseconds. This must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.