Popover

A floating panel that appears on click with rich content.

Basic Usage

Popover content
dart
1
2
3
4
5
6
7
8
DPopover(
  trigger: DButton(label: 'Click me'),
  children: [
    div(classes: 'p-4', [
      Component.text('Popover content'),
    ]),
  ],
)

Multiple Popovers

First popover content
Second popover content
Third popover content
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
DPopover(
  trigger: DButton(label: 'First'),
  children: [
    div(classes: 'p-3', [Component.text('First popover content')]),
  ],
)

DPopover(
  trigger: DButton(label: 'Second'),
  children: [
    div(classes: 'p-3', [Component.text('Second popover content')]),
  ],
)

DPopover(
  trigger: DButton(label: 'Third'),
  children: [
    div(classes: 'p-3', [Component.text('Third popover content')]),
  ],
)

Rich Content

?
Profile
Settings
Billing
Sign out
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
DPopover(
  trigger: DButton(label: 'User Menu'),
  children: [
    div(classes: 'w-64', [
      // User info header
      div(classes: 'p-4 border-b', [...]),
      // Menu items
      div(classes: 'p-2', [...]),
      // Sign out
      div(classes: 'p-2 border-t', [...]),
    ]),
  ],
)

With Form

Quick Add

Name
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
DPopover(
  trigger: DButton(
    label: 'Add Item',
    leadingIcon: DIcon(name: DIconNames.plus),
  ),
  children: [
    div(classes: 'w-80 p-4', [
      h4(classes: 'font-semibold mb-4', [Component.text('Quick Add')]),
      div(classes: 'space-y-3', [
        DInput(label: 'Name', placeholder: 'Enter item name'),
        div(classes: 'flex gap-2 pt-2', [
          DButton(label: 'Cancel', variant: DButtonVariant.ghost),
          DButton(label: 'Add'),
        ]),
      ]),
    ]),
  ],
)

API Reference

Prop Type Default Description
trigger Component required Element that opens the popover
children List<Component> required Popover content
closeOnClickOutside bool true Close when clicking outside