如何配置PrimeNG侧边栏以留出页眉空间并能够将画布向右推

时间:2019-07-09 01:00:20

标签: angular primeng

我正在使用postAngular 7建立一个网站。 网页的布局在顶部具有固定的标题,在左侧具有侧栏导航菜单。

我的预期行为是,在侧边栏切换时,它不会隐藏标题,内容也会向右移动。

enter image description here

我已经检查了primeng文档,但是没有提供此类功能。 https://www.primefaces.org/primeng/#/sidebar

1 个答案:

答案 0 :(得分:1)

它只是css和html,例如,当我将CSS悬停在容器上时,我使用普通的CSS来展开边栏,您可以使用JS处理click事件以展开它:

nav{
 height:70px;
 background-color: green;
}
.container{
 display: flex;
}
.container .main-body{
 width: 100%;
}
.container aside{
  width: 0;
  height: calc(100vh - 70px);
  overflow-y: auto;
  transition: all 0.5s;
  background-color: yellow;
}
/*Im using hover on body for example, you can use JS to handle click event, */
.container:hover aside{
  width: 200px;
}
<nav></nav>
<section class="container">
  <aside></aside>
  <div class="main-body">Hover me to display side bar</div>
</section>