Как настроить стиль окна Toast? - PullRequest
Новая
       5

Как настроить стиль окна Toast?

0 голосов
/ 26 января 2019

Размер по умолчанию для окна <p-toast> очень маленький, и я хотел бы иметь возможность его настроить, потому что мои тостовые сообщения могут быть очень длинными.Мне также нужно иметь возможность настроить стиль окна тоста, но я не могу заставить CSS работать. 

this.messageService.addAll([
  {key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Very very very long task message to display number one that user needs to see blah blah blah'},
  {key: 'tc', severity: 'success', summary: '30 Nov 2020', detail: 'Very very very long task message to display number two that needs to be bigger and more prominent'}
]);

Я попробовал несколько методов, основанных на документации.

встроенный html 

<p-toast position="top-center" width="90%" key="tc"></p-toast>

с использованием ngStyle 

<p-toast position="top-center" [ngStyle]="{ 'width': '90%' }" key="tc"></p-toast>

CSS в компоненте 

@Component({
  selector: 'task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css'],
  styles: [`
    :host ::ng-deep .custom-toast .ui-toast-message {
        color: #ffffff;
        width: 100%;
        background: #FFD07B;
    }` ],
  providers: [MessageService]
})


<p-toast position="top-center" style="custom-toast" key="tc"></p-toast>

добавление в style.css 

.custom-toast {
    width: 90%;
    background: #FFD07B;
}

:host ::ng-deep .custom-toast .ui-toast-message {
    width: 90%;
    background: #FFD07B;
}


<p-toast position="top-center" class="custom-toast" key="tc"></p-toast>

, ни один из которых не работал.

Я допустил ошибку где-то в моем синтаксисе?Как точно настроить стиль (цвет, шрифт, особенно размеры) окна Toast?

РЕДАКТИРОВАТЬ: Вот ссылка stackblitz со всем, что я пробовал.Не уверен, правильно ли я это сделал.

Ответы [ 2 ]

0 голосов
/ 26 января 2019

Итак, после еще нескольких попыток я наконец-то нашел решение.Мне нужно было добавить дополнительную ссылку на контейнер тостов в styles.css.

HTML-код остается в основном таким же. 

<p-toast class="custom-toast"></p-toast>

Styles.css изменено для добавленияссылки на контейнер для тостов. 

// centers the toast window to the middle of the screen
.custom-toast .ui-toast {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}

// adjusts font, color and other elements of the toast window if needed
.custom-toast .ui-toast-message-content {
  font-family: 'Courier New', Courier, monospace;
  background: #FFD07B;
}
0 голосов
/ 26 января 2019

Ваш класс '.ui-toast-message' имеет тип 'display: block;'. Сначала вам нужно изменить его на «display: flex;»

так что ваш класс может выглядеть примерно так 

:host ::ng-deep .custom-toast .ui-toast-message {
    display: flex;
    width: 500px; // whatever width you need
}

и ваш угловой код 

<p-toast position="top-center" class="custom-toast" key="tc"></p-toast>

Редактировать: Рабочий пример StackBlitz

...