Collapsible

An interactive component which expands and collapses a content area.

<script setup lang="ts">
import { Collapsible } from '@destyler-ui/vue'
</script>

<template>
  <Collapsible.Root>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export function Basic(props: Collapsible.RootProps) {
  return (
    <Collapsible.Root {...props}>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function Basic() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">
  import type { CollapsibleRootProps } from '@destyler-ui/svelte'
  import { Collapsible } from '@destyler-ui/svelte'
  const props: CollapsibleRootProps = $props()
</script>
<Collapsible.Root {...props}>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Anatomy

<script setup lang="ts">
import { Collapsible } from '@destyler-ui/vue'
</script>

<template>
  <Collapsible.Root>
    <Collapsible.Trigger />
    <Collapsible.Content />
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger />
      <Collapsible.Content />
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger />
      <Collapsible.Content />
    </Collapsible.Root>
  )
}

<script lang="ts">
  import { Collapsible } from '@destyler-ui/svelte'
</script>

<Collapsible.Root>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Examples

Basic

<script setup lang="ts">
import { Collapsible } from '@destyler-ui/vue'
</script>

<template>
  <Collapsible.Root>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export function Basic(props: Collapsible.RootProps) {
  return (
    <Collapsible.Root {...props}>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function Basic() {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">
  import type { CollapsibleRootProps } from '@destyler-ui/svelte'
  import { Collapsible } from '@destyler-ui/svelte'
  const props: CollapsibleRootProps = $props()
</script>
<Collapsible.Root {...props}>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Initial Open

Open the collapsible by default.

<script setup lang="ts">
import { Collapsible } from '@destyler-ui/vue'
</script>

<template>
  <Collapsible.Root defaultOpen>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export function InitialOpen() {
  return (
    <Collapsible.Root defaultOpen>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function InitialOpen() {
  return (
    <Collapsible.Root open>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root defaultOpen><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

Lazy Mount

Mount the content lazily when first opened.

<script setup lang="ts">
import { Collapsible } from '@destyler-ui/vue'
</script>

<template>
  <Collapsible.Root lazyMount>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export function LazyMount() {
  return (
    <Collapsible.Root lazyMount>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function LazyMount() {
  return (
    <Collapsible.Root lazyMount>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root lazyMount><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

Unmount On Exit

Unmount the content when the collapsible is closed.

<script setup lang="ts">
import { Collapsible } from '@destyler-ui/vue'
</script>

<template>
  <Collapsible.Root unmountOnExit>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export function UnmountOnExit() {
  return (
    <Collapsible.Root unmountOnExit>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function UnmountOnExit() {
  return (
    <Collapsible.Root unmountOnExit>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root unmountOnExit><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

Lazy Mount And Unmount On Exit

Combine lazy mounting with unmount on exit.

<script setup lang="ts">
import { Collapsible } from '@destyler-ui/vue'
</script>

<template>
  <Collapsible.Root lazyMount unmountOnExit>
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export function LazyMountAndUnmountOnExit() {
  return (
    <Collapsible.Root lazyMount unmountOnExit>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function LazyMountAndUnmountOnExit() {
  return (
    <Collapsible.Root lazyMount unmountOnExit>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root lazyMount unmountOnExit><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

On Exit Complete

Handle the exit complete event.

<script setup lang="ts">
import { Collapsible } from '@destyler-ui/vue'
</script>

<template>
  <Collapsible.Root @exit-complete="() => console.log('on exit')">
    <Collapsible.Trigger>Toggle</Collapsible.Trigger>
    <Collapsible.Content>Content</Collapsible.Content>
  </Collapsible.Root>
</template>

import { Collapsible } from '@destyler-ui/react'

export function OnExitComplete() {
  return (
    <Collapsible.Root onExitComplete={
      // eslint-disable-next-line no-alert
      () => alert('on exit')
    }
    >
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

import { Collapsible } from '@destyler-ui/solid/collapsible'

export function OnExitComplete() {
  return (
    <Collapsible.Root onExitComplete={() => console.warn('on exit')}>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.Root>
  )
}

<script lang="ts">import { Collapsible } from '@destyler-ui/svelte'</script>
<Collapsible.Root onExitComplete={() => console.log('on exit')}><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.Root>

Root Provider

<script setup lang="ts">
import { Collapsible, useCollapsible } from '@destyler-ui/vue'

const collapsible = useCollapsible()

</script>

<template>
    <span>{{ collapsible.visible ? 'Visible' : 'Hidden' }}</span>

    <Collapsible.RootProvider :value="collapsible">
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content>Content</Collapsible.Content>
    </Collapsible.RootProvider>
</template>

import { Collapsible, useCollapsible } from '@destyler-ui/react'

export function RootProvider() {
  const collapsible = useCollapsible()

  return (
    <>
      <span>{collapsible.visible ? 'Visible' : 'Hidden'}</span>

      <Collapsible.RootProvider value={collapsible}>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content>Content</Collapsible.Content>
      </Collapsible.RootProvider>
    </>
  )
}

import { Collapsible, useCollapsible } from '@destyler-ui/solid/collapsible'

export function RootProvider() {
  const collapsible = useCollapsible()

  return (
    <>
      <span>{collapsible().visible ? 'Visible' : 'Hidden'}</span>

      <Collapsible.RootProvider value={collapsible}>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Content>Content</Collapsible.Content>
      </Collapsible.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Collapsible, useCollapsible } from '@destyler-ui/svelte'
  const id = $props.id()
  const collapsible = useCollapsible({ id })
</script>
<span>{collapsible().visible ? 'Visible' : 'Hidden'}</span>
<Collapsible.RootProvider value={collapsible}><Collapsible.Trigger>Toggle</Collapsible.Trigger><Collapsible.Content>Content</Collapsible.Content></Collapsible.RootProvider>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultOpen`	—	`false \| true` The initial open state of the collapsible when it is first rendered. Use when you do not need to control its open state.
`disabled`	—	`false \| true` Whether the collapsible is disabled
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; content: string; trigger: string; }>` The ids of the elements in the collapsible. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`open`	—	`false \| true` The controlled open state of the collapsible. Can be binded with v-model.
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Emit	Event
`exitComplete`	`[]` Function called when the animation ends in the closed state.
`openChange`	`[details: OpenChangeDetails]` Function called when the popup is opened
`update:open`	`[open: boolean]` Event handler called when the open state of the collapsible changes.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
`value*`	—	`Collapsible`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultOpen`	—	`false \| true` The initial open state of the collapsible when it is first rendered. Use when you do not need to control its open state.
`disabled`	—	`false \| true` Whether the collapsible is disabled
`ids`	—	`Partial<{ root: string; content: string; trigger: string; }>` The ids of the elements in the collapsible. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state.
`onOpenChange`	—	`(details: collapsible.OpenChangeDetails) => void` Function called when the popup is opened
`open`	—	`false \| true` Whether the collapsible is open
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Content

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseCollapsibleContext) => ReactNode`

RootProvider

Prop	Default	Type
`value*`	—	`UseCollapsibleReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js419.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultOpen`	—	`false \| true` The initial open state of the collapsible when it is first rendered. Use when you do not need to control its open state.
`disabled`	—	`false \| true` Whether the collapsible is disabled
`ids`	—	`Partial<{ root: string; content: string; trigger: string; }>` The ids of the elements in the collapsible. Useful for composition.
`lazyMount`	`false`	`false \| true` Whether to enable lazy mounting
`onExitComplete`	—	`() => void` Function called when the animation ends in the closed state.
`onOpenChange`	—	`(details: OpenChangeDetails) => void` Function called when the popup is opened
`open`	—	`false \| true` Whether the collapsible is open
`unmountOnExit`	`false`	`false \| true` Whether to unmount on exit.

Content

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js419.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
`children*`	—	`(context: UseCollapsibleContext) => Element`

RootProvider

Prop	Default	Type
`value*`	—	`UseCollapsibleReturn`
`asChild`	—	`(props: (userProps?: solid_js419.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js419.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultOpen`	—	`false \| true`
`disabled`	—	`false \| true` Whether the collapsible is disabled
`id`	—	`string`
`ids`	—	`Partial<{ root: string; content: string; trigger: string; }>` The ids of the elements in the collapsible. Useful for composition.
`lazyMount`	—	`false \| true` Whether the content should be lazy mounted
`onExitComplete`	—	`() => void` Callback fired when the animation ends
`onOpenChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CollapsibleOpenChangeDetails) => void` Function called when the popup is opened
`open`	—	`false \| true` Whether the collapsible is open
`unmountOnExit`	—	`false \| true` Whether the content should be unmounted when collapsed

Content

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Context

Prop	Default	Type
`render`	—	`Snippet<[UseCollapsibleContext]>`

RootProvider

Prop	Default	Type
`value*`	—	`UseCollapsibleReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Trigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`