[英]Angular PrimeNG -- How to change the style of p-dropdown that rowsperpageoptions generates in p-paginator tag
I have a question about p-paginator to ask for help.我有一个关于 p-paginator 的问题寻求帮助。
On the official website , it gives the example with uses of the attribute "rowsperpageoptions".在官方网站上,它给出了使用属性“rowsperpageoptions”的示例。 It is displayed like this,是这样显示的,
with p-dropdown that rowsperpageoptions generates along with the page nums in one line.使用 rowperpageoptions 生成的 p-dropdown 以及一行中的页面编号。
However my code would make them seperated like this,但是我的代码会让它们像这样分开,
Is there a way to change the style of p-dropdown that rowsperpageoptions generates, and make it smaller?有没有办法改变rowsperpageoptions生成的p-dropdown的样式,并使它变小?
May be this could help.可能这会有所帮助。
Step 1: In angular.json file .第 1 步:在 angular.json 文件中。 Under architect > build > Make sure you have added the primeng.min.css and *anytheme[nova-light].css
在 Architect > build > 确保你已经添加了primeng.min.css and *anytheme[nova-light].css
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myPrimeNg",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.scss"
],
Note: You could also do the CDN referencing in index.html注意:您也可以在 index.html 中进行 CDN 引用
Step 2: To over ride any pagination styles.第 2 步:超越任何分页样式。 In your component.css在你的 component.css 中
:host::ng-deep {
.ui-paginator .ui-paginator-pages {
width: 90px; // change this according to your need
line-height: 1;
}
}
Note: By default Width is set to Auto.注意:默认情况下,宽度设置为自动。
Hope this will help you in some way希望这会以某种方式帮助你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.