我目前正在使用Angular 4,Angular Materials和PrimeNG组件开发用户界面。
我正在努力的最新组件是PrimeNG的MultiSelect组件: https ://www.primefaces.org/primeng/#/multiselect
我只是想让组件的宽度适合父组件的100%。
是否需要遵循特定的流程来编辑此组件的CSS类? 文档说使用“Style”进行内联 - 这是否意味着:
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>因为这不起作用。
它还说使用“styleClass”作为属性来添加样式CSS类。 你怎么用这个?
最后,它们提供了PrimeNG组件在网站上使用的CSS类列表(例如ui-multiselect)。 当我试图通过在Angular组件CSS中声明它来修改'ui-multiselect'时,它仍然不起作用。
有任何想法吗? 我究竟做错了什么?
I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components.
The latest component I am battling with is the MultiSelect Component from PrimeNG: https://www.primefaces.org/primeng/#/multiselect
I am simply just trying to make the component's width fit 100% of the parent component.
Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean:
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>Because this did not work.
It also says to use "styleClass" as a property to add a styling CSS class. How do you use this?
Lastly, they provide a list of the CSS classes the PrimeNG component uses on the website (e.g. ui-multiselect). When I attempt to modify 'ui-multiselect' by declaring it within the Angular components CSS, it still doesn't work.
Any ideas? What am I doing wrong?
最满意答案
对于内联PrimeNG样式,请使用以下内容:
[style]="{'width': '100%'}"要使用styleClass只需添加:
styleClass="example-css-class"这样,例如,您可以使用许多不同的样式类来设置多选输入字段的样式,例如。 Bootstrap的form-control 。
当您使用PrimeNG ui操作时,请务必将它们放入组件.css中。 如果使用全局styles.css ,则必须覆盖.angular-cli.json的PrimeNG文件。 您可以通过编辑styles数组来完成此操作:
"../node_modules/primeng/resources/primeng.min.css", "../node_modules/primeng/resources/themes/omega/theme.css", "styles.css"当styles.css放在primeng资源之后,它会在primeng之后加载,它将覆盖样式。
For inline PrimeNG styling, use something like this:
[style]="{'width': '100%'}"To use styleClass simply add:
styleClass="example-css-class"This way, for example, you can style multi select input field with many different style classes, eg. Bootstrap's form-control.
When you operate with PrimeNG ui's, be sure to put them into components .css. If you use global styles.css, you'll have to override the PrimeNG files in .angular-cli.json. You can do it by editing styles array like this:
"../node_modules/primeng/resources/primeng.min.css", "../node_modules/primeng/resources/themes/omega/theme.css", "styles.css"When the styles.css are put after the primeng resources, it is loaded after the primeng's, which will override the styles.
更多推荐
发布评论