我想在没有 JS 的情况下实现可调整大小的 Pane ,只使用 CSS Grid layout .这可能吗?
例如CodePen 的编辑器为其 HTML/CSS/JS 编辑器提供了可调整大小的面板。另外,请参阅下面以纯 JS 实现它的示例(我似乎无法在其中向 CodePen 示例添加 URL,因此添加属性有点困难。代码由 http://codepen.io/gsound/ 提供)。
let isResizing = false;
let $handler = document.getElementById('handler');
let $wrapper = document.getElementById('wrapper');
let $left = document.getElementById('left');
$handler.addEventListener('mousedown', function(e){
isResizing = true;
});
document.addEventListener('mousemove', function(e){
if( !isResizing ) return;
let newWidth = e.clientX - $wrapper.offsetLeft;
$left.style.width = newWidth + 'px';
});
document.addEventListener('mouseup', function(){
isResizing = false;
});
html,body{
height: 100%;
width: 100%;
margin: 0;
}
#app{
height: 100%;
/* max-width: 1400px; */
margin: 0 auto;
}
header{
background-color: #AAA;
height: 50px;
}
#wrapper{
margin: 0 auto;
height: calc(100% - 50px);
width: 100%;
background-color: #EEE;
display: flex;
}
#handler{
background-color: red;
width: 5px;
cursor: col-resize;
}
#left{
width: 200px;
}
#content{
width: 100%;
flex: 1;
}
/* ----------- */
#left{
background-color: yellow;
}
#content{
background-color: #232378;
}
<div id="app">
<header>head</header>
<div id="wrapper">
<aside id="left"></aside>
<div id="handler"></div>
<article id="content"></article>
</div>
</div>
P.S 作为旁注,我已经重新实现了例如通过添加和删除 'mousemove'
、'mouseup'
事件,我想知道这是否比使用 bool 值“更好”(性能更高)isResizing
并让事件监听器始终存在......
最佳答案
网格布局模块是纯 CSS。
可调整大小的 Pane 通常需要 JavaScript 才能运行。
知道 CSS 主要是为样式和呈现而设计的,很可能在 Grid Layout spec 中没有内置属性或方法。这将提供可手动调整大小的 Pane 。
关于css - CSS Grid 布局可以用于实现编辑器 Pane 的大小调整(例如在 CodePen 中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43557834/