Используйте ngx-scrollbar для содержимого вкладки ngx-bootstrap - PullRequest
Новая
       27

Используйте ngx-scrollbar для содержимого вкладки ngx-bootstrap

0 голосов
/ 16 мая 2018

В моем проекте я использую bootstrap 4 и ngx-bootstrap.Теперь мне нужно создать компонент, который будет включать 2 прокручиваемых элемента div, переключаемых между вкладками.

Я хотел бы показать пример приложения в stackblitz, но не могу его создать.

Итак, вот мой компонент, в который я хочу поместить эти вкладки: 

<div class="d-flex flex-column h-100">
  <div class="border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style="height: 60px !important;">
    <input type="text" class="form-control" id="search" placeholder="Search...">
  </div>
  <tabset [justified]="true">
    <tab heading="Title 1">
      <ng-scrollbar [autoHide]="true">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
    <tab class="" heading="Title 2">
      <ng-scrollbar [autoHide]="true">
         <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
  </tabset>
</div>

В компоненте AppFooList я буду размещать список элементов.Например, это будет похоже на следующий код: 

    hiiiiiiii <br>
    hiiiiiiii <br>
    hiiiiiiii <br>
    hiiiiiiii <br>
    ...

Можете ли вы помочь мне исправить мой код, чтобы он работал правильно?Ngx-полоса прокрутки не работает с содержимым вкладок.Все мои попытки заканчивались прокруткой всего приложения, потому что содержимое имеет большую высоту, чем остальная часть приложения, или содержимое будет прокручиваться, но полоса прокрутки ngx не была применена, и полоса прокрутки была уродливой.Мне нужно, чтобы высота div была остальной частью пространства до дна.Это причина, почему я использую flexbox.

РЕДАКТИРОВАТЬ: код в stackblitz

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

Обновлено

Попробуйте это

Проверьте демо здесь 

<div class="d-flex flex-column h-100">
  <div class="border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style="height: 60px !important;">
    <input type="text" class="form-control" id="search" placeholder="Search...">
  </div>
  <tabset [justified]="true">
    <tab heading="Title 1" [ngStyle]="{'height':'calc(100vh - ' + offsetHeightVal + 'px)'}">
      <ng-scrollbar [autoHide]="true">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
    <tab class="" heading="Title 2" [ngStyle]="{'height':'calc(100vh - ' + offsetHeightVal + 'px)'}">
      <ng-scrollbar [autoHide]="true">
         <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
  </tabset>
</div>

app.component.ts

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  offsetHeightVal: number; //default value

  offset(el) {
    var rect = el.getBoundingClientRect(),
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
  }
  ngAfterViewInit() {
    this.offsetHeightVal = this.offset(document.querySelector('.tab-content')).top
  }
}
0 голосов
/ 19 мая 2018

Вы можете применить высоту к ng-scrollbar: 

ng-scrollbar {
  height: 80vh;
}

Вот редактирование вашего стекаблиц.

...