Angular PrimeNG -- 如何更改 rowsperpageoptions 在 p-paginator 标签中生成的 p-dropdown 的样式
Angular PrimeNG -- How to change the style of p-dropdown that rowsperpageoptions generates in p-paginator tag
我有一个关于 p-paginator 的问题想寻求帮助。
在official website上给出了使用属性"rowsperpageoptions"的例子。是这样显示的,
使用 rowsperpageoptions 生成的 p-dropdown 以及一行中的页码。
但是我的代码会让它们像这样分开,
有没有办法更改 rowsperpageoptions 生成的 p-dropdown 的样式,并使其更小?
也许这会有所帮助。
第 1 步:在 angular.json 文件中。在 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"
],
注意:您也可以在 index.html
中进行 CDN 引用
第 2 步:覆盖任何分页样式。在你的 component.css
:host::ng-deep {
.ui-paginator .ui-paginator-pages {
width: 90px; // change this according to your need
line-height: 1;
}
}
注意:默认情况下,宽度设置为自动。
希望这对您有所帮助
我有一个关于 p-paginator 的问题想寻求帮助。
在official website上给出了使用属性"rowsperpageoptions"的例子。是这样显示的,
使用 rowsperpageoptions 生成的 p-dropdown 以及一行中的页码。
但是我的代码会让它们像这样分开,
有没有办法更改 rowsperpageoptions 生成的 p-dropdown 的样式,并使其更小?
也许这会有所帮助。
第 1 步:在 angular.json 文件中。在 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"
],
注意:您也可以在 index.html
中进行 CDN 引用第 2 步:覆盖任何分页样式。在你的 component.css
:host::ng-deep {
.ui-paginator .ui-paginator-pages {
width: 90px; // change this according to your need
line-height: 1;
}
}
注意:默认情况下,宽度设置为自动。
希望这对您有所帮助