3 колонки, но скрыть средний столбец - PullRequest
Новая
       10

3 колонки, но скрыть средний столбец

0 голосов
/ 24 марта 2020

Я делаю Angular проект, и мне было интересно, есть ли способ сделать три CSS столбца, но скрыть средний столбец в начале, когда страница открыта, и отображать только средний столбец, когда пользователь введите любую информацию, которая соответствует в окне поиска.

немного больше подробностей здесь

  • В начале столбец черного цвета займет около 70% страницы и красный будет оставшиеся 30% (изображение)

  • Когда пользователь вводит любую информацию в поле поиска, черный и желтый столбцы займут около 40% каждый, а красный столбец будет 20% оставшейся страницы. (рисунок)

Вот так будет выглядеть при открытой странице

Вот так будет выглядеть например, пользователь вводит любую информацию в поле поиска

Я не уверен, можно ли сделать макет из 3 столбцов, используя только HTML и CSS, но любое предложение будет действительно полезным.

Ответы [ 2 ]

1 голос
/ 24 марта 2020

В вашем .ts файле Получите результаты из API и сохраните их в виде переменной, называемой результатом 

this.result = ['result1','result2'] // may be array or json

Если вы используете bootstrap в своем проекте angular, это очень просто, как это 

<div class="maindiv row col-md-12">
    <div [ngClass]="[result.length ? 'col-md-5' : 'col-md-6']">
        information 1
    </div>
    <div [ngClass]="[result.length ? 'col-md-5' : 'd-none']">
        car pic 1 and 2 (results)
    </div>
    <div [ngClass]="[result.length ? 'col-md-2' : 'col-md-6']">
        information 2
    </div>    
</div>

в противном случае вам нужно написать ручной класс, например, 

<div class="maindiv row">
    <div [ngClass]="[result.length ? 'w-40' : 'w-50']">
        information 1
    </div>
    <div [ngClass]="[result.length ? 'w-40' : 'd-none']">
        car pic 1 and 2 (results)
    </div>
    <div [ngClass]="[result.length ? 'w-20' : 'w-50']">
        information 2
    </div>    
</div>

finally. css, если вы не используете bootstrap

.w-40
{
    width:40%;
}
.w-50
{
    width:50%;
}
.w-20
{
    width:20%;
}
.d-none
{
    display:none;
}
0 голосов
/ 24 марта 2020

связать ваш поисковый ввод с переменной. скажем, filterText: any = ''; скрыть средний столбец / div, когда filterText пуст. 

<div [hidden]="filterText.length<1"></div>
...