JavaScript в angular 8

Question

Существует решение для js -

codepen.io / skovtun / pen / VwLvXPB

Не удается сделать аналог для Angular8 +.

Мне нужно, чтобы центральный блок имел фиксированную ширину (1200 пикселей), и он оценивается и сжимается левой, правой и обеими боковыми панелями сразу после их открытия. Они не должны совпадать с содержанием.

Answer 1

Вы можете достичь этого с чистым CSS.

Вы не указали, какие требования предъявляются, но вы можете использовать flexbox, как показано в примере ниже, чтобы получить основной контейнер максимальной ширины, окруженный двумя сжимающими боковыми панелями.

body {
  margin: 0;
}

.wrapper{
  display: flex;
}

main {
  width: 1200px;
  padding: 20px;
  background-color: #f1f1f1;
}

.sidebar {
  flex-grow: 1;
  height: 100vh;
  padding: 0 15px;
}

.sidebar-left {
  border-right: 1px solid #06A52B;
}

.sidebar-right {
  border-left: 1px solid #06A52B;
}

<div class="wrapper">  
  <aside class="sidebar sidebar-left">    
    <h2>Left sidebar</h2>
    <p>Add content here</p>
  </aside>
  <main>
    <h1>Max width of this block is 1200px</h1>
  </main>
  <aside class="sidebar sidebar-right">   
    <h2>Right sidebar</h2>
    <p>Add content here</p>
  </aside>
</div>

Answer 2

Вы можете Dynami c каждый css класс, используя [ngClass] В зависимости от вашей логики c ..it будет отображаться при изменении значения ..

Answer 3

Я видел перекрытие контента при закрытии боковых панелей. Может быть, вы хотите остановить перекрытие во время открытия и закрытия боковой панели. Это может быть исправлено css. Вы можете использовать переход в .wrapper классе. см. ниже код:

.wrapper{
  height: 100%;
  transition:all .25s;
}