javascript — электронное изменение размеров безрамного окна

Изменение размера электронного окна без рамки

Ответ, упомянутый по адресу https://stackoverflow.com/a/32897808/11167389, в порядке, но есть другой подход, который не повлияет на любой другой стиль и может быть пропущен в любом имеющемся у вас безрамочном окне. Код VS , созданный с использованием электроники, использует аналогичный подход, позволяющий изменять размеры заголовка.

Итак, у вас в основном такая структура, как в следующей строке заголовка с -webkit-app-region: drag; :

 .title-bar { display: flex; height: 30px; border: 1px solid gray; align-items: center; -webkit-app-region: drag; } .title { margin-left: 10px; } .title-bar-btns { margin-left: auto; -webkit-app-region: no-drag; } 
 {amp}lt;div class="title-bar"{amp}gt; {amp}lt;div class="title"{amp}gt;Window Header{amp}lt;/div{amp}gt; {amp}lt;div class="title-bar-btns"{amp}gt; {amp}lt;button id="min-btn"{amp}gt;-{amp}lt;/button{amp}gt; {amp}lt;button id="max-btn"{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;button id="close-btn"{amp}gt;x{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Теперь вы можете добавить div с классом titlebar-drag-region в вашей строке заголовка, установить position:relative; в строку заголовка и удалите -webkit-app-region: drag; от него.

Что .titlebar-drag-region , так это то, что он создает перетаскиваемую область, которая немного короче по размерам, чем заголовок (строка заголовка). Разрыв в 6px, который мы оставили на границах, затем используется для изменения размера. Это оно. У вас будет заголовок, который можно перетаскивать, а также изменять его размер со всех сторон. введите описание изображения здесь

Итак, просто создайте .titlebar-drag-region один раз, а затем .titlebar-drag-region {amp}lt;div class="titlebar-drag-region"{amp}gt; в заголовки всех окон.

 .titlebar-drag-region { /*added*/ top: 6px; left: 6px; display: block; position: absolute; width: calc(100% - 12px); height: calc(100% - 6px); z-index: -1; -webkit-app-region: drag; } .title-bar { display: flex; height: 30px; border: 1px solid gray; align-items: center; position: relative; /*added*/ /*-webkit-app-region: drag;*/ /*removed*/ } .title { margin-left: 10px; } .title-bar-btns { margin-left: auto; -webkit-app-region: no-drag; } 
 {amp}lt;div class="title-bar"{amp}gt; {amp}lt;div class="titlebar-drag-region"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;! –– added ––{amp}gt; {amp}lt;div class="title"{amp}gt;Window Header{amp}lt;/div{amp}gt; {amp}lt;div class="title-bar-btns"{amp}gt; {amp}lt;button id="min-btn"{amp}gt;-{amp}lt;/button{amp}gt; {amp}lt;button id="max-btn"{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;button id="close-btn"{amp}gt;x{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector