Как настроить боковую панель PrimeNG, чтобы оставить место для заголовка и возможность сдвинуть холст вправо - PullRequest
Новая
       29

Как настроить боковую панель PrimeNG, чтобы оставить место для заголовка и возможность сдвинуть холст вправо

0 голосов
/ 09 июля 2019

Я создаю сайт, используя Angular 7 и PrimeNG 8.Макет веб-страницы с фиксированным заголовком вверху и боковым меню навигации слева.

Мое ожидаемое поведение - когда боковая панель переключается, заголовок не будет скрыт, а также содержимое будет перемещено вправо.

enter image description here

Я проверил документацию primeng, но такая функция не предоставляется.https://www.primefaces.org/primeng/#/sidebar

1 Ответ

1 голос
/ 09 июля 2019

Это просто css и html, я использую простой 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>
...