Custom Window Styles | Electron Перейти к основному содержанию Electron Документация API Блог Инструменты * Electron Forge * Electron Fiddle Сообщество * Управление * Примеры * Ресурсы Релизы Русский * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 Поиск * Начать * Процессы в Electron * Рекомендации * Примеры * Темный режим * Device Access * In-App Purchases * * Горячие клавиши * Deep Links * Desktop Launcher Actions * * Menus * Многопоточность * Нативное перемещение файла * История навигации * Notification (Оповещения) * Закадровый рендеринг * Обнаружение Online/Offline событий * Progress Bars * Недавние документы * * * Representing Files in a BrowserWindow * * SpellChecker * Web Embeds * Taskbar Customization * * Window Customization * Custom Title Bar * Custom Window Interactions * Custom Window Styles * Разработка * Native Node Modules * Распространение * Тестирование и отладка * Ссылки * Вклад * * Примеры * Window Customization * Custom Window Styles На этой странице Custom Window Styles Frameless windows ​ A frameless window removes all chrome applied by the OS, including window controls. To create a frameless window, set the BaseWindowContructorOptions frame param in the  BrowserWindow  constructor to false . docs/fiddles/features/window-customization/custom-window-styles/frameless-windows ( 43.4.0 ) Open in Fiddle * main.js const { app , BrowserWindow } = require ( 'electron' ) function createWindow ( ) { const win = new BrowserWindow ( { width : 300 , height : 200 , frame : false } ) win . loadURL ( 'https://example.com' ) } app . whenReady ( ) . then ( ( ) => { createWindow ( ) } ) On Wayland (Linux), frameless windows have GTK drop shadows and extended resize boundaries by default. To create a fully frameless window with no decorations, set hasShadow: false in the window constructor options. Transparent windows ​ To create a fully transparent window, set the BaseWindowContructorOptions transparent param in the  BrowserWindow  constructor to true . The following fiddle takes advantage of a transparent window and CSS styling to create the illusion of a circular window. docs/fiddles/features/window-customization/custom-window-styles/transparent-windows ( 43.4.0 ) Open in Fiddle * main.js * index.html * styles.css const { app , BrowserWindow } = require ( 'electron' ) function createWindow ( ) { const win = new BrowserWindow ( { width : 100 , height : 100 , resizable : false , frame : false , transparent : true } ) win . loadFile ( 'index.html' ) } app . whenReady ( ) . then ( ( ) => { createWindow ( ) } ) <! DOCTYPE html > < html > < head > < meta charset = " UTF-8 " > <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> < meta http-equiv = " Content-Security-Policy " content = " default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' " > < link href = " ./styles.css " rel = " stylesheet " > < title > Transparent Hello World </ title > </ head > < body > < div class = " white-circle " > < div > Hello World! </ div > </ div > </ body > </ html > body { margin : 0 ; padding : 0 ; background-color : rgba ( 0 , 0 , 0 , 0 ) ; /* Transparent background */ } .white-circle { width : 100 px ; height : 100 px ; background-color : white ; border-radius : 50 % ; display : flex ; align-items : center ; justify-content : center ; app-region : drag ; user-select : none ; } Ограничения ​ * You cannot click through the transparent area. See #1335 for details. * Transparent windows are not resizable. Setting resizable to true may make a transparent window stop working on some platforms. * The CSS blur() filter only applies to the window's web contents, so there is no way to apply blur effect to the content below the window (i.e. other applications open on the user's system). * The window will not be transparent when DevTools is opened. * On Windows : * Transparent windows can not be maximized using the Windows system menu or by double clicking the title bar. The reasoning behind this can be seen on PR #28207 . * On macOS : * The native window shadow will not be shown on a transparent window. Редактировать эту страницу Назад Custom Window Interactions Далее Доступность * Frameless windows * Transparent windows * Ограничения Документация * Начало работы * Справка по API Контрольные списки * Характеристика * Безопасность Инструменты * Electron Forge * Electron Fiddle Сообщество * Управление * Ресурсы * Discord * Bluesky * X * Mastodon * Stack Overflow Подробнее * GitHub * Open Collective * Панель управления инфраструктурой Авторское право OpenJS Foundation и участники проекта Electron. Все права защищены. OpenJS Foundation обладает зарегистрированными товарными знаками и использует их. Список товарных знаков OpenJS Foundation приведён в нашей Политике в отношении товарных знаков и в Списке товарных знаков . Товарные знаки™ и логотипы®, не указанные в списке товарных знаков OpenJS Foundation , являются товарными знаками™ или зарегистрированными® товарными знаками их владельцев. Их использование не подразумевает какой-либо принадлежности к ним или поддержки с их стороны. The OpenJS Foundation | Условия использования | Политика конфиденциальности | Устав | Кодекс поведения | Политика в отношении товарных знаков | Список товарных знаков | Политика использования файлов cookie Hosting and infrastructure graciously provided by