Collapse

View Source

Simplifies information by expanding and collapsing content.

Toggle Collapse

Copy

Edit

render(() => {
  const [open, setOpen] = React.useState(false)
  return (
    <StackView alignment="center" spacing={1}>
      <Button
        title="Toggle Collapse"
        onClick={() => setOpen((open) => !open)}
      />
      <Collapse
        lazy
        open={open}
        onComplete={() => console.log('collapse is ', open ? 'open' : 'closed')}
      >
        <Card padding={2}>Collapsed content 🎉</Card>
      </Collapse>
    </StackView>
  )
})

render(() => {
  const [open, setOpen] = React.useState(false)
  return (
    <StackView alignment="center" spacing={1}>
      <Button
        title="Toggle Collapse"
        onClick={() => setOpen((open) => !open)}
      />
      <Collapse
        lazy
        open={open}
        onComplete={() => console.log('collapse is ', open ? 'open' : 'closed')}
      >
        <Card padding={2}>Collapsed content 🎉</Card>
      </Collapse>
    </StackView>
  )
})

Props

openboolean

Controls whether or not children are visible.

lazyboolean

Determines if children should render null or not while closed.

instantboolean

Instantly expand and collapse children.

onCompleteFunction

Called when opening or closing.

Props

PreviousChurchCenterStatus NextDataTable