Стайлинг ионный 2 тоста

Ответ 1

Вы должны добавить 'cssClass: "yourCssClassName" в свою функцию toastCtrl.

 let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true,
      cssClass: "yourCssClassName",
    });

чем вы можете добавить любую функцию в свой класс css. Но функция css вышла за пределы страницы по умолчанию. Exmp:

   page-your.page.scss.name {
     //bla bla
    }
 .yourCssClassName {
   text-align:center;
  }

Ответ 2

Мне удалось добиться изменения цвета тостера, добавив пользовательский класс в тостер, создав

let toast = this.toastCtrl.create({
    message: 'Foobar was successfully added.',
    duration: 5000,
    cssClass: "toast-success"
  });
  toast.present();
}

В этом окне scss файл я затем вышел за пределы имени вложенной страницы по умолчанию (потому что тостер НЕ внутри корня именования имен ионов). И все, хотя это немного хаки, я просто явно нацелил следующий элемент div после пользовательского класса, который добавил

.toast-success {
  > div{
       background-color:#32db64!important;
   }
}

Я говорю, что он взломан, потому что вам нужно использовать !important. Вы можете избежать важности, обернув .toast-success с помощью .md,.ios,.wp{...

Вы можете переопределить стиль по умолчанию, переопределив основные тостерные переменные в файле theme/variables.scss.

$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);

Это приведет только к переопределению значения по умолчанию, но не к пользовательскому значению. есть еще несколько переменных, которые могут быть также написаны.

Ответ 3

Сначала импортируйте контроллер тоста из ionic-angular и создайте объект этого в конструкторе.

import { ToastController } from "ionic-angular";

constructor(private _tc: ToastController) {
}

После этого везде, где вы хотите показать свое тост-сообщение, напишите это.

let options = {
  message: "Your toast message show here",
  duration: 3000,
  cssClass: "toast.scss"
 };

this._tc.create(options).present();

Вот мой scss:

.toast-message {
  text-align: center;
}

Или вы можете проверить лучший пример из этой ссылка. Я думаю, это поможет вам.:)

Или проверьте ответ на ссылку .

Ответ 4

Если вы определяете свой собственный класс css в app.scss(а не в page.scss) вы можете создать его с помощью .toast-wrapper и .toast.message Не нужно использовать > div{

Пример:

.yourtoastclass {
  .toast-wrapper {
    background: blue;
    opacity: 0.8;
    border-radius: 5px;
    text-align: center;
  }
  .toast-message {
    font-size: 3.0rem;
    color: white;
  }
}

в теме /variables.scss вы можете сделать по умолчанию

Пример (красный и мало прозрачный):

$toast-width:   75%;  /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);

Ответ 5

Ionic 2 предоставляет очень полезный способ переопределить их стиль компонента, вы можете переопределить переменную SASS тостера в src/theme/variables.scss, добавив

$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;

это переопределит стиль по умолчанию, пожалуйста, обратитесь к этому Переопределение переменной Ionic Sass

Ответ 6

Вы можете изменить любой стиль сообщения в css, используя селектор .toast-message:

.toast-message { 
    font-family: Helvetica,
    color: red
}

Или, если вы посмотрите на документы (http://ionicframework.com/docs/v2/api/components/toast/Toast/), вы можете использовать свойство cssClass, чтобы назначить тост конкретному классу а затем стиль, который.

Ответ 7

Вы можете выполнить, однако вам нужно изменить сам шаблон компонента тоста.

Через проводник: \ node_modules\ионно- angular\компоненты\тост\toast.js

Изменить строку 194 (шаблон): {{d.message}} до <div [innerHTML]='d.message'></div>

Ответ 8

Измените цвет фона и прозрачность тоста:

let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      cssClass: 'changeToast'
    });

и добавьте app.scss:

.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};

Используется с .toast-message

Ответ 9

Я попробовал все выше, все еще не работал, поэтому я сталкиваюсь с новым решением, вам нужно cssClass вне объявления страницы css:

let toast = this.toastCtrl.create({
          message: msg,
          duration: 3000,
          position: 'bottom',
          cssClass: 'toastcolor'
        });

post-list.scss как это

page-post-list {

}
.toastcolor .toast-message {
    background-color:skyblue;
}