{"id":21648015,"url":"https://github.com/atom-community/tool-bar","last_synced_at":"2025-06-21T00:07:59.671Z","repository":{"id":22133087,"uuid":"25464012","full_name":"atom-community/tool-bar","owner":"atom-community","description":"Package providing customisable toolbar for Atom","archived":false,"fork":false,"pushed_at":"2023-10-16T07:57:13.000Z","size":3235,"stargazers_count":161,"open_issues_count":39,"forks_count":49,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-20T00:57:02.924Z","etag":null,"topics":["atom","hacktoberfest","toolbar"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atom-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2014-10-20T11:49:21.000Z","updated_at":"2025-05-24T03:41:58.000Z","dependencies_parsed_at":"2022-08-19T17:51:23.771Z","dependency_job_id":"4d4b64d9-4cfa-409c-893d-b051d818072d","html_url":"https://github.com/atom-community/tool-bar","commit_stats":null,"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"purl":"pkg:github/atom-community/tool-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-community%2Ftool-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-community%2Ftool-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-community%2Ftool-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-community%2Ftool-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atom-community","download_url":"https://codeload.github.com/atom-community/tool-bar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atom-community%2Ftool-bar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261039079,"owners_count":23100969,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atom","hacktoberfest","toolbar"],"created_at":"2024-11-25T06:52:55.767Z","updated_at":"2025-06-21T00:07:54.648Z","avatar_url":"https://github.com/atom-community.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Atom Tool Bar\n\n[![CI](https://github.com/atom-community/tool-bar/workflows/CI/badge.svg)](https://github.com/atom-community/tool-bar/actions?query=workflow%3ACI)\n[![apm](https://img.shields.io/apm/dm/tool-bar.svg)](https://atom.io/packages/tool-bar)\n[![Chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/atom-community/tool-bar?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nThis package provides extensible tool bar for Atom.\n\n**Note:** this package by itself adds an empty toolbar. To propagate it with\nicons you can [install plugins](#plugins).\n\n![Horizontal](http://cl.ly/image/2w0u3c1x1K3W/Screenshot-2015-04-21-16.46.49.png)\n\n![Vertical](http://cl.ly/image/1t3U3F191p35/Screenshot-2015-04-21-16.45.46.png)\n\n![Different Sizes](http://cl.ly/image/3v1N2F3e3I47/Screenshot-2015-04-21-16.45.46_2.png)\n\n![Light Theme](http://cl.ly/image/0g043b1e0P1X/Screenshot-2015-04-21-16.46.02.png)\n\n## Configuration\n\n### Position\n\nOn which edge of the editor should the tool bar appear. Possible options:\n\n*   Top\n*   Right\n*   Bottom\n*   Left\n\n### Icon size\n\n*   Infinitesimal *(12px)*\n*   Tiny *(14px)*\n*   Very Small *(16px)*\n*   Small: *(18px)*\n*   Medium: *(21px)*\n*   Big *(24px)*\n*   Very Big *(28px)*\n*   Huge *(32px)*\n\n### Visibility\n\n*   Visible\n*   Hidden\n\n### Full Width (available in Atom \u003e= 1.7)\n\nWhen on top/bottom, expand to full window width.\n\n### Use TouchBar\n\nIf your computer is equipped with a TouchBar (only Apple MacBook Pro series\ncurrently) it can display up to seven tool bar buttons there.\n\n## Plugins\n\n*   [Flex Tool Bar](https://atom.io/packages/flex-tool-bar)\n*   [Tool Bar Main](https://atom.io/packages/tool-bar-main)\n*   [Toolbar for Atom](https://atom.io/packages/tool-bar-atom)\n*   [Juno Plus](https://atom.io/packages/juno-plus) in TypeScript\n*   And [more](https://atom.io/packages/search?utf8=%E2%9C%93\u0026q=keyword%3Atool-bar)...\n\n## Packages using tool-bar\n\n*   [Particle Dev](https://atom.io/packages/spark-dev)\n*   [PlatformIO IDE](https://atom.io/packages/platformio-ide)\n*   [Organized](https://atom.io/packages/organized)\n\n## Integrating instructions\n\nBy itself this package shows an empty tool bar. To add buttons and spacers to\nthe tool bar, follow the instructions below.\n\n### Package.json\n\nMake sure the following properties are part of your `package.json`.\n\n```json\n\"consumedServices\": {\n  \"tool-bar\": {\n    \"versions\": {\n      \"^0 || ^1\": \"consumeToolBar\"\n    }\n  }\n}\n```\n\nWe recommend using [Atom-Package-Deps](https://github.com/steelbrain/package-deps)\nin your package for installing dependency packages like this package.\n\n### Main package file\n\nIn your main package file, add the following methods and replace\n`your-package-name` with your package name.\n\n```js\nlet toolBar;\n\nexport function consumeToolBar(getToolBar) {\n  toolBar = getToolBar('your-package-name');\n  // Add buttons and spacers here...\n}\n\nexport function deactivate() {\n  if (toolBar) {\n    toolBar.removeItems();\n    toolBar = null;\n  }\n}\n```\n\n### Example\n\n```js\nlet toolBar;\n\nexport function consumeToolBar(getToolBar) {\n  toolBar = getToolBar('your-package-name');\n\n  // Adding button\n  toolBar.addButton({\n    icon: 'octoface',\n    callback: 'application:about',\n    tooltip: 'About Atom'\n  });\n\n  // Adding spacer\n  toolBar.addSpacer();\n\n  // Using custom icon set (Ionicons)\n  const button = toolBar.addButton({\n    // For Material style icons, use md- prefix instead\n    icon: 'ios-gear-a',\n    callback: 'application:show-settings',\n    tooltip: 'Show Settings',\n    iconset: 'ion'\n  });\n\n  // Disable button\n  button.setEnabled(false);\n\n  // Function with data in callback\n  toolBar.addButton({\n    icon: 'alert',\n    callback(data) {\n      alert(data);\n    },\n    tooltip: 'Show Alert',\n    data: 'foo'\n  });\n\n  // Callback with modifiers\n  toolBar.addButton({\n    icon: 'octoface',\n    callback: {\n      '': 'application:cmd-1',      // Without modifiers is default action\n      'alt': 'application:cmd-2',\n      'ctrl': 'application:cmd-3',  // With function callback\n      'shift'(data) {\n        console.log(data);\n      },\n      'alt+shift': 'application:cmd-5',       // Multiple modifiers\n      'alt+ctrl+shift': 'application:cmd-6'   // All modifiers\n    },\n    data: 'foo'\n  });\n\n  // Calling multiple callbacks at once\n  toolBar.addButton({\n    icon: 'octoface',\n    callback: ['application:cmd-1', 'application:cmd-2']\n  });  \n\n  // Adding spacer and button at the beginning of the tool bar\n  toolBar.addSpacer({priority: 10});\n  toolBar.addButton({\n    icon: 'octoface',\n    callback: 'application:about',\n    priority: 10\n  });\n\n  // Adding text button\n  toolBar.addButton({\n    text: 'hello',\n    callback: 'application:about'\n  });\n\n  // Text buttons can also have an icon\n  toolBar.addButton({\n    icon: 'octoface',\n    text: 'hello',\n    callback: 'application:about'\n  });\n\n  // Text buttons can be html\n  toolBar.addButton({\n    icon: 'octoface',\n    text: '\u003cb\u003eBIG\u003c/b\u003e button',\n    html: true,\n    callback: 'application:about'\n  });\n\n  // Text buttons can be colored\n  toolBar.addButton({\n    icon: 'octoface',\n    callback: 'application:about',\n    tooltip: 'About Atom',\n    color: 'red' // color of the text or icon\n    background: 'black' // color of the background\n  });\n\n  // Buttons can be styled with arbitrary CSS through classes.\n  // An example of how the class can be used is show below.\n  toolBar.addButton({\n    icon: 'octoface',\n    callback: 'application:about',\n    class: 'my-awesome-class'\n  });\n  toolBar.addButton({\n    icon: 'octoface',\n    callback: 'application:about',\n    class: ['multiple', 'classes', 'also', 'works']\n  });\n\n  // Cleaning up when tool bar is deactivated\n  toolBar.onDidDestroy(() =\u003e {\n    this.toolBar = null;\n    // Teardown any stateful code that depends on tool bar ...\n  });\n}\n```\n\n```css\n/*\nFollow the instructions at:\nhttps://flight-manual.atom.io/using-atom/sections/basic-customization/#style-tweaks\nto define your classes.\n*/\n.my-awesome-class {\n  background-image: url(data:image/svg+xml;base64,...);\n  background-repeat: no-repeat;\n  background-position: center;\n}\n```\n\n## Methods\n\n### `.addButton({icon, iconset, text, html, callback, priority, tooltip, data, color, background})`\n\nThe method `addButton` requires an object with at least the property `callback`. The\n`callback` must be an Atom command string, a custom callback function or an\nobject where the keys are key modifiers (`alt`, `ctrl` or `shift`) and the\nvalues are commands or custom functions (see [example](#example)).\n\nThe remaining properties\n`tooltip` (default there is no tooltip),\n`text` (default there is no text),\n`html` (default `false`),\n`icon` (default there is no icon),\n`iconset` (defaults to `Octicons`),\n`data`,\n`priority` (defaults `50`),\n`color`,\n`background`, and\n`class`\nare optional.\n\nThe `tooltip` option may be a `string` or an `object` that is passed to Atom's\n[TooltipManager](https://atom.io/docs/api/latest/TooltipManager#instance-add)\n\nThe return value of this method shares another method called\n`setEnabled(enabled)` to enable or disable the button.\n\n### `.addSpacer({priority})`\n\nThe method `addSpacer` has only one optional property `priority` (defaults\n`50`).\n\n### `.addItem({element, priority})`\n\nAdds a custom HTML element as an item to the tool-bar. Arguments are:\n- `element`: pass your HTML element.\n- `priority`: optional field specifying the position of the item.\n\n### `.removeItems()`\n\nUse the method `removeItems` to remove the buttons added by your package. This\nis particular useful in your package `deactivate` method, but can be used at\nany time.\n\n### `.onDidDestroy(callback)`\n\nThe `onDidDestroy` method takes a function that will be called when the\n`tool-bar` package is destroyed. This is useful if your package needs to do\ncleanup when the `tool-bar` is deactivated but your package continues running.\n\n## Supported icon sets\n\n*   [Octicons](https://octicons.github.com) (Atom's flavour)\n*   [Ionicons](http://ionicons.com) (`ion` with `ios-` and `md-` prefixes for the icon names)\n*   [FontAwesome](https://fontawesome.com/) (`fa` and `fab` for brands)\n*   [Foundation](http://zurb.com/playground/foundation-icon-fonts-3) (`fi`)\n*   [IcoMoon](https://icomoon.io) (`icomoon`)\n*   [Devicon](http://konpa.github.io/devicon/) (`devicon`)\n*   [MaterialDesignIcons](https://materialdesignicons.com/) (`mdi`)\n\n## Supported commands\n\n*   `tool-bar:toggle`\n*   `tool-bar:position-top`\n*   `tool-bar:position-right`\n*   `tool-bar:position-bottom`\n*   `tool-bar:position-left`\n\n## Authors\n\n*   [Wojtek Siudzinski](http://suda.pl) \u003csup\u003e(owner)\u003c/sup\u003e\n*   [Jeroen van Warmerdam](https://github.com/jerone)\n*   [Ryo Narita](https://github.com/cakecatz)\n\n## Contributors\n\nIssues and pull requests are very welcome. Feel free to write your own packages\nusing this one. For all contributions credits are due:\n\n*   [Pascal Bihler](https://github.com/pbihler)\n*   [Nikita Gusakov](https://github.com/nkt)\n*   [Simon AKA simurai](https://github.com/simurai)\n*   Carlos Santos\n*   [Daniel Alejandro Cast](https://github.com/lexcast)\n*   [James Coyle](https://github.com/JamesCoyle)\n*   [Andres Suarez](https://github.com/zertosh)\n*   [Tony Brix](https://github.com/UziTech)\n*   [Gareth McMullin](https://github.com/gsmcmullin)\n*   [Christopher Chedeau](https://github.com/vjeux)\n*   [Paul Brown](https://github.com/PaulBrownMagic)\n*   [Raphael Fetzer](https://github.com/pheraph)\n*   [Sven Lohrmann](https://github.com/malnvenshorn)\n*   [Amin Yahyaabadi](https://github.com/aminya)\n*   [Eric Cornelissen](https://github.com/ericcornelissen)\n*   [Jan T. Sott](https://github.com/idleberg)\n*   [Luis Romero](https://github.com/luiscobits)\n*   [Jordan Eldredge](https://github.com/captbaritone)\n*   [Juan Rial](https://github.com/jrial)\n*   [Vadim Kotov](https://github.com/vkotovv)\n*   [Michael Bolin](https://github.com/bolinfest)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatom-community%2Ftool-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatom-community%2Ftool-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatom-community%2Ftool-bar/lists"}