时间戳

首页 > 解决方案 > 在 PrimeNG 中自定义按钮样式

html - 在 PrimeNG 中自定义按钮样式

问题描述

如何自定义 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;
}

标签： htmlcssangularprimeng

解决方案

将您的样式添加到全局样式中，即style.css添加::ng-deep到您的样式中，例如

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

请注意，如果您只想在特定页面上执行此操作，那么这些样式将成为全局样式并将在整个应用程序中生效，然后添加一些父类并在该类中应用样式

推荐阅读