How do I implement icon shortcuts correctly?

Most ides provide icon shortcuts on the home screen, but Theia doesn’t. How do I add them? The way I tried it was to add a ‘defaultWidgetOptions: {area: ‘top’}’ widget under ‘top-panel’ and then add style ‘# thea-left-right-split-panel {top: 64px ! important; }’, this does not look right, how to implement? How do you tie functionality to ICONS? What is the right approach?

For example, bind debugging function, how to implement debugging configuration select box function? I look forward to your reply.

@Dennis thank you for the discussion, the @theia/toolbar should do what you’re looking for:


@vince-fugnitto Thank you for your reply. Could you please help to explain the code? How should I add it to my own program? This may not be an easy thing for me


How should I add it to my own program?

You would simply add the @theia/toolbar extension as a dependency in your application’s package.json much like your other @theia extensions. The toolbar is hidden by default so you can either enable it through the preference toolbar.showToolbar or using the toggle toolbar command. If you want it available by default to your end-users then you’d likely want to turn this preference on by default.

Could you please help to explain the code?

The question is a little too broad at this time, play around with the toolbar and you can come back with specific questions if needed. If you need to customize the default icons or commands in the toolbar you can take a look at the link in it’s readme which will point to theia/examples/api-samples/src/browser/toolbar at master · eclipse-theia/theia · GitHub.

@vince-fugnitto Thank you,I will continue to learn it.
Do I need to upgrade the other packages to 1.27.0 to use “@theia/toolbar”?

Yes exactly, you cannot mix and match versions of @theia extensions else there would be errors on startup.

Thank you youre reply.
When I upgraded the package version to 1.27.0, the version of Node changed from 12.18.3 to 16.16.0. Docker reported an error when packaging. Does the NodeJS verification part need to be modified?

@Dennis I’m not sure whether the NodeJS verification is actually necessary. In theory you should be able to simply base your image on node:16 which should resolve this issue on its own.

Since ‘@theia/toolbar’ was updated in 1.23.0, I updated the package version all to 1.23.0, originally 1.20.0, and then deployed on Linux with the following problems: