如何設計 PrimeNG 芯片？

Question

我的應用程序中有一個form ，我在其中使用 Primafaces 中的以下代碼：

...other inputs...

<label for="workshopTags">Tags</label>
<p-chips
    [(ngModel)]="values"
    name="workshopTags"
    id="workshopTags"
></p-chips>

我能夠正確顯示 Chip 元素，但我想將其寬度設置為 100%，將高度設置為 100px，但似乎無法改變這些元素。 這個解決方案對我不起作用。 我嘗試按照文檔的建議設置 styleClass 或內聯樣式，但它們都不起作用。 如果我寫內聯：

style="width: 100%"

拋出以下錯誤：

錯誤：找不到不同的支持 object 'width: 100%;'

我怎樣才能讓它發揮作用？

Answer 1

有兩種方法可以使 primeng 組件的樣式覆蓋原始樣式，或者通過基於客戶 class 創建自定義樣式

覆蓋

將樣式添加到全局style.css或style.scss ，此方法用於覆蓋 primeng 組件樣式，而無需向組件添加額外的 class 。

.ui-chips {
  display: inline-block
}

.ui-chips ul {
  border:2px dashed green !important; /* 👈 I have use important */
}

 .ui-chips > ul.ui-inputtext .ui-chips-token {
    font-size: 14px;
    background: green !important; /* 👈 I have use important */
    border:1px solid #005555;
    box-shadow: 0 0 25px #ccc;
}

堆棧閃電演示

客戶風格

上面的方法會改變整個項目中所有p-chips組件的樣式，通過這種方法你需要設置styleClass屬性，這樣你就可以像這里的例子一樣創建不同的樣式，但是你需要為每個組件設置styleClass屬性

<p-chips [(ngModel)]="values" styleClass="p-chips"></p-chips>

樣式.css

.p-chips.ui-chips {
  /* border:1px solid #ff2200; */
  display: inline-block
}

.p-chips.ui-chips ul {
  border:2px dashed orange;
}

 .p-chips.ui-chips > ul.ui-inputtext .ui-chips-token {
    font-size: 14px;
    background: orange;
    border:1px solid #ff5555;
    box-shadow: 0 0 25px #ccc;
}

堆棧閃電演示

Answer 2

您可以使用 ht /deep/ 修飾符，將其添加到您的app.component.css中，並將其從您的樣式中刪除。css，並且您不需要!important在這里強制樣式，將其刪除。 這就是你要找的

p {
  font-family: Lato;
}

/deep/  .p-chips > .ui-inputtext {
  width: 100%;
  height:  100px;
}

在這里檢查https://stackblitz.com/edit/angular-primeng-startup-kmm7xw

Answer 3

您可以在覆蓋組件裝飾器中嘗試封裝：ViewEncapsulation.None：

@Component({
   selector: 'app-chip',
   templateUrl: 'path-to-template where you use ui-chips',
   styleUrls: ['path-to-styles where you could override ui-chips styles'],
   encapsulation: ViewEncapsulation.None
})
export class AppChipComponent { }

Answer 4

要將寬度設置為 100%，您必須使用style或styleClass屬性並設置 css 屬性display: block 。

作為使用styleClass屬性的示例

<p-chips
    [(ngModel)]="interests"
    styleClass="block">
</p-chips>

在這里，我將Prime Flex v3與PrimeNg一起使用。