Как реализовать классы стилей PrimeNG в Angular, чтобы настроить компонент карусели? - PullRequest
Новая
       25

Как реализовать классы стилей PrimeNG в Angular, чтобы настроить компонент карусели?

0 голосов
/ 07 января 2019

Я хотел бы использовать компонент Карусель PrimeNG и настроить его. Как мне внедрить его в мой HTML-код?

Я следовал некоторым советам через Stackoverflow и другие веб-сайты, чтобы помочь объявить классы стилей благодаря :host >>> .ui-carousel в файле CSS. Тем не менее, я не смог найти способ правильно использовать в моем HTML-файле.

код CSS 

    :host >>> .ui-carousel {
      width: 100%;
    }

    :host >>> .ui-carousel-item {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 250px;
    }

    :host >>> .ui-carousel-items{
      width: 100%;
    }

    :host >>> .ui-carousel-viewport{
      width: 100%;
    }

    :host >>> .ui-carousel-header{
      background-color: #007aff;
    }

HTML код 

    <p-carousel styleclass="ui-carousel-header" headerText="Items">
    </p-carousel>
    <p-carousel styleclass="ui-carousel-viewport">
      <p-carousel styleclass="ui-carousel-items">
         <p-carousel styleclass="ui-carousel-item" *ngFor="let item of items">
           <img style="height: 100%;" src="{{item.picture}}">
         </p-carousel>
      </p-carousel>
    </p-carousel>

Я хотел бы закончить только частью области просмотра карусели и скрыть заголовок (я уже нашел способ сделать это, но еще не применил его) и использовать навигационные кнопки в другом месте. С кодом, который у меня есть, появляются два заголовка, но область просмотра не заполнена изображениями.

Использование: Угловой 7

1 Ответ

0 голосов
/ 07 января 2019

Я не понимаю, что ты делаешь. Зачем использовать мульти и вложенную p-карусель ??? Вам нужно использовать ng-template и установить numVisible = "1" , чтобы соответствовать ширине элемента 100% 

<p-carousel headerText="Items" [value]="items" numVisible="1">
    <ng-template let-item pTemplate="item">
        <img style="height: 100%;" [src]="item.picture" >
    </ng-template>
</p-carousel>

и CSS нормальный 

.ui-carousel {
      width: 100%;
    }

    .ui-carousel-item {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 250px;
    }

    .ui-carousel-items{
      width: 100%;
    }

    .ui-carousel-viewport{
      width: 100%;
    }

   .ui-carousel-header{
      background-color: #007aff;
    }

Демо здесь

...