SOLFIND
Web Lens
Portal home

Window Customization | Electron

https://www.electronjs.org/docs/latest/tutorial/window-customization • 41 KB fetched
Open original page


Window Customization | Electron Skip to main content Electron Docs API Blog Tools * Electron Forge * Electron Fiddle Community * Governance * Showcase * Resources Releases English * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 Search * Get Started * Processes in Electron * Best Practices * Examples * Dark Mode * Device Access * In-App Purchases * * Keyboard Shortcuts * Deep Links * Desktop Launcher Actions * * Menus * Multithreading * Native File Drag & Drop * Navigation History * Notifications * Offscreen Rendering * Online/Offline Event Detection * Progress Bars * Recent Documents * * * Representing Files in a BrowserWindow * * SpellChecker * Web Embeds * Taskbar Customization * * Window Customization * Custom Title Bar * Custom Window Interactions * Custom Window Styles * Development * Native Node Modules * Distribution * Testing And Debugging * References * Contributing * * Examples * Window Customization Window Customization The  BrowserWindow  module is the foundation of your Electron application, and it exposes many APIs that let you customize the look and behavior of your app’s windows. This section covers how to implement various use cases for window customization on macOS, Windows, and Linux. note BrowserWindow is a subclass of the BaseWindow module. Both modules allow you to create and manage application windows in Electron, with the main difference being that BrowserWindow supports a single, full size web view while BaseWindow supports composing many web views. BaseWindow can be used interchangeably with BrowserWindow in the examples of the documents in this section. 📄️ Custom Title Bar Application windows have a default chrome applied by the OS. Not to be confused with the Google Chrome browser, window _chrome_ refers to the parts of the window (e.g. title bar, toolbars, controls) that are not a part of the main web content. While the default title bar provided by the OS chrome is sufficient for simple use cases, many applications opt to remove it. Implementing a custom title bar can help your application feel more modern and consistent across platforms. 📄️ Custom Window Interactions By default, windows are dragged using the title bar provided by the OS chrome. Apps that remove the default title bar need to use the app-region CSS property to define specific areas that can be used to drag the window. Setting app-region: drag marks a rectangular area as draggable. 📄️ Custom Window Styles !Frameless Window Edit this page Previous Taskbar Customization Next Custom Title Bar Docs * Getting Started * API Reference Checklists * Performance * Security Tools * Electron Forge * Electron Fiddle Community * Governance * Resources * Discord * Bluesky * X * Mastodon * Stack Overflow More * GitHub * Open Collective * Infrastructure Dashboard Copyright OpenJS Foundation and Electron contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation , please see our Trademark Policy and Trademark List . Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy Hosting and infrastructure graciously provided by

Links found on this page

  1. Skip to main content [direct]
  2. Electron [direct]
  3. Docs [direct]
  4. API [direct]
  5. Blog [direct]
  6. Electron Forge [direct]
  7. Electron Fiddle [direct]
  8. Governance [direct]
  9. Showcase [direct]
  10. Resources [direct]
  11. Releases [direct]
  12. Deutsch [direct]
  13. Español [direct]
  14. Français [direct]
  15. 日本語 [direct]
  16. Português [direct]
  17. Русский [direct]
  18. 中文 [direct]
  19. Processes in Electron [direct]
  20. Best Practices [direct]
  21. Examples [direct]
  22. Dark Mode [direct]
  23. Device Access [direct]
  24. In-App Purchases [direct]
  25. Keyboard Shortcuts [direct]
  26. Deep Links [direct]
  27. Desktop Launcher Actions [direct]
  28. Menus [direct]
  29. Multithreading [direct]
  30. Native File Drag & Drop [direct]
  31. Navigation History [direct]
  32. Notifications [direct]
  33. Offscreen Rendering [direct]
  34. Online/Offline Event Detection [direct]
  35. Progress Bars [direct]
  36. Recent Documents [direct]
  37. Representing Files in a BrowserWindow [direct]
  38. SpellChecker [direct]
  39. Web Embeds [direct]
  40. Taskbar Customization [direct]
  41. Custom Title Bar [direct]
  42. Custom Window Interactions [direct]
  43. Custom Window Styles [direct]
  44. Development [direct]
  45. Native Node Modules [direct]
  46. Distribution [direct]
  47. Testing And Debugging [direct]
  48. References [direct]
  49. Contributing [direct]
  50. BrowserWindow [direct]
  51. BaseWindow [direct]
  52. Edit this page [direct]
  53. Security [direct]
  54. Discord [direct]
  55. Bluesky [direct]
  56. X [direct]
  57. Mastodon [direct]
  58. Stack Overflow [direct]
  59. GitHub [direct]
  60. Open Collective [direct]
  61. Infrastructure Dashboard [direct]
  62. OpenJS Foundation [direct]
  63. Trademark Policy [direct]
  64. Trademark List [direct]
  65. Terms of Use [direct]
  66. Privacy Policy [direct]
  67. Bylaws [direct]
  68. Code of Conduct [direct]
  69. Cookie Policy [direct]