Collapse

View Source

Simplifies information by expanding and collapsing content.

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

instantboolean

Instantly expand and collapse children.

lazyboolean

Determines if children should render null or not while closed.

onCompleteFunction

Called when opening or closing.

openboolean

Controls whether or not children are visible.

Props

PreviousChurchCenterStatus NextDataTable