Диалог подтверждения PrimeNG (OverLay) не имеет встроенного стиля (css) - PullRequest
Новая
       8

Диалог подтверждения PrimeNG (OverLay) не имеет встроенного стиля (css)

0 голосов
/ 29 августа 2018

Я добавил диалог подтверждения PrimeNG (следуя примеру из официального документа):

component.html 

<p-confirmDialog appendTo="body" #cd>
     <p-footer>
        <button type="button" pButton class="btn btn-primary btn-normal mr-4" label="Print or save" (click)="cd.accept()"></button>
        <button type="button" pButton class="btn btn-default btn-normal ml-2" label="Skip" (click)="cd.reject()"></button>
    </p-footer>
</p-confirmDialog>

component.ts: 

import { ConfirmationService } from 'primeng/api';

@Component({
    selector: 'xxx',
    templateUrl: './xxx.component.html',
    styleUrls: ['./xxx.component.scss'],
    providers: [ConfirmationService]
})
constructor(private _confirmationService: ConfirmationService) { }

// I am trying to simplify the code
// this method is called successfully 
this._confirmationService.confirm({
   message: 'Please print or save the confirmation details before continuing.',
   header: 'Confirmation details',
   accept: () => {
        this.navigatetoPaymentApp();
   }
});

angular.json: 

 "styles": [              
          "node_modules/primeng/resources/primeng.min.css",
          "src/styles/main.scss"
        ],

app.module.ts: 

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class AppModule { }

И я получил это:

enter image description here

Ожидаемый результат такой: enter image description here

Вопросы: 1. отсутствует базовая стилизация (например, темный фон) 2. отсутствует значок закрытия крестика

Чего-то не хватает? Идеи?

Заранее спасибо!

1 Ответ

0 голосов
/ 30 августа 2018

В конце концов я нашел проблему. Это потому, что стили CSS происходят из основной темы. например добавьте "node_modules/primeng/resources/themes/nova-light/theme.css" в angular.json для списка стилей.

Итак, я реализовал следующие классы со специфическими свойствами: 

.ui-confirmdialog.ui-dialog {
    width: 34em;
    background-color: white;

    & .ui-dialog-titlebar {
        padding: .5em 0.667em;
        font-family: xxx;
        font-size: 1.3125rem;
        font-weight: bold;
        color: orange;
    }

    & .ui-dialog-content {
        padding: 1em;
    }
}

Кроме того, мне нужно добавить это, чтобы затемнить фон (я извлек некоторую мудрость из файлов theme.css из primeNG: 

body .ui-widget-overlay {
    background-color: #424242;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

Примечание: класс ui-widget-overlay практически пуст, если тема не применяется.

...