Styles de fenêtre personnalisés | Electron Aller au contenu principal Electron Documentation API Blog Outils * Electron Forge * Fiddle Electron Communauté * Gouvernance * Galerie d'applications existantes * Ressources Versions Français * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 Rechercher * Pour commencer * Processus d'Electron * Bonnes pratiques * Exemples * Mode Sombre * Accès aux périphériques * Achats intégrés * * Raccourcis clavier * Liens profonds * Actions du lanceur d'applications sur le bureau * * Menus * Multithreading * Drag & Drop de Fichier natif * Historique de navigation * Notifications * Rendu hors de l'écran * Détection des événements en ligne/hors ligne * Barres de progression * Documents récents * * * Représentation des fichiers dans une BrowserWindow * * Vérificateur d'orthographe * Intégrations Web * Personnalisation de la barre des tâches * * Personnalisation des fenêtres * Custom Title Bar * Custom Window Interactions * Styles de fenêtre personnalisés * Développement * Native Node Modules * Distribution * Test et débogage * Références * Contribuer * * Exemples * Personnalisation des fenêtres * Styles de fenêtre personnalisés Sur cette page Styles de fenêtre personnalisés Fenêtre sans cadre ​ Une fenêtre sans cadre supprime tous les chrome appliqués par l'OS, y compris les contrôles de fenêtres. Pour créer une fenêtre sans cadre, définissez le paramètre BaseWindowContructorOptions frame dans le constructeur de BrowserWindow à 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 ( ) } ) Sur Wayland (Linux), les fenêtres sans cadre ont des ombres de drop GTK et des limites de redimension étendues par défaut. Pour créer une fenêtre sans cadre avec aucune décoration , définissez hasShadow: false dans les options du constructeur de fenêtre. Fenêtres transparentes ​ 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 ; } Limitations ​ * Vous ne pouvez pas cliquer dans la zone transparente. Voir #1335 pour plus de détails. * Les fenêtres transparentes ne sont pas redimensionnables. Définir resizable à true peut empêcher une fenêtre transparente de fonctionner sur certaines plates-formes. * Le filtre CSS blur() ne s’applique qu’au contenu Web de la fenêtre, il n’y a donc aucun moyen d’appliquer un effet de flou au contenu sous la fenêtre (c’est-à-dire sur d’autres applications ouvertes sur le système de l’utilisateur). * La fenêtre ne sera pas transparente lorsque les DevTools sont ouverts. * Sur Windows _: * Les fenêtres transparentes ne peuvent pas être maximalisées à l’aide du menu système Windows ou par un double click sur la barre de titre. Le raisonnement sous-jacent à cela peut être vu sur PR #28207 . * Sur macOS _: * L'ombre native de la fenêtre ne sera pas affichée sur une fenêtre transparente. Modifier cette page Précédent Custom Window Interactions Suivant Accessibilité * Fenêtre sans cadre * Fenêtres transparentes * Limitations Documentation * Démarrer * Référence des APIs Listes de vérifications * Performance * Sécurité Outils * Electron Forge * Fiddle Electron Communauté * Gouvernance * Ressources * Discord * Bluesky * X * Mastodon * Stack Overflow En plus * GitHub * Open Collective * Tableau de bord de l'infrastructure Copyright Fondation OpenJS et contributeurs Electron. Tous droits réservés. La Fondation OpenJS a déposé des marques commercials et utilise des marques déposées. Pour une liste de marques commerciales de la Fondation OpenJS , merci de consulter notre Politique de Marque Comemrciale et Liste de Marques Commerciales . Les marques commerciales et logos qui ne sont pas indiquées sur la liste des marques commerciales de la Fondation OpenJS sont les marques commerciales™ ou marques déposées® de leurs détenteurs respectifs. Leur utilisation n'implique pas la moindre affiliation ou approbation de leur part. La Fondation OpenJS | Conditions Générales d'Utilisation | Politique de Confidentialité | Règlement intérieur | Code de Conduite | Politique de Marques Commerciales | Liste des Marques Commerciales | Politique de Cookies Hosting and infrastructure graciously provided by