如何设置PrimeNg下拉图标

Question

我正在尝试设置PrimeNg的下拉图标。

https://www.primefaces.org/primeng/#/dropdown

以下是目前的外观和我想要的样子。

我猜我必须设计

ui-dropdown-trigger

但我不知道该怎么设置它。

我尝试了背景颜色但是没有用。

我尝试的另一件事是将其设置为如下属性：

<p-dropdown ... [styleClass]="{background-color:black}" ...></p-dropdown>

有什么想法吗？

修改：

这就是我得到所需输出的方式：

1. 关闭封装（reference）

2. 在css中添加了以下代码：

   body .ui-dropdown .ui-dropdown-trigger { background-color：＃2399E5; 白颜色; }

Answer 1

要更改dropdownicon属性本身，您需要做两件事：

1）您需要在component.ts中创建 var ，在其中放置所需图标的字符串。但是你必须在字符串的开头添加'fa fa-fw'。例如，如果你想放一个'fa-star'，那么完整的字符串将是'fa fa-fw fa-star'

export class AppComponent {
  star = 'fa fa-fw fa-star';
  constructor(){}
}

2）在component.html中，您必须添加[dropdownIcon] = var

<p-dropdown[dropdownIcon]="star" placeholder="Search (Jobs)"></p-dropdown>

结果看起来像 https://i.stack.imgur.com/WZDVx.png

Answer 2

我使用来自primeng的包含bootstrap主题。所以我必须适应：

body .ui-dropdown .ui-dropdown-trigger {
    background-color: blue;
}

在CSS中为主题中的触发器着色。

Answer 3

您可以使用以下方法将其设置为属性：

<p-dropdown ... [style]="{'background-color': 'black'}" ...></p-dropdown>

或者您可以设置ui-dropdown-trigger的样式，但是，您必须在全局样式表中进行此操作，而不是在组件的样式表中进行。

要在组件的CSS文件中设置ui-dropdown-trigger的样式，您必须使用

:host >>> .ui-dropdown-trigger {...}

但是，这已被弃用。