# Quick Add Component ## Introduction [Cocos Creator Editor Extension] **Select several nodes, press the hotkey to open the search bar, find target component by entering the name, and add the component to the nodes you selected quickly.** ## Open Source This extension is an open source project, here is the git repository: [https://gitee.com/ifaswind/ccc-quick-add-component](https://gitee.com/ifaswind/ccc-quick-add-component) If you like this project, don't forget to star [![star](https://gitee.com/ifaswind/ccc-quick-add-component/badge/star.svg?theme=dark)](https://gitee.com/ifaswind/ccc-quick-add-component/stargazers)! *If you have any usage problems, just create an issue on Gitee or add my WeChat `im_chenpipi` and leave a message.* ## Screenshots ![screenshot-1](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-1.png) ![screenshot-2](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-2.png) ![screenshot-2](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-3.png) ![search-bar](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/search-bar.png) ![setting-panel](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/setting-panel.png) ## Environment Platform: Windows、macOS Engine: Cocos Creator 2.x ## Download & Installation ### Install from Cocos Store You can find this extension in Cocos Store now, click on *Extension -> Cocos Store* option to open the Cocos Store. Enter "**Quick Add Component**" in the search bar, find it and then install it. ![cocos-store](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/cocos-store.png) *Quick Add Component: [https://store.cocos.com/app/detail/2712](https://store.cocos.com/app/detail/2712)* ### Download from git repository Click [here](https://gitee.com/ifaswind/ccc-quick-add-component/releases) or go to the release panel, download the latest version package of this extension. And then unzip the package: - Windows: Unzip to `C:\Users\${your username}\.CocosCreator\packages\` - macOS: Unzip to `~/.CocosCreator/packages/` For example, on my Windows computer, the full path of `main.js` file should be `C:\Users\Shaun\.CocosCreator\packages\ccc-quick-add-component\main.js`. ## Usage ### Search and add component 1. Select several nodes in "Node Tree". 2. Press the hotkey (The default is `F3`) or click on *Extension -> Quick Add Component -> Search* option to open the search bar. 3. Enter the component name then you'll get a list of components. 4. Scroll the mouse wheel or press the `Up Arrow` and `Down Arrow` to scroll through the list. 5. Find and select your target component, click on it or press `Enter` to add it to the nodes that you selected. And then, click on anywhere outside the search bar or press `ESC` to close the search bar. ### Setting Click on *Extension -> Quick Add Component -> Setting* option to open the setting panel. In the setting panel, you can choose a hotkey(shortcut, for opening the search bar quickly) in preset list, or customize one by yourself. One thing you should know, not every keys/keys-combinations can be used, because some keys/keys-combinations have been used by the system or Cocos Creator. *Accelerator reference: [https://www.electronjs.org/docs/api/accelerator](https://www.electronjs.org/docs/api/accelerator)* 🥳 Enjoy! --- # 公众号 ## 菜鸟小栈 😺 我是陈皮皮,一个还在不断学习的游戏开发者,一个热爱分享的 Cocos Star Writer。 🎨 这是我的个人公众号,专注但不仅限于游戏开发和前端技术分享。 💖 每一篇原创都非常用心,你的关注就是我原创的动力! > Input and output. ![](https://gitee.com/ifaswind/image-storage/raw/master/weixin/official-account.png)