Falcon UI

details

Details component together with Summary and DetailsContent can be used as a basis for accordions and collapsible panels.

xxxxxxxxxx
 
import { Details, Summary, DetailsContent } from '@deity/falcon-ui';

Details is a controlled component meaning its open state needs to be provided via open prop in contrast to browser native details element.

Simple accordion

First

Now that we know who you are, I know who I am. Im not a mistake! It all makes sense! you know how you can tell who the arch...

Second

In a comic you know how you can tell who the arch-villain s going to be? Hes the exact opposite of the hero

Independent collapsible panels

First

Now that we know who you are, I know who I am. Im not a mistake! It all makes sense! you know how you can tell who the arch...

Second

In a comic you know how you can tell who the arch-villain s going to be? Hes the exact opposite of the hero

 
<Box>
  <H3 mb="lg">Simple accordion</H3>
  <Value initial={1}>
    {({ value, set }) => (
      <React.Fragment>
        <Details open={value === 1}>
          <Summary
            onClick={e => {
              e.preventDefault()
              set(value === 1 ? 0 : 1)
            }}
          >
            First
          </Summary>
          <DetailsContent>
            Now that we know who you are, I know who I am. Im not a mistake!
            It all makes sense! you know how you can tell who the arch...
          </DetailsContent>
        </Details>
        <Details open={value === 2}>
          <Summary
            onClick={e => {
              e.preventDefault()
              set(value === 2 ? 0 : 2)
            }}
          >
            Second
          </Summary>
          <DetailsContent>
            In a comic you know how you can tell who the arch-villain s going
            to be? Hes the exact opposite of the hero
          </DetailsContent>
        </Details>
      </React.Fragment>
    )}
  </Value>
</Box>
<Box mt="xxl">
  <H3 mb="lg">Independent collapsible panels</H3>
  <Toggle initial={false}>
    {({ on, toggle }) => (
      <Details open={on}>
        <Summary
          onClick={e => {
            e.preventDefault()
            toggle()
          }}
        >
          First
        </Summary>
        <DetailsContent>
          Now that we know who you are, I know who I am. Im not a mistake! It
          all makes sense! you know how you can tell who the arch...
        </DetailsContent>
      </Details>
    )}
  </Toggle>
  <Toggle initial={false}>
    {({ on, toggle }) => (
      <Details open={on}>
        <Summary
          onClick={e => {
            e.preventDefault()
            toggle()
          }}
        >
          Second
        </Summary>
        <DetailsContent>
          In a comic you know how you can tell who the arch-villain s going to
          be? Hes the exact opposite of the hero
        </DetailsContent>
      </Details>
    )}
  </Toggle>
</Box>

Details specific props

Property	Type	Required	Default	Description
open	boolean	-	false	if true details contents are visible

Details, Summary and DetailsContent components accept all of the responsive, theme-based style props.