Collapsible

A single collapsible panel for toggling visibility of content.

Basic Usage

Click to expand
▼
This is the collapsible content that can be shown or hidden.
dart
1
2
3
4
5
6
7
8
9
10
DCollapsible(
  trigger: DCollapsibleTrigger(label: 'Click to expand'),
  children: [
    DCollapsibleContent(
      children: [
        Component.text('This is the collapsible content.'),
      ],
    ),
  ],
)

Default Open

Repository Info
▼
duxt-ui

A modern UI component library for Dart web applications.

dart
1
2
3
4
5
6
7
DCollapsible(
  defaultOpen: true,
  trigger: DCollapsibleTrigger(label: 'Repository Info'),
  children: [
    DCollapsibleContent(children: [...]),
  ],
)

With Icon

Advanced Settings
▼
Enable notifications
Dark mode
dart
1
2
3
4
5
6
7
8
9
DCollapsible(
  trigger: DCollapsibleTrigger(
    label: 'Advanced Settings',
    icon: DIcon(name: DIconNames.settings, size: DIconSize.sm),
  ),
  children: [
    DCollapsibleContent(children: [...]),
  ],
)

Disabled

Disabled Section
▼
This content cannot be revealed.
dart
1
2
3
4
5
6
7
8
9
DCollapsible(
  disabled: true,
  trigger: DCollapsibleTrigger(label: 'Disabled Section'),
  children: [
    DCollapsibleContent(
      children: [Component.text('This content cannot be revealed.')],
    ),
  ],
)

Custom Trigger

You can use any component as a trigger, including buttons, cards, or custom elements.

dart
1
2
3
4
5
6
7
8
9
10
11
12
DCollapsible(
  trigger: DButton(
    label: 'Show More',
    variant: DButtonVariant.outline,
    size: DButtonSize.sm,
  ),
  children: [
    div(classes: 'mt-4 p-4 rounded-lg bg-zinc-800/50', [
      Component.text('Custom content...'),
    ]),
  ],
)

Nested Collapsibles

Parent Section
▼
Parent content here.
Nested Section
▼
Nested content inside parent.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
DCollapsible(
  trigger: DCollapsibleTrigger(label: 'Parent Section'),
  children: [
    DCollapsibleContent(
      children: [
        Component.text('Parent content here.'),
        DCollapsible(
          trigger: DCollapsibleTrigger(label: 'Nested Section'),
          children: [
            DCollapsibleContent(
              children: [Component.text('Nested content.')],
            ),
          ],
        ),
      ],
    ),
  ],
)

API Reference

DCollapsible

Prop Type Default Description
trigger Component required Clickable element to toggle the collapsible
children List<Component> required Content to show when expanded
defaultOpen bool false Whether initially open
disabled bool false Disable toggle interaction

DCollapsibleTrigger

Prop Type Default Description
label String required Text label for the trigger
icon Component? null Optional icon before the label

DCollapsibleContent

Prop Type Default Description
children List<Component> required Content with default padding and styling