This package provides extensible tool bar for Atom.
Note: this package by itself adds an empty toolbar. To propagate it with icons you can install plugins.
On which edge of the editor should the tool bar appear. Possible options:
- Top
- Right
- Bottom
- Left
- Infinitesimal (12px)
- Tiny (14px)
- Very Small (16px)
- Small: (18px)
- Medium: (21px)
- Big (24px)
- Very Big (28px)
- Huge (32px)
- Visible
- Hidden
When on top/bottom, expand to full window width.
If your computer is equipped with a TouchBar (only Apple MacBook Pro series currently) it can display up to seven tool bar buttons there.
- Flex Tool Bar
- Tool Bar Main
- Toolbar for Atom
- Juno Plus in TypeScript
- And more...
By itself this package shows an empty tool bar. To add buttons and spacers to the tool bar, follow the instructions below.
Make sure the following properties are part of your package.json.
"consumedServices": {
"tool-bar": {
"versions": {
"^0 || ^1": "consumeToolBar"
}
}
}We recommend using Atom-Package-Deps in your package for installing dependency packages like this package.
In your main package file, add the following methods and replace
your-package-name with your package name.
let toolBar;
export function consumeToolBar(getToolBar) {
toolBar = getToolBar('your-package-name');
// Add buttons and spacers here...
}
export function deactivate() {
if (toolBar) {
toolBar.removeItems();
toolBar = null;
}
}let toolBar;
export function consumeToolBar(getToolBar) {
toolBar = getToolBar('your-package-name');
// Adding button
toolBar.addButton({
icon: 'octoface',
callback: 'application:about',
tooltip: 'About Atom'
});
// Adding spacer
toolBar.addSpacer();
// Using custom icon set (Ionicons)
const button = toolBar.addButton({
// For Material style icons, use md- prefix instead
icon: 'ios-gear-a',
callback: 'application:show-settings',
tooltip: 'Show Settings',
iconset: 'ion'
});
// Disable button
button.setEnabled(false);
// Function with data in callback
toolBar.addButton({
icon: 'alert',
callback(data) {
alert(data);
},
tooltip: 'Show Alert',
data: 'foo'
});
// Callback with modifiers
toolBar.addButton({
icon: 'octoface',
callback: {
'': 'application:cmd-1', // Without modifiers is default action
'alt': 'application:cmd-2',
'ctrl': 'application:cmd-3', // With function callback
'shift'(data) {
console.log(data);
},
'alt+shift': 'application:cmd-5', // Multiple modifiers
'alt+ctrl+shift': 'application:cmd-6' // All modifiers
},
data: 'foo'
});
// Calling multiple callbacks at once
toolBar.addButton({
icon: 'octoface',
callback: ['application:cmd-1', 'application:cmd-2']
});
// Adding spacer and button at the beginning of the tool bar
toolBar.addSpacer({priority: 10});
toolBar.addButton({
icon: 'octoface',
callback: 'application:about',
priority: 10
});
// Adding text button
toolBar.addButton({
text: 'hello',
callback: 'application:about'
});
// Text buttons can also have an icon
toolBar.addButton({
icon: 'octoface',
text: 'hello',
callback: 'application:about'
});
// Text buttons can be html
toolBar.addButton({
icon: 'octoface',
text: '<b>BIG</b> button',
html: true,
callback: 'application:about'
});
// Text buttons can be colored
toolBar.addButton({
icon: 'octoface',
callback: 'application:about',
tooltip: 'About Atom',
color: 'red' // color of the text or icon
background: 'black' // color of the background
});
// Buttons can be styled with arbitrary CSS through classes.
// An example of how the class can be used is show below.
toolBar.addButton({
icon: 'octoface',
callback: 'application:about',
class: 'my-awesome-class'
});
toolBar.addButton({
icon: 'octoface',
callback: 'application:about',
class: ['multiple', 'classes', 'also', 'works']
});
// Cleaning up when tool bar is deactivated
toolBar.onDidDestroy(() => {
this.toolBar = null;
// Teardown any stateful code that depends on tool bar ...
});
}/*
Follow the instructions at:
https://flight-manual.atom.io/using-atom/sections/basic-customization/#style-tweaks
to define your classes.
*/
.my-awesome-class {
background-image: url(data:image/svg+xml;base64,...);
background-repeat: no-repeat;
background-position: center;
}The method addButton requires an object with at least the property callback. The
callback must be an Atom command string, a custom callback function or an
object where the keys are key modifiers (alt, ctrl or shift) and the
values are commands or custom functions (see example).
The remaining properties
tooltip (default there is no tooltip),
text (default there is no text),
html (default false),
icon (default there is no icon),
iconset (defaults to Octicons),
data,
priority (defaults 50),
color,
background, and
class
are optional.
The tooltip option may be a string or an object that is passed to Atom's
TooltipManager
The return value of this method shares another method called
setEnabled(enabled) to enable or disable the button.
The method addSpacer has only one optional property priority (defaults
50).
Adds a custom HTML element as an item to the tool-bar. Arguments are:
element: pass your HTML element.priority: optional field specifying the position of the item.
Use the method removeItems to remove the buttons added by your package. This
is particular useful in your package deactivate method, but can be used at
any time.
The onDidDestroy method takes a function that will be called when the
tool-bar package is destroyed. This is useful if your package needs to do
cleanup when the tool-bar is deactivated but your package continues running.
- Octicons (Atom's flavour)
- Ionicons (
ionwithios-andmd-prefixes for the icon names) - FontAwesome (
faandfabfor brands) - Foundation (
fi) - IcoMoon (
icomoon) - Devicon (
devicon) - MaterialDesignIcons (
mdi)
tool-bar:toggletool-bar:position-toptool-bar:position-righttool-bar:position-bottomtool-bar:position-left
Issues and pull requests are very welcome. Feel free to write your own packages using this one. For all contributions credits are due:
- Pascal Bihler
- Nikita Gusakov
- Simon AKA simurai
- Carlos Santos
- Daniel Alejandro Cast
- James Coyle
- Andres Suarez
- Tony Brix
- Gareth McMullin
- Christopher Chedeau
- Paul Brown
- Raphael Fetzer
- Sven Lohrmann
- Amin Yahyaabadi
- Eric Cornelissen
- Jan T. Sott
- Luis Romero
- Jordan Eldredge
- Juan Rial
- Vadim Kotov
- Michael Bolin
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent