Slideover

A panel that slides in from the edge of the screen.

Basic Usage

The Slideover component includes its own trigger and manages state internally via JavaScript.

Panel Title

Slideover content goes here.
dart
1
2
3
4
5
6
7
DSlideover(
  trigger: DButton(label: 'Open Slideover'),
  title: 'Panel Title',
  children: [
    Component.text('Slideover content goes here.'),
  ],
)

Sides

Right Panel

Content from the right.

Left Panel

Content from the left.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Right (Default)
DSlideover(
  trigger: DButton(label: 'Right'),
  side: DSlideoverSide.right,
  title: 'Right Panel',
  children: [...],
)

// Left
DSlideover(
  trigger: DButton(label: 'Left'),
  side: DSlideoverSide.left,
  title: 'Left Panel',
  children: [...],
)

Sizes

Small Panel

Small slideover.

Medium Panel

Medium slideover.

Large Panel

Large slideover.
dart
1
2
3
4
5
6
DSlideover(
  trigger: DButton(label: 'Small'),
  size: DSlideoverSize.sm,  // sm, md, lg, xl, full
  title: 'Panel',
  children: [...],
)

With Description

Edit Profile

Update your personal information.

Name
Email
dart
1
2
3
4
5
6
7
8
9
10
11
DSlideover(
  trigger: DButton(label: 'Edit Profile'),
  title: 'Edit Profile',
  description: 'Update your personal information.',
  children: [
    div(classes: 'space-y-4', [
      DInput(label: 'Name'),
      DInput(label: 'Email'),
    ]),
  ],
)

With Footer

Edit Item

Name
Description
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DSlideover(
  trigger: DButton(label: 'Open Form'),
  title: 'Edit Item',
  children: [
    div(classes: 'space-y-4', [
      DInput(label: 'Name'),
      DTextarea(label: 'Description'),
    ]),
  ],
  footer: div(classes: 'flex gap-2 justify-end', [
    DButton(label: 'Cancel', variant: DButtonVariant.ghost),
    DButton(label: 'Save'),
  ]),
)

API Reference

Prop Type Default Description
trigger Component required Element that opens the slideover
side DSlideoverSide right Edge to slide from (left, right)
size DSlideoverSize md Panel width (sm, md, lg, xl, full)
title String? null Panel title
description String? null Subtitle below title
children List<Component> [] Panel body content
footer Component? null Footer content
closeOnOverlay bool true Close when clicking backdrop