ComponentsBeta

Collapsible

An interactive component which expands/collapses a panel.

Books

import React, { useState } from 'react';
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
  Icon,
} from '@minddrop/ui';

const NavItem = ({ children, subItem, ...other }) => (
  <div
    role="button"
    {...other}
    style={{
      width: 200,
      height: 28,
      borderRadius: 3,
      display: 'flex',
      alignItems: 'center',
      marginBottom: 6,
      backgroundColor: 'var(--bgApp)',
      paddingLeft: subItem ? 30 : 6,
      cursor: 'pointer',
      userSelect: 'none',
    }}
  >
    {children}
  </div>
);

export const CollapsibleDemo = () => {
  const [open, setOpen] = useState(false);

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
      }}
    >
      <Collapsible open={open} onOpenChange={setOpen}>
        <CollapsibleTrigger>
          <NavItem>
            <span>
              <Icon
                name="toggle-filled"
                color="regular"
                style={{
                  transform: open ? 'rotate(90deg)' : 'none',
                }}
              />
            </span>
            Books
          </NavItem>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <NavItem subItem>The book of tea</NavItem>
          <NavItem subItem>All the tea in China</NavItem>
          <NavItem subItem>Tea: A User&apos;s Guide</NavItem>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
};

export default CollapsibleDemo;

Features

Full keyboard navigation.
Can be controlled or uncontrolled.

Usage

Import the component from the @minddrop/ui package.

import { Collapsible } from '@minddrop/ui';

export default () => {
  return (
    <Collapsible>
      <CollapsibleTrigger>
        <NavItem />
      </CollapsibleTrigger>
      <CollapsibleContent>
        <SubNavItem />
        <SubNavItem />
      </CollapsibleContent>
    </Collapsible>
  );
};

API Reference

Collapsible

Contains all the parts of a collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value
`disabled`	`boolean`	No default value

Trigger

The button that toggles the collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`

Content

The component that contains the collapsible content.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value

Styling

Animating content size

Use the --radix-collapsible-content-width and/or --radix-collapsible-content-height CSS variables to animate the size of the content when it opens/closes.

@keyframes open {
  from {
    height: 0;
  }

  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes close {
  from {
    height: var(--radix-collapsible-content-height);
  }

  to {
    height: 0;
  }
}