Collapsible

Example

"use client"

import * as React from "react"
import { ChevronsUpDown } from "lucide-react"

import {
  Button,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@databricks/appkit-ui/react"

export default function CollapsibleExample() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Collapsible
      open={isOpen}
      onOpenChange={setIsOpen}
      className="w-[350px] space-y-2"
    >
      <div className="flex items-center justify-between space-x-4 px-4">
        <h4 className="text-sm font-semibold">
          Example Collapsible
        </h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm" className="w-9 p-0">
            <ChevronsUpDown className="h-4 w-4" />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-3 font-mono text-sm">
        First item
      </div>
      <CollapsibleContent className="space-y-2">
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          Second item
        </div>
        <div className="rounded-md border px-4 py-3 font-mono text-sm">
          Third item
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Collapsible

Source: packages/appkit-ui/src/react/ui/collapsible.tsx

Props

Prop	Type	Required	Default	Description
defaultOpen	boolean		-	-
open	boolean		-	-
disabled	boolean		-	-
onOpenChange	((open: boolean) => void)		-	-
asChild	boolean		-	-

Usage

import { Collapsible } from '@databricks/appkit-ui';

<Collapsible /* props */ />

CollapsibleContent

Source: packages/appkit-ui/src/react/ui/collapsible.tsx

Props

Prop	Type	Required	Default	Description
forceMount	true		-	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
asChild	boolean		-	-

Usage

import { CollapsibleContent } from '@databricks/appkit-ui';

<CollapsibleContent /* props */ />

CollapsibleTrigger

Source: packages/appkit-ui/src/react/ui/collapsible.tsx

Props

Prop	Type	Required	Default	Description
asChild	boolean		-	-

Usage

import { CollapsibleTrigger } from '@databricks/appkit-ui';

<CollapsibleTrigger /* props */ />