Сохранение тех же размеров при переключении контента - PullRequest
Новая
       12

Сохранение тех же размеров при переключении контента

0 голосов
/ 30 апреля 2020

У меня есть переключатель, приводящий к отображению одного или другого содержимого, например 

<Checkbox checked={checked} .../>
<div id="main">
{
    checked 
    ? <Content1 ..../>
    : <Content2 ..../>
}
</div>

Проблема в том, что два содержимого могут иметь разные размеры, что при переключении выглядит ужасно. Я не хочу заставлять оба компонента к некоторой максимальной высоте / ширине; вместо этого я хочу принудительно установить высоту как в высоту, так и в ширину.

Это разрешимо с помощью CSS? Я думал о том, чтобы отобразить их обоих поверх друг с другом, когда неактивный имеет нулевую непрозрачность и не содержит событий щелчка (и, возможно, также отрицательный z-индекс), но я не вижу, как заставить их обоих запускаться в верхнем левом углу, позволяя им влиять на размеры main div (поэтому position: absolute не работает).

В случае, если CSS не может это сделать, React, конечно, может, но это хорошая идея или есть лучше?

1 Ответ

1 голос
/ 30 апреля 2020

Используйте display:grid, чтобы наложить два элемента, которые нужно «поменять местами» в одной ячейке сетки, и отрегулируйте opacity и z-index, как требуется. 

label {
  display: flex;
  align-items: center;
}

label {
  padding: 1em;
  display: inline-block;
  margin: .25em;
  margin-bottom: 0;
}

input {
  margin-left: .25em;
}

.container {
  display: grid;
  width: 500px;
  margin: 1em;
}

p {
  margin: 0;
  padding: .25em;
}

.container div {
  border: 1px solid red;
  grid-row: 1;
  grid-column: 1;
}

#checker:checked+.container .content1 {
  opacity: 0;
  z-index: -1
}

#checker+.container .content2 {
  opacity: 0;
}

#checker:checked+.container .content2 {
  opacity: 1;
}
<label for="checker">Tick This</label>
<input name="checker" id="checker" type="checkbox" />


<div class="container">
  <div class="content1">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint amet vitae ea accusamus fuga blanditiis modi rem. Vitae iure, inventore corporis non blanditiis, ad optio ex molestiae repudiandae iste eos minus eligendi assumenda neque.</p>
  </div>
  <div class="content2">
    <p>Just short text</p>
  </div>
</div>
...