Skip to content

ModalDrawer

import { ModalDrawer } from "@material";
export component Example inherits Window {
width: 400px;
height: 300px;
background: transparent;
ModalDrawer {
title: "Settings";
position-right: false;
// Drawer content goes here
Rectangle {
background: #f0f0f0;
Text {
text: "Modal drawer content";
}
}
}
}
slint

A ModalDrawer is a modal overlay that slides in from either the left or right side of the screen. It blocks interaction with the content behind it and includes smooth slide animations.

bool default: false

Determines which side the drawer slides in from. When true, the drawer slides in from the right side. When false, it slides in from the left side.

string default: ""

The title text displayed in the drawer header. If empty, no header is shown.


© 2025 SixtyFPS GmbH