千家信息网

angular的splitter案例学习

发表于:2024-10-18 作者:千家信息网编辑
千家信息网最后更新 2024年10月18日,angular的splitter案例学习,都有注释了,作为自己的备忘。运行下面代码 Angular pane splitter example Pane
千家信息网最后更新 2024年10月18日angular的splitter案例学习

 angular的splitter案例学习,都有注释了,作为自己的备忘。

运行下面代码

        Angular pane splitter example                 Pane 1                                    Pane 2                Pane 3


.split-panes
{
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
position: absolute;
}


.split-panes > .split-handler
{
background: transparent;
position: absolute;
z-index: 999;
}


/* Horizontal */


.split-panes.horizontal > .split-handler
{
width: 4px;
top: 0px;
left: 50%;
bottom: 0px;
cursor: ew-resize;
}


.split-panes.horizontal > .split-pane1,
.split-panes.horizontal > .split-pane2
{
position: absolute;
height: 100%;
}


.split-panes.horizontal > .split-pane1新航道雅思{
width: 50%;
}


.split-panes.horizontal > .split-pane2
{
left: 50%;
right: 0px;
border-left: 1px solid #aaa;
}



/* Vertical */


.split-panes.vertical > .split-handler
{
height: 4px;
top: 50%;
left: 0px;
right: 0px;
cursor: ns-resize;
}


.split-panes.vertical > .split-pane1,
.split-panes.vertical > .split-pane2
{
position: absolute;
width: 100%;
}


.split-panes.vertical > .split-pane1
{
height: 50%;
}


.split-panes.vertical > .split-pane2
{
top: 50%;
bottom: 0px;
border-top: 1px solid #aaa;
}



html>


0