St Widgets
Modules in GNOME Shell like PopupMenu
open in new window have classes like PopupMenuSection
and PopupImageMenuItem
built on St.Widget
open in new window. It's possible to modify and add other St
widgets to these in extensions.
Imports
In order to use St
widgets import the St
open in new window library.
import St from 'gi://St';
1
Example Usage
Scrollview
The following example shows how a St.ScrollView
open in new window widget can be added to a PopupMenu
.
Example
import St from 'gi://St';
import {Extension} from 'resource:///org/gnome/shell/extensions/extension.js';
import * as Main from 'resource:///org/gnome/shell/ui/main.js';
import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js';
import * as PopupMenu from 'resource:///org/gnome/shell/ui/popupMenu.js';
export default class ExampleExtension extends Extension {
enable() {
// Create a panel button
this._indicator = new PanelMenu.Button(0.0, this.metadata.name, false);
// Add an icon
const icon = new St.Icon({
icon_name: 'face-laugh-symbolic',
style_class: 'system-status-icon',
});
this._indicator.add_child(icon);
const scrollView = new St.ScrollView();
const section1 = new PopupMenu.PopupMenuSection();
// Use add_actor() to add scrollview to PopupMenuSection
scrollView.add_actor(section1.actor);
for (let i = 0; i < 30; i++) {
const pmItem = new PopupMenu.PopupMenuItem(`This is item ${i}`, {});
section1.addMenuItem(pmItem);
}
this._indicator.menu.box.add_child(scrollView);
// Add the indicator to the panel
Main.panel.addToStatusArea(this.uuid, this._indicator);
}
disable() {
this._indicator?.destroy();
this._indicator = null;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43