Angular PrimeNG -- 如何更改 rowsperpageoptions 在 p-paginator 标签中生成的 p-dropdown 的样式

Question

我有一个关于 p-paginator 的问题想寻求帮助。

在official website上给出了使用属性"rowsperpageoptions"的例子。是这样显示的，

使用 rowsperpageoptions 生成的 p-dropdown 以及一行中的页码。

但是我的代码会让它们像这样分开，

有没有办法更改 rowsperpageoptions 生成的 p-dropdown 的样式，并使其更小？

Answer 1

也许这会有所帮助。

第 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;
}

}

注意：默认情况下，宽度设置为自动。

希望这对您有所帮助

Angular PrimeNG -- 如何更改 rowsperpageoptions 在 p-paginator 标签中生成的 p-dropdown 的样式

Angular PrimeNG -- How to change the style of p-dropdown that rowsperpageoptions generates in p-paginator tag

angular

primeng

primeng-dropdowns