Angular PrimeNG - Как изменить стиль p-раскрывающегося списка, который генерирует rowperpageoptions в теге p-paginator

Question

У меня есть вопрос о p-paginator, чтобы попросить о помощи.

На официальном веб-сайте приведен пример использования атрибута "rowsperpageoptions". Он отображается следующим образом:

с p-раскрывающимся списком, который rowperpageoptions генерирует вместе с номерами страниц в одной строке.

Однако мой код разделил бы их например,

Есть ли способ изменить стиль выпадающего списка p, который генерирует rowperpageoptions, и сделать его меньше?

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"
                ],

Примечание: Вы также можете сделать ссылку на CDN в индексе. html

Шаг 2: Перебегать любые стили нумерации страниц. В вашем компоненте. css

:host::ng-deep {

.ui-paginator .ui-paginator-pages {
    width: 90px; // change this according to your need 
    line-height: 1;
}

}

Примечание. По умолчанию для ширины установлено значение Авто.

Надеюсь, это поможет вам в некотором роде