St Widgets

Modules in GNOME Shell like PopupMenuopen in new window have classes like PopupMenuSection and PopupImageMenuItem built on St.Widgetopen 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 Stopen in new window library.

import St from 'gi://St';

Example Usage

Scrollview

The following example shows how a St.ScrollViewopen 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;
    }
}