Настройка стилей кнопки в PrimeNG - PullRequest
Новая
       6

Настройка стилей кнопки в PrimeNG

1 голос
/ 15 октября 2019

Как мне настроить стиль кнопок в списке выбора PrimeNG и отключить ненужные мне кнопки?

Я попытался установить для свойства css кнопок значение none, но оно не работает. Также попытался установить стиль для изображения, но ни один из них не работает

HTML-код: 

<p-pickList [source]="availableCategories" [target]="selectedCategories" sourceHeader="Available Categories" targetHeader="Selected Categories" dragdrop="true" [responsive]="true"
  [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" >
    <ng-template let-list pTemplate="item">
        <div class="ui-helper-clearfix">
            <div class="items">{{list.categoryDescription}}</div>
        </div>
    </ng-template>
</p-pickList>

CSS 

.ui-picklist-buttons {
   display: none;
}
.ui-picklist-filter-icon {
    left: 0em;
}

Ответы [ 2 ]

0 голосов
/ 15 октября 2019

Вы должны добавить styleClass свойство к вашему <p-picklist> элементу 

<p-pickList styleClass="myPickList">

И тогда в ваших компонентах CSS вы можете применить следующий стиль: 

::ng-deep .myPickList .ui-picklist-buttons {
  display: none;
}

Stackblitz

0 голосов
/ 15 октября 2019

Добавьте ваши стили к глобальным стилям, например style.css или добавьте ::ng-deep к своим стилям, например 

::ng-deep .ui-picklist-buttons {
   display: none;
}
::ng-deep .ui-picklist-filter-icon {
    left: 0em;
}

Обратите внимание, что эти стили станут глобальными стилями и будут действовать во всем приложении. если вы хотите сделать это только на определенной странице, добавьте родительский класс и примените стили внутри этого класса

...